Fronthack is
a

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

Scalable and modular

Fronthack has been created for frontend developers. It combines a set of tools and best practices together, answering for question “How to deliver high quality code?“.

It is a bolierplate for your projects. Starting frontend from Fronthack will help you implement pixel-perfect designs and will make you sure that your stylesheets will remain modular and scallable.

Everything what you need

It also a commandline tool, which gives you access to library of basic visual components, which you can use on any project instead of writing them every time from scratch. As a result, with Fronthack you can develop applications in faster, better organized way.

Livereload

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

Code on designs

System that allows you to display designs under HTML code for pixel-perfect implementations.

Image compression

Build in and configured imagemin extension for loseless image compression.

Designs slicer

A tool for visual planning the components structure, 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.

Web components library

Package of ready Sass components that are very basic and boilerplate. Do not reinvent the wheel.

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

CSS reset

Contains Normalize.css to set 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 Command Line Interface

npm install -g fronthack

2. Create a new Fronthack project in current path

fronthack init

3. Navigate to a newly created fronthack directory and check available commands

cd fronthack
fronthack help

Sites built with Fronthack

Examples of realizations which frontend has been built using Fronthack.

Built with passion




Fronthack is developed by Michał Kokocinski - a frontend developer associated with WAAT Ltd. and Good AI Labs Ltd.. Primary focus on HTML, CSS and the React ecosystem.

blog: medium.com/@Frontcraft
email: michal@kokocinski.me