Starting a
responsive
project

• A lesson in HTML, CSS, or JavaScript
• A lesson in responsive design techniques
• The best/right/only way to organise your projects
  

• How I (currently) organise my projects
• In particular, smallest-first/responsive projects
• Guidance for new front end devs
• Discussion points for experienced front end devs

• Originally form up North - excuse my outrageous accent
• I work at Gibe Digital as Senior Front End Dev
• I have just over 10 years experience in front end dev

• I don't like using frameworks or starter-kits (Bootstrap etc.)
• I use LESS CSS and the SMACSS (smacss.com) methodology to develop modular CSS
• I work smallest-first and content-first:
  

// vars
@colorBase: #222;
@colorLinks: #c00;

// mixins
.min-height(@a: 10px) {
  min-height: @a;
  height: auto !important;
  height: @a;
}

.box-shadow(@a: none) {
  -moz-box-shadow: @a;
  -ms-box-shadow: @a;
  -o-box-shadow: @a;
  -webkit-box-shadow: @a;
  box-shadow: @a;
}

@include "config.less";

/* fonts */ ...
/* reset */ ...

/* 1. BASE */
a { color: blue; text-decoration: none; }
a:hover { color: red; text-decoration: none; }

h1...h6 { font-size: 15px; margin: 0; padding: 0 0 15px; }
p { margin: 0; padding: 0 0 15px 0; }

ul, ol { list-style: none; margin: 0; padding: 0 0 10px 0; }
ul li, ol li { margin: 0; padding: 0 0 5px 0; }

table { border-collapse: collapse; margin: 5px 0 20px 0; padding: 0; }

/* cms */
.cms {
  p { margin: 0; padding: 0 0 5px 0; }
  img { display: block; float: left; margin: 0 5px 5px 0; padding: 0; }
}

/* forms */
.formRow { margin: 0; padding: 0 0 15px 0; }
.formText { border: 1px solid #ddd; margin: 0; padding: 5px; }
.formSelect { border: 1px solid #ddd; margin: 0; padding: 5px; }
.formButton { background: red; color: #fff; margin: 0; padding: 5px; }

/* 2. LAYOUT */ ...
html, body { background: #eee; margin: 0; padding: 5px; }

.lPage { background: #fff; margin: 0 auto; padding: 10px; }

.lHeader { background: #eee; margin: 0 0 15px 0; padding: 10px; }

.lNav { background: #eee; margin: 0 0 15px 0; padding: 10px; }
.lNav .links { list-style: none; margin: 0; padding: 0; }
.lNav .links li { float: left; margin: 0; padding: 0 0 0 10px; }
.lNav .links li:first-child { padding-left: 0; }

.lFooter { background: #eee; margin: 0 0 15px 0; padding: 10px; }
.lFooter .copyright { font-size: 10px; line-height: 12px; }

/* 3. MODULES */
.mBlock { background: #eee; margin: 0 0 15px 0; padding: 10px; }
.mBlockAlt { background: #999; color: #fff; }

.mSideNav { background: #ddd; margin: 0 0 15px 0; padding: 10px; }
.mSideNav .links { list-style: none; margin: 0; padding: 0; }
.mSideNav .links li { margin: 0; padding: 10px 0 0 0; }
.mSideNav .links li:first-child { padding-top: 0; }

/* 4. STATES */
.isHidden { display: none; }
.isOffscreen { overflow: hidden; text-indent: -9999px; z-index: -1; }

/* 5. THEMES */ ...

/* fixes */
.clearfix { clear: both; }

/* forms */
.formRow label { float: left; width: 100px; }

/* 1. LAYOUT */
.lHeaderLogo { background-image: url(/images/logo-tablet.png); }
.lFooter .links li { float: left; margin: 0; padding: 0 0 0 10px; }
.lFooter .links li:first-child { padding-left: 0; }

/* module: block */

var block = {
  allow: false,
  init: function() {
    for(var i = 0; i < 3; i++) {
      // do something...
    }
    block.allow = true;
  }
}

$(function() {
  block.init();
});