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.

1. Adaptive Theming
using Compass + <Susy> grid
Mikhutkin Alexander
Frontend developer

2. Adaptive theming
SCSS files structure
Susy grid
HTML в panels, views, panes
Responsive images (module resp_img)
Abstract classes, Mixins
Site optimization
About

3. Adaptive theming
Adaptive theming

4. Layout based on the proportions (fluid grid)
Fluid media
Media queries
What we need?
Adaptive theming

5. Basic principles
Mobile First
Code optimization- SASS, SCSS(CSS), HTML
Images optimization
Adaptive theming

6. Mobile First
Adaptive theming
Mobile Last
Mobile First

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

8. Fluid media - it's simple
img,
video,
iframe,
object,
embed {
max-width: 100%;
}
Adaptive theming

9. base
ie.scss
mixins-vars outer-modules pages partials
layout
global
reset
tabs
variables
mixins
module
front
section
article
header
footer
blocks
screen.scss
maintenance.scss
CSS
fonts etc. etc.
@import "compass"
etc.
SCSS files structure

10. Структура файлов в тме
Siteie.css
screen.css
maintenance .css
CCS structure upcoming to site
SCSS Aggregate
CSS
GZIP
SCSS files structure

11. Welcome, Susy
@import "susy";
Basic settings$total-columns: 12;
$column-width: 60px; // rem, em, %
$gutter-width: 20px; // rem, em, %
$grid-padding: $gutter-width;
require "susy";
Susy grid

12. Usage
#page {
@include $container;
}
#main {
@include $span-columns(8);
}
#sidebar {
@include $span-columns(4 omega);
}
#page
#sidebar#main
Susy grid

13. #page
#main#sidebar
Usage
#page {
@include $container;
}
#main {
@include $span-columns(8 omega);
}
#sidebar {
@include $span-columns(4);
}
Susy grid

14. #main {
width: 65.95745%;
float: left;
margin-right: 2.12766%;
display: inline;
}
#sidebar {
width: 31.91489%;
float: right;
margin-right: 0;
display: inline;
}
#page {
max-width: 980px;
_width: 980px;
padding-left: 20px;
padding-right: 20px;
margin-left: auto;
margin-right: auto;
}
#page:after {
content: "";
display: table;
clear: both;
}
Outputted CSS
Susy grid

15. #subheader {
@include $span-columns(8, 8);
}
#content {
@include $span-columns(6, 8);
}
#main#main {
@include $span-columns(8);
}
#nav {
@include $span-columns(2 omega, 8);
}
#subheader
#content #nav
Usage nested elements
Susy grid

16. #subheader {
width: 100%;
float: left;
margin-right: 3.22581%;
display: inline;
}
#nav {
width: 22.58065%;
float: right;
margin-right: 0;
display: inline;
}
Outputted CSS
#content {
width: 74.19355%;
float: left;
margin-right: 3.22581%;
display: inline;
}
Susy grid

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

18. SCSS
@include at-breakpoint (780px 12 920px) {
#page {
#content {
@include span-columns(8, 12);
}
}
}
#page {
@include container;
}
$total-columns: 16;
#page {
width: 100%;
float: left;
margin-right: 2.12766%;
display: inline;
}
@media (min-width: 780px) and (max-width: 920px) {
}
#page #content {
width: 65.95745%;
float: left;
margin-right: 2.12766%;
}
Responsive Mixins
CSS
Susy responsive grid
at-breakpoint

19. @include at-breakpoint (780px 12 920px) {
@include layout ( 6 ) {
#page {
//some stuffs
}
}
}
#page {
max-width: 500px;
padding-left: 20px;
padding-right: 20px;
margin-left: auto;
margin-right: auto;
}
}
#page:after {
content: "";
display: table;
clear: both;
}
Susy responsive grid
Responsive Mixins
SCSS
@media (min-width: 780px) and (max-width: 920px) {
CSS
layout

20. @include with-grid-settings (12, 35px, 15px, 15px) {
#page {
@include container;
}
}
Responsive Mixins
Susy responsive grid
with-grid-settings (columns, column width, gutter, padding)
with-grid-settings

21. .element { @include prefix(2); }
.element { @include suffix(2); }
Paddings
.element { @include pad(2, 3); }
.element { @include bleed(2); }
.element { @include pre(2); }
.element { @include post(2); }
Margins
.element { @include squish(2, 3); }
.element { @include push(2); }
.element { @include pull(2); }
Margins and Paddings
Susy responsive grid

22. .element { @include span-columns(6); }
Reset columns
.full-width .element { @include reset-columns; }
.element { @include span-columns(6 omega); }
Remove omega
.full-width .element { @include remove-omega; }
.element { @include remove-nth-omega(3n); }
Remove nth-omega
Susy responsive grid
Reset mixins

23. and you'll like ...
Try it
Susy responsive grid

24. ALLEVIATE
HTML
?
Alleviate HTML

25. "HTML5 in Drupal 7"
Nathan Smith
BLOCK.tpl.php
FIELD.tpl.php
REGION.tpl.php
VIEWS-VIEW.tpl.php
PAGE.tpl.php
Alleviate HTML

26. PAGE.tpl.php
<?php print render($page['content']);
BLOCK.tpl.php
<?php print render $content;
REGION.tpl.php
<?php print render $content;
FIELD.tpl.php
<?php print render ('items');
VIEWS-VIEW.tpl.php
много кода, все не влезло :(
Alleviate HTML

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

28. Date
Облегчаем HTML
FIELDS
Image
Time
Taxonomy
Title
Body
Link
Customize field HTML
Customize label HTML
Customize field and label wrapper HTML
Add default classes
Theme information
Row style output
Alleviate HTML
Views

29. Optimization of the whole site
Optimization

30. Page Speed https://developers.google.com/speed/pagespeed/?hl=ru
YSlow http://developer.yahoo.com/yslow/
WebPageTest http://www.webpagetest.org/
Optimization
Check the speed of the site

31. Tiny Png http://tinypng.org/ Jpegmini http://jpegmini.com/
Optimization
Optimize images

32. Module Resp img https://drupal.org/project/resp_img
Original
2000x1447 836 Kb
img { width: 100%; }
CSS
836 Kb
<img src="../cat.jpg"
/>
Resp_img
100 Kb
220x160
220x160
Do not stretch the image with CSS
Optimization

33. GZIP
Optimization
Compress the data

34. <head>
</head>
CSS
<body>
</body>
<html>
</html>
Page container
JS
Optimization
CSS at the beginning of the file, JS at the end of the page

35. Reduce the number of HTTP requests
Sprites
Data URI background: url(data:image/png;base64,iVBO...
Minimize count CSS and JS
Cache
Optimization

36. Resp img module
Resp img

37. Создание стиля
Style Name
Machine name
The suffix for the main style
The minimum width of the
screen
Resp img

38. Minimal style for all images
Updating styles when the width of
the browser window
Настройки
Resp img

39. Добавление стиля
Basic style
Style Name
Resp img

40. Настройка стилей
Resp img
Drupal Image styles

41. Resp img
What we get
Resp img
Desktop Tablet
Phone Landscape Phone Portrait
600 Kb
300 Kb
100 Kb
75 Kb
600 Kb
75 Kb

42. A little bonus
Bonus

43. Bonus
Abstract classes
%border-bottom {
border-bottom: 1px solid #ccc;
}
.news-item {
//... some rules
@extend %border-bottom;
}
SCSS CSS
.article h3 {
//... some rules
@extend %border-bottom;
}
.news-item,
.article h3 {
border-bottom: 1px solid #ccc;
}

44. Bonus
Mixins
@mixin sprite ( $sprite, $x, $y, $bgcolor: transparent ) {
background: $bgcolor url( $sprite ) no-repeat $x $y;
}
.facebook-icon {
//... some rules
@include sprite($sprite, 10px, 20px);
}
@mixin font-size ( $sizeValue: 14 ) {
font-size: ( $sizeValue ) + px;
font-size: ( $sizeValue / 16 ) + rem;
}
.news-item {
//... some rules
@include font-size(16);
}

45. Bonus
Mixins
@mixin links ( $color: #f37ad9, $hover: #9a9995, $dec: false) {
color: $color;
@if $dec == true {
text-decoration: underline;
&:hover {
color: $hover;
}
}
@if $dec == false {
text-decoration: none;
&:hover {
color: $hover;
}
}
}
.some-link {
//... some rules
@include links( #1794c8, #73e8b2);
}

46. Thank you for your attention!
Questions?
Reported:
Mikhutkin Alexander
alexander.mikhutkin@propeople.com.ua
weareporpeople.com