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

PPTX
About Best friends - HTML, CSS and JS
PDF
Modular HTML & CSS
PDF
Modular HTML & CSS Workshop
PDF
Modular HTML & CSS Turbo Workshop
PDF
An Intro to HTML & CSS
PPTX
Introduction to HTML and CSS
PDF
CSS - OOCSS, SMACSS and more
PDF
HTML5 & CSS3 Flag
About Best friends - HTML, CSS and JS
Modular HTML & CSS
Modular HTML & CSS Workshop
Modular HTML & CSS Turbo Workshop
An Intro to HTML & CSS
Introduction to HTML and CSS
CSS - OOCSS, SMACSS and more
HTML5 & CSS3 Flag

What's hot (20)

PDF
Intro to HTML 5 / CSS 3
PPTX
Introduction to HTML5 and CSS3 (revised)
PDF
HTML5 Essentials
PDF
Unit 3 (it workshop).pptx
PDF
Web front end development introduction to html css and javascript
PDF
PDF
Intro to CSS
PPTX
PDF
HTML and CSS crash course!
KEY
Slow kinda sucks
PDF
HTML/CSS Crash Course (april 4 2017)
PDF
Unit 2 (it workshop)
PPTX
Web 102 INtro to CSS
PPTX
Basics of Front End Web Dev PowerPoint
KEY
2022 HTML5: The future is now
PPT
HTML & CSS Workshop Notes
PDF
CSS: a rapidly changing world
KEY
HTML CSS & Javascript
PDF
Introduction to HTML and CSS
Intro to HTML 5 / CSS 3
Introduction to HTML5 and CSS3 (revised)
HTML5 Essentials
Unit 3 (it workshop).pptx
Web front end development introduction to html css and javascript
Intro to CSS
HTML and CSS crash course!
Slow kinda sucks
HTML/CSS Crash Course (april 4 2017)
Unit 2 (it workshop)
Web 102 INtro to CSS
Basics of Front End Web Dev PowerPoint
2022 HTML5: The future is now
HTML & CSS Workshop Notes
CSS: a rapidly changing world
HTML CSS & Javascript
Introduction to HTML and CSS
Ad

Viewers also liked (20)

PDF
Yes, Designer, You CAN Be a Product Leader
PPTX
HTML, CSS and Java Scripts Basics
PDF
HTML/CSS/JS基础
PDF
Html / CSS Presentation
PDF
Modularisierung von Webseiten
PDF
Intro to Web Development from Bloc.io
PDF
Collaboration Practices
PDF
CSS3 Introduction
PPTX
Fleet & transport policy - Envision International (Conf 2010)
PPTX
Web designing
PPTX
Css ppt
PDF
Front end development best practices
PDF
Ruby on Rails Presentation
PPT
Ruby On Rails Presentation
PPT
Basic Transport & Fleet Mngt - AK2015
PPTX
Vehicle Management Software
PDF
Introduction to CSS3
PPTX
Html css java script basics All about you need
PDF
Building a game with JavaScript (March 2017, washington dc)
PPTX
Fleet management system
Yes, Designer, You CAN Be a Product Leader
HTML, CSS and Java Scripts Basics
HTML/CSS/JS基础
Html / CSS Presentation
Modularisierung von Webseiten
Intro to Web Development from Bloc.io
Collaboration Practices
CSS3 Introduction
Fleet & transport policy - Envision International (Conf 2010)
Web designing
Css ppt
Front end development best practices
Ruby on Rails Presentation
Ruby On Rails Presentation
Basic Transport & Fleet Mngt - AK2015
Vehicle Management Software
Introduction to CSS3
Html css java script basics All about you need
Building a game with JavaScript (March 2017, washington dc)
Fleet management system
Ad

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

KEY
What is Object Oriented CSS?
PPT
Web design-workflow
PDF
What is Modular CSS?
PDF
SMACSS Workshop
KEY
The Fast And The Fabulous
PDF
CSS vs. JavaScript - Trust vs. Control
KEY
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
PDF
Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
PDF
Organize Your Website With Advanced CSS Tricks
PDF
Html 5 mobile - nitty gritty
PDF
OOCSS Lightening Talk
PDF
Attribute Driven Styles: The Good, the Bad, and the Unknown (SassConf 2015 Di...
PDF
Flexbox, Grid and Sass
PDF
The Future of CSS Layout
PPTX
Css methods architecture
PPTX
Introduction to HTML+CSS+Javascript.pptx
PDF
React Storybook, Atomic Design, and ITCSS
PDF
More of less (take 2)
PDF
CSS Conf Budapest - New CSS Layout
PDF
Architecting with Style
What is Object Oriented CSS?
Web design-workflow
What is Modular CSS?
SMACSS Workshop
The Fast And The Fabulous
CSS vs. JavaScript - Trust vs. Control
The Cascade, Grids, Headings, and Selectors from an OOCSS Perspective, Ajax ...
Post-Modern CSS: Start learning CSS Grid, Flexbox and other new properties
Organize Your Website With Advanced CSS Tricks
Html 5 mobile - nitty gritty
OOCSS Lightening Talk
Attribute Driven Styles: The Good, the Bad, and the Unknown (SassConf 2015 Di...
Flexbox, Grid and Sass
The Future of CSS Layout
Css methods architecture
Introduction to HTML+CSS+Javascript.pptx
React Storybook, Atomic Design, and ITCSS
More of less (take 2)
CSS Conf Budapest - New CSS Layout
Architecting with Style

More from Shay Howe (7)

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

Recently uploaded (20)

PDF
Find Your Target Audience A 6-Step Framework to Grow Your Business.pdf
PPTX
8Oe2l3FUJVImF34F988.pptxbbbvvvvvvvhhhhhh
PPTX
Creative Agency Presentation For Designers
PDF
AUB Collaborative Book Project - Keiko Toyoda
PPTX
UCSP-Quarter 1-Week 5-Powerpoint Presentation
PPTX
Why Great Design Is the Missing Piece in Your ESG Reporting Strategy.pptx
PDF
SS27 Women's Fashion Trend Book Peclers Paris
PPT
a decent way to describe Geometric Shapes.ppt
PDF
solar design by every detail p.d.f download
PPTX
Simple Business Pitch · SlidesMania 13.pptx
PPTX
UCSP-Quarter 1-Week 6-Powerpoint Presentation
PDF
Portfolio Arch Estsabel Chourio - Interiorism,
PPTX
knee & Ankle Joint Mobilization techniques.pptx
PDF
ALDO ROSSI AND MICHAEL GRAVES THEORY OF DESIGN-02 , PRESENTATION _TUSHARECHPL...
PPTX
Presentation_food_packaging material [1].pptx
PDF
Benefits_of_Cast_Aluminium_Doors_Presentation.pdf
PDF
10 Best UI UX Design Company in UK for User-Centric Solutions
PDF
Wio LTE JP Version v1.3b- 4G, Cat.1, Espruino Compatible\202001935, PCBA;Wio ...
PPT
Package Design Design Kit 20100009 PWM IC by Bee Technologies
PDF
Top 10 UI/UX Design Agencies in Dubai Shaping Digital Experiences
Find Your Target Audience A 6-Step Framework to Grow Your Business.pdf
8Oe2l3FUJVImF34F988.pptxbbbvvvvvvvhhhhhh
Creative Agency Presentation For Designers
AUB Collaborative Book Project - Keiko Toyoda
UCSP-Quarter 1-Week 5-Powerpoint Presentation
Why Great Design Is the Missing Piece in Your ESG Reporting Strategy.pptx
SS27 Women's Fashion Trend Book Peclers Paris
a decent way to describe Geometric Shapes.ppt
solar design by every detail p.d.f download
Simple Business Pitch · SlidesMania 13.pptx
UCSP-Quarter 1-Week 6-Powerpoint Presentation
Portfolio Arch Estsabel Chourio - Interiorism,
knee & Ankle Joint Mobilization techniques.pptx
ALDO ROSSI AND MICHAEL GRAVES THEORY OF DESIGN-02 , PRESENTATION _TUSHARECHPL...
Presentation_food_packaging material [1].pptx
Benefits_of_Cast_Aluminium_Doors_Presentation.pdf
10 Best UI UX Design Company in UK for User-Centric Solutions
Wio LTE JP Version v1.3b- 4G, Cat.1, Espruino Compatible\202001935, PCBA;Wio ...
Package Design Design Kit 20100009 PWM IC by Bee Technologies
Top 10 UI/UX Design Agencies in Dubai Shaping Digital Experiences

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