You’ll notice this blog is built on Google’s fabulous Web Starter Kit front-end framework. Or maybe you didn’t. And in that case, you should.

Once you get past the weird class names, which are probably made by Google for namespacing reasons (because I’m sure they subscribe to the cult of anti-namespace pollution), it’s pretty cool.

NOTE: I agree! Namespace pollution is a terrible thing! Just don’t hang me for using one global variable, please! Especially when there is no other solution than to rewrite the entire file!

Here’s an example of where it gets a little ridiculous

var bs = browserSync.init(null, {});
bs.events.on('init', function (api) {
	// We need to get this snippet
	// To the templating API
    var snippet = api.options.snippet;

    // NO NO DON'T SET IT TO THE PROCESS
    process.env.snippet = snippet || false;
});

I mean come on. How else was I going to get that all the way to the layout template? I would have to have gulp start the program passing that as an argument, then read arguments in the index.js file and set it to a configuration which can then be accessed by the regular common.js requires. Or… I could just set it to the process and laugh at the extra 45 minutes I saved. Plus, gulp is for dev only!

That code above actually comes from one of the projects I’m working on, which was merging the web-starter-kit with a kraken installation to allow browsersync to do its magic in a templated language. It also reloads the process when models or controllers are changed, saving a ton of headaches.

You can see it here. Yeah I know there’s a lot of commits already. @chrisdotcode already made fun of me for that and some of their names.

Google Web Starter Kit is pretty barebones and not barebones at the same time. I’ve always used Bootstrap previously. I love Bootstrap. It is easy to use, intuitive, well-documented, nice-looking, all-accomodating, and a million other positive adjectives. But my biggest problem is how annoying it is to change the column sizes. They implement gutters, which are great for making responsive layouts easily, but then just cause a host of problems when you actually have a fixed width column even on a specific screen size.

Google Web Starter kit doesn’t have gutters, but we need to append the g--last class to everything that will act as a last column. I know it’s annoying, but there isn’t really a good way to fix that problem otherwise.

Google Web Starter Kit also uses SASS, which I didn’t want to like because I’m such a Node.js guy, but have come to love also. LESS has some serious stuff to learn for quality of life, like the !default keyword, that SASS has already built in. I’m sure LESS will adopt them eventually, and then I’ll like it more again, but for now I’ll like SASS.

Anyway. Check it out. I’ll try to reuse as many Web Starter Kit elements as possible in this site at least in the beginning. After that, the overall theme may (and will, eventually) change. But until then, enjoy this vanilla experience!