Fronthack is
a

to convert any design into high quality HTML and CSS.
Quick start
Current v
Documentation Browse components

Generate and hack

Fronthack is an opinionated way to build a pixel-perfect implementations of UI from graphic designs. It combines a set of tools and best practices together, answering a question - How to deliver a high quality markup and stylesheets?.

You start with a blank project with only basic styles and along with a progress you generate new, standarized blocks of code using helpfull tools, like the commandline interface and in-browser overlays. Use a library of basic UI components, which are ready to theme or easily generate your new, custom ones. Always be sure that everything in the file structure has it's own dedicated place.

Scalable, modular, production ready

It is built on combination of opensource tools and best practices. As a result, with Fronthack you can develop applications in a faster, better organized way. Here is a quick look what is inside:

Livereload

A localhost server with livereload, that watch for changes in any file and automatically applies them in your browser.

Code on designs

In-browser overlay that allows you to display designs behind the page for pixel-perfect implementations.

Image compression

Build in and configured imagemin extension for loseless image compression.

Canvas tool

A designs slicer to visually plan the programmic structure of UI, before writing any code.

Written in Sass

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

SMACSS and BEM

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

Design system

Library of ready Sass components that are very basic and boilerplate. Do not reinvent the wheel if you do not have to.

Minimalistic form framework

Fully operational built in framework to style the forms. Contains validation states and input layout.

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 minimize the effort and keep the DRY rule.

CSS reset

Normalize.css is included to set the default appearance on all browsers.

Autoprefixer

Forget about writing vendor prefixes for CSS3 properties using Autoprefixer.

Mustache

A simple and old school templating engine to separate reusable elements like header and footer from the content specific for given page.

OWL Carousel

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

Getting started

1. Install the Fronthack CLI

yarn global add fronthack

2. Create new Fronthack project in a current path

fronthack init

3. Navigate to newly created project directory and check out the available commands

fronthack help
Click here if you encounter any problems during this set up

Sites built with Fronthack

Fronthack has been used by many European startups and government agencies. Here are some examples.

eurekanetwork.org clusterone.com music.uberchord.com smarter-together.eu mvp-space.com waat.eu een.ec.europa.eu

Guided by needs




Fronthack is developed by Michał Kokocinski - from the beginning of 2016 primary focused on the frontend development, especially the HTML/CSS advanced techniques and the React ecosystem. Enthusiast of open source and modern JS tools.

Github: github.com/frontcraft
Blog: medium.com/@Frontcraft
Email: michal@kokocinski.me