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

  • 1,103 views
Uploaded on

Originally Presented at Drupal Camp Toronto 2014 …

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,103
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
11
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Aidan Foster Responsive Design Specialist @finteractive linkedin.responsivedesign.ca Responsive Theming with Aurora, SASS & BEM Syntax Friday, May 2, 2014
  • 2. Slides - http://responsivedesign.ca/dc2014.pdf Friday, May 2, 2014
  • 3. 80GB Capacity Friday, May 2, 2014
  • 4. http://sass-lang.com/ Friday, May 2, 2014
  • 5. Follow along - http://sassmeister.com Friday, May 2, 2014
  • 6. Follow along - http://sassmeister.com SCSS CSS Friday, May 2, 2014
  • 7. Follow along - http://sassmeister.com 20 SCSS CSS HTML Friday, May 2, 2014
  • 8. http://sass-lang.com Friday, May 2, 2014
  • 9. http://sassmeister.com/gist/11433017 Friday, May 2, 2014
  • 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. // 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. @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. %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. .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. @import _nav.scss _typograhy.scss _forms.scss styles.cssstyles.scss partials ouput css Friday, May 2, 2014
  • 16. http://sass-lang.com/ Friday, May 2, 2014
  • 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. http://www.markboulton.co.uk/journal/ Vertical Rhythm Friday, May 2, 2014
  • 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. // 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. 1024768 Images/Sprites Friday, May 2, 2014
  • 22. You could do all this by hand but ... Friday, May 2, 2014
  • 23. http://sass-lang.com/guide http://thesassway.com/ Friday, May 2, 2014
  • 24. http://www.meetup.com/SASS-Toronto/ Friday, May 2, 2014
  • 25. RUBY? GEMS? Friday, May 2, 2014
  • 26. RUBY SASS COMPASS Breakpoint Normalize Singularity Friday, May 2, 2014
  • 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. 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. 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. .ruby-version Friday, May 2, 2014
  • 31. A Gem that Packages up Gems Friday, May 2, 2014
  • 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. $ bundle install Gemfile.lock http://atendesigngroup.com/blog/managing-compass-extensions-bundler Friday, May 2, 2014
  • 34. Compress Images Concatenate & Minify JS Runs Sass with Debug Code OR minifies Everything Optimize SVG Friday, May 2, 2014
  • 35. http://24ways.org/2013/grunt-is-not-weird-and-hard/ Friday, May 2, 2014
  • 36. Live Reload Friday, May 2, 2014
  • 37. http://snugug.github.io/Aurora https://drupal.org/project/aurora Friday, May 2, 2014
  • 38. http://snugug.github.io/Aurora/install/ Friday, May 2, 2014
  • 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. 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. $ 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. Friday, May 2, 2014
  • 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. HTML 5 / Responsive Mobile First Super minimal Aurora’s DNA Panels / Display Suite Friday, May 2, 2014
  • 45. Aurora Structure Friday, May 2, 2014
  • 46. Drupal 7 is a tiny bit messy Let’s do some clean up Friday, May 2, 2014
  • 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. https://drupal.org/project/html5_tools HTML5 Tools Module Friday, May 2, 2014
  • 49. Magic Module https://drupal.org/project/magic Friday, May 2, 2014
  • 50. Fences Module https://drupal.org/project/fences Friday, May 2, 2014
  • 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. GEMS Friday, May 2, 2014
  • 53. Team SASS https://www.youtube.com/watch?v=G7JIuaeXKeo Friday, May 2, 2014
  • 54. https://github.com/Team-Sass Sam Richards (creator of Aurora) Ian Carrico (maintainer) Friday, May 2, 2014
  • 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. $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. 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. Singularity Grid https://github.com/Team-Sass/Singularitys Friday, May 2, 2014
  • 59. Singularity Grid https://github.com/Team-Sass/Singularitys Friday, May 2, 2014
  • 60. Specificity Wars .title .views-row #block-23 .views-row #block-25 .views-row .title Friday, May 2, 2014
  • 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. Each UI Element has a unique class (... yes we’re intentionally bypassing inheritance) Design Components Friday, May 2, 2014
  • 63. styles.scss loads many partials Friday, May 2, 2014
  • 64. styles.scss loads many partials Friday, May 2, 2014
  • 65. styles.scss loads many partials Friday, May 2, 2014
  • 66. styles.scss loads many partials Friday, May 2, 2014
  • 67. styles.scss loads many partials Friday, May 2, 2014
  • 68. styles.scss loads many partials Friday, May 2, 2014
  • 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. Colors Grids Breakpoints Mixins (No Actual CSS is Generated) Variables go in /CONFIG folder Friday, May 2, 2014
  • 71. Normalize .css Default Typography (site wide) extendables Forms (+formalize) (Generic HTML attribute Styles) Sitewide partials in /GLOBAL folder Friday, May 2, 2014
  • 72. Friday, May 2, 2014
  • 73. Generally /GLOBAL is the stuff in the WYSIWYG Friday, May 2, 2014
  • 74. _l-header.scss _l-masthead.scss _article.scss Positioning partials in /LAYOUTS folder Friday, May 2, 2014
  • 75. Layouts + Panels Friday, May 2, 2014
  • 76. Layouts + Panels Friday, May 2, 2014
  • 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. 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. Each UI component gets it’s own partial everything else in the /COMPONENTS folder Friday, May 2, 2014
  • 80. everything else in the /COMPONENTS folder mytheme/sass/components/_site-search.scss Friday, May 2, 2014
  • 81. everything else in the /COMPONENTS folder mytheme/sass/components/_map.scss Friday, May 2, 2014
  • 82. everything else in the /COMPONENTS folder mytheme/sass/components/_tabs.scss Friday, May 2, 2014
  • 83. Friday, May 2, 2014
  • 84. Friday, May 2, 2014
  • 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. Friday, May 2, 2014
  • 87. Friday, May 2, 2014
  • 88. _call-to-action.scss http://sassmeister.com/gist/11462276 Friday, May 2, 2014
  • 89. .call-to-action{} Friday, May 2, 2014
  • 90. .call-to-action{} .call-to-action__title{} Friday, May 2, 2014
  • 91. .call-to-action{} .call-to-action__title{} .call-to-action__button{} Friday, May 2, 2014
  • 92. .call-to-action{ background-color: $purple; color: $white; padding: 2em; } Friday, May 2, 2014
  • 93. .call-to-action__title{ color: $white; font-weight: 600; margin-top: 0; } Friday, May 2, 2014
  • 94. .call-to-action__button{ @extend %button--arrow; background-color: $purple-dark } Friday, May 2, 2014
  • 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. .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. // 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. // 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. } %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. @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. Semantic Panels https://drupal.org/project/semantic_panels Friday, May 2, 2014
  • 102. Lots of bit sized chunks Fewer Git Collisions Friday, May 2, 2014
  • 103. Lots of bit sized chunks Fewer Git Collisions 100-200 lines per partial 80GB Capacity Friday, May 2, 2014
  • 104. Easy to see what partial to edit Easier learn & onboard Friday, May 2, 2014
  • 105. Recycle Layouts (especially panels) Reuse UI Patterns Friday, May 2, 2014
  • 106. Style Prototypes Useful Code Early Friday, May 2, 2014
  • 107. In conclusion... Friday, May 2, 2014
  • 108. Slides - http://responsivedesign.ca/dc2014.pdf http://www.meetup.com/SASS-Toronto/ Friday, May 2, 2014