Why you should know about Fronthack

source: freepik.com

When it comes to your web project quality and scalability, you need to be know about Fronthack.

Okay, we’ll admit, we’re completely biased about the starterkit that was created by MVP Space developers Michal Kokocinski and Kris Gunciarz.

But apart from that small detail, the open source project has picked up a life of its own outside of MVP Space and is evolving every month to the point that we are less in the driving seat, and more passengers.

Scalable, modular HTML and CSS

Fronthack is a simple and fully hackable structure to convert designs into scalable, modular HTML and CSS. A collection of tools brought together to guide developers on proper workflow and how to deliver high quality HTML and CSS for any website or app.

Why? Because bad HTML and CSS can make projects very difficult and messy from the onset and is an area that’s often neglected by project managers and developers.

From a technical point of view: Fronthack makes websites or apps’ structure more modular.

From a business point of view: projects started with Fronthack are scalable and more flexible to change, so more future-proof.

So what does Fronthack entail?

SMACSS and BEM
Separating files according to SMACSS methodology and using BEM naming convention makes your styles scalable and easy to maintain.

Web components library
Package of web components that are very basic and boilerplate to do not reinvent the wheel.

Pure CSS
All typical jQuery use cases for basic interactions (except carousel) has become replaced with pure CSS techniques.

Written in Sass
Sass with power of variables, mixins, nesting and clean syntax.

Flexbox grid
The most flexible Flexbox Grid system based on flex property.

Minimalistic form framework
Fully operational built in framework to style the forms. Contains validation states.

Gulp
An automation tool onboard to compile and preview your work in browser on file save.

Built in helpers
Helper classes and useful mixins to minimise the effort and keep the DRY rule.

OWL Carousel
Universal OWL Carousel 2 plugin implemented as one of the components.

CSS reset
Contains Normalize.css to set default appearance on all browsers.

Autoprefixer
Forget about writing vendor prefixes for CSS3 properties using Autoprefixer.

Mustache
Simple, old school templating engine to separate common header and footer from main content of HTML prototypes.

New command line interface
Automate workflow one step more with build in generators useful for when you’re setting up new projects or working on new page components.