The dreaded front end framework
Published on
Frontend frameworks are everywhere these days, but are they any good?
Published on
As a Front End Developer I am reluctant to use a framework on any of my web projects. I have spent a lot of time looking at the various options including things like Bootstrap and Foundation.
I guess one reason for this is that I’m protective of my code and my projects, I want to write the code myself and ensure it’s as compact and as scalable as possible.
What’s The Problem?
Front End Frameworks often take away too much of the decision making process including things like grid systems, naming conventions, style guides and scripts with the aim of making the development quicker and simpler.
This can cause a few issues such as…
Bloat – The included files and CSS are not always utilised. It can be time consuming to go through and remove un-necessary code, especially if it has been written by someone else. Leaving all the excess selectors, mixins and jQuery plug-ins can add weight to a site and make it more difficult to maintain in the future.
Template Sites – A lot of frameworks have styles pre-defined for key elements such as buttons, form elements and banners. If left alone sites are left with a distinct look and feel to them.
Scalability - The front end architecture of a site can be key to how easy it is to maintain and build upon in the future. Using an already written set of selectors may create problems further down the line especially if they are not relevant or semantic.
Solution
Having start up files can be helpful and having a folder structure already in place will speed up any project build. Links to essential files such as the favicon and apple touch icon can also be included in a template HTML file.
These files though should be structural only, setting out the project and removing the need to re-write code and create numerous files. No specific CSS or JavaScript should be included, just a simple CSS re-set and Js Library’s such as jQuery and Modernizer. All other files should be left blank to be added to as and when required.
Some good examples of this are HTML 5 Boilerplate and Fireshell.
Both of these examples provide everything needed to quickly get up and running with a new development project without the need to run through and remove any unwanted functionality, scripts or styles.
The two examples above give complete creative control the user, allowing them to define their own unique website. Projects built using these start up’s can be tailored to suit any project.
Roll Your Own
The best solution however would be to create a file structure and way of working that suits you. Creating your own workflow and boilerplate allows you to go into much more detail and to tailor each mixin or placeholder to the exact needs of your project.