Starting a
responsive
project

@karltynan / karltynan.co.uk

THIS PRESENTATION IS NOT...


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

SO WHAT IS THIS PRESENTATION?


  • 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

ABOUT ME


  • 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

@karltynan / karltynan.co.uk

MY APPROACH

  • 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:

folder structure


/css/...
/images/...
/scripts/...
index.htm
about.htm
contact.htm
...

CSS FOLDER STRUCTURE


/css/fonts/...
/css/config.less
/css/site.less (site.min.css)
/css/tablet.less (tablet.min.css)
/css/desktop.less (desktop.min.css)
/css/print.less (print.min.css)
/css/_ie/ie7.css
/css/_ie/ie8.css

CONFIG.LESS

// 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;
}

SITE.CSS

@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; }

SITE.CSS continued...

/* 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; }

SITE.CSS continued...

/* 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; }

SITE.CSS continued...

/* 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; }

TABLET.css / desktop.CSS

/* 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; }

IMAGES FOLDER STRUCTURE


/images/forms/...
/images/layout/...
/images/modules/...
/images/misc/...
/images/scripts/...

IMAGES FOLDER STRUCTURE


/images/forms/inset-shadow.png
/images/forms/buttons/purple.png
/images/forms/buttons/disabled.png

/images/modules/block/bg.png
/images/modules/block/alt/bg.png

/images/misc/loader.gif

/images/scripts/jquery.ui/images/...

SCRIPTS FOLDER STRUCTURE


/scripts/modules/...
/scripts/plugins/...
/scripts/site.js

Modular JavaScript Example

/* module: block */

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

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

HTML & MEDIA QUERIES

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>...</title>
    <meta name="description" content="..." />
    <meta name="keywords" content="..." />

    <meta name="viewport" content="width=device-width,
      user-scalable=no,initial-scale=1.0,
      minimum-scale=1.0,maximum-scale=1.0" />

    <-- css goes here -->

  </head>

HTML & MEDIA QUERIES Cont...

<link href="/css/site.min.css" rel="stylesheet" media="screen" />

<link href="/css/tablet.min.css" rel="stylesheet" media="screen and (min-width: 640px)" />

<link href="/css/desktop.min.css" rel="stylesheet" media="screen and (min-width: 960px)" />


<link href="/css/print.min.css" rel="stylesheet" media="print" />

INLINE MEDIA QUERIES

/* MOBILE */

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


@media screen and (min-width: 460px) {
  .formWrapper {
    margin: 0 0 20px 0;
    padding: 20px;
  }
}

INLINE MEDIA QUERIES Cont...

/* DESKTOP */

.lContent {
  padding: 10px;
}


@media screen and (min-width: 1020px) {
  .lContent{
    padding: 20px;
  }
}

SHOULD I SUPPORT Older browserS (ie)?


OLDER BROWSER (IE) SUPPORT...

<link href="/css/site.min.css" rel="stylesheet" media="screen" />

<!--[if (lt IE 9) & !(IEMobile)]>
  <link href="/css/tablet.min.css" rel="stylesheet" media="screen" />
  <link href="/css/desktop.min.css" rel="stylesheet" media="screen" />
<![endif]-->

@media screen and (min-width: 980px) {
  .lContent {
    padding: 20px;
  }
}

/* ie7.css, ie8.css */
.lContent { padding: 20px; }

WORKING EXAMPLES

gibedigital.com


WORKING EXAMPLES

armitwines.co.uk

WORKING EXAMPLES

originalstyle.com


Thank You, Any questions?



@karltynan / karltynan.co.uk

Starting a Responsive Project

By Karl Tynan

Starting a Responsive Project

Whether you are the only developer at your company, or you work in a team of developers, have you ever wanted to know how and where other developers save their CSS and JavaScript? This is how I do it! It's not the only way and it's not the best way. It's my way. Use the bits you like and, please, feedback on what you don't like!

  • 4,020