Responsive Themeing With Aurora Theme, SASS, and BEM Syntax (Drupal Camp Toronto 2014)

3,736 views

Published on

Originally Presented at Drupal Camp Toronto 2014
Screencast Recording: https://vimeo.com/94214770

Front-end Drupal Theming has become a lot more complicated in the last few years and our trusty old css + text editor doesn’t really cut it for modern web design. We’ll review creating responsive themes using the Aurora base theme which provides a quick way to spin up a whole package of front end workflow tools to allow SASS 3.3, Compass, and Grunt to help us make complex websites faster. We’ll also review file structures for organizing our SASS files using the BEM syntax which is a system for organizing and naming our CSS components so we don’t descend into madness when we need to create .ever .more .specific #selectors .that #drupal .likes-to-make which is very !important

Published in: Technology

Responsive Themeing With Aurora Theme, SASS, and BEM Syntax (Drupal Camp Toronto 2014)

  1. 1. Aidan Foster Responsive Design Specialist @finteractive linkedin.responsivedesign.ca Responsive Theming with Aurora, SASS & BEM Syntax Friday, May 2, 2014
  2. 2. Slides - http://responsivedesign.ca/dc2014.pdf Friday, May 2, 2014
  3. 3. 80GB Capacity Friday, May 2, 2014
  4. 4. http://sass-lang.com/ Friday, May 2, 2014
  5. 5. Follow along - http://sassmeister.com Friday, May 2, 2014
  6. 6. Follow along - http://sassmeister.com SCSS CSS Friday, May 2, 2014
  7. 7. Follow along - http://sassmeister.com 20 SCSS CSS HTML Friday, May 2, 2014
  8. 8. http://sass-lang.com Friday, May 2, 2014
  9. 9. http://sassmeister.com/gist/11433017 Friday, May 2, 2014
  10. 10. // Color Variables $grey-light: #ddd; $grey-dark: #444; $grey-extradark: #222; $red: #ffaaaa; $red-dark: darken($red, 50); $red-extradark: darken($red, 80); $green: #aaffaa; // Layout Variables $margins: 2em; $padding: 1em; ‘ Variables & Functions http://sassmeister.com/gist/11433017 Friday, May 2, 2014
  11. 11. // Color Variables $grey-light: #ddd; $grey-dark: #444; $grey-extradark: #222; $red: #ffaaaa; $red-dark: darken($red, 50); $red-extradark: darken($red, 80); $green: #aaffaa; // Layout Variables $margins: 2em; $padding: 1em; Variables & Functions http://sassmeister.com/gist/11433017 Friday, May 2, 2014
  12. 12. @mixin link($link-color, $hover-color){ color: $link-color; &:hover, &:active, &:focus { color: $hover-color; } } a { @include link($red,$red-dark); } http://sassmeister.com/gist/11433017 Mixins Friday, May 2, 2014
  13. 13. %checkmark { &:after{ content: "2713 "; margin-left: 1em; } } %message-default { @include border-radius(10px); border: 1px solid $grey-dark; margin: $margins; padding: $padding; text-align: center; } http://sassmeister.com/gist/11433017 %Placeholders / @extends Friday, May 2, 2014
  14. 14. .message-box { @extend %message-default; @extend %checkmark; background-color: $grey-light; } .message-box--success { @extend %message-default; @extend %checkmark; background-color: $green; } http://sassmeister.com/gist/11433017 %Placeholders / @extends Friday, May 2, 2014
  15. 15. @import _nav.scss _typograhy.scss _forms.scss styles.cssstyles.scss partials ouput css Friday, May 2, 2014
  16. 16. http://sass-lang.com/ Friday, May 2, 2014
  17. 17. // .SCSS (SASS file) .message-default { @include border-radius(10px); } // .CSS (Output) .message-default { -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } Vendor-prefix Friday, May 2, 2014
  18. 18. http://www.markboulton.co.uk/journal/ Vertical Rhythm Friday, May 2, 2014
  19. 19. // SCSS $base-font-size: 14px; $base-line-height: 21px; @include establish-baseline; body{ @include adjust-font-size-to($base-font-size); } h1 { @include adjust-font-size-to(31px); } http://sassmeister.com/gist/11434514 Vertical Rhythm Friday, May 2, 2014
  20. 20. // css html { font-size: 87.5%; line-height: 1.5em; } body { font-size: 1em; line-height: 1.5em; } h1 { font-size: 2.21429em; line-height: 1.35484em; } http://sassmeister.com/gist/11434514 Vertical Rhythm Friday, May 2, 2014
  21. 21. 1024768 Images/Sprites Friday, May 2, 2014
  22. 22. You could do all this by hand but ... Friday, May 2, 2014
  23. 23. http://sass-lang.com/guide http://thesassway.com/ Friday, May 2, 2014
  24. 24. http://www.meetup.com/SASS-Toronto/ Friday, May 2, 2014
  25. 25. RUBY? GEMS? Friday, May 2, 2014
  26. 26. RUBY SASS COMPASS Breakpoint Normalize Singularity Friday, May 2, 2014
  27. 27. SASS COMPASS Breakpoint Toolkit Susy RUBY SASS COMPASS Toolkit Singularity Breakpoint RUBY project-A.com (2013) project-B.com (2014) Friday, May 2, 2014
  28. 28. SASS COMPASS Breakpoint Toolkit Susy RUBY 1.3 2.0.7 0.9.2 3.2.7 0.12.2 1.9.2 SASS COMPASS Toolkit Singularity Breakpoint RUBY 1.2 2.1 2.3 3.3 1.0 2.0.1 project-A.com (2013) project-B.com (2014) Friday, May 2, 2014
  29. 29. rbenv https://github.com/sstephenson/rbenv#homebrew-on-mac-os-x 1.8.7-p358 1.9.2-p318 2.0.0-p247 project-A.com project-B.com OSX system ruby Friday, May 2, 2014
  30. 30. .ruby-version Friday, May 2, 2014
  31. 31. A Gem that Packages up Gems Friday, May 2, 2014
  32. 32. # Pull gems from RubyGems source 'https://rubygems.org' gem 'compass-aurora', '~>3.0.0' gem 'toolkit', '1.3.8' gem 'singularitygs', '1.1.2' gem 'breakpoint', '2.0.7' gem 'compass-normalize', '~>1.4.3' gem 'css_parser', '~>1.3.4' Gemfile http://atendesigngroup.com/blog/managing-compass-extensions-bundler Friday, May 2, 2014
  33. 33. $ bundle install Gemfile.lock http://atendesigngroup.com/blog/managing-compass-extensions-bundler Friday, May 2, 2014
  34. 34. Compress Images Concatenate & Minify JS Runs Sass with Debug Code OR minifies Everything Optimize SVG Friday, May 2, 2014
  35. 35. http://24ways.org/2013/grunt-is-not-weird-and-hard/ Friday, May 2, 2014
  36. 36. Live Reload Friday, May 2, 2014
  37. 37. http://snugug.github.io/Aurora https://drupal.org/project/aurora Friday, May 2, 2014
  38. 38. http://snugug.github.io/Aurora/install/ Friday, May 2, 2014
  39. 39. http://snugug.github.io/Aurora/subthemes/ compass create <my_theme> -r aurora --using aurora/corona Installing Aurora Then Make your own BASE theme in Drush Friday, May 2, 2014
  40. 40. http://snugug.github.io/Aurora/features/ Installing Aurora Then apply the “Advanced Features” (watch for one correction in docs!) compass install -r aurora aurora/grunt Friday, May 2, 2014
  41. 41. $ grunt build 1. compass build (minified CSS output) 2. compresses all images & points CSS to compressed versions 3. Runs js files though JS hint for errors Friday, May 2, 2014
  42. 42. Friday, May 2, 2014
  43. 43. $ grunt watch 1. compass watch (with expanded debug CSS output) 2. Points CSS to non- optimized images 3. runs livereload to update browser automatically Friday, May 2, 2014
  44. 44. HTML 5 / Responsive Mobile First Super minimal Aurora’s DNA Panels / Display Suite Friday, May 2, 2014
  45. 45. Aurora Structure Friday, May 2, 2014
  46. 46. Drupal 7 is a tiny bit messy Let’s do some clean up Friday, May 2, 2014
  47. 47. Panels Module Don’t use the draggy drop panels There’s a sample panel layout in Aurora https://drupal.org/project/panels Friday, May 2, 2014
  48. 48. https://drupal.org/project/html5_tools HTML5 Tools Module Friday, May 2, 2014
  49. 49. Magic Module https://drupal.org/project/magic Friday, May 2, 2014
  50. 50. Fences Module https://drupal.org/project/fences Friday, May 2, 2014
  51. 51. Conditional Stylesheets Module <!--[if lt IE 9]> <link rel="stylesheet" href="ie-old.css" /> <![endif]--> <!--[if (gte IE 9)|(gt IEMobile 7)|(!IE)]><!--> <link rel="stylesheet" href="styles.css" /> <!--<![endif]--> https://drupal.org/project/conditional_styles Friday, May 2, 2014
  52. 52. GEMS Friday, May 2, 2014
  53. 53. Team SASS https://www.youtube.com/watch?v=G7JIuaeXKeo Friday, May 2, 2014
  54. 54. https://github.com/Team-Sass Sam Richards (creator of Aurora) Ian Carrico (maintainer) Friday, May 2, 2014
  55. 55. Toolkit Sass Gem https://github.com/Team-Sass/toolkit “Swiss army knife for Progressive Enhancement and Responsive Web Design” Friday, May 2, 2014
  56. 56. $bp-sml: 321px; $bp-med: 720px; $bp-lrg: 1080px; div{ background: yellow; @include breakpoint($bp-sml){ background: red; } @include breakpoint($bp-med){ background: blue; } @include breakpoint($bp-lrg){ background: brown; } } Breakpoint Compass Extension https://github.com/Team-Sass/breakpoint Friday, May 2, 2014
  57. 57. div { background: yellow; } @media (min-width: 321px) { div { background: red; } } @media (min-width: 72px) { div { background: blue; } } @media (min-width: 1080px) { div { background: brown; } } Breakpoint Compass Extension https://github.com/Team-Sass/breakpoint Friday, May 2, 2014
  58. 58. Singularity Grid https://github.com/Team-Sass/Singularitys Friday, May 2, 2014
  59. 59. Singularity Grid https://github.com/Team-Sass/Singularitys Friday, May 2, 2014
  60. 60. Specificity Wars .title .views-row #block-23 .views-row #block-25 .views-row .title Friday, May 2, 2014
  61. 61. OOCSS Object Oriented CSS (http://oocss.org/) SMACSS Scalable and Modular Architecture for CSS (http://smacss.com/) BEM Block - Element - Modifier (http://bem.info) Friday, May 2, 2014
  62. 62. Each UI Element has a unique class (... yes we’re intentionally bypassing inheritance) Design Components Friday, May 2, 2014
  63. 63. styles.scss loads many partials Friday, May 2, 2014
  64. 64. styles.scss loads many partials Friday, May 2, 2014
  65. 65. styles.scss loads many partials Friday, May 2, 2014
  66. 66. styles.scss loads many partials Friday, May 2, 2014
  67. 67. styles.scss loads many partials Friday, May 2, 2014
  68. 68. styles.scss loads many partials Friday, May 2, 2014
  69. 69. styles.scss @import 'config/config'; // Import global elements @import 'global/normalize.css'; @import 'global/extendables'; @import 'global/type'; @import 'global/forms'; // Import layouts @import 'layout/l-header'; @import 'layout/l-panel-abc'; // Import components @import 'components/tabs'; @import 'components/button'; @import 'vendors/date-picker.scss'; Friday, May 2, 2014
  70. 70. Colors Grids Breakpoints Mixins (No Actual CSS is Generated) Variables go in /CONFIG folder Friday, May 2, 2014
  71. 71. Normalize .css Default Typography (site wide) extendables Forms (+formalize) (Generic HTML attribute Styles) Sitewide partials in /GLOBAL folder Friday, May 2, 2014
  72. 72. Friday, May 2, 2014
  73. 73. Generally /GLOBAL is the stuff in the WYSIWYG Friday, May 2, 2014
  74. 74. _l-header.scss _l-masthead.scss _article.scss Positioning partials in /LAYOUTS folder Friday, May 2, 2014
  75. 75. Layouts + Panels Friday, May 2, 2014
  76. 76. Layouts + Panels Friday, May 2, 2014
  77. 77. %l-region-2cols--1-2, .l-region-2cols--1-2{ @extend %clearfix; >.panel-pane{ @include breakpoint($bp-med){ width: 50%; &:nth-of-type(2n+1){ clear: left; float: left; padding-right: 1em; } &:nth-of-type(2n+2){ clear: right; float: right; padding-left: 1em; } } } } Layouts + Panels Friday, May 2, 2014
  78. 78. flexslider .scss datepicker .scss here-be-dragons.scss (Either exclude css and copy here OR override styles here) overrides & replacements for contrib /VENDOR folder Friday, May 2, 2014
  79. 79. Each UI component gets it’s own partial everything else in the /COMPONENTS folder Friday, May 2, 2014
  80. 80. everything else in the /COMPONENTS folder mytheme/sass/components/_site-search.scss Friday, May 2, 2014
  81. 81. everything else in the /COMPONENTS folder mytheme/sass/components/_map.scss Friday, May 2, 2014
  82. 82. everything else in the /COMPONENTS folder mytheme/sass/components/_tabs.scss Friday, May 2, 2014
  83. 83. Friday, May 2, 2014
  84. 84. Friday, May 2, 2014
  85. 85. BEM naming inside a component http://csswizardry.com/2013/01/mindbemding- getting-your-head-round-bem-syntax/ .site-search {} /* Block = COMPONENT)*/ .site-search__field {} /* Element */ .site-search--full {} /* Modifier */ Friday, May 2, 2014
  86. 86. Friday, May 2, 2014
  87. 87. Friday, May 2, 2014
  88. 88. _call-to-action.scss http://sassmeister.com/gist/11462276 Friday, May 2, 2014
  89. 89. .call-to-action{} Friday, May 2, 2014
  90. 90. .call-to-action{} .call-to-action__title{} Friday, May 2, 2014
  91. 91. .call-to-action{} .call-to-action__title{} .call-to-action__button{} Friday, May 2, 2014
  92. 92. .call-to-action{ background-color: $purple; color: $white; padding: 2em; } Friday, May 2, 2014
  93. 93. .call-to-action__title{ color: $white; font-weight: 600; margin-top: 0; } Friday, May 2, 2014
  94. 94. .call-to-action__button{ @extend %button--arrow; background-color: $purple-dark } Friday, May 2, 2014
  95. 95. .call-to-action--orange{ @extend .call-to-action; background-color: $orange; } .call-to-action{ background-color: $purple; color: $white; padding: 2em; } Friday, May 2, 2014
  96. 96. .call-to-action__button{ @extend %button--arrow; background-color: $purple-dark } .call-to-action--orange__button{ @extend .call-to-action__button; background-color: $orange-dark } Friday, May 2, 2014
  97. 97. // The default call to action is purple %call-to-action, .call-to-action{ background-color: $purple; color: $white; padding: 2em; } // Orange Variation %call-to-action--orange, .call-to-action--orange{ @extend %call-to-action; background-color: $orange; } Friday, May 2, 2014
  98. 98. // The default call to action is purple %call-to-action, .call-to-action{ background-color: $purple; color: $white; padding: 2em; } // Orange Variation %call-to-action--orange, .call-to-action--orange{ @extend %call-to-action; background-color: $orange; } _call-to-action.scss http://sassmeister.com/gist/11462276 Friday, May 2, 2014
  99. 99. } %call-to-action__title, .call-to-action .pane-title h2{ color: $white; font-weight: 600; margin-top: 0; } %call-to-action--orange__title, .call-to-action--orange .pane-title h2{ @extend %call-to-action__title; } %call-to-action__button, .call-to-action .pane-content a{ _call-to-action.scss http://sassmeister.com/gist/11462276 Friday, May 2, 2014
  100. 100. @extend %call-to-action__title; } %call-to-action__button, .call-to-action .pane-content a{ @extend %button--arrow; background-color: $purple-dark; } %call-to-action--orange__button, .call-to-action--orange .pane-content a{ @extend %call-to-action__button; background-color: orange-dark; } _call-to-action.scss http://sassmeister.com/gist/11462276 Friday, May 2, 2014
  101. 101. Semantic Panels https://drupal.org/project/semantic_panels Friday, May 2, 2014
  102. 102. Lots of bit sized chunks Fewer Git Collisions Friday, May 2, 2014
  103. 103. Lots of bit sized chunks Fewer Git Collisions 100-200 lines per partial 80GB Capacity Friday, May 2, 2014
  104. 104. Easy to see what partial to edit Easier learn & onboard Friday, May 2, 2014
  105. 105. Recycle Layouts (especially panels) Reuse UI Patterns Friday, May 2, 2014
  106. 106. Style Prototypes Useful Code Early Friday, May 2, 2014
  107. 107. In conclusion... Friday, May 2, 2014
  108. 108. Slides - http://responsivedesign.ca/dc2014.pdf http://www.meetup.com/SASS-Toronto/ Friday, May 2, 2014

×