Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Collection of AEM CSS/LESS snippets (responsive grid). Get an exemplary grid from the WKND tutorial: https://helpx.adobe.com/experience-manager/kt/sites/using/getting-started-wknd-tutorial-develop/part3.html
/* 6.3 Path to Responsive Grid */
/* @gridpath : "/etc/clientlibs/wcm/foundation/grid"; */
/* 6.4 Path to Responsive Grid */
@gridpath : "/libs/wcm/foundation/clientlibs/grid";
@import "@{gridpath}/grid_base.less";
/* maximum amount of grid cells to be provided */
@max_col: 12;
/* default breakpoint */
.aem-Grid {
.generate-grid(default, @max_col);
width: auto;
}
/* phone breakpoint */
@media (max-width: @screen-sm-min) {
.aem-Grid {
.generate-grid(phone, @max_col);
}
}
/* tablet breakpoint */
@media (min-width: (@screen-sm-min + 1)) and (max-width: @screen-lg-min) {
.aem-Grid {
.generate-grid(tablet, @max_col);
}
}
.aem-GridColumn {
padding: 0 @grid-gutter-width/2;
}
.responsivegrid.aem-GridColumn.aem-GridColumn--default--12 {
padding-left: 0;
padding-right: 0;
}
.responsivegrid.aem-GridColumn.aem-GridColumn--default--12 > .aem-GridColumn.aem-GridColumn--default--12 {
padding-left: 0;
padding-right: 0;
}
@import (once) "/etc/clientlibs/wcm/foundation/grid/grid_base.less";
/* maximum amount of grid cells to be provided */
@max_col: 12;
/* default breakpoint */
.aem-Grid {
.generate-grid(default, @max_col);
}
/* Small */
@media (max-width: 480px) {
.aem-Grid {
.generate-grid(small, @max_col);
}
}
/* Medium */
@media (min-width: 481px) and (max-width: 770px) {
.aem-Grid {
.generate-grid(medium, @max_col);
}
}
/* Large */
@media (min-width: 771px) and (max-width: 1100px) {
.aem-Grid {
.generate-grid(large, @max_col);
}
}
/* Extra Large */
@media (min-width: 1100px) {
.aem-Grid {
.generate-grid(xlarge, @max_col);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.