modular html & css turbo workshop

TACTICALHTML & CSS

MODULAR

HTML & CSSTURBO WORKSHOP

Shay [email protected]

Darby [email protected]

@shayhowe & @darbyfrey Modular HTML & CSS

Shay Howe@shayhowe

learn.shayhowe.com

Darby Frey@darbyfrey

darbyfrey.com


1. The Problem2. Groundwork3. Assembling Layout4. Accommodating Content5. Turbo with SCSS 6. Onward

OUR SCHEDULE


THEPROBLEM

The Gust by Willem van de Velde the Younger


COMMON PROBLEMS• Websites have difficulty scaling

• Code becomes brittle

• Files and code bases begin to swell


WHAT’S WRONG• Best practices aren’t exactly best practices

• Standards need to evolve


BEST BAD PRACTICES• Avoid extra elements

• Avoid classes

• Leverage type selectors

• Leverage descendent selectors


BEST 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 {...}


BEST BAD PRACTICESBad#contact li:nth-‐child(1) input,#contact li:nth-‐child(2) input { width: 160px;}#contact li:nth-‐child(3) textarea { width: 280px;}


BEST BAD PRACTICESGood.col-‐1 { width: 160px;}.col-‐2 { width: 280px;}


SPECIFICITY?• Specificity determines which styles are applied

• Each selector has a specificity weight

• High specificity beats low specificity

• Low specificity is key


MEASURING SPECIFICITYFormula

• IDs, Classes/Pseudo-classes/Attributes, Elements

High Specificity (Bad)

#primary #main div.gallery figure.mediaIDs: 2, Classes: 2, Elements: 2 — Compiled: 2–2–2

Low Specificity (Good)

.gallery-‐mediaIDs: 0, Classes: 1, Elements: 0 — Compiled: 0–1–0


WATCH SPECIFICITY• Be explicit

• Keep specificity low

• Never use IDs or !important

• Avoid nested selectors (#main .spotlight strong span)


WATCH SPECIFICITYBad#primary #main div.gallery { text-‐transform: uppercase;}#primary #main div.gallery figure.media { background: #ccc;}


WATCH SPECIFICITYGood.gallery { text-‐transform: uppercase;}.gallery-‐media { background: #ccc;}

Parade of the Black Sea Fleet by Ivan Aivazovsky


MAINTAINABILITYCode must be...

• Organized

• Modular

• Performant


METHODOLOGIESOOCSS

• Object-Oriented CSSFrom Nicole Sullivan – oocss.org

SMACSS

• Scalable and Modular Architecture for CSSFrom Jonathan Snook – smacss.com


GROUNDWORK


REUSE CODE• Do not duplicate code

• Remove old code

• Defer loading subsequent styles


REUSE CODEBad.news { background: #eee; color: #666;}.social { background: #eee; color: #666;}


REUSE CODEGood.news,.social { background: #eee; color: #666;}

Better.feat-‐box { background: #eee; color: #666;}


USE CLASSES• Write understandable class names

• Avoid unnecessary nesting

• Use same strength specificity


USE CLASSESBad.feat-‐box .callout .pr { font-‐size: 12px;}.feat-‐box .callout .pr .un { color: #39f;}


USE CLASSESGood.feat-‐box .price { font-‐size: 12px;}.feat-‐box .unit { color: #39f;}


USE CLASSESBad.btn.large { font-‐size: 24px; padding: 15px 30px;}

<div class="btn large">...</div>


USE CLASSESGood.btn-‐large { font-‐size: 24px; padding: 15px 30px;}

<div class="btn-‐large">...</div>


ASSEMBLINGLAYOUT


ABSTRACT STRUCTURE• Separate presentation (or theme) from layout

• Create an object layer for layout

• Create a skin layer for theme

• Use a grid


ABSTRACT STRUCTUREBad.news { background: #eee; color: #666; margin: 0 10px; width: 400px;}

<div class="news">...</div>


ABSTRACT STRUCTUREGood.grid-‐4 { margin: 0 10px; width: 400px;}.feat-‐box { background: #eee; color: #666;}

<div class="grid-‐4 feat-‐box">...</div>


TRANSPARENTIZE ELEMENTS• Stylize elements to be transparent

• Keep visual properties apart from layout properties


TRANSPARENTIZE ELEMENTSBad.pagination { border-‐radius: 5px; border: 1px solid #eee; margin: 0 10px; width: 620px;}

<ul class="pagination">...</ul>


TRANSPARENTIZE ELEMENTSGood.grid-‐8 { margin: 0 10px; width: 620px;}.offset-‐box { border-‐radius: 5px; border: 1px solid #eee;}

<ul class="grid-‐8 offset-‐box">...</ul>


CREATE ADAPTABLE LAYOUTS• Height and width should be flexible

• Height should extend with content

• Width should extend with a grid


CREATE ADAPTABLE LAYOUTSBad#main { float: left; margin: 0 10px; width: 620px;}#aside { float: left; margin: 0 10px; width: 300px;}


CREATE ADAPTABLE LAYOUTSGood.grid-‐4,.grid-‐8 { float: left; margin: 0 10px;}.grid-‐4 { width: 300px;}.grid-‐8 { width: 620px;}


ASSEMBLING LAYOUT

IN PRACTICEhttp://bit.ly/modular-html-css


ACCOMMODATINGCONTENT


SEPARATE CONTENT• Separate content from container

• Stylize content regardless of container


SEPARATE CONTENTBad.alert { background: #f2dede; border-‐radius: 10px; color: #b94a48; padding: 10px 20px;}

<div class="alert">...</div>


SEPARATE CONTENTGood.alert { border-‐radius: 10px; padding: 10px 20px;}.alert-‐error { background: #f2dede; color: #b94a48;}

<div class="alert alert-‐error">...</div>


AVOID PARENT DEPENDENCY• Remove parent container dependency

• Decouple CSS from HTML

• Create components to be used anywhere


AVOID PARENT DEPENDENCYBad.feat-‐box { background: #eee;}article .feat-‐box { background: #fff;}

<article> <div class="feat-‐box">...</div></article>


AVOID PARENT DEPENDENCYGood.feat-‐box { background: #eee;}.feat-‐box-‐alt { background: #fff;}

<article> <div class="feat-‐box-‐alt">...</div></article>


FAVOR SEMANTICS• Allow elements to adapt

• Uses individual classes to extend modules


FAVOR SEMANTICSBad.feat-‐box h2 { color: #f60; font: 18px Helvetica, sans-‐serif;}

<div class="feat-‐box"> <h2>...</h2></div>


FAVOR SEMANTICSGood.feat-‐subhead { color: #f60; font: 18px Helvetica, sans-‐serif;}

<div class="feat-‐box"> <h2 class="feat-‐subhead">...</h2></div>


ACCOMMODATING CONTENT



TURBOWITH SCSS


SETUP


SCSS• CSS preprocessor

• Extension of CSS3

• Compiled using Ruby

• Adds nested rules, variables, mixins, selector inheritance, and more


SCSSSCSS Syntax.new { color: #f60; .item { font-‐size: 24px; }}

Compiled CSS.new { color: #f60;}.new .item { font-‐size: 24px;}


SCSS VS. SASSSCSS Syntax.new { color: #f60; .item { font-‐size: 24px; }}

Sass Syntax.new color: #f60 .item font-‐size: 24px


COMPASS• Built on top of Sass

• Includes reusable patterns

• Provides cross browser CSS3 mixins


SCOUT APP• GUI for compiling Sass and Compass

• Available for both Mac and Windows


SETUP



ORGANIZATION


TECHNIQUESettings• 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)


TECHNIQUE


PARTIALS• Must begin with an underscore, _

• Must have a file extension of .scss, not .css.scss


IMPORTSworkshop.css.scss// Compass@import "compass/css3";

// Settings@import "settings/variables";

// Base@import "base/layout";

...


ORGANIZATION



SETTINGS


VARIABLES• Allow common values to be shared

• Assigned with a dollar sign, name, colon, and value

• May be a number, string, boolean, null, or multiple comma separated values


VARIABLESSCSS Syntax$font-‐base: 14px;$sans-‐serif: "Open Sans", sans-‐serif;p { font: $font-‐base $sans-‐serif;}

Compiled CSSp { font: 14px "Open Sans", sans-‐serif;}


EXTENDS• Share common styles without duplicating them

• Keep code weight low

• Generates detailed selectors

• Assigned with the @extend rule followed by the

selector


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


PLACEHOLDERS• Similar to extends

• Selector is assigned with a percentage sign

• Extended selector is not output, only the styles


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


MIXINS• Share similar styles based off given arguments

• Duplicates properties, providing different values

• Assigned with the @mixin rule followed by the

name and arguments


MIXINSSCSS Syntax@mixin btn($color) { color: $color;}.btn { @mixin btn(#f60);}

Compiled CSS.btn { color: #f60;}


SETTINGS



REFACTOR


COMMENTS• Two different types of comments

• Standard CSS comments as normal

• Silent comments, assigned with two forward slashes, not compiled in the output


COMMENTSSCSS Syntax/* Normal comment */.awesome { color: #3276b1;}// Omitted comment.very-‐awesome { color: #47a447;}

Compiled CSS/* Normal comment */.awesome { color: #3276b1;}.very-‐awesome { color: #47a447;}


PARENT SELECTOR• Add styles to a previous selector

• Commonly used with pseudo classes

• Assigned with an ampersand

• May also be used as the key selector


PARENT SELECTORSCSS Syntaxa { color: #8ec63f; &:hover { color: #f7941d; }}

Compiled CSSa { color: #8ec63f;}a:hover { color: #f7941d;}


INTERPOLATION• 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 #{...}


INTERPOLATIONSCSS Syntax$logo: twitter;$offset: left;.#{$logo} { #{$offset}: 20px;}

Compiled CSS.twitter { left: 20px;}


REFACTOR



COMPILE


OUTPUT STYLES• SCSS has multiple output styles

• Nested or expanded is best for development

• Compact or compressed is best for production


COMPILE



ONWARD

Ships on the Roadstead by Willem van de Velde the Younger


APPROACH• Stop thinking about pages

• Start thinking about components

• Take visual inventory


THEMES• Decouple HTML and CSS

• Separate presentation from layout

• Separate content from container

• Extend elements with classes


OUTCOMES• Maintainability!

• Reusable code, less duplication

• Flexibility and extensibility

• Improved standards


WHAT’S NEXTBuild a style guide

• Twitter Bootstrap, Zurb Foundation

Review methodologies

• OOCSS, SMACSS

Test your code

• CSS Lint, Inspector, PageSpeed


THANK YOU!Questions?

@shayhowe

@darbyfrey

modular html & css turbo workshop

Design