What we start a project with

Posted on 10 May 2011 by Pete Duncanson Tweet

Seems these days there are a million and one boilerplates, frameworks and grid systems to choose from. They're good for so many reasons but sometimes I just prefer something a little simpler.

It all started by me asking "There really are a lot of grid systems out there now. Does anyone still write all their own markup these days?" and getting a ton of responses where most of them were from folks who don't use frameworks or grid systems and still "create" their own markup.

Now, this isn't in any way saying frameworks, grids etc are bad, they're really not! Many are very well designed and thought out. We use the excellent CSS Grid on this site and it serves us well.

Generally however, I often find myself taking out more code than I use (again, that's often the point of frameworks and boilerplates) so I figured that I'd share the basic structure we now use on new builds because I sometimes feel that when I pick a framework like 960.gs or CSS Grid, I find my visual designs are subconciously drawn to fit into someone elses mathematically clever layout and because some systems are preset it can be difficult to make even small but required tweaks.

CSS Grid is a good example, it's hugely flexible until you want to change the padding on elements then it starts to behave a little eratically. I don't know if that's a shared experience of other layout systems though.

Our simple "empty shell" setup

As I mentioned, a key part of using systems like HTML5Boilerplate is that you simply take out what you don't need. That's just what I've done here along with adding a simple structure that we use.

Demo Download

You're free to use this as a basis for a project, you're free to laugh at my folder structure if you wish, this is just my personal "setup" I'm sharing.

There is no markup other than the bare minimum for an HTML5 document - the body tag is empty for you to start coding.

A couple of the basics

• A reset in the stylesheet
• Google CDN hosted jQuery (Currently 1.7, with a local fallback)
• Modernizr (Currently 2.5)
• Respond.js to enable Media Query support in IE6-8
• Favicon & Apple icon
• Robots.txt & Humans.txt

What is in the box?

I use a simple setup, it's a few files to get me started on an HTML5 build. (DOWNLOAD IT)

• index.html
  • assets/
    • css/
      • screen.css
      • ie.css (empty so you can put your own code in here if you want)
    • images/
    • scripts/
      • modernizr-2.5.3.js
      • jquery-1.7.1.min.js
      • respond.js
      • selectivizr.js
      • general.js (empty so you can put your own code in here if you want)
• humans.txt
• favicon.png
• apple-touch-icon-precomposed.png

So there you have it, our simple "starter pack" that I usually use when I kick off project builds. We work with Umbraco so typically this is then converted into the relevant page templates etc but as I said, it's just an initial jumping off point.

You can use it if you want, just remember to change the Offroadcode bits in the icons and screen css file as well as the humans.txt!

Grab a copy

I'd love to hear thoughts on how you approach the start of a build. Feel free to comment or catch us on Twitter.

Demo Download

Changelog

• 22/02/12 - Updated versions of jQuery & Modernizr (included full development build, please ensure you visit modernizr.com to build your own production version), added in media query debugging styles/information in stylesheet, general code optimisation and additional reference comments added.
• 12/10/11 - Added selectivizr.js to package to add in additional CSS3 selector support for IE6-8. Wrapped in conditional call for Less than IE9.
• 09/10/11 - Updated to remove media queries in html doc and move inline with 320 and up methodology with all media queries now contained in screen.css