CampSass SF 2014

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

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?
19. 
    
    
21. It’s the file structure that makes it good!
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!?
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!