clean out your junk-drawer! CampSass 2014 SF

clean out your junk-drawer! CampSass 2014 SF

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

!

early conceptions of modular design

early implementation of modular design

How to use this new knowledge?

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

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

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 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!

@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

@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?

No content

No content

No content

It’s the file structure that makes it good!

No content

No content

No content

New dude! ! Hey, honest opinion, what do you think of our Sass? Sure! Show me the codes.

That’s 18491

That’s 18491

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

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

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 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!?

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!?

No content

! For many of us getting started with Sass, at one time or another have created a junk- drawer of files. Fo mi a

! 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

! e is r Sass doesn't come with any real rules for file management so developers are pretty much left to their own devices.

increased complexity

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; }

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!

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!

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!

! ! /* 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 */

! ! /* 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

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

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

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

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

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!

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!

! seemed like a good idea

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

file structures of inspiration app/ models/ views/ controllers/ admin/ blog/ shared/ THE MVC IS AWESOME! ! LET’S USE THIS TO ORGANIZE THE SASS!

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

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

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

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!

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!

! learn from ‘doing it wrong’

our perspective was all wrong

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

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

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

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`

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

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

start with the smaller parts

start with the smaller parts Buttons Typography Color pallet standard icons borders and line widths

start small and build up

start small and build up Header module Hero module Nav module Hero copy module Article module List module

! nature has taught us everything

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

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

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!

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’

this can really save your bacon

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.

where we begin our work

@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!

where’z u go?

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

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

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

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

seeing is believing

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.

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

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

simplicity in organization modules/ _extends.scss registration/ _functions.scss _mixins.scss _module_registration.scss _module_personalInfo.scss directory name primary module

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 {

! bringing the picture into focus

make up the view

make up the view module module module module module

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);

what have we learned?

what have we learned? CSS management has come a long way

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

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

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

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

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!

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

you, in the front ...

Thanks!