SlideShare a Scribd company logo
Modular
HTML, CSS, & JS
Workshop
Shay Howe
@shayhowe
learn.shayhowe.com
Darby Frey
@darbyfrey
darbyfrey.com
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Shay Howe
@shayhowe
learn.shayhowe.com
Darby Frey
@darbyfrey
darbyfrey.com
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
1 Groundwork
2 HTML & CSS
3 JavaScript
4 Onward
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
1
Groundwork
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Common Problems
• Websites have difficulty scaling
• Code bases become brittle
• Files and code bases begin to swell
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
What’s Wrong
• Best practices aren’t exactly best practices
• Standards need to evolve
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Best Bad Practices
• Avoid extra elements
• Avoid classes
• Leverage type selectors
• Leverage descendent selectors
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	
  {...}
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%;
}
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Best Bad Practices
Good
.col-­‐1	
  {
	
  	
  width:	
  50%;
}
.col-­‐2	
  {
	
  	
  width:	
  75%;
}
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Maintainability
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Code Must Be…
• Organized
• Modular
• Performant
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
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Reuse Code
• Do not duplicate code
• Remove old code
• Defer loading subsequent styles
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Reuse Code
Bad
.news	
  {
	
  	
  background:	
  #ccc;
	
  	
  color:	
  #666;
}
.social	
  {
	
  	
  background:	
  #ccc;
	
  	
  color:	
  #666;
}
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Reuse Code
Good
.news,
.social	
  {
	
  	
  background:	
  #ccc;
	
  	
  color:	
  #666;
}
Better
.feat-­‐box	
  {
	
  	
  background:	
  #ccc;
	
  	
  color:	
  #666;
}
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Use Classes
• Write understandable class names
• Avoid unnecessary nesting
• Use same strength specificity
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Use Classes
Bad
.feat-­‐box	
  .callout	
  .pr	
  {
	
  	
  font-­‐size:	
  12px;
}
.feat-­‐box	
  .callout	
  .pr	
  .un	
  {
	
  	
  color:	
  #39f;
}
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Use Classes
Good
.feat-­‐box	
  .price	
  {
	
  	
  font-­‐size:	
  12px;
}
.feat-­‐box	
  .unit	
  {
	
  	
  color:	
  #39f;
}
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
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
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
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
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Watch Specificity
Bad
#primary	
  #main	
  div.gallery	
  {
	
  	
  text-­‐transform:	
  uppercase;
}
#primary	
  #main	
  div.gallery	
  figure.media	
  {
	
  	
  background:	
  #ccc;
}
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Watch Specificity
Good
.gallery	
  {
	
  	
  text-­‐transform:	
  uppercase;
}
.gallery-­‐media	
  {
	
  	
  background:	
  #ccc;
}
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
2
HTML & CSS
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
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Abstract Structure
Bad
.news	
  {
	
  	
  background:	
  #ccc;
	
  	
  color:	
  #666;
	
  	
  margin:	
  0	
  10px;
	
  	
  width:	
  400px;
}
<div	
  class="news">...</div>
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Abstract Structure
Good
.grid-­‐4	
  {
	
  	
  margin:	
  0	
  10px;
	
  	
  width:	
  400px;
}
.feat-­‐box	
  {
	
  	
  background:	
  #ccc;
	
  	
  color:	
  #666;
}
<div	
  class="grid-­‐4	
  feat-­‐box">...</div>
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Transparentize Elements
• Stylize elements to be transparent
• Keep visual properties apart from layout
properties
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Transparentize Elements
Bad
.pagination	
  {
	
  	
  border-­‐radius:	
  5px;
	
  	
  border:	
  1px	
  solid	
  #eee;
	
  	
  margin:	
  0	
  10px;
	
  	
  width:	
  620px;
}
<ul	
  class="pagination">...</ul>
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;
}
<ul	
  class="grid-­‐8	
  offset-­‐box">...</ul>
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
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;
}
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;
}
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Separate Content
• Separate content from container
• Stylize content regardless of container
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Separate Content
Bad
.alert	
  {
	
  	
  background:	
  #f2dede;
	
  	
  border-­‐radius:	
  10px;
	
  	
  color:	
  #b94a48;
	
  	
  padding:	
  10px	
  20px;
}
<div	
  class="alert">...</div>
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Separate Content
Good
.alert	
  {
	
  	
  border-­‐radius:	
  10px;
	
  	
  padding:	
  10px	
  20px;
}
.alert-­‐error	
  {
	
  	
  background:	
  #f2dede;
	
  	
  color:	
  #b94a48;
}
<div	
  class="alert	
  alert-­‐error">...</div>
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Avoid Parent Dependency
• Remove parent container dependency
• Decouple CSS from HTML
• Create components to be used anywhere
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Avoid Parent Dependency
Bad
.feat-­‐box	
  {
	
  	
  background:	
  #ccc;
}
article	
  .feat-­‐box	
  {
	
  	
  background:	
  #fff;
}
<article>
	
  	
  <div	
  class="feat-­‐box">...</div>
</article>
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Avoid Parent Dependency
Good
.feat-­‐box	
  {
	
  	
  background:	
  #ccc;
}
.feat-­‐box-­‐alt	
  {
	
  	
  background:	
  #fff;
}
<article>
	
  	
  <div	
  class="feat-­‐box-­‐alt">...</div>
</article>
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Favor Semantics
• Allow elements to adapt
• Uses individual classes to extend modules
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Favor Semantics
Bad
.feat-­‐box	
  h2	
  {
	
  	
  color:	
  #f60;
	
  	
  font:	
  18px	
  Helvetica,	
  sans-­‐serif;
}
<div	
  class="feat-­‐box">
	
  	
  <h2>...</h2>
</div>
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Favor Semantics
Good
.feat-­‐subhead	
  {
	
  	
  color:	
  #f60;
	
  	
  font:	
  18px	
  Helvetica,	
  sans-­‐serif;
}
<div	
  class="feat-­‐box">
	
  	
  <h2	
  class="feat-­‐subhead">...</h2>
</div>
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
In Practice
HTML & CSS
http://bit.ly/modular-html-css-js
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
3
JavaScript
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
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
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
JavaScript
image	
  =	
  new	
  Image('filename.jpg');
image.resize(400,	
  300);
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Abstract and Encapsulate
functionality with Objects
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
JavaScript Primer
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS Workshop
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Functions
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Functions
function	
  multiply(one,	
  two){
	
  	
  return	
  one	
  *	
  two;
};
function(one,	
  two){
	
  	
  return	
  one	
  *	
  two;
};
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Functions
Assigned to Variables
var	
  multiply	
  =	
  function(one,	
  two){
	
  	
  return	
  one	
  *	
  two;
};
multiply(3,4);	
  =>	
  12
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
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
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'
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Objects
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Objects are Containers for
Properties and Functions
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'
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'
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Constructor Functions
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
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'}
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	
  {}
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'
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Prototype
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
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'
	
  	
  }
};
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
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
In Practice
JavaScript
http://bit.ly/modular-html-css-js
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
4
Onward
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Approach
• Stop thinking about pages
• Start thinking about components
• Take visual inventory
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
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Outcomes
• Maintainability!
• Reusable code, less duplication
• Flexibility and extensibility
• Improved standards
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
Modular HTML, CSS, & JS @shayhowe & @darbyfrey
Thank You!
@shayhowe
learn.shayhowe.com
@darbyfrey
darbyfrey.com

More Related Content

What's hot (20)

PDF
Intro to HTML 5 / CSS 3
Tadpole Collective
 
PPTX
Introduction to HTML5 and CSS3 (revised)
Joseph Lewis
 
PDF
HTML5 Essentials
Marc Grabanski
 
PDF
Unit 3 (it workshop).pptx
Dr.Lokesh Gagnani
 
PDF
Web front end development introduction to html css and javascript
Marc Huang
 
PDF
HTML News Packages Lesson
UC Berkeley Graduate School of Journalism
 
PDF
Intro to CSS
Randy Oest II
 
PPTX
Css.html
Anaghabalakrishnan
 
PDF
HTML and CSS crash course!
Ana Cidre
 
KEY
Slow kinda sucks
Tim Wright
 
PDF
HTML/CSS Crash Course (april 4 2017)
Daniel Friedman
 
PDF
Unit 2 (it workshop)
Dr.Lokesh Gagnani
 
PPTX
Web 102 INtro to CSS
Hawkman Academy
 
PPTX
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
 
KEY
2022 HTML5: The future is now
Gonzalo Cordero
 
PPT
HTML & CSS Workshop Notes
Pamela Fox
 
PDF
CSS: a rapidly changing world
Russ Weakley
 
KEY
HTML CSS & Javascript
David Lindkvist
 
PDF
Introduction to HTML and CSS
Mario Hernandez
 
Intro to HTML 5 / CSS 3
Tadpole Collective
 
Introduction to HTML5 and CSS3 (revised)
Joseph Lewis
 
HTML5 Essentials
Marc Grabanski
 
Unit 3 (it workshop).pptx
Dr.Lokesh Gagnani
 
Web front end development introduction to html css and javascript
Marc Huang
 
Intro to CSS
Randy Oest II
 
HTML and CSS crash course!
Ana Cidre
 
Slow kinda sucks
Tim Wright
 
HTML/CSS Crash Course (april 4 2017)
Daniel Friedman
 
Unit 2 (it workshop)
Dr.Lokesh Gagnani
 
Web 102 INtro to CSS
Hawkman Academy
 
Basics of Front End Web Dev PowerPoint
Sahil Gandhi
 
2022 HTML5: The future is now
Gonzalo Cordero
 
HTML & CSS Workshop Notes
Pamela Fox
 
CSS: a rapidly changing world
Russ Weakley
 
HTML CSS & Javascript
David Lindkvist
 
Introduction to HTML and CSS
Mario Hernandez
 

Viewers also liked (20)

PDF
Yes, Designer, You CAN Be a Product Leader
Shay Howe
 
PPTX
HTML, CSS and Java Scripts Basics
Sun Technlogies
 
PDF
HTML/CSS/JS基础
jay li
 
PDF
Html / CSS Presentation
Shawn Calvert
 
PDF
Modularisierung von Webseiten
Jens Grochtdreis
 
PDF
Intro to Web Development from Bloc.io
Douglas Wright
 
PDF
Collaboration Practices
Shay Howe
 
PDF
CSS3 Introduction
Jaeni Sahuri
 
PPTX
Fleet & transport policy - Envision International (Conf 2010)
Andre Knipe
 
PPTX
Web designing
Avinash Malhotra
 
PPTX
Css ppt
Nidhi mishra
 
PDF
Front end development best practices
Karolina Coates
 
PDF
Ruby on Rails Presentation
Michael MacDonald
 
PPT
Ruby On Rails Presentation
ChanHan Hy
 
PPT
Basic Transport & Fleet Mngt - AK2015
Andre Knipe
 
PPTX
Vehicle Management Software
Tracey Billings
 
PDF
Introduction to CSS3
Doris Chen
 
PPTX
Html css java script basics All about you need
Dipen Parmar
 
PDF
Building a game with JavaScript (March 2017, washington dc)
Daniel Friedman
 
PPTX
Fleet management system
Shree Deepam Infotech Pvt. Ltd.
 
Yes, Designer, You CAN Be a Product Leader
Shay Howe
 
HTML, CSS and Java Scripts Basics
Sun Technlogies
 
HTML/CSS/JS基础
jay li
 
Html / CSS Presentation
Shawn Calvert
 
Modularisierung von Webseiten
Jens Grochtdreis
 
Intro to Web Development from Bloc.io
Douglas Wright
 
Collaboration Practices
Shay Howe
 
CSS3 Introduction
Jaeni Sahuri
 
Fleet & transport policy - Envision International (Conf 2010)
Andre Knipe
 
Web designing
Avinash Malhotra
 
Css ppt
Nidhi mishra
 
Front end development best practices
Karolina Coates
 
Ruby on Rails Presentation
Michael MacDonald
 
Ruby On Rails Presentation
ChanHan Hy
 
Basic Transport & Fleet Mngt - AK2015
Andre Knipe
 
Vehicle Management Software
Tracey Billings
 
Introduction to CSS3
Doris Chen
 
Html css java script basics All about you need
Dipen Parmar
 
Building a game with JavaScript (March 2017, washington dc)
Daniel Friedman
 
Fleet management system
Shree Deepam Infotech Pvt. Ltd.
 
Ad

Similar to Modular HTML, CSS, & JS Workshop (20)

KEY
What is Object Oriented CSS?
Nicole Sullivan
 
PPT
Web design-workflow
Peter Kaizer
 
PDF
What is Modular CSS?
Scott Vandehey
 
PDF
SMACSS Workshop
Tim Hettler
 
KEY
The Fast And The Fabulous
Nicole Sullivan
 
PDF
CSS vs. JavaScript - Trust vs. Control
Christian Heilmann
 
KEY
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
Nicole Sullivan
 
PDF
Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
Bryan Robinson
 
PDF
Organize Your Website With Advanced CSS Tricks
Andolasoft Inc
 
PDF
Html 5 mobile - nitty gritty
Mario Noble
 
PDF
OOCSS Lightening Talk
Julie Cameron
 
PDF
Attribute Driven Styles: The Good, the Bad, and the Unknown (SassConf 2015 Di...
Jonathan Cutrell
 
PDF
Flexbox, Grid and Sass
Seble Nigussie
 
PDF
The Future of CSS Layout
Zoe Gillenwater
 
PPTX
Css methods architecture
Lasha Sumbadze
 
PPTX
Introduction to HTML+CSS+Javascript.pptx
deepuranjankumar2002
 
PDF
React Storybook, Atomic Design, and ITCSS
Trevor Pierce
 
PDF
More of less (take 2)
Guilherme Zühlke O'Connor
 
PDF
CSS Conf Budapest - New CSS Layout
Rachel Andrew
 
PDF
Architecting with Style
Timothy Knight
 
What is Object Oriented CSS?
Nicole Sullivan
 
Web design-workflow
Peter Kaizer
 
What is Modular CSS?
Scott Vandehey
 
SMACSS Workshop
Tim Hettler
 
The Fast And The Fabulous
Nicole Sullivan
 
CSS vs. JavaScript - Trust vs. Control
Christian Heilmann
 
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
Nicole Sullivan
 
Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
Bryan Robinson
 
Organize Your Website With Advanced CSS Tricks
Andolasoft Inc
 
Html 5 mobile - nitty gritty
Mario Noble
 
OOCSS Lightening Talk
Julie Cameron
 
Attribute Driven Styles: The Good, the Bad, and the Unknown (SassConf 2015 Di...
Jonathan Cutrell
 
Flexbox, Grid and Sass
Seble Nigussie
 
The Future of CSS Layout
Zoe Gillenwater
 
Css methods architecture
Lasha Sumbadze
 
Introduction to HTML+CSS+Javascript.pptx
deepuranjankumar2002
 
React Storybook, Atomic Design, and ITCSS
Trevor Pierce
 
More of less (take 2)
Guilherme Zühlke O'Connor
 
CSS Conf Budapest - New CSS Layout
Rachel Andrew
 
Architecting with Style
Timothy Knight
 
Ad

More from Shay Howe (7)

PDF
How Constraints Cultivate Growth
Shay Howe
 
PDF
UI Design with HTML5 & CSS3
Shay Howe
 
PDF
HTML5 Semantics
Shay Howe
 
PDF
Quality Development with HTML5
Shay Howe
 
PDF
Quality Development with CSS3
Shay Howe
 
PDF
The Web Design Process: A Strategy for Success
Shay Howe
 
PDF
Writing for the Web: The Right Strategy
Shay Howe
 
How Constraints Cultivate Growth
Shay Howe
 
UI Design with HTML5 & CSS3
Shay Howe
 
HTML5 Semantics
Shay Howe
 
Quality Development with HTML5
Shay Howe
 
Quality Development with CSS3
Shay Howe
 
The Web Design Process: A Strategy for Success
Shay Howe
 
Writing for the Web: The Right Strategy
Shay Howe
 

Recently uploaded (20)

PPTX
BOILER STEAM bana M ntpc kahalgaon boiler .pptx
didikesaadi1108
 
DOCX
pre test uncertainty, conflictbnnnmnb mn
sanghahembramsh
 
PDF
M03-operating instructions in microprocessor.pdf
CherinetTekalign
 
PDF
70% of Users Leave Unresponsive Sites – Is Yours Driving Them Away?
Virtual Employee Pvt. Ltd.
 
PPTX
Substitution Presentation in Dark Navy and Orange Geometric Style.pptx
hazlienasyiqeen
 
PPTX
Turbomachinery_Presentation.pptx....... introduction and basic
abhisheksabhigowda47
 
PPTX
Modern Living Room Design in Tokyo,Japan
Yantram Animation Studio Corporation
 
PDF
Guide to Understanding Hailey Welch's Wealth
arslantaj725
 
PDF
COLOUR IN INTERIOR DESIGN- KAVYA CHAWLA .pdf
KavyaChawla4
 
PPTX
Pendant Lights, Types and their applications
agdisha2
 
PPTX
Lotus School Manikonda – Best CBSE & SSC School in Hyderabad
CharanRks
 
PPTX
PTC '25.pptx VXFGHDZDGDRYRIYUUOIUOPIO'KL
JorrehtyMRegondola
 
PDF
Ideo on friction - resource to aid you in that process
vikram sood
 
PPTX
Transform Your Backyard into the Ultimate Wedding Venue
varunsh377
 
PDF
POA ARCHITECTURE SEM 4 UNIT2 18,19 CENTURY ARCHITECTURE
sachdevaa284
 
DOCX
LRC image social media marketing class design
yeshwimbu
 
PPT
Seminar FRP Materials.strenthening using frp
MohamedAttia601252
 
PPTX
Hedgining through financil contracts (1).pptx
icuphamid
 
PPTX
Smart_Sustainable_Civil_Engineering_PPT.pptx
venkateshreddy0792
 
PDF
Pompidou-case-study-detailed-planF16.pdf
qxtr95m9nf
 
BOILER STEAM bana M ntpc kahalgaon boiler .pptx
didikesaadi1108
 
pre test uncertainty, conflictbnnnmnb mn
sanghahembramsh
 
M03-operating instructions in microprocessor.pdf
CherinetTekalign
 
70% of Users Leave Unresponsive Sites – Is Yours Driving Them Away?
Virtual Employee Pvt. Ltd.
 
Substitution Presentation in Dark Navy and Orange Geometric Style.pptx
hazlienasyiqeen
 
Turbomachinery_Presentation.pptx....... introduction and basic
abhisheksabhigowda47
 
Modern Living Room Design in Tokyo,Japan
Yantram Animation Studio Corporation
 
Guide to Understanding Hailey Welch's Wealth
arslantaj725
 
COLOUR IN INTERIOR DESIGN- KAVYA CHAWLA .pdf
KavyaChawla4
 
Pendant Lights, Types and their applications
agdisha2
 
Lotus School Manikonda – Best CBSE & SSC School in Hyderabad
CharanRks
 
PTC '25.pptx VXFGHDZDGDRYRIYUUOIUOPIO'KL
JorrehtyMRegondola
 
Ideo on friction - resource to aid you in that process
vikram sood
 
Transform Your Backyard into the Ultimate Wedding Venue
varunsh377
 
POA ARCHITECTURE SEM 4 UNIT2 18,19 CENTURY ARCHITECTURE
sachdevaa284
 
LRC image social media marketing class design
yeshwimbu
 
Seminar FRP Materials.strenthening using frp
MohamedAttia601252
 
Hedgining through financil contracts (1).pptx
icuphamid
 
Smart_Sustainable_Civil_Engineering_PPT.pptx
venkateshreddy0792
 
Pompidou-case-study-detailed-planF16.pdf
qxtr95m9nf
 

Modular HTML, CSS, & JS Workshop

  • 1. Modular HTML, CSS, & JS Workshop Shay Howe @shayhowe learn.shayhowe.com Darby Frey @darbyfrey darbyfrey.com
  • 2. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Shay Howe @shayhowe learn.shayhowe.com Darby Frey @darbyfrey darbyfrey.com
  • 3. Modular HTML, CSS, & JS @shayhowe & @darbyfrey 1 Groundwork 2 HTML & CSS 3 JavaScript 4 Onward
  • 4. Modular HTML, CSS, & JS @shayhowe & @darbyfrey 1 Groundwork
  • 5. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Common Problems • Websites have difficulty scaling • Code bases become brittle • Files and code bases begin to swell
  • 6. Modular HTML, CSS, & JS @shayhowe & @darbyfrey What’s Wrong • Best practices aren’t exactly best practices • Standards need to evolve
  • 7. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Best Bad Practices • Avoid extra elements • Avoid classes • Leverage type selectors • Leverage descendent selectors
  • 8. 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  {...}
  • 9. 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%; }
  • 10. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Best Bad Practices Good .col-­‐1  {    width:  50%; } .col-­‐2  {    width:  75%; }
  • 11. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Maintainability
  • 12. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Code Must Be… • Organized • Modular • Performant
  • 13. 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
  • 14. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Reuse Code • Do not duplicate code • Remove old code • Defer loading subsequent styles
  • 15. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Reuse Code Bad .news  {    background:  #ccc;    color:  #666; } .social  {    background:  #ccc;    color:  #666; }
  • 16. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Reuse Code Good .news, .social  {    background:  #ccc;    color:  #666; } Better .feat-­‐box  {    background:  #ccc;    color:  #666; }
  • 17. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Use Classes • Write understandable class names • Avoid unnecessary nesting • Use same strength specificity
  • 18. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Use Classes Bad .feat-­‐box  .callout  .pr  {    font-­‐size:  12px; } .feat-­‐box  .callout  .pr  .un  {    color:  #39f; }
  • 19. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Use Classes Good .feat-­‐box  .price  {    font-­‐size:  12px; } .feat-­‐box  .unit  {    color:  #39f; }
  • 20. 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
  • 21. 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
  • 22. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
  • 23. 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
  • 24. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Watch Specificity Bad #primary  #main  div.gallery  {    text-­‐transform:  uppercase; } #primary  #main  div.gallery  figure.media  {    background:  #ccc; }
  • 25. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Watch Specificity Good .gallery  {    text-­‐transform:  uppercase; } .gallery-­‐media  {    background:  #ccc; }
  • 26. Modular HTML, CSS, & JS @shayhowe & @darbyfrey 2 HTML & CSS
  • 27. 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
  • 28. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Abstract Structure Bad .news  {    background:  #ccc;    color:  #666;    margin:  0  10px;    width:  400px; } <div  class="news">...</div>
  • 29. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Abstract Structure Good .grid-­‐4  {    margin:  0  10px;    width:  400px; } .feat-­‐box  {    background:  #ccc;    color:  #666; } <div  class="grid-­‐4  feat-­‐box">...</div>
  • 30. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Transparentize Elements • Stylize elements to be transparent • Keep visual properties apart from layout properties
  • 31. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Transparentize Elements Bad .pagination  {    border-­‐radius:  5px;    border:  1px  solid  #eee;    margin:  0  10px;    width:  620px; } <ul  class="pagination">...</ul>
  • 32. 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; } <ul  class="grid-­‐8  offset-­‐box">...</ul>
  • 33. 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
  • 34. 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; }
  • 35. 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; }
  • 36. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Separate Content • Separate content from container • Stylize content regardless of container
  • 37. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Separate Content Bad .alert  {    background:  #f2dede;    border-­‐radius:  10px;    color:  #b94a48;    padding:  10px  20px; } <div  class="alert">...</div>
  • 38. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Separate Content Good .alert  {    border-­‐radius:  10px;    padding:  10px  20px; } .alert-­‐error  {    background:  #f2dede;    color:  #b94a48; } <div  class="alert  alert-­‐error">...</div>
  • 39. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Avoid Parent Dependency • Remove parent container dependency • Decouple CSS from HTML • Create components to be used anywhere
  • 40. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Avoid Parent Dependency Bad .feat-­‐box  {    background:  #ccc; } article  .feat-­‐box  {    background:  #fff; } <article>    <div  class="feat-­‐box">...</div> </article>
  • 41. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Avoid Parent Dependency Good .feat-­‐box  {    background:  #ccc; } .feat-­‐box-­‐alt  {    background:  #fff; } <article>    <div  class="feat-­‐box-­‐alt">...</div> </article>
  • 42. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Favor Semantics • Allow elements to adapt • Uses individual classes to extend modules
  • 43. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Favor Semantics Bad .feat-­‐box  h2  {    color:  #f60;    font:  18px  Helvetica,  sans-­‐serif; } <div  class="feat-­‐box">    <h2>...</h2> </div>
  • 44. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Favor Semantics Good .feat-­‐subhead  {    color:  #f60;    font:  18px  Helvetica,  sans-­‐serif; } <div  class="feat-­‐box">    <h2  class="feat-­‐subhead">...</h2> </div>
  • 45. Modular HTML, CSS, & JS @shayhowe & @darbyfrey In Practice HTML & CSS http://bit.ly/modular-html-css-js
  • 46. Modular HTML, CSS, & JS @shayhowe & @darbyfrey 3 JavaScript
  • 47. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
  • 48. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
  • 49. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
  • 50. Modular HTML, CSS, & JS @shayhowe & @darbyfrey
  • 51. 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
  • 52. Modular HTML, CSS, & JS @shayhowe & @darbyfrey JavaScript image  =  new  Image('filename.jpg'); image.resize(400,  300);
  • 53. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Abstract and Encapsulate functionality with Objects
  • 54. Modular HTML, CSS, & JS @shayhowe & @darbyfrey JavaScript Primer
  • 57. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions
  • 58. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions function  multiply(one,  two){    return  one  *  two; }; function(one,  two){    return  one  *  two; };
  • 59. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Functions Assigned to Variables var  multiply  =  function(one,  two){    return  one  *  two; }; multiply(3,4);  =>  12
  • 60. 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
  • 61. 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
  • 62. 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'
  • 63. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Objects
  • 64. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Objects are Containers for Properties and Functions
  • 65. 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'
  • 66. 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'
  • 67. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Constructor Functions
  • 68. 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
  • 69. 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'}
  • 70. 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  {}
  • 71. 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'
  • 72. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Prototype
  • 73. 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
  • 74. 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'    } };
  • 75. 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
  • 76. Modular HTML, CSS, & JS @shayhowe & @darbyfrey In Practice JavaScript http://bit.ly/modular-html-css-js
  • 77. Modular HTML, CSS, & JS @shayhowe & @darbyfrey 4 Onward
  • 78. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Approach • Stop thinking about pages • Start thinking about components • Take visual inventory
  • 79. 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
  • 80. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Outcomes • Maintainability! • Reusable code, less duplication • Flexibility and extensibility • Improved standards
  • 81. 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
  • 82. Modular HTML, CSS, & JS @shayhowe & @darbyfrey Thank You! @shayhowe learn.shayhowe.com @darbyfrey darbyfrey.com