Movatterモバイル変換

TACTICALHTML & CSSMODULARHTML & CSSTURBO WORKSHOPShay Howe@shayhowelearn.shayhowe.comDarby Frey@darbyfreydarbyfrey.com

@shayhowe & @darbyfreyModular HTML & CSSShay Howe@shayhowelearn.shayhowe.comDarby Frey@darbyfreydarbyfrey.com

@shayhowe & @darbyfreyModular HTML & CSS1. The Problem2. Groundwork3. Assembling Layout4. Accommodating Content5. Turbo with SCSS6. OnwardOUR SCHEDULE

@shayhowe & @darbyfreyModular HTML & CSSTHEPROBLEM

The Gust by Willem van de Velde the Younger

@shayhowe & @darbyfreyModular HTML & CSSCOMMON PROBLEMS• Websites have difficulty scaling• Code becomes brittle• Files and code bases begin to swell

@shayhowe & @darbyfreyModular HTML & CSSWHAT’S WRONG• Best practices aren’t exactly best practices• Standards need to evolve

@shayhowe & @darbyfreyModular HTML & CSSBEST BAD PRACTICES• Avoid extra elements• Avoid classes• Leverage type selectors• Leverage descendent selectors

@shayhowe & @darbyfreyModular HTML & CSSBEST BAD PRACTICESAvoiding classessection ul#nav li {...}section:nth-‐child(2) div:nth-‐child(7) > a {...}Leveraging selectorsa.btn {...}#main a.btn {...}#main div.feature a.btn {...}

@shayhowe & @darbyfreyModular HTML & CSSBEST BAD PRACTICESBad#contact li:nth-‐child(1) input,#contact li:nth-‐child(2) input { width: 160px;}#contact li:nth-‐child(3) textarea { width: 280px;}

@shayhowe & @darbyfreyModular HTML & CSSBEST BAD PRACTICESGood.col-‐1 { width: 160px;}.col-‐2 { width: 280px;}

@shayhowe & @darbyfreyModular HTML & CSSSPECIFICITY?• Specificity determines which styles are applied• Each selector has a specificity weight• High specificity beats low specificity• Low specificity is key

@shayhowe & @darbyfreyModular HTML & CSSMEASURING SPECIFICITYFormula• IDs, Classes/Pseudo-classes/Attributes, ElementsHigh Specificity (Bad)#primary #main div.gallery figure.mediaIDs: 2, Classes: 2, Elements: 2 — Compiled: 2–2–2Low Specificity (Good).gallery-‐mediaIDs: 0, Classes: 1, Elements: 0 — Compiled: 0–1–0

@shayhowe & @darbyfreyModular HTML & CSS

@shayhowe & @darbyfreyModular HTML & CSSWATCH SPECIFICITY• Be explicit• Keep specificity low• Never use IDs or !important• Avoid nested selectors (#main .spotlight strong span)

@shayhowe & @darbyfreyModular HTML & CSSWATCH SPECIFICITYBad#primary #main div.gallery { text-‐transform: uppercase;}#primary #main div.gallery figure.media { background: #ccc;}

@shayhowe & @darbyfreyModular HTML & CSSWATCH SPECIFICITYGood.gallery { text-‐transform: uppercase;}.gallery-‐media { background: #ccc;}

Parade of the Black Sea Fleet by Ivan Aivazovsky

@shayhowe & @darbyfreyModular HTML & CSSMAINTAINABILITYCode must be...• Organized• Modular• Performant

@shayhowe & @darbyfreyModular HTML & CSSMETHODOLOGIESOOCSS• Object-Oriented CSSFrom Nicole Sullivan – oocss.orgSMACSS• Scalable and Modular Architecture for CSSFrom Jonathan Snook – smacss.com

@shayhowe & @darbyfreyModular HTML & CSSGROUNDWORK

@shayhowe & @darbyfreyModular HTML & CSSREUSE CODE• Do not duplicate code• Remove old code• Defer loading subsequent styles

@shayhowe & @darbyfreyModular HTML & CSSREUSE CODEBad.news { background: #eee; color: #666;}.social { background: #eee; color: #666;}

@shayhowe & @darbyfreyModular HTML & CSSREUSE CODEGood.news,.social { background: #eee; color: #666;}Better.feat-‐box { background: #eee; color: #666;}

@shayhowe & @darbyfreyModular HTML & CSSUSE CLASSES• Write understandable class names• Avoid unnecessary nesting• Use same strength specificity

@shayhowe & @darbyfreyModular HTML & CSSUSE CLASSESBad.feat-‐box .callout .pr { font-‐size: 12px;}.feat-‐box .callout .pr .un { color: #39f;}

@shayhowe & @darbyfreyModular HTML & CSSUSE CLASSESGood.feat-‐box .price { font-‐size: 12px;}.feat-‐box .unit { color: #39f;}

@shayhowe & @darbyfreyModular HTML & CSSUSE CLASSESBad.btn.large { font-‐size: 24px; padding: 15px 30px;}<div class="btn large">...</div>

@shayhowe & @darbyfreyModular HTML & CSSUSE CLASSESGood.btn-‐large { font-‐size: 24px; padding: 15px 30px;}<div class="btn-‐large">...</div>

@shayhowe & @darbyfreyModular HTML & CSSASSEMBLINGLAYOUT

@shayhowe & @darbyfreyModular HTML & CSSABSTRACT STRUCTURE• Separate presentation (or theme) from layout• Create an object layer for layout• Create a skin layer for theme• Use a grid

@shayhowe & @darbyfreyModular HTML & CSSABSTRACT STRUCTUREBad.news { background: #eee; color: #666; margin: 0 10px; width: 400px;}<div class="news">...</div>

@shayhowe & @darbyfreyModular HTML & CSSABSTRACT STRUCTUREGood.grid-‐4 { margin: 0 10px; width: 400px;}.feat-‐box { background: #eee; color: #666;}<div class="grid-‐4 feat-‐box">...</div>

@shayhowe & @darbyfreyModular HTML & CSSTRANSPARENTIZE ELEMENTS• Stylize elements to be transparent• Keep visual properties apart from layoutproperties

@shayhowe & @darbyfreyModular HTML & CSSTRANSPARENTIZE ELEMENTSBad.pagination { border-‐radius: 5px; border: 1px solid #eee; margin: 0 10px; width: 620px;}<ul class="pagination">...</ul>

@shayhowe & @darbyfreyModular HTML & CSSTRANSPARENTIZE ELEMENTSGood.grid-‐8 { margin: 0 10px; width: 620px;}.offset-‐box { border-‐radius: 5px; border: 1px solid #eee;}<ul class="grid-‐8 offset-‐box">...</ul>

@shayhowe & @darbyfreyModular HTML & CSSCREATE ADAPTABLE LAYOUTS• Height and width should be flexible• Height should extend with content• Width should extend with a grid

@shayhowe & @darbyfreyModular HTML & CSSCREATE ADAPTABLE LAYOUTSBad#main { float: left; margin: 0 10px; width: 620px;}#aside { float: left; margin: 0 10px; width: 300px;}

@shayhowe & @darbyfreyModular HTML & CSSCREATE ADAPTABLE LAYOUTSGood.grid-‐4,.grid-‐8 { float: left; margin: 0 10px;}.grid-‐4 { width: 300px;}.grid-‐8 { width: 620px;}

@shayhowe & @darbyfreyModular HTML & CSSASSEMBLING LAYOUTIN PRACTICEhttp://bit.ly/modular-html-css

@shayhowe & @darbyfreyModular HTML & CSSACCOMMODATINGCONTENT

@shayhowe & @darbyfreyModular HTML & CSSSEPARATE CONTENT• Separate content from container• Stylize content regardless of container

@shayhowe & @darbyfreyModular HTML & CSSSEPARATE CONTENTBad.alert { background: #f2dede; border-‐radius: 10px; color: #b94a48; padding: 10px 20px;}<div class="alert">...</div>

@shayhowe & @darbyfreyModular HTML & CSSSEPARATE CONTENTGood.alert { border-‐radius: 10px; padding: 10px 20px;}.alert-‐error { background: #f2dede; color: #b94a48;}<div class="alert alert-‐error">...</div>

@shayhowe & @darbyfreyModular HTML & CSSAVOID PARENT DEPENDENCY• Remove parent container dependency• Decouple CSS from HTML• Create components to be used anywhere

@shayhowe & @darbyfreyModular HTML & CSSAVOID PARENT DEPENDENCYBad.feat-‐box { background: #eee;}article .feat-‐box { background: #fff;}<article> <div class="feat-‐box">...</div></article>

@shayhowe & @darbyfreyModular HTML & CSSAVOID PARENT DEPENDENCYGood.feat-‐box { background: #eee;}.feat-‐box-‐alt { background: #fff;}<article> <div class="feat-‐box-‐alt">...</div></article>

@shayhowe & @darbyfreyModular HTML & CSSFAVOR SEMANTICS• Allow elements to adapt• Uses individual classes to extend modules

@shayhowe & @darbyfreyModular HTML & CSSFAVOR SEMANTICSBad.feat-‐box h2 { color: #f60; font: 18px Helvetica, sans-‐serif;}<div class="feat-‐box"> <h2>...</h2></div>

@shayhowe & @darbyfreyModular HTML & CSSFAVOR SEMANTICSGood.feat-‐subhead { color: #f60; font: 18px Helvetica, sans-‐serif;}<div class="feat-‐box"> <h2 class="feat-‐subhead">...</h2></div>

@shayhowe & @darbyfreyModular HTML & CSSACCOMMODATING CONTENTIN PRACTICEhttp://bit.ly/modular-html-css

@shayhowe & @darbyfreyModular HTML & CSSTURBOWITH SCSS

@shayhowe & @darbyfreyModular HTML & CSSSETUP

@shayhowe & @darbyfreyModular HTML & CSSSCSS• CSS preprocessor• Extension of CSS3• Compiled using Ruby• Adds nested rules, variables, mixins, selectorinheritance, and more

@shayhowe & @darbyfreyModular HTML & CSSSCSSSCSS Syntax.new { color: #f60; .item { font-‐size: 24px; }}Compiled CSS.new { color: #f60;}.new .item { font-‐size: 24px;}

@shayhowe & @darbyfreyModular HTML & CSSSCSS VS. SASSSCSS Syntax.new { color: #f60; .item { font-‐size: 24px; }}Sass Syntax.new color: #f60 .item font-‐size: 24px

@shayhowe & @darbyfreyModular HTML & CSSCOMPASS• Built on top of Sass• Includes reusable patterns• Provides cross browser CSS3 mixins

@shayhowe & @darbyfreyModular HTML & CSSSCOUT APP• GUI for compiling Sass and Compass• Available for both Mac and Windows

@shayhowe & @darbyfreyModular HTML & CSSSETUPIN PRACTICEhttp://bit.ly/modular-html-css

@shayhowe & @darbyfreyModular HTML & CSSORGANIZATION

@shayhowe & @darbyfreyModular HTML & CSSTECHNIQUESettings• Utility styles (Extends, Mixins, Variables)Base• Core styles for entire site (Layout, Typography)Components• UI concepts & design patterns (Buttons, List, Navigation)Modules• Business logic (Aside, Header, Footer)

@shayhowe & @darbyfreyModular HTML & CSSTECHNIQUE

@shayhowe & @darbyfreyModular HTML & CSSPARTIALS• Must begin with an underscore, _• Must have a file extension of .scss, not .css.scss

@shayhowe & @darbyfreyModular HTML & CSSIMPORTSworkshop.css.scss// Compass@import "compass/css3";// Settings@import "settings/variables";// Base@import "base/layout";...

@shayhowe & @darbyfreyModular HTML & CSSORGANIZATIONIN PRACTICEhttp://bit.ly/modular-html-css

@shayhowe & @darbyfreyModular HTML & CSSSETTINGS

@shayhowe & @darbyfreyModular HTML & CSSVARIABLES• Allow common values to be shared• Assigned with a dollar sign, name, colon, and value• May be a number, string, boolean, null, or multiplecomma separated values

@shayhowe & @darbyfreyModular HTML & CSSVARIABLESSCSS Syntax$font-‐base: 14px;$sans-‐serif: "Open Sans", sans-‐serif;p { font: $font-‐base $sans-‐serif;}Compiled CSSp { font: 14px "Open Sans", sans-‐serif;}

@shayhowe & @darbyfreyModular HTML & CSSEXTENDS• Share common styles without duplicating them• Keep code weight low• Generates detailed selectors• Assigned with the @extend rule followed by theselector

@shayhowe & @darbyfreyModular HTML & CSSEXTENDSSCSS Syntax.alert { border-‐radius: 10px;}.alert-‐error { @extend .alert; color: #b94a48;}.alert-‐success { @extend .alert; color: #468847;}Compiled CSS.alert,.alert-‐error,.alert-‐success { border-‐radius: 10px;}.alert-‐error { color: #b94a48;}.alert-‐success { color: #468847;}

@shayhowe & @darbyfreyModular HTML & CSSPLACEHOLDERS• Similar to extends• Selector is assigned with a percentage sign• Extended selector is not output, only the styles

@shayhowe & @darbyfreyModular HTML & CSSPLACEHOLDERSSCSS Syntax%alert { border-‐radius: 10px;}.alert-‐error { @extend %alert; color: #b94a48;}.alert-‐success { @extend %alert; color: #468847;}Compiled CSS.alert-‐error,.alert-‐success { border-‐radius: 10px;}.alert-‐error { color: #b94a48;}.alert-‐success { color: #468847;}

@shayhowe & @darbyfreyModular HTML & CSSMIXINS• Share similar styles based off given arguments• Duplicates properties, providing different values• Assigned with the @mixin rule followed by thename and arguments

@shayhowe & @darbyfreyModular HTML & CSSMIXINSSCSS Syntax@mixin btn($color) { color: $color;}.btn { @mixin btn(#f60);}Compiled CSS.btn { color: #f60;}

@shayhowe & @darbyfreyModular HTML & CSSSETTINGSIN PRACTICEhttp://bit.ly/modular-html-css

@shayhowe & @darbyfreyModular HTML & CSSREFACTOR

@shayhowe & @darbyfreyModular HTML & CSSCOMMENTS• Two different types of comments• Standard CSS comments as normal• Silent comments, assigned with two forwardslashes, not compiled in the output

@shayhowe & @darbyfreyModular HTML & CSSCOMMENTSSCSS Syntax/* Normal comment */.awesome { color: #3276b1;}// Omitted comment.very-‐awesome { color: #47a447;}Compiled CSS/* Normal comment */.awesome { color: #3276b1;}.very-‐awesome { color: #47a447;}

@shayhowe & @darbyfreyModular HTML & CSSPARENT SELECTOR• Add styles to a previous selector• Commonly used with pseudo classes• Assigned with an ampersand• May also be used as the key selector

@shayhowe & @darbyfreyModular HTML & CSSPARENT SELECTORSCSS Syntaxa { color: #8ec63f; &:hover { color: #f7941d; }}Compiled CSSa { color: #8ec63f;}a:hover { color: #f7941d;}

@shayhowe & @darbyfreyModular HTML & CSSINTERPOLATION• Occasionally SCSS need to be interpolated• Most commonly happens as part of a class name,property name, or inside a string plain text• Assigned by placing the value inside #{...}

@shayhowe & @darbyfreyModular HTML & CSSINTERPOLATIONSCSS Syntax$logo: twitter;$offset: left;.#{$logo} { #{$offset}: 20px;}Compiled CSS.twitter { left: 20px;}

@shayhowe & @darbyfreyModular HTML & CSSREFACTORIN PRACTICEhttp://bit.ly/modular-html-css

@shayhowe & @darbyfreyModular HTML & CSSCOMPILE

@shayhowe & @darbyfreyModular HTML & CSSOUTPUT STYLES• SCSS has multiple output styles• Nested or expanded is best for development• Compact or compressed is best for production

@shayhowe & @darbyfreyModular HTML & CSSCOMPILEIN PRACTICEhttp://bit.ly/modular-html-css

@shayhowe & @darbyfreyModular HTML & CSSONWARD

Ships on the Roadstead by Willem van de Velde the Younger

@shayhowe & @darbyfreyModular HTML & CSSAPPROACH• Stop thinking about pages• Start thinking about components• Take visual inventory

@shayhowe & @darbyfreyModular HTML & CSSTHEMES• Decouple HTML and CSS• Separate presentation from layout• Separate content from container• Extend elements with classes

@shayhowe & @darbyfreyModular HTML & CSSOUTCOMES• Maintainability!• Reusable code, less duplication• Flexibility and extensibility• Improved standards

@shayhowe & @darbyfreyModular HTML & CSSWHAT’S NEXTBuild a style guide• Twitter Bootstrap, Zurb FoundationReview methodologies• OOCSS, SMACSSTest your code• CSS Lint, Inspector, PageSpeed

@shayhowe & @darbyfreyModular HTML & CSSTHANK YOU!Questions?@shayhowe@darbyfrey

Movatterモバイル変換

Change Language

Modular HTML & CSS Turbo Workshop

Embed presentation

Recommended

More Related Content

What's hot

Viewers also liked

Similar to Modular HTML & CSS Turbo Workshop

More from Shay Howe

Recently uploaded

Modular HTML & CSS Turbo Workshop