Adaptive theming using compass susy grid


Published on

Adaptive theming in Drupal using Susy grid with SASS.

Published in: Technology

Adaptive theming using compass susy grid

  1. 1. Adaptive Themingusing Compass + <Susy> gridMikhutkin AlexanderFrontend developer
  2. 2. Adaptive themingSCSS files structureSusy gridHTML в panels, views, panesResponsive images (module resp_img)Abstract classes, MixinsSite optimizationAbout
  3. 3. Adaptive themingAdaptive theming
  4. 4. Layout based on the proportions (fluid grid)Fluid mediaMedia queriesWhat we need?Adaptive theming
  5. 5. Basic principlesMobile FirstCode optimization- SASS, SCSS(CSS), HTMLImages optimizationAdaptive theming
  6. 6. Mobile FirstAdaptive themingMobile LastMobile First
  7. 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 styleshere}@media only screen and (min-width: 1380px) {desktops styles here}Base styles for old phonesAdaptive theming
  8. 8. Fluid media - its simpleimg,video,iframe,object,embed {max-width: 100%;}Adaptive theming
  9. 9. baseie.scssmixins-vars outer-modules pages partialslayoutglobalresettabsvariablesmixinsmodulefrontsectionarticleheaderfooterblocksscreen.scssmaintenance.scssCSSfonts etc. etc.@import "compass"etc.SCSS files structure
  10. 10. Структура файлов в тмеSiteie.cssscreen.cssmaintenance .cssCCS structure upcoming to siteSCSS AggregateCSSGZIPSCSS files structure
  11. 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. 12. Usage#page {@include $container;}#main {@include $span-columns(8);}#sidebar {@include $span-columns(4 omega);}#page#sidebar#mainSusy grid
  13. 13. #page#main#sidebarUsage#page {@include $container;}#main {@include $span-columns(8 omega);}#sidebar {@include $span-columns(4);}Susy grid
  14. 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 CSSSusy grid
  15. 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 #navUsage nested elementsSusy grid
  16. 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. 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 780pxmedia-layout: 780px 16; // Use 16-columnar layout with a minimum width of 780pxmedia-layout: 12 780px; // Use 12-columnar layout to a maximum width of 780pxmedia-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 valuesmedia-layout: 920px 16 780px; // The same as the previous one, the highest value is takenMedia LayoutsSusy responsive grid
  18. 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 MixinsCSSSusy responsive gridat-breakpoint
  19. 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 gridResponsive MixinsSCSS@media (min-width: 780px) and (max-width: 920px) {CSSlayout
  20. 20. @include with-grid-settings (12, 35px, 15px, 15px) {#page {@include container;}}Responsive MixinsSusy responsive gridwith-grid-settings (columns, column width, gutter, padding)with-grid-settings
  21. 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 PaddingsSusy responsive grid
  22. 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-omegaSusy responsive gridReset mixins
  23. 23. and youll like ...Try itSusy responsive grid
  24. 24. ALLEVIATEHTML?Alleviate HTML
  25. 25. "HTML5 in Drupal 7"Nathan SmithBLOCK.tpl.phpFIELD.tpl.phpREGION.tpl.phpVIEWS-VIEW.tpl.phpPAGE.tpl.phpAlleviate HTML
  26. 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. 27. StyleUse display default styleNo markup at allListNo styleRounded corners HTMLRegions and View
  28. 28. DateОблегчаем HTMLFIELDSImageTimeTaxonomyTitleBodyLinkCustomize field HTMLCustomize label HTMLCustomize field and label wrapper HTMLAdd default classesTheme informationRow style outputAlleviate HTMLViews
  29. 29. Optimization of the whole siteOptimization
  30. 30. Page Speed the speed of the site
  31. 31. Tiny Png Jpegmini images
  32. 32. Module Resp img 836 Kbimg { width: 100%; }CSS836 Kb<img src="../cat.jpg"/>Resp_img100 Kb220x160220x160Do not stretch the image with CSSOptimization
  33. 33. GZIPOptimizationCompress the data
  34. 34. <head></head>CSS<body></body><html></html>Page containerJSOptimizationCSS at the beginning of the file, JS at the end of the page
  35. 35. Reduce the number of HTTP requestsSpritesData URI background: url(data:image/png;base64,iVBO...Minimize count CSS and JSCacheOptimization
  36. 36. Resp img moduleResp img
  37. 37. Создание стиляStyle NameMachine nameThe suffix for the main styleThe minimum width of thescreenResp img
  38. 38. Minimal style for all imagesUpdating styles when the width ofthe browser windowНастройкиResp img
  39. 39. Добавление стиляBasic styleStyle NameResp img
  40. 40. Настройка стилейResp imgDrupal Image styles
  41. 41. Resp imgWhat we getResp imgDesktop TabletPhone Landscape Phone Portrait600 Kb300 Kb100 Kb75 Kb600 Kb75 Kb
  42. 42. A little bonusBonus
  43. 43. BonusAbstract 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. 44. BonusMixins@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. 45. BonusMixins@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. 46. Thank you for your attention!Questions?Reported:Mikhutkin