May 9

Why you should know about Fronthack

Why you should know about Fronthack

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?

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.

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.

Forget about writing vendor prefixes for CSS3 properties using Autoprefixer.

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.

What websites has Fronthack helped to deliver?


Eureka website

MVP Space

MVP Space website

Web Architecture
and Technologies Ltd
Better Space, 127 Farringdon Road
London EC1R 3DA, United Kingdom
VAT Number GB100609172
WAAT Switzerland GmbH
Bernoullistrasse 20, CH-4056 Basel
WAAT Poland Sp. z o.o.
Telewizyjna 48, 01-492 Warszawa
Due to a high number of spam calls please contact us via email only
Send us a message

Follow us
  • Facebook
  • Linkedin
  • Twitter