aem & bootstrap...css grid layout brings a two-dimensional layout tool to the web, with the...

AEM & BootstrapLokesh BS | AEM Architect, TechAspect Solutions Inc.

© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Agenda

• Responsive Web Design

• Bootstrap

• AEM Responsive Layout

• Demo

• AngularJS

• Demo

• Q&A


Responsive Web Design

“Mobile-First” isn’t just a design principle, it’s also a business strategy.

• Faster WebpagesSingle Website

• UsabilityConsistent Experience

• From Good SEO to Great SEOIncrease your visibility in search engines

• Maintenance is a SnapSave time and cost on site management

• The Competitive EdgeIncreasing your reach to tablet and mobile audiencesIncrease sales and conversion ratesConsolidate your analytics and reporting

http://www.affordablewebdesign.com/seo-its-not-just-an-expense-its-an-investment/

© 2015 Adobe Systems Incorporated. All Rights Reserved. Adobe Confidential.

Responsive Web Design

4

MEDIA QUERIES GRID LAYOUT

“Web design is responsive design. Responsive web design is web design, done right.”

— ANDY CLARKETweet

Presenter

Presentation Notes

As a company, Adobe creates solutions to help customers turn ideas into impactful results – and our social purpose is aligned with that mission. We invest in the people and organizations who find creative ways to make a meaningful social impact. Our education initiatives are focused on cultivating the next generation of content creators and coders.� We continually find new ways to conserve natural resources in every aspect of our business. We do this by: Field testing new technologies that help minimize our impact on the environment and in our communities Creating healthy and inspiring workspaces for our employees Building products that help our customers be more sustainable We believe in the creativity of our employees and partners to come up with solutions in that can drive change in local communities. Adobe provides employees with the time and dollars to support the causes that are personally important to them. We empower them as grantmakers – they decide where Foundation dollars should be invested in their area. We provide nonprofits with product donations to help them raise awareness for their social missions.

http://twitter.com/home?status=Web%20design%20is%20responsive%20design.%20Responsive%20web%20design%20is%20web%20design,%20done%20right....%20%20http://quotesondesign.com/?p=1934


Media Query

Media Queries is a CSS3 module allowing content rendering to adapt to conditions such as screen resolution

The @media rule is used to define different style rules for different media types/devicesUsing the right breakpoint

Breakpoints are the point which your sites content will respond to provide the user, with the best possible layout to consume the information.

A technique or a rule to include a block of CSS properties only if a certain condition is true

@media only screen and (max-width: 500px) {body {

background-color: lightblue;}

}


Media Query – Mobile First !

6

/* For desktop: */.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;}

@media only screen and (max-width: 768px) {/* For mobile phones: */[class*="col-"] {

width: 100%;}

}

/* For mobile phones: */[class*="col-"] {

width: 100%;}@media only screen and (min-width: 768px) {

/* For desktop: */.col-1 {width: 8.33%;}.col-2 {width: 16.66%;}.col-3 {width: 25%;}.col-4 {width: 33.33%;}.col-5 {width: 41.66%;}.col-6 {width: 50%;}.col-7 {width: 58.33%;}.col-8 {width: 66.66%;}.col-9 {width: 75%;}.col-10 {width: 83.33%;}.col-11 {width: 91.66%;}.col-12 {width: 100%;}

}

Presenter

Presentation Notes

As a company, Adobe creates solutions to help customers turn ideas into impactful results – and our social purpose is aligned with that mission. We invest in the people and organizations who find creative ways to make a meaningful social impact. Our education initiatives are focused on cultivating the next generation of content creators and coders.� We continually find new ways to conserve natural resources in every aspect of our business. We do this by: Field testing new technologies that help minimize our impact on the environment and in our communities Creating healthy and inspiring workspaces for our employees Building products that help our customers be more sustainable We believe in the creativity of our employees and partners to come up with solutions in that can drive change in local communities. Adobe provides employees with the time and dollars to support the causes that are personally important to them. We empower them as grantmakers – they decide where Foundation dollars should be invested in their area. We provide nonprofits with product donations to help them raise awareness for their social missions.


Grid Layout

CSS Grid layout brings a two-dimensional layout tool to the web, with the ability to lay out items in rows and columns

CSS Grid can be used to achieve many different layouts

Grids keep your content organized

Grids are highly flexible

Grids can be used just about anywhere


Bootstrap - http://getbootstrap.com

Bootstrap is the most popular CSS, and JS framework for developing responsive, mobile first projects on the web.

http://getbootstrap.com/getting-started/

http://getbootstrap.com/getting-started/

Bootstrap

<div class="row">

<div class="col col-md-8">.col .col-md-8</div><div class="col-6 col-md-4">.col-6 .col-md-4</div>

</div><div class="row">

<div class="col-6 col-md-4">.col-6 .col-md-4</div><div class="col-6 col-md-4">.col-6 .col-md-4</div><div class="col-6 col-md-4">.col-6 .col-md-4</div>

</div>

<div class="row"><div class="col-6">.col-6</div><div class="col-6">.col-6</div>

</div>

// Extra small devices (portrait phones, less than 576px)// No media query since this is the default in Bootstrap // Small devices (landscape phones, 576px and up)@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up) @media (min-width: 1200px) { ... }


AEM Layout

AEM allows you to realize a Responsive Layout for your pages by using the Layout Container component.

The layout container:• Provides horizontal snap to grid, together with the ability to place components into the grid side-by-side and

define when they should collapse/reflow.

• Uses pre-defined breakpoints (e.g. Phone, Tablet, etc.) to allow you to define the required behavior of content for related devices/orientation. For example, you can customize the component size or whether the component can be seen on specific devices.

• Can be nested to realize column control.


DEMO – AEM & Bootstrap


AngularJS - https://angularjs.org/

AngularJS is a JavaScript framework. It can be added to an HTML page with a <script> tag.

AngularJS extends HTML attributes with Directives, and binds data to HTML with Expressions.

Angular implements the MVC pattern to separate presentation, data, and logic components.

AngularJS two-way data binding is its most notable feature


AngularJS

Most Commonly used directives

ng-appDeclares the root element of an AngularJS application, under which directives can be used to declare bindings and define behavior.

ng-bindSets the text of a DOM element to the value of an expression. For example, <span ng-bind="name"></span> displays the value of ‘name’ inside the span element. Any change to the variable ‘name’ in the application's scope reflect instantly in the DOM.

ng-modelSimilar to ng-bind, but establishes a two-way data binding between the view and the scope.

ng-controllerSpecifies a JavaScript controller class that evaluates HTML expressions.

ng-repeatInstantiate an element once per item from a collection.

ng-show & ng-hideConditionally show or hide an element, depending on the value of a boolean expression. Show and hide is achieved by setting the CSS display style.

ng-switchConditionally instantiate one template from a set of choices, depending on the value of a selection expression.

ng-viewThe base directive responsible for handling routes[12] that resolve JSON before rendering templates driven by specified controllers.

ng-ifBasic if statement directive that instantiates the following element if the conditions are true. When the condition is false, the element is removed from the DOM. When true, a clone of the compiled element is re-inserted.

https://en.wikipedia.org/wiki/AngularJS#cite_note-12


DEMO – AEM & AngularJS


Q & A

aem & bootstrap...css grid layout brings a two-dimensional layout tool to the web, with the...

Documents