- Webknit
- WON
- Base
One of the most enjoyable parts of web design for me is being passed the new designs of a project and coding it from the ground up. There are loads of fundamental requirements that need to be considered and setting these up can take some time. Many Front end (FE) developers get a head start with something called a FE template/framework.
A FE template has also become commonly known as a Boilerplate thanks to the fantastic HTML5 boilerplate. The following is taken from their website to explain exactly what it is…
HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.
There are quite a few of these templates and Boilerplate is my personal favourite. Other popular ones include Zurb foundation and Bootstrap. Although these things are fantastic and incredibly resourceful I constantly found myself altering, removing and adding things. When I finished university and started making tons of websites for myself I decided that instead of continuously hacking these regularly updated templates I would make my own. Not only would this give me a perfect stating point for my sites but it would also give me ample opportunity to obtain – and continuously improve – my knowledge of FE development.
Base is my FE template. It’s pretty much how I like things. All FE developers have different styles and ways of doing things so I bet it won’t be to many peoples taste. For me it’s perfect and I hope that the other 2.6k people who have downloaded it like it too.
My main aim with Base was to strip it as bare as possible. Templates like Boilerplate, Foundation and Bootstrap are full of excellent additions but the vast majority of projects don’t use half of them. Everyone should know that any code residing in a project that isn’t being used is not good for performance. I’ve thrown in some basic media queries, animations and basic page styles that are easily visible in the code and can be deleted effortlessness, but in this day and age I think most people would be using them.
Base comes with both CSS and SASS, if you don’t want SASS them simply delete the folder. Originally I used to include LESS too, but after SASS became my preferred choice then I dropped to just one CSS extension language.
I’m going to elaborate on the template in a future post but for now I will just highlight some key aspects of it…
I wrote about mobile first some time ago and although it took a while for it to sink in I now realise the importance of this practice. Basically you load all the basic CSS first which would be the mobile version and base styles of a website. This means you put your best stuff forward on mobile to the best of its ability and then as the viewport gets wider the site is enhanced for larger platforms with fewer constraints. Progressive enhancement is the key word. Have a read of the post for more information on that.
All the JS should – with some exceptions – be at the bottom of a website. Rendering blocks until a script has loaded and if some JS throws an error it means that your site may not load at all. I don’t class myself an expert on JS and I realise that there are many exceptions to this case but I’ve always been taught that the just before the closing body tag is where it belongs.
Another good practice is declaring JavaScript namespaces. In order to reduce the number of objects and functions that are added to the global scope in our applications, using namespaces in JavaScript is definitely a recommended practice. By doing this we reduce the possibility of naming collisions when using our code in conjunction with other JS. I also find it makes things much easier to work with and debug.
In my root I have the index file and the base stylesheet (mobile first). I then have a folder of folders (assets) which include CSS, img, JS and SASS. I keep my base stylesheet in the root so that it’s in accordance with the way WordPress’ bloginfo( ‘stylesheet_url’ ) works. If you’re not using WordPress or want to tidy things up then move it into the assets folder and change your stylesheet paths (don’t forget to update any other image paths in the stylesheet). I’ve kept things simple but when I embark upon larger projects I extend on this folder structure and create more folders to ensure everything is easy to locate and amend quickly.
I’m awfully anal about how tidy my code is these days. Everything in Base is indented precisely, spaced evenly and commented generously. It pays dividends when it comes to debugging and it reflects how proficient you are as a developer in my opinion. Neat code most definitely demonstrations a better first impression for someone looking at – or working with – your code
That’s all I’ve got for now but I will be following this post up with another which will explain my Base template in more detail, so watch out for that.
Thanks for reading!