modular html, css, & js workshop

Modular

HTML, CSS, & JSWorkshop

Shay [email protected]

Darby [email protected]

Modular HTML, CSS, & JS @shayhowe & @darbyfrey

Shay Howe@shayhowe

learn.shayhowe.com

Darby Frey@darbyfrey

darbyfrey.com


1 Groundwork

2 HTML & CSS

3 JavaScript

4 Onward


1 Groundwork


Common Problems• Websites have difficulty scaling• Code bases become 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 classesarticle#main aside ul li {...}section:last-‐child 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: 50%;}#contact li:nth-‐child(3) textarea { width: 75%;}


Best Bad PracticesGood.col-‐1 { width: 50%;}.col-‐2 { width: 75%;}


Maintainability


Code Must Be…• Organized• Modular• Performant


MethodologiesOOCSS• Object-Oriented CSS

From Nicole Sullivan – oocss.org

SMACSS• Scalable and Modular Architecture for CSS

From Jonathan Snook – smacss.com


Reuse Code• Do not duplicate code• Remove old code• Defer loading subsequent styles


Reuse CodeBad.news { background: #ccc; color: #666;}.social { background: #ccc; color: #666;}


Reuse CodeGood.news,.social { background: #ccc; color: #666;}

Better.feat-‐box { background: #ccc; 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;}


Specificity?• Determines which styles are applied• Each selector has a specificity weight• High specificity beats low specificity• Low specificity is key


Measuring SpecificityFormulaIDs, Classes/Pseudo-classes/Attributes, Elements

High Specificity (Bad)

#primary #main div.gallery figure.media {...}IDs: 2, Classes: 2, Elements: 2 — Compiled: 2–2–2

Low Specificity (Good)

.gallery-‐media {...}IDs: 0, Classes: 1, Elements: 0 — Compiled: 0-1-0


Watch Specificity• Be explicit• Keep specificity low• Never use IDs or !important• Avoid nested selectorsheader#main div.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;}


2 HTML & CSS


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: #ccc; color: #666; margin: 0 10px; width: 400px;}

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


Abstract StructureGood.grid-‐4 { margin: 0 10px; width: 400px;}.feat-‐box { background: #ccc; 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;}


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: #ccc;}article .feat-‐box { background: #fff;}

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


Avoid Parent DependencyGood.feat-‐box { background: #ccc;}.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>


In Practice

HTML & CSShttp://bit.ly/modular-html-css-js


3 JavaScript


JavaScriptfs.readdir(source, function(err, files) { if (err) { console.log('Error finding files: ' + err) } else { files.forEach(function(filename, fileIndex) { console.log(filename) gm(source + filename).size(function(err, values) { if (err) { console.log('Error identifying file size: ' + err) } else { console.log(filename + ' : ' + values) aspect = (values.width / values.height) widths.forEach(function(width, widthIndex) { height = Math.round(width / aspect) console.log('resizing ' + filename + 'to ' + height + 'x' + height) this.resize(width, height).write(destination + 'w' + width + '_' + filename, function(err) { if (err) console.log('Error writing file: ' + err) }) }.bind(this)) } }) }) }})

http://callbackhell.com


JavaScriptimage = new Image('filename.jpg');

image.resize(400, 300);


Abstract and Encapsulatefunctionality with Objects


JavaScript Primer


Functions

http://todomvc.com

http://todomvc.com


Functionsfunction multiply(one, two){ return one * two;};

function(one, two){ return one * two;};


FunctionsAssigned to Variablesvar multiply = function(one, two){ return one * two;};

multiply(3,4); => 12


FunctionsElements in an Arrayvar multiply = function(one, two){ return one * two;};

var array = [1, 2, 3, multiply];

array[3](3,4); => 12


FunctionsPass as Arguments to Functions (Callback Pattern)

var multiply = function(one, two){ return one * two;};

var sumSquare = function(one, two, callback){ sum = one + two; return callback(sum, sum);};

sumSquare(1, 2, multiply); => 9


FunctionsProperties of an Objectvar person = { name: 'Darby Frey', location: 'Chicago', nameAndLoc: function(name, location){ return name + ' -‐ ' + location; }};

person.nameAndLoc(person.name,person.location); => 'Darby Frey -‐ Chicago'


Objects

http://todomvc.com

http://todomvc.com


Objects are Containers forProperties and Functions


ObjectsSimple Objectvar person = { name: 'Darby Frey', location: 'Chicago', twitter: '@darbyfrey'};

person.name; => 'Darby Frey'person.location; => 'Chicago'person.twitter; => '@darbyfrey'


ObjectsFunctions as Propertiesvar person = { name: 'Darby Frey', location: 'Chicago', twitter: '@darbyfrey', nameAndLoc: function(){ return this.name + ' -‐ ' + this.location; }};

person.nameAndLoc(); =>'Darby Frey -‐ Chicago'


Constructor Functions

http://todomvc.com

http://todomvc.com


Constructor FunctionsWhen a function is called with the new keyword it’s a constructor function

Constructor Functions• Create a new instance of the object• Create their own context accessible by the this keyword


Constructor Functionsvar Person = function(){}

me = new Person();typeof me; => object

me; => Person {}me.name; => undefined

me.name = 'Darby Frey';me; => Person {name: 'Darby Frey'}


Constructor Functionsthis is the Contextvar Person = function(name, location){}

me = new Person('Darby Frey', 'Chicago');me; => Person {}


Constructor Functionsthis is the Contextvar Person = function(name, location){ this.name = name; this.location = location;};

me = new Person('Darby Frey', 'Chicago');me; => Person {name: "Darby Frey", location: "Chicago"};

me.name; => 'Darby Frey'


Prototype

http://todomvc.com

http://todomvc.com


Prototype• A Prototype is a blueprint of Attributes and

Functions given to an Instance of an Object created by a Constructor Function

• Attributes and Functions defined in a Prototype will be available to every Instance of that Object


Prototypevar Person = function(name, location){ this.name = name; this.location = location;};

Person.prototype = { coolGuy: true, chicagoan: function(){ return this.location == 'Chicago' }};


Prototypedarby = new Person('Darby Frey', 'Chicago');darby.coolGuy; => truedarby.chicagoan(); => true

shay = new Person('Shay Howe', 'Ohio');shay.coolGuy; => trueshay.chicagoan(); => false


In Practice

JavaScripthttp://bit.ly/modular-html-css-js


4 Onward


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• Abstract functionality with objects• Leverage JavaScript templates


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, JS Lint, Inspector, PageSpeed,

Console


Thank You!@shayhowe

[email protected]

modular html, css, & js workshop

Design