Frontend — A light-weight frontend framework for any project.

Frontend Documentation

Thanks for checkout out Frontend!

Frontend is a light-weight, no-bloat frontend development framework. It's purpose is to give developers a jumpstart utilizing Gulp to automate repetitive tasks, a variables file to quickly configure base elements and a standards-driven approach to help avoid spaghetti code while decreasing new developer ramp-up time.

Unlike other frontend frameworks like Foundation or Bootstrap, Frontend doesn't restrict you to any one in particular. You could think of Frontend like a base framework for others like Foundation and Bootstrap. Use what you like, discard what you don't — keeping your files well optimized.



Frontend is free for personal and commercial projects as long as you are providing a link back to this page. If you don’t want to provide a link back, simply contribute to the development and improvement of this tool. See file for details.

Getting Started



Download and extract the Frontend files to your project folder. Then run the following in Terminal from that location:

  1. To install gem dependencies:
    $ bundle install
  2. To install development dependencies:
    $ npm install


The following commands can be run to compile:

  • Compiles, then watches for changes to files to re-compile:
    $ gulp
  • Create a application variables file (only run once or your variables will be overridden)
    $ gulp variables
  • Compiles for live environments:
    $ gulp compile
  • Lints JavaScript files:
    $ gulp lint
  • Lints and compiles JavaScript files:
    $ gulp scripts
  • Compiles Sass files:
    $ gulp compass
  • Minifies images:
    $ gulp images



Please read for details on our code of conduct, and the process for submitting pull requests to us.


We use SemVer for versioning. For the versions available, see the tags on this repository.


See the full list of contributors who participated in this project.


v3.0.1 (TBD)

  • Removed optional compiled JS libraries.
  • Removed deprecated table variables.
  • Updated documentation.
  • Created a gulp variables task to automatically setup a application _variables.scss file.
  • Added the $button-font-weight variable.
  • Changed the default value of the $button-background variable.

v3.0.0 (Feb. 27, 2017)

  • Complete re-write.

This documentation template is provided by Frittt Templates.