Slide 1

Slide 1 text

Modular HTML, CSS, & JS Workshop Shay Howe @shayhowe learn.shayhowe.com Darby Frey @darbyfrey darbyfrey.com

Slide 2

Slide 2 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Shay Howe @shayhowe learn.shayhowe.com Darby Frey @darbyfrey darbyfrey.com

Slide 3

Slide 3 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey 1 Groundwork 2 HTML & CSS 3 JavaScript 4 Onward

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Common Problems • Websites have difficulty scaling • Code bases become brittle • Files and code bases begin to swell

Slide 6

Slide 6 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey What’s Wrong • Best practices aren’t exactly best practices • Standards need to evolve

Slide 7

Slide 7 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Best Bad Practices • Avoid extra elements • Avoid classes • Leverage type selectors • Leverage descendent selectors

Slide 8

Slide 8 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Best Bad Practices Avoiding classes article#main  aside  ul  li  {...} section:last-­‐child  div:nth-­‐child(7)  a  {...} Leveraging selectors a.btn  {...} #main  a.btn  {...} #main  div.feature  a.btn  {...}

Slide 9

Slide 9 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Best Bad Practices Bad #contact  li:nth-­‐child(1)  input, #contact  li:nth-­‐child(2)  input  {    width:  50%; } #contact  li:nth-­‐child(3)  textarea  {    width:  75%; }

Slide 10

Slide 10 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Best Bad Practices Good .col-­‐1  {    width:  50%; } .col-­‐2  {    width:  75%; }

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Code Must Be… • Organized • Modular • Performant

Slide 13

Slide 13 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Methodologies OOCSS • Object-Oriented CSS From Nicole Sullivan – oocss.org SMACSS • Scalable and Modular Architecture for CSS From Jonathan Snook – smacss.com

Slide 14

Slide 14 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Reuse Code • Do not duplicate code • Remove old code • Defer loading subsequent styles

Slide 15

Slide 15 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Reuse Code Bad .news  {    background:  #ccc;    color:  #666; } .social  {    background:  #ccc;    color:  #666; }

Slide 16

Slide 16 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Reuse Code Good .news, .social  {    background:  #ccc;    color:  #666; } Better .feat-­‐box  {    background:  #ccc;    color:  #666; }

Slide 17

Slide 17 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Use Classes • Write understandable class names • Avoid unnecessary nesting • Use same strength specificity

Slide 18

Slide 18 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Use Classes Bad .feat-­‐box  .callout  .pr  {    font-­‐size:  12px; } .feat-­‐box  .callout  .pr  .un  {    color:  #39f; }

Slide 19

Slide 19 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Use Classes Good .feat-­‐box  .price  {    font-­‐size:  12px; } .feat-­‐box  .unit  {    color:  #39f; }

Slide 20

Slide 20 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Specificity? • Determines which styles are applied • Each selector has a specificity weight • High specificity beats low specificity • Low specificity is key

Slide 21

Slide 21 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Measuring Specificity Formula IDs, 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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Watch Specificity • Be explicit • Keep specificity low • Never use IDs or !important • Avoid nested selectors header#main  div.spotlight  strong  span

Slide 24

Slide 24 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Watch Specificity Bad #primary  #main  div.gallery  {    text-­‐transform:  uppercase; } #primary  #main  div.gallery  figure.media  {    background:  #ccc; }

Slide 25

Slide 25 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Watch Specificity Good .gallery  {    text-­‐transform:  uppercase; } .gallery-­‐media  {    background:  #ccc; }

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Abstract Structure • Separate presentation (or theme) from layout • Create an object layer for layout • Create a skin layer for theme • Use a grid

Slide 28

Slide 28 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Abstract Structure Bad .news  {    background:  #ccc;    color:  #666;    margin:  0  10px;    width:  400px; }
...

Slide 29

Slide 29 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Abstract Structure Good .grid-­‐4  {    margin:  0  10px;    width:  400px; } .feat-­‐box  {    background:  #ccc;    color:  #666; }
...

Slide 30

Slide 30 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Transparentize Elements • Stylize elements to be transparent • Keep visual properties apart from layout properties

Slide 31

Slide 31 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Transparentize Elements Bad .pagination  {    border-­‐radius:  5px;    border:  1px  solid  #eee;    margin:  0  10px;    width:  620px; }
    ...

Slide 32

Slide 32 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Transparentize Elements Good .grid-­‐8  {    margin:  0  10px;    width:  620px; } .offset-­‐box  {    border-­‐radius:  5px;    border:  1px  solid  #eee; }
    ...

Slide 33

Slide 33 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Create Adaptable Layouts • Height and width should be flexible • Height should extend with content • Width should extend with a grid

Slide 34

Slide 34 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Create Adaptable Layouts Bad #main  {    float:  left;    margin:  0  10px;    width:  620px; } #aside  {    float:  left;    margin:  0  10px;    width:  300px; }

Slide 35

Slide 35 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Create Adaptable Layouts Good .grid-­‐4, .grid-­‐8  {    float:  left;    margin:  0  10px; } .grid-­‐4  {    width:  300px; } .grid-­‐8  {    width:  620px; }

Slide 36

Slide 36 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Separate Content • Separate content from container • Stylize content regardless of container

Slide 37

Slide 37 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Separate Content Bad .alert  {    background:  #f2dede;    border-­‐radius:  10px;    color:  #b94a48;    padding:  10px  20px; }
...

Slide 38

Slide 38 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Separate Content Good .alert  {    border-­‐radius:  10px;    padding:  10px  20px; } .alert-­‐error  {    background:  #f2dede;    color:  #b94a48; }
...

Slide 39

Slide 39 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Avoid Parent Dependency • Remove parent container dependency • Decouple CSS from HTML • Create components to be used anywhere

Slide 40

Slide 40 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Avoid Parent Dependency Bad .feat-­‐box  {    background:  #ccc; } article  .feat-­‐box  {    background:  #fff; }    
...

Slide 41

Slide 41 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Avoid Parent Dependency Good .feat-­‐box  {    background:  #ccc; } .feat-­‐box-­‐alt  {    background:  #fff; }    
...

Slide 42

Slide 42 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Favor Semantics • Allow elements to adapt • Uses individual classes to extend modules

Slide 43

Slide 43 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Favor Semantics Bad .feat-­‐box  h2  {    color:  #f60;    font:  18px  Helvetica,  sans-­‐serif; }
   

...

Slide 44

Slide 44 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Favor Semantics Good .feat-­‐subhead  {    color:  #f60;    font:  18px  Helvetica,  sans-­‐serif; }
   

...

Slide 45

Slide 45 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey In Practice HTML & CSS http:/ /bit.ly/modular-html-css-js

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey JavaScript fs.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

Slide 52

Slide 52 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey JavaScript image  =  new  Image('filename.jpg'); image.resize(400,  300);

Slide 53

Slide 53 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Abstract and Encapsulate functionality with Objects

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

No content

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions function  multiply(one,  two){    return  one  *  two; }; function(one,  two){    return  one  *  two; };

Slide 59

Slide 59 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions Assigned to Variables var  multiply  =  function(one,  two){    return  one  *  two; }; multiply(3,4);  =>  12

Slide 60

Slide 60 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions Elements in an Array var  multiply  =  function(one,  two){    return  one  *  two; }; var  array  =  [1,  2,  3,  multiply]; array[3](3,4);  =>  12

Slide 61

Slide 61 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions Pass 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

Slide 62

Slide 62 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions Properties of an Object var  person  =  {    name:  'Darby  Frey',    location:  'Chicago',    nameAndLoc:  function(name,  location){        return  name  +  '  -­‐  '  +  location;    } }; person.nameAndLoc(person.name,person.location);   =>  'Darby  Frey  -­‐  Chicago'

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Objects are Containers for Properties and Functions

Slide 65

Slide 65 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Objects Simple Object var  person  =  {    name:  'Darby  Frey',    location:  'Chicago',    twitter:  '@darbyfrey' }; person.name;  =>  'Darby  Frey' person.location;  =>  'Chicago' person.twitter;  =>  '@darbyfrey'

Slide 66

Slide 66 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Objects Functions as Properties var  person  =  {    name:  'Darby  Frey',    location:  'Chicago',    twitter:  '@darbyfrey',    nameAndLoc:  function(){        return  this.name  +  '  -­‐  '  +  this.location;    } }; person.nameAndLoc();  =>'Darby  Frey  -­‐  Chicago'

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Constructor Functions When 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

Slide 69

Slide 69 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Constructor Functions var  Person  =  function(){} me  =  new  Person(); typeof  me;  =>  object me;  =>  Person  {} me.name;  =>  undefined me.name  =  'Darby  Frey'; me;  =>  Person  {name:  'Darby  Frey'}

Slide 70

Slide 70 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Constructor Functions this is the Context var  Person  =  function(name,  location){} me  =  new  Person('Darby  Frey',  'Chicago'); me;  =>  Person  {}

Slide 71

Slide 71 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Constructor Functions this is the Context var  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'

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey 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

Slide 74

Slide 74 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Prototype var  Person  =  function(name,  location){    this.name  =  name;    this.location  =  location; }; Person.prototype  =  {    coolGuy:  true,    chicagoan:  function(){        return  this.location  ==  'Chicago'    } };

Slide 75

Slide 75 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Prototype darby  =  new  Person('Darby  Frey',  'Chicago'); darby.coolGuy;  =>  true darby.chicagoan();  =>  true shay  =  new  Person('Shay  Howe',  'Ohio'); shay.coolGuy;  =>  true shay.chicagoan();  =>  false

Slide 76

Slide 76 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey In Practice JavaScript http:/ /bit.ly/modular-html-css-js

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Approach • Stop thinking about pages • Start thinking about components • Take visual inventory

Slide 79

Slide 79 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Themes • Decouple HTML and CSS • Separate presentation from layout • Separate content from container • Extend elements with classes • Abstract functionality with objects • Leverage JavaScript templates

Slide 80

Slide 80 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Outcomes • Maintainability! • Reusable code, less duplication • Flexibility and extensibility • Improved standards

Slide 81

Slide 81 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey What’s next Build a style guide • Twitter Bootstrap, Zurb Foundation Review methodologies • OOCSS, SMACSS Test your code • CSS Lint, JS Lint, Inspector, PageSpeed, Console

Slide 82

Slide 82 text

Modular HTML, CSS, & JS @shayhowe & @darbyfrey Thank You! @shayhowe learn.shayhowe.com @darbyfrey darbyfrey.com