Responsive Themeing With Aurora Theme, SASS, and BEM Syntax (Drupal Camp Toronto 2014)
7 likes4,920 views
Aidan Foster presented on responsive theming using Aurora, Sass, and BEM syntax, focusing on variables, mixins, and how to handle layouts within the context of responsive design. The document includes numerous resources and links for Sass components, tools, and techniques to optimize front-end development. Additionally, it discusses best practices for setting up stylesheets and using Drupal with modern CSS methodologies.
![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](https://image.slidesharecdn.com/responsive-themeing-auroa-sass-bem-140503101326-phpapp02/85/Responsive-Themeing-With-Aurora-Theme-SASS-and-BEM-Syntax-Drupal-Camp-Toronto-2014-51-320.jpg)
Responsive Themeing With Aurora Theme, SASS, and BEM Syntax (Drupal Camp Toronto 2014)
- 1. Aidan Foster Responsive Design Specialist @finteractive linkedin.responsivedesign.ca Responsive Theming with Aurora, SASS & BEM Syntax Friday, May 2, 2014
- 3. 80GB Capacity 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
- 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
- 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
- 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
- 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
- 25. RUBY? GEMS? 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
- 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
- 36. Live Reload 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
- 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
- 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
- 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
- 89. .call-to-action{} 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
- 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