Embed Size (px)
DESCRIPTION
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
Citation preview
Aidan FosterResponsive Design Specialist
@finteractivelinkedin.responsivedesign.ca
Responsive Theming with Aurora, SASS & BEM Syntax
Friday, May 2, 2014
Slides - http://responsivedesign.ca/dc2014.pdf
Friday, May 2, 2014
80GB Capacity
Friday, May 2, 2014
http://sass-lang.com/Friday, May 2, 2014
Follow along - http://sassmeister.comFriday, May 2, 2014
Follow along - http://sassmeister.com
SCSS CSS
Friday, May 2, 2014
Follow along - http://sassmeister.com
20
SCSS CSS
HTML
Friday, May 2, 2014
http://sassmeister.com/gist/11433017Friday, May 2, 2014
// ----// Sass (v3.3.0.rc.2)// Compass (v1.0.0.alpha.17)// ----
@import "compass";
// Creating custom mixins with @mixin// Using @include for custom & compass mixins
// 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;
// Place Holders (Don't actually output css on their own) %checkmark { &:after{ content: "\2713 "; margin-left: 1em; }}
%message-default { // Adding a compass mixin @include border-radius(10px); border: 1px solid $grey-dark; margin: $margins; padding: $padding; text-align: center;}
// Custom mixin takes 2 variables and provides defaults@mixin link($link-color:$grey-dark, $hover-color:$grey-extradark ){ color: $link-color; &:hover, &:active, &:focus { color: $hover-color; }}
a { @include link;}
.message-box { @extend %message-default; @extend %checkmark; background-color: $grey-light;}
.message-box--success { @extend %message-default; @extend %checkmark; background-color: $green;}
.message-box--error { @extend %message-default; background-color: $red;
a { @include link($red-dark, $red-extradark); }}
‘
Variables & Functions
http://sassmeister.com/gist/11433017Friday, May 2, 2014
// ----// Sass (v3.3.0.rc.2)// Compass (v1.0.0.alpha.17)// ----
@import "compass";
// Creating custom mixins with @mixin// Using @include for custom & compass mixins
// 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;
// Place Holders (Don't actually output css on their own) %checkmark { &:after{ content: "\2713 "; margin-left: 1em; }}
%message-default { // Adding a compass mixin @include border-radius(10px); border: 1px solid $grey-dark; margin: $margins; padding: $padding; text-align: center;}
// Custom mixin takes 2 variables and provides defaults@mixin link($link-color:$grey-dark, $hover-color:$grey-extradark ){ color: $link-color; &:hover, &:active, &:focus { color: $hover-color; }}
a { @include link;}
.message-box { @extend %message-default; @extend %checkmark; background-color: $grey-light;}
.message-box--success { @extend %message-default; @extend %checkmark; background-color: $green;}
.message-box--error { @extend %message-default; background-color: $red;
a { @include link($red-dark, $red-extradark); }}
Variables & Functions
http://sassmeister.com/gist/11433017Friday, May 2, 2014
// ----// Sass (v3.3.0.rc.2)// Compass (v1.0.0.alpha.17)// ----
@import "compass";
// Creating custom mixins with @mixin// Using @include for custom & compass mixins
// 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;
// Place Holders (Don't actually output css on their own) %checkmark { &:after{ content: "\2713 "; margin-left: 1em; }}
%message-default { // Adding a compass mixin @include border-radius(10px); border: 1px solid $grey-dark; margin: $margins; padding: $padding; text-align: center;}
@mixin link($link-color, $hover-color){ color: $link-color; &:hover, &:active, &:focus { color: $hover-color; }}
a { @include link($red,$red-dark);}
.message-box { @extend %message-default; @extend %checkmark; background-color: $grey-light;}
.message-box--success { @extend %message-default; @extend %checkmark; background-color: $green;}
.message-box--error { @extend %message-default; background-color: $red;
a { @include link($red-dark, $red-extradark); }}
http://sassmeister.com/gist/11433017
Mixins
Friday, May 2, 2014
// ----// Sass (v3.3.0.rc.2)// Compass (v1.0.0.alpha.17)// ----
@import "compass";
// Creating custom mixins with @mixin// Using @include for custom & compass mixins
// 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;
%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;}
// Custom mixin takes 2 variables and provides defaults@mixin link($link-color:$grey-dark, $hover-color:$grey-extradark ){ color: $link-color; &:hover, &:active, &:focus { color: $hover-color; }}
a { @include link;}
.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
// ----// Sass (v3.3.0.rc.2)// Compass (v1.0.0.alpha.17)// ----
@import "compass";
// Creating custom mixins with @mixin// Using @include for custom & compass mixins
// 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;
%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;}
// Custom mixin takes 2 variables and provides defaults@mixin link($link-color:$grey-dark, $hover-color:$grey-extradark ){ color: $link-color; &:hover, &:active, &:focus { color: $hover-color; }}
a { @include link;}
.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
@import
_nav.scss
_typograhy.scss
_forms.scssstyles.cssstyles.scss
partials ouput css
Friday, May 2, 2014
http://sass-lang.com/Friday, May 2, 2014
// .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
http://www.markboulton.co.uk/journal/
Vertical Rhythm
Friday, May 2, 2014
// 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);}
// csshtml { 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
// 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);}
// csshtml { 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
1024768
Images/Sprites
Friday, May 2, 2014
You could do all this by
hand but ...
Friday, May 2, 2014
http://sass-lang.com/guide
http://thesassway.com/
Friday, May 2, 2014
http://www.meetup.com/SASS-Toronto/Friday, May 2, 2014
RUBY?GEMS?
Friday, May 2, 2014
RUBY
SASS
COMPASS
Breakpoint
Normalize
Singularity
Friday, May 2, 2014
SASS
COMPASS
Breakpoint
Toolkit
Susy
RUBY
SASS
COMPASS
Toolkit
Singularity
Breakpoint
RUBY
project-A.com (2013) project-B.com (2014)
Friday, May 2, 2014
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
rbenv
https://github.com/sstephenson/rbenv#homebrew-on-mac-os-x
1.8.7-p3581.9.2-p3182.0.0-p247
project-A.com
project-B.com
OSX system ruby
Friday, May 2, 2014
.ruby-version
Friday, May 2, 2014
A Gem that Packages up Gems
Friday, May 2, 2014
# Pull gems from RubyGemssource '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
$ bundle install
Gemfile.lock
http://atendesigngroup.com/blog/managing-compass-extensions-bundler
Friday, May 2, 2014
Compress Images
Concatenate & Minify JS
Runs Sass with Debug Code
OR minifies Everything
Optimize SVG
Friday, May 2, 2014
http://24ways.org/2013/grunt-is-not-weird-and-hard/
Friday, May 2, 2014
Live ReloadFriday, May 2, 2014
http://snugug.github.io/Aurora
https://drupal.org/project/aurora
Friday, May 2, 2014
http://snugug.github.io/Aurora/install/
Friday, May 2, 2014
http://snugug.github.io/Aurora/subthemes/
compass create <my_theme> -r aurora --using aurora/corona
Installing Aurora
Then Make your own BASE themein Drush
Friday, May 2, 2014
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
$ 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
Friday, May 2, 2014
$ 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
HTML 5 / Responsive
Mobile First
Super minimal
Aurora’s DNA
Panels / Display Suite
Friday, May 2, 2014
Aurora Structure
Friday, May 2, 2014
Drupal 7 is a tiny bit messy
Let’s do some clean up
Friday, May 2, 2014
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
https://drupal.org/project/html5_tools
HTML5 Tools Module
Friday, May 2, 2014
Magic Module
https://drupal.org/project/magic
Friday, May 2, 2014
Fences Module
https://drupal.org/project/fences
Friday, May 2, 2014
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
GEMS
Friday, May 2, 2014
Team SASS
https://www.youtube.com/watch?v=G7JIuaeXKeo
Friday, May 2, 2014
https://github.com/Team-Sass
Sam Richards(creator of Aurora)
Ian Carrico(maintainer)
Friday, May 2, 2014
Toolkit Sass Gem
https://github.com/Team-Sass/toolkit
“Swiss army knife for Progressive Enhancement and Responsive Web Design”
Friday, May 2, 2014
$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
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
Singularity Grid
https://github.com/Team-Sass/Singularitys
Friday, May 2, 2014
Singularity Grid
https://github.com/Team-Sass/Singularitys
Friday, May 2, 2014
Specificity Wars
.title
.views-row
#block-23 .views-row
#block-25 .views-row .title
Friday, May 2, 2014
OOCSS Object Oriented CSS (http://oocss.org/)
SMACSSScalable and Modular Architecture for CSS (http://smacss.com/)
BEMBlock - Element - Modifier (http://bem.info)
Friday, May 2, 2014
Each UI Element has a unique class(... yes we’re intentionally bypassing inheritance)
Design Components
Friday, May 2, 2014
styles.scss loads many partials
Friday, May 2, 2014
styles.scss loads many partials
Friday, May 2, 2014
styles.scss loads many partials
Friday, May 2, 2014
styles.scss loads many partials
Friday, May 2, 2014
styles.scss loads many partials
Friday, May 2, 2014
styles.scss loads many partials
Friday, May 2, 2014
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
Colors Grids
Breakpoints Mixins
(No Actual CSS is Generated)
Variables go in /CONFIG folder
Friday, May 2, 2014
Normalize.css
Default Typography
(site wide)extendables
Forms(+formalize)
(Generic HTML attribute Styles)
Sitewide partials in /GLOBAL folder
Friday, May 2, 2014
Friday, May 2, 2014
Generally /GLOBAL is the stuff in the WYSIWYGFriday, May 2, 2014
_l-header.scss_l-masthead.scss_article.scss
Positioning partials in /LAYOUTS folder
Friday, May 2, 2014
Layouts + Panels
Friday, May 2, 2014
Layouts + Panels
Friday, May 2, 2014
%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
flexslider.scss
datepicker.scss
here-be-dragons.scss
(Either exclude css and copy hereOR override styles here)
overrides & replacements for contrib /VENDOR folder
Friday, May 2, 2014
Each UI component gets it’s own partial
everything else in the /COMPONENTS folder
Friday, May 2, 2014
everything else in the /COMPONENTS folder
mytheme/sass/components/_site-search.scssFriday, May 2, 2014
everything else in the /COMPONENTS folder
mytheme/sass/components/_map.scssFriday, May 2, 2014
everything else in the /COMPONENTS folder
mytheme/sass/components/_tabs.scssFriday, May 2, 2014
Friday, May 2, 2014
Friday, May 2, 2014
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
Friday, May 2, 2014
Friday, May 2, 2014
_call-to-action.scss
http://sassmeister.com/gist/11462276Friday, May 2, 2014
.call-to-action{}
Friday, May 2, 2014
.call-to-action{}
.call-to-action__title{}
Friday, May 2, 2014
.call-to-action{}
.call-to-action__title{}
.call-to-action__button{}
Friday, May 2, 2014
.call-to-action{ background-color: $purple; color: $white; padding: 2em;}
Friday, May 2, 2014
.call-to-action__title{ color: $white; font-weight: 600; margin-top: 0;}
Friday, May 2, 2014
.call-to-action__button{ @extend %button--arrow; background-color: $purple-dark}
Friday, May 2, 2014
.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
.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
// 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__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{ @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;}
Friday, May 2, 2014
// 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__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{ @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/11462276Friday, May 2, 2014
// 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__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{ @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/11462276Friday, May 2, 2014
// 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__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{ @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/11462276Friday, May 2, 2014
Semantic Panels
https://drupal.org/project/semantic_panelsFriday, May 2, 2014
Lots of bit sized chunks
Fewer Git Collisions
Friday, May 2, 2014
Lots of bit sized chunks
Fewer Git Collisions
100-200 lines per partial
80GB Capacity
Friday, May 2, 2014
Easy to see what partial to edit
Easier learn & onboard
Friday, May 2, 2014
Recycle Layouts
(especially panels)
Reuse UI Patterns
Friday, May 2, 2014
Style Prototypes
Useful Code Early
Friday, May 2, 2014
In conclusion...
Friday, May 2, 2014
Slides - http://responsivedesign.ca/dc2014.pdf
http://www.meetup.com/SASS-Toronto/
Friday, May 2, 2014
