The document discusses adaptive theming using Compass and Susy grid. It covers using SCSS for file structure, implementing a Susy grid, responsive images, abstract classes and mixins, and optimizing the site. Mobile-first development and responsive design principles are emphasized. Key aspects covered include fluid grids and media, SCSS file structure, using Susy grid mixins, responsive mixins, resetting columns, and bonus techniques like abstract classes and mixins.
7. Media queries
@media only screen and (min-width: 480px) {
mobile styles here
}
@media only screen and (min-width: 768px) {
tablet portrait styles here
}
@media only screen and (min-width: 980px) {
tablet landscape, notebooks, some desktops styles
here
}
@media only screen and (min-width: 1380px) {
desktops styles here
}
Base styles for old phones
Adaptive theming
17. media-layout: 12; // Use the 12 and column layout with the minimum width (980px in this case)
media-layout: 780px; // Use the next layout with a minimum width of 780px
media-layout: 780px 16; // Use 16-columnar layout with a minimum width of 780px
media-layout: 12 780px; // Use 12-columnar layout to a maximum width of 780px
media-layout: 920px 780px; // Use the layout between the values of the nearest (to the lowest (820px))
media-layout: 780px 16 920px; // Use the 16-count. layout between the values
media-layout: 920px 16 780px; // The same as the previous one, the highest value is taken
Media Layouts
Susy responsive grid
27. Style
Use display default style
No markup at all
List
No style
Rounded corners
https://drupal.org/node/1814696
Patch
Alleviate HTML
Regions and View