CampSass SF 2014

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!