I’ve just pushed some major changes to my front end development guidelines to the public site. I spent a lot of time on this update, and it shows. I’ve added new content and improved old. I’ve ditched my own slap-dash styling in favour of the Twitter Bootstrap with some of my own personal tweaks. Be sure to check it out. I’ve added some sections on: The importance of understanding the box model (CSS) Knowing when to float, and when to position (CSS) Generating unique IDs without timestamps (JS) Preserving middle mouse click functionality (UX) I also: Made the website work without JavaScript enabled Cleaned up the overall design and interaction (Bootstrapped!) Re-wrote some content here and there Added pretty graphics to explanations Added some resources to the list Basically, we’ve gone from this: To this:  
Pop-upView Separately

I’ve just pushed some major changes to my front end development guidelines to the public site. I spent a lot of time on this update, and it shows. I’ve added new content and improved old. I’ve ditched my own slap-dash styling in favour of the Twitter Bootstrap with some of my own personal tweaks. Be sure to check it out.

I’ve added some sections on:

I also:

  • Made the website work without JavaScript enabled
  • Cleaned up the overall design and interaction (Bootstrapped!)
  • Re-wrote some content here and there
  • Added pretty graphics to explanations
  • Added some resources to the list

Basically, we’ve gone from this:

To this:

 

Front End Development Guidelines - Update

Well that was a wild ride indeed! Since release, the front-end development guidelines I posted have gone bananas. Tens of thousands of page views, plenty of GitHub forks and followers, and even a kind word or two. Many thanks to Paul Irish and other figureheads for tweeting about the resource I put together. It really helped spread the word about what I was trying to do, and in turn pulled in some great comments and suggestions logged through the GitHub issues interface.

As we stand, there are currently 8 open issues and I’ve managed to close 20 others.

Some of the most recent changes I’ve made include:

  • Rewriting the section on commenting your JavaScript. My team leader at my previous employer put this one together when he was proofing my work, and slipped it in. A lot of people have flagged it as a massive WTF and it has seen been replaced.
  • I’ve merged in a range of spelling and grammatical changes. What can I say? Me dun speak english good-like.
  • Added the new “micro clearfix” to the section on clearing floats.
  • Added a section on commenting CSS blocks (handy!).
  • Further discussed whether remapping “this” to “self” is a good idea.
  • Added section IDs for deep linking (but no way to easily do so, as yet).
  • Removed the Gotham web font, which I embarrassingly left in, ignoring my own advice.

Thanks for reading and contributing, be sure to send through any further suggestions using the issues interface or via my email address listed on the right.