CampSass SF 2014

CampSass SF 2014

The SF twist on 'Clean out your Sass Junk Drawer'

992bbe0cad45fc9f941a4717f9f01642?s=128

Dale Sande

April 19, 2014
Tweet

Transcript

  1. clean out your junk-drawer! CampSass 2014 SF

  2. clean out your junk-drawer! CampSass 2014 SF

  3. That’s me! That’s where ! I ‘work’ @ANOTHERUIGUY That’s a

    ninja
  4.  !    

  5. 

  6.    

  7.     early conceptions of modular design

  8.    early implementation of modular design

  9. 

  10.  How to use this new knowledge?

  11. I get it! All the big things are made up

    of small things!
  12. I get it! All the big things are made up

    of small things! Start from the INSIDE, not the OUTSIDE!
  13. I get it! All the big things are made up

    of small things! Start from the INSIDE, not the OUTSIDE! Wait! If this is so awesome, why is not EVERYONE talking about this?!
  14. I get it! All the big things are made up

    of small things! Start from the INSIDE, not the OUTSIDE! Wait! If this is so awesome, why is not EVERYONE talking about this?! I MUST TELL THE WORLD!
  15. @ANOTHERUIGUY a modular UI tour Mobile Monday Madison MadMongers (Madison

    Perl Mongers) Milwaukee PHP The Milwaukee Web Design Pattern Libraries, CSS Frameworks & more Mobile Monday Madison Meeting Madison Web Design & Dev Mad-Railers Madison PHP Meetup Group
  16. @ANOTHERUIGUY a modular UI tour Mobile Monday Madison MadMongers (Madison

    Perl Mongers) Milwaukee PHP The Milwaukee Web Design Pattern Libraries, CSS Frameworks & more Mobile Monday Madison Meeting Madison Web Design & Dev Mad-Railers Madison PHP Meetup Group This is great! Where is your framework? Does it have a grid?
  17. None
  18. None
  19.   

  20. None
  21. It’s the file structure that makes it good!

  22. None
  23. None
  24. None
  25. New dude! ! Hey, honest opinion, what do you think

    of our Sass? Sure! Show me the codes.
  26. That’s 18491

  27. That’s 18491

  28. How did this happen? How could they have gone so

    amazingly wrong?
  29. How did this happen? How could they have gone so

    amazingly wrong? These are smart people?
  30. How did this happen? How could they have gone so

    amazingly wrong? These are smart people? Variables that make no sense? Mixins randomly all over the place. @import where?
  31. How did this happen? How could they have gone so

    amazingly wrong? These are smart people? Variables that make no sense? Mixins randomly all over the place. @import where? MY GOD! That ‘partials’ folder has how many files in it? That makes no sense!?
  32. How did this happen? How could they have gone so

    amazingly wrong? These are smart people? Variables that make no sense? Mixins randomly all over the place. @import where? How to tell them? MY GOD! That ‘partials’ folder has how many files in it? That makes no sense!?
  33. None
  34. !  For many of us getting started with Sass,

    at one time or another have created a junk- drawer of files. Fo mi a
  35. !  ed k- For most, this was a rookie

    mistake, but for others, this is a continuing issue with our architecture and file management techniques. Sas ru d
  36. !  e is r Sass doesn't come with any

    real rules for file management so developers are pretty much left to their own devices.
  37.    increased complexity

  38.  the good ‘ol days .selection { font-size: 12px; line-height:

    13px; font-family: Arial, Helvetica, sans-serif; text-align: center; margin-top: 10px; } .selection ul,li { font-size: 12px; line-height: 14px; font-family: Arial, Helvetica, sans-serif; text-align: left; vertical-align: top; margin-left: 10px; width: auto; height: auto; }
  39.      things got much more complicated

    /* GLOBALHEADER */ #globalheader { position:relative; display:block; width:980px; height:36px; margin: 18px auto; text-align:left; z-index:9998; background:url(/global/nav/images/ globalheader.png) repeat-x; -khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border- radius:4px; -webkit-border-radius:4px; border-radius:4px; -khtml-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -ms-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -o-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -moz-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -webkit-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; box-shadow:rgba(0,0,0,0.3) 0 1px 2px; font:12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } @media only screen and (max-device-width:768px) { #globalheader { z-index:1; } } #globalheader #globalnav { position:relative; display:block; margin:0; padding:0; zoom:1; z-index:3; } #globalheader #globalnav:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } #globalheader #globalnav li { display:inline; } #globalheader #globalnav li a { float:left; width:102px; height:36px; overflow:hidden; That’s a lot 
 of code!
  40.      we tried ... but failed

    @import url(‘path/reset.css’); @import url(‘path/evil.css’); @import url(‘path/more-evil.css’); @import url(‘path/bootstrap-sucks.css’); That’s a performance killer bro!
  41.  

  42. Text Text /* GLOBAL VARIABLES */ $prefix_defaults: -moz- -webkit- -o-

    -ms- '' !default; $webkit_support: -webkit- '' !default; $moz_support: -moz- '' !default; $ms_support: -ms- '' !default; $moz_webkit_support: -moz- -webkit- '' !default; $moz_ms_support: -moz- -ms- '' !default; $webkit_ms_support: -webkit- -ms- '' !default; ! $grid-width: 980px; $max-device-width: 768px; $background-position-full: 100%; $background-position-half: 50%; $link-color: #7F7F7F; $text-color: #333; ! /* Mixins */ @mixin border_radius ($border_radius, $prefixes: $webkit_support) { @each $prefix in $prefixes { #{$prefix}border-radius: $border_radius; } } ! @mixin box_shadow ($shadow_color: $shadow_color, $shadow: $shadow, $prefixes: $prefix_defaults) { @each $prefix in $prefixes { #{$prefix}box-shadow: $shadow_color $shadow; } } !    Variables and Mixins. NICE!
  43. ! ! /* GLOBALHEADER */ #globalheader { position:relative; display:block; width:$grid-width;

    height:36px; margin: 18px auto; text-align:left; z-index:9998; background:url(/global/nav/images/ globalheader.png) repeat-x; -khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border- radius:4px; -webkit-border-radius:4px; border-radius:4px; -khtml-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -ms-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -o-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -moz-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; - webkit-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; box-shadow:rgba(0,0,0,0.3) 0 1px 2px; font:12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } @media only screen and (max-device-width:$max-device-width) { #globalheader { z-index:1; } } #globalheader #globalnav { position:relative; display:block; margin:0; padding:0; zoom:1; z-index:3; } #globalheader #globalnav:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } #globalheader #globalnav li { display:inline; } #globalheader #globalnav li a { float:left; width:102px; height:36px; overflow:hidden; text-indent:-9999px; background:url(/global/nav/images/globalnav.png) no-repeat; cursor:pointer; } ! /* VML FOR IE */ v\:roundrect, v\:fill { behavior:url(#default#VML); } #globalheader-roundrect, #globalheader-fill { display:block; position:absolute; width:; height:35px; top:0; left:0; z-index:2; } #globalheader-shadow { display:block; position:absolute; width:$grid-width; height:35px; top:-1px; left:-2px; z-index:1; -ms- filter:"progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)"; filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2); } ! /* VARIANTS */    
  44. ! ! /* GLOBALHEADER */ #globalheader { position:relative; display:block; width:$grid-width;

    height:36px; margin: 18px auto; text-align:left; z-index:9998; background:url(/global/nav/images/ globalheader.png) repeat-x; -khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border- radius:4px; -webkit-border-radius:4px; border-radius:4px; -khtml-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -ms-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -o-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; -moz-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; - webkit-box-shadow:rgba(0,0,0,0.3) 0 1px 2px; box-shadow:rgba(0,0,0,0.3) 0 1px 2px; font:12px/18px "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif; } @media only screen and (max-device-width:$max-device-width) { #globalheader { z-index:1; } } #globalheader #globalnav { position:relative; display:block; margin:0; padding:0; zoom:1; z-index:3; } #globalheader #globalnav:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } #globalheader #globalnav li { display:inline; } #globalheader #globalnav li a { float:left; width:102px; height:36px; overflow:hidden; text-indent:-9999px; background:url(/global/nav/images/globalnav.png) no-repeat; cursor:pointer; } ! /* VML FOR IE */ v\:roundrect, v\:fill { behavior:url(#default#VML); } #globalheader-roundrect, #globalheader-fill { display:block; position:absolute; width:; height:35px; top:0; left:0; z-index:2; } #globalheader-shadow { display:block; position:absolute; width:$grid-width; height:35px; top:-1px; left:-2px; z-index:1; -ms- filter:"progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)"; filter:progid:DXImageTransform.Microsoft.Blur(pixelRadius=2); } ! /* VARIANTS */     die hard
  45.    early days of file management style.scss mixins.scss

    variables.scss typography.scss forms.scss
  46.    early days of file management style.scss mixins.scss

    variables.scss typography.scss forms.scss overly simplified
  47.    early days of file management style.scss mixins.scss

    variables.scss typography.scss forms.scss overly simplified too much code in one file
  48.    early days of file management style.scss mixins.scss

    variables.scss typography.scss forms.scss overly simplified too much code in one file base, elements, modules and layout in the same files
  49.    early days of file management style.scss mixins.scss

    variables.scss typography.scss forms.scss overly simplified too much code in one file base, elements, modules and layout in the same files cats and dogs living together, mass hysteria!
  50.    early days of file management style.scss mixins.scss

    variables.scss typography.scss forms.scss overly simplified too much code in one file base, elements, modules and layout in the same files cats and dogs living together, mass hysteria!
  51.   ! seemed like a good idea

  52.   file structures of inspiration app/ models/ views/ controllers/

    admin/ blog/ shared/
  53.   file structures of inspiration app/ models/ views/ controllers/

    admin/ blog/ shared/ THE MVC IS AWESOME! ! LET’S USE THIS TO ORGANIZE THE SASS!
  54.      where do I put the

    abstracted stuff? style.scss mixins variables forms typography partials views
  55.      where do I put the

    abstracted stuff? style.scss mixins variables forms typography partials views attempts to break out mixins and variables == lots of files dumped into folders
  56.      where do I put the

    abstracted stuff? style.scss mixins variables forms typography partials views attempts to break out mixins and variables == lots of files dumped into folders UI modules and patterns inevitably ended up within the View styles
  57.      where do I put the

    abstracted stuff? style.scss mixins variables forms typography partials views attempts to break out mixins and variables == lots of files dumped into folders UI modules and patterns inevitably ended up within the View styles But code is being duplicated? Oh yeah, make it a partial!
  58.      where do I put the

    abstracted stuff? style.scss mixins variables forms typography partials views attempts to break out mixins and variables == lots of files dumped into folders UI modules and patterns inevitably ended up within the View styles But code is being duplicated? Oh yeah, make it a partial! That’s a junk- drawer bro!
  59.  ! learn from ‘doing it wrong’

  60.  our perspective was all wrong

  61.  our perspective was all wrong Styles are written based

    on placement in the view
  62.  our perspective was all wrong Styles are written based

    on placement in the view CSS too specific. Very fragile with placement
  63.  our perspective was all wrong Styles are written based

    on placement in the view CSS too specific. Very fragile with placement Presentation classes in the markup
  64.  our perspective was all wrong Styles are written based

    on placement in the view CSS too specific. Very fragile with placement Presentation classes in the markup Poor code reuse, if any at all. To much ‘⌘C / ⌘V`
  65.  our perspective was all wrong Styles are written based

    on placement in the view CSS too specific. Very fragile with placement Presentation classes in the markup Poor code reuse, if any at all. To much ‘⌘C / ⌘V` A major case of the div’itus
  66.  our perspective was all wrong Styles are written based

    on placement in the view CSS too specific. Very fragile with placement Presentation classes in the markup Poor code reuse, if any at all. To much ‘⌘C / ⌘V` A major case of the div’itus Using IDs for styling to over-ride the cascade
  67.   start with the smaller parts

  68.   start with the smaller parts Buttons Typography Color

    pallet standard icons borders and line widths
  69.  start small and build up

  70.  start small and build up Header module Hero module

    Nav module Hero copy module Article module List module
  71.     ! nature has taught us everything

  72.   code the base, create the module and assemble

    the layout buttons/ color/ forms/ layouts/ modules/ typography/ ui_patterns/ _buttons.scss _config.scss _forms.scss _reset.scss _typography.scss application.scss
  73.      a powerful weapon in the

    Sass arsenal // Following sequence will load the necessary libraries // ----------------------------------------------------------- @import “rwd-toolkit"; @import “color-scale”; @import “type-rhythm-scale“; @import "vendor/manifest"; ! ! // This where you start building your own styles. // ----------------------------------------------------------- @import "typography"; @import "forms"; @import "buttons"; @import "ui_patterns/manifest"; // manifest files @import "modules/manifest"; // manifest files @import "layouts/manifest"; // manifest files
  74.      a powerful weapon in the

    Sass arsenal // Following sequence will load the necessary libraries // ----------------------------------------------------------- @import “rwd-toolkit"; @import “color-scale”; @import “type-rhythm-scale“; @import "vendor/manifest"; ! ! // This where you start building your own styles. // ----------------------------------------------------------- @import "typography"; @import "forms"; @import "buttons"; @import "ui_patterns/manifest"; // manifest files @import "modules/manifest"; // manifest files @import "layouts/manifest"; // manifest files Nicely organized!
  75.      a powerful weapon in the

    Sass arsenal // Following sequence will load the necessary libraries // ----------------------------------------------------------- @import “rwd-toolkit"; @import “color-scale”; @import “type-rhythm-scale“; @import "vendor/manifest"; ! ! // This where you start building your own styles. // ----------------------------------------------------------- @import "typography"; @import "forms"; @import "buttons"; @import "ui_patterns/manifest"; // manifest files @import "modules/manifest"; // manifest files @import "layouts/manifest"; // manifest files Nicely organized! Have you read ‘Bower all the things’
  76.   this can really save your bacon

  77.   manage the smart defaults for your UI ///////

    Typography configuration/////// // ----------------------------------------------------------------------------- $font_size: 12; // $heading_1: 46; $heading_2: 32; $heading_3: 28; $heading_4: 18; $heading_5: 18; $heading_6: 18; // $line: $font_size * 1.5; // $small_point_size: 10; $large_point_size: 14; // $primary_font_family: #{"Helvetica Neue", Arial, sans-serif}; $secondary_font_family: #{"Helvetica Neue", Arial, sans-serif}; $heading_font_family: #{"Helvetica Neue", Arial, sans-serif}; ! $icon_font_alpha: #{‘ico-fonts'}; ! /////// Default webfont directory/////// // ----------------------------------------------------------------------------- $webfont_directory: "/fonts/"; ! /////// default image directory /////// // ----------------------------------------------------------------------------- No CSS to speak of, all logic.
  78.   where we begin our work

  79. @import "typography/manifest"; ! // Customize the following to fit your

    specifications //* --------------------------------------------------------- html { font: em($font-size, 16) $primary-font-family; line-height: baseline($font-size); color: $primary-text } ! /////// Include custom font families // *--------------------------------------------------------- @include font-face($default-icon-font-family, $default-icon-font-name); ! // Heading CSS rules //* ---------------------------------------------------------- h1, h2, h3, h4, h5, h6, [role=heading] { @include heading(); } h1, [aria-level="1"] { section & { @include text($heading-2); } }      all CSS, NO LOGIC!
  80.   where’z u go?

  81.   functional vs. presentational buttons/ _mixins.scss _extends.scss _buttons.scss _manifest.scss

  82.   functional vs. presentational buttons/ _mixins.scss _extends.scss _buttons.scss functional

    presentational _manifest.scss
  83.        organize your thoughts

    // Custom button extends and mixins // ---------------------------------------------- @import "buttons/manifest"; ! // buttons // ---------------------------------------------- button, a.button { @inlcude button($button-color); }
  84.        organize your thoughts

    // Custom button extends and mixins // ---------------------------------------------- @import "buttons/manifest"; ! // buttons // ---------------------------------------------- button, a.button { @inlcude button($button-color); } functional presentational
  85.   seeing is believing

  86.   simplicity in organization Module Sass is exclusive to

    a particular interaction of the application. ! ! Modules will come in all shapes and sizes. ! ! Larger modules may also consist of smaller modules or smaller UI patterns.
  87.   simplicity in organization modules/ _extends.scss registration/ _functions.scss _mixins.scss

    _module_registration.scss _module_personalInfo.scss
  88.   simplicity in organization modules/ _extends.scss registration/ _functions.scss _mixins.scss

    _module_registration.scss _module_personalInfo.scss _extends.scss purchase/ _functions.scss _mixins.scss _module_order-summary.scss _module_purchase.scss
  89.   simplicity in organization modules/ _extends.scss registration/ _functions.scss _mixins.scss

    _module_registration.scss _module_personalInfo.scss directory name primary module
  90.    name-space by the module itself %order-summary {

    %form-header { border-radius: em(5) em(5) 0 0; margin-bottom: 0; } %order-summary-container { @extend %Grid4ThreeSideBox; } %initial-assetListing { @media #{$mobile} { display: none; } } %price { text-align: right; } %total { font-size: em($large_point_size); } %footer {
  91.   ! bringing the picture into focus

  92.  make up the view

  93.  make up the view module module module module module

  94.     manage your grid .checkout-experience { .customer-checkout

    { @media #{$tablet} { @include grid(10, $grid_context: 10); } } .order-summary { @extend %grid_5; @media #{$tablet_portrait} { @include grid(10, $grid_context: 10); } @media #{$mobile} { @include grid(4, $grid_context: 4); } .scrollBox { @include grid(5, $grid_uom: em);
  95.  what have we learned?

  96.  what have we learned? CSS management has come a

    long way
  97.  what have we learned? Vanilla CSS has NO TOOLS

    for code management CSS management has come a long way
  98.  what have we learned? Vanilla CSS has NO TOOLS

    for code management outside-in BAD! ! inside-out BETTER! CSS management has come a long way
  99.  what have we learned? Vanilla CSS has NO TOOLS

    for code management outside-in BAD! ! inside-out BETTER! modular files with @import system === WINNING! CSS management has come a long way
  100.  what have we learned? Vanilla CSS has NO TOOLS

    for code management outside-in BAD! ! inside-out BETTER! modular files with @import system === WINNING! elements, modules and then the view CSS management has come a long way
  101.  what have we learned? Vanilla CSS has NO TOOLS

    for code management outside-in BAD! ! inside-out BETTER! modular files with @import system === WINNING! elements, modules and then the view CSS management has come a long way Take everything you know AND SET IT ON FIRE!
  102.  what have we learned? Vanilla CSS has NO TOOLS

    for code management outside-in BAD! ! inside-out BETTER! modular files with @import system === WINNING! elements, modules and then the view CSS management has come a long way Take everything you know AND SET IT ON FIRE! Organize your Sass! ! it will hurt less
  103.   you, in the front ...

  104. Thanks!