Front End Frameworks & Preprocessors

If you’re not using a front end framework and preprocessing your CSS, your just not keeping up!

The results are in and I can tell you definitively that they are great and they really help. I started using Bootstrap about 2 years ago when Bootstrap 2 hit the web. Then updated to using Bootstrap 3 about 8 months ago and I’ve never looked back.

Front End Frameworks

Bootstrap is the most popular front-end framework for developing responsive, mobile first projects on the web.

Bootstrap makes it possible to develop responsive websites. Responsive websites, if you haven’t heard, allow for a single website design to look and work fantastically on all screen sizes: Smartphones, Tablets, Laptops and Desktops.

Smartphones and Tablets now outnumber laptops and desktops on the web. You have to build your site for these new formats or you will lose visitors, lots of them!

Preprocessors

Preprocessors are a technical innovation that saves time and makes providing the above more cost effective for clients.

There are many computer languages used on the web, but mainly there are three HTML, CSS, and Javascript.

HTML is the structure of a webpage, the guts, the elements that hold the content so that they can be defined in detail and targeted for customization by styling. Some are structural and invisible to a site viewer, others are the actual content.

CSS is the language used to define the styles, the look and feel, colors, spacing, fonts, font size, etc. of the HTML elements.

Javascript is used to add interactivity and coolio neato effects and animation to the HTML elements and styling. You can use a little or a lot or none. You can even build whole websites and whole web servers in Javascript alone, but that is another discussion.

Preprocessors are available for all of the above, but the ones that help you build better CSS are the ones I’ve adopted. I build all my style sheets using the LESS language which is then compiled or converted to pure CSS. There are other pre processed styling languages like SASS and SCSS. But I use LESS which was the language used to build Bootstrap’s CSS. Which allows me to customize my Bootstrap framework for every site I build.

The very simple act of being able to define your colors in human readable forms like @RED or @BLUE instead of  hexadecimal code which looks like this #ffffff or #0000ff, saves innumerable amounts of time and improves your color accuracy immensely. That’s just the tip of the iceberg! That’s just the use of variables in your styling.

You can add logic to your LESS files too…….which adds conditional statements to your styling. The possibilities are endless.