Always Twisted

{ Slightly Bizarre Ramblings Of A Front-End Developer }

no-js? No, I like hasJS

my boilerplate, made by me

I last looked at my 'boilerplate' in January. It was before a long 120 hours of front end development for a product myself and my now co-founders are still working on. But I digress.

What I did at the time was download both the HTML5 Boilerplate and Andy Clarke's 320&Up Framework. I went through every line of code, deleting bits I didn't want to include by default and changing other bits to more suit my asthetic needs (and change hot pink to a dark blue). 

After doing this whilst coding the sight I wanted to progressively enhance the design (as you do) so that it'd work great with JavaScript (well jQuery) off or on.

I initially left the no-js tag in the html class in the html template and decided to swap it out and replace it with hasJS if the user has JavaScript enabled. After demoing my code via the twitters someone asked why I'm swapping out no-js and replacing it. After this I chose to only add the hasJS tag to the HTML document if the user has JavaScript enabled.

This way, for me I'm progressively enhancing what I'm doing. The code is all lovely and clean and if parts of the design make use of jQuery I only have to add a .hasJS to that particular div/article/nav/ul/whatever in the CSS. It works for me, it may not work for you. Like all things, we all have a preference to what ever options there are.

So here's what I do -

In my scripts.js file I now have this at the top of the code -

$("html").addClass("hasJS");

Then whenever I want some of my fantastically clean CSS to be changed because I'm now doing something a little different because of the jQuery I'd do this -

article { background-color: red; }

	.hasJS article { background-color: pink; }

This way when the jQuery kicks into play it'll change the background-color, when it's not working it'll stay red.

Note, I don't use Modernizr, so any benefit the no-js class had with this is lost on me. This is how I do it and it goes with my belief that my boilerplate is mine, it's for me, it helps me how I work. It may be taking bits from here and there but it's be refactored to how I want it. This is just one of the decisions I've made in making my boilerplate. I hope to blog more on anything else that I've changed/edited/deleted or added to my boilerplate soon too.

Categories

Miscellaneous Rants Mobile First Responsive Web Design Javascript Did you like this post? Hire me.
blog comments powered by Disqus