- Webknit
- WON
- Base
This week I gave a presentation at work, it was my first presentation since graduating from university. It was quite daunting and I did have some jitters, but overall it went pretty well. The talk itself was on the boilerplate and a brief overview of my notes are below…..
In code terms Boilerplate basically means sections of code that are used repeatedly with little or no change.
The word dates back to the early 1900’s in the print industry where printing plates consisting of text, which would be used multiple times, were cast in steel. These pieces of metal came to be know as boilerplates.
Other commonly used names for these boilerplates include front-end template and framework.
I like to compare it to a builder who will have certain methods in place so that when he gets on site his tools are easily accessible, his cement might be ready to mix and his bricks are nicely positioned for him to get cracking.
When you start a web project there are some elements that almost always stay the same. So to be able to simply download some files and immediately start on a project is very handy.
There are plenty of FE templates on the web and some of the most popular are HTML5 boilerplate, Zurb foundation and Bootstrap.
I personally think the term Boilerplate should be made redundant in some cases. Some templates are much more extensive than others and sections of code are much more probable to be changed or used less frequently. After looking at the origin of the word boilerplate and its meaning, I never use the term boilerplate. They are (Front-End) templates (FE templates) to me.
I have my own FE template and I guess that’s the reason why I decided to talk about this particular topic. Some key points
FE templates take care of all the laborious work that needs to be done upon the start of a project such as:-
By default different browsers apply different styles to elements, meaning that websites without a reset they look different within each browser.
Therefore the goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. A CSS reset basically removes any default styling from page elements, which allows a developer to “start fresh” with any attributes that they apply when coding.
Basic Example
*{ padding: 0; margin: 0;}
This would remove padding and margin from every single element on a webpage. Then as a developer codes their website margin & padding is added to elements which require them. This is a much better approach than going backwards and removing margin/padding from elements that don’t need them.
One of the most comprehensive CSS resets is Eric Meyer’s masterpiece. It effectively neutralizes virtually every significant aspect of default, browser-applied CSS rules.
There is no correct way to reset CSS. It will all come down to the developer’s preference. Many developers – including myself – use a modified version of a popular reset. I use a modified Normalize.css reset as it’s pretty modern and in my opinion it takes modern HTML into consideration more than its competition.
I persoanlly use a modified version of normalize.css as its support for HTML5 seems to be the best on the market.
Every web includes a wide range of HTML elements that will need to be styled. More often than not many of these elements will be similar, if not the same, on many different projects.
Good examples include
By having some simple styles readily available for your site it ensures that a developer is able to get started on a project much quicker than if they had to write every bit of CSS from scratch. Once the developer has some styled marked on their page, they would then be able to style each element to match their design.
I like to keep my Base template design to an absolute minimum so that people won’t be making sites the same. It’s not a theme.
All the CSS should be mobile first as it’s – in my opinion – best 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.
Although projects will differ on their layout and width it’s nice to have some basic media queries that can get a developer started. For example the most common layouts include a two, three and four col.
These media queries are readily set up so any developer wanting to use them can simply create HTML that includes the classes for the media queries.
Most FE templates will include a demo so that you can easily see how the media queries work and copy their markup if needs be. This is ideal for those who are learning as obviously gives them opportunity to example live code and see how things are working.
My FE template includes all the JS files hooked up and ready to go. There are some example variables and namespaces to allow a user to easily copy, paste and edit.
The jQuery is linked to google’s CDN to potentially allow faster loading. I have also added a local fallback, just in case there are issues, it also works nice for local development too.
I have also included a plugin folder which includes some fancy scripts. Any plugins should be compressed and added to this folder.
Neat and tidy – it’s very neat and tidy. The indention, spacing and layout is perfect.
SASS/LESS
Modernizer – This allows conditional CSS and JS depending on the users browser
Font awesome – Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.
GOOD
BAD