Bootstrap usage in AEM 6.1 | Community
Skip to main content
A
ankurk67503819
New Participant
May 26, 2016
Solved

Bootstrap usage in AEM 6.1

  • May 26, 2016
  • 6 replies
  • 3728 views

Hi Team,

I have few queries realted to Layout container component and bootstrap usage in AEM 6.1-

1. What are the benefits of using layout container component.

2.If we are creating a new site on which framework we should create the html pages , previously we use to create html pages using bootstrap and using these html and bootstrap css we use to create components.

Now which framework we should use while creating html pages from PSD.

3.Do we have any deatailed documentation available apart from docs for layout container component usage.

Regards

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by kautuk_sahni

Hi 

1.What are the benefits of using layout container component.

Ans:- 

Responsive Layouting is a mechanism for realizing responsive web design. This allows the user to create web pages that have a layout and dimensions dependent on the devices their users use.

Layout Container component
This component provides a grid-paragraph system to allow you to add and position components within a responsive grid. It can be used as the default parsys for your page and/or made available to authors in the component browser. 
The default Layout Container component is defined under:

  • /libs/wcm/foundation/components/responsivegrid
  • You can define layout containers:
    • As a component that the user can add to a page.
    • As the default parsys for the page.
    • Both.
      You can have the layout container as standard for the page, while allowing the user to add further layout containers within this; for example, to achieve column control.

With these responsive grid mechanisms you can:

  • Use breakpoints (that indicate device grouping) to define differing content behavior based on device layout.
  • Hide components based on device group (define on which breakpoint a component will be hidden).
  • Use horizontal snap to grid (place components into the grid, resize as required, define when they should collapse/reflow to be side-by-side or above/below).
  • Realize column control.   

Link:- https://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/configuring-responsive-layouting.html

2.If we are creating a new site on which framework we should create the html pages , previously we use to create html pages using bootstrap and using these html and bootstrap css we use to create components. Now which framework we should use while creating html pages from PSD.

Ans: You can use any framework Sightly, angular, bootstrap, Grunt etc. And to convert PSD to CSS, IED to be recommended is Brackets.

        Link:- https://docs.adobe.com/docs/en/dev-tools/aem-brackets.html

3.Do we have any detailed documentation available apart from docs for layout container component usage.

    Link:- http://labs.6dglobal.com/blog/2015-05-28/new-aem-61-layout-mode/

    Link:- http://adobe-marketing-cloud.github.io/aem-responsivegrid/

    Link:- http://www.slideshare.net/GabrielWalt/aem-responsive

 

Some good reference links:-  https://helpx.adobe.com/experience-manager/kb/vanity-urls.html [This will show you how to use angular]

                                           http://adobe-consulting-services.github.io/acs-aem-samples/

                                           http://blogs.adobe.com/aaa/2015/06/build-single-page-applications-using-angularjs-on-aem.html

I hope this would help you.

Thanks and Regards

Kautuk Sahni

6 replies

A
ankurk67503819Author
New Participant
May 26, 2016

Opkar Gill wrote...

ankur_khare wrote...

If we are using layout container component does that mean we don't need to use bootstrap to achieve resposiveness?

Hi,

the responsive layout container would allow authors to determine layout for various breakpoints just for that container. You would still need to define the responsive behavior for the rest of the page, either by using bootstrap(or another framework) or using responsive components. Have a look at the geometrixx pages to see how the container's behavior is controlled and how the other areas of the page are made responsive.

Regards,

Opkar

 


Hi Opkar,

Just gone throught the Geometrixx Media example.

At the template level they have defined how many columns will be occupied as follows-

/apps/geometrixx-media/components/page/article/8x4col.jsp

<div class="row">
    <div class="span8">
        <cq:include path="article-content-par" resourceType="wcm/foundation/components/responsivegrid"/>
    </div>

    <div class="span4">
        <cq:include path="right-panel-par" resourceType="wcm/foundation/components/responsivegrid"/>
    </div>
</div>

 

Now if we try to use layou mode and try to change the width for above parsys defined (article-content-par,right-panel-par) they will get shrink as per the layouting  but article content par will always take 8 column .

 

So my question is whether we need to use span8 or span4 from bootstrap at template level or we shouldn't use at parent level.

 

Thanks in advance

A
ankurk67503819Author
New Participant
May 26, 2016

Thanks a lot kautuk for  detailed explanation

O
ogill
Employee
May 26, 2016

ankur_khare wrote...

If we are using layout container component does that mean we don't need to use bootstrap to achieve resposiveness?

Hi,

the responsive layout container would allow authors to determine layout for various breakpoints just for that container. You would still need to define the responsive behavior for the rest of the page, either by using bootstrap(or another framework) or using responsive components. Have a look at the geometrixx pages to see how the container's behavior is controlled and how the other areas of the page are made responsive.

Regards,

Opkar

kautuk_sahni
kautuk_sahni
Employee
May 26, 2016

ankur_khare wrote...

If we are using layout container component does that mean we don't need to use bootstrap to achieve resposiveness?

 

Yes. AEM allows you to realize a Responsive Layout for your pages by using the Layout Container component. this is limited to the container, for rest of the page, you need to manage responsiveness.

Kautuk Sahni
A
ankurk67503819Author
New Participant
May 26, 2016

If we are using layout container component does that mean we don't need to use bootstrap to achieve resposiveness?

kautuk_sahni
kautuk_sahniAccepted solution
Employee
May 26, 2016

Hi 

1.What are the benefits of using layout container component.

Ans:- 

Responsive Layouting is a mechanism for realizing responsive web design. This allows the user to create web pages that have a layout and dimensions dependent on the devices their users use.

Layout Container component
This component provides a grid-paragraph system to allow you to add and position components within a responsive grid. It can be used as the default parsys for your page and/or made available to authors in the component browser. 
The default Layout Container component is defined under:

  • /libs/wcm/foundation/components/responsivegrid
  • You can define layout containers:
    • As a component that the user can add to a page.
    • As the default parsys for the page.
    • Both.
      You can have the layout container as standard for the page, while allowing the user to add further layout containers within this; for example, to achieve column control.

With these responsive grid mechanisms you can:

  • Use breakpoints (that indicate device grouping) to define differing content behavior based on device layout.
  • Hide components based on device group (define on which breakpoint a component will be hidden).
  • Use horizontal snap to grid (place components into the grid, resize as required, define when they should collapse/reflow to be side-by-side or above/below).
  • Realize column control.   

Link:- https://docs.adobe.com/docs/en/aem/6-1/administer/operations/page-authoring/configuring-responsive-layouting.html

2.If we are creating a new site on which framework we should create the html pages , previously we use to create html pages using bootstrap and using these html and bootstrap css we use to create components. Now which framework we should use while creating html pages from PSD.

Ans: You can use any framework Sightly, angular, bootstrap, Grunt etc. And to convert PSD to CSS, IED to be recommended is Brackets.

        Link:- https://docs.adobe.com/docs/en/dev-tools/aem-brackets.html

3.Do we have any detailed documentation available apart from docs for layout container component usage.

    Link:- http://labs.6dglobal.com/blog/2015-05-28/new-aem-61-layout-mode/

    Link:- http://adobe-marketing-cloud.github.io/aem-responsivegrid/

    Link:- http://www.slideshare.net/GabrielWalt/aem-responsive

 

Some good reference links:-  https://helpx.adobe.com/experience-manager/kb/vanity-urls.html [This will show you how to use angular]

                                           http://adobe-consulting-services.github.io/acs-aem-samples/

                                           http://blogs.adobe.com/aaa/2015/06/build-single-page-applications-using-angularjs-on-aem.html

I hope this would help you.

Thanks and Regards

Kautuk Sahni

Kautuk Sahni
Terms & ConditionsAccessibility statement

Loading footer...