My Frontend Build Process

Frontend Build

I’ve been a developer for some time now with a focus on the frontend. For a majority of the projects I’ve worked on, the initial “base” setup is always the same:

  1. NPM to handle my dependencies
  2. Gulp to automate repetitive tasks (linting, optimizing, transpiling, etc.)
  3. Sass to preprocess CSS
  4. Component & Modular based CSS and JS folder structure

And most importantly… sticking to established standards. My two biggest compliant’s were creating this same “base” setup for every new project and new developer ramp-up time. Both of which would eat into actual development time costing the client more money in the end. My solution was Frontend Build and with it, I’ve saved on average 3 – 8 hours depending on the project!


Frontend Build

Frontend Build is a light-weight, no-bloat front-end build framework. It’s purpose is to give developers a jumpstart utilizing Node to automate repetitive tasks, a variables file to quickly configure base elements and a standards-driven approach to help prevent spaghetti code making new developer ramp-up time much shorter.

My goal when building Frontend Build was to come up will a simple, light-weight “starter” build that I could use in any project no matter how the “V” in MCV is setup.

Since I regularly theme both WordPress and Drupal sites, I needed a universal frontend build process that would work for both while keeping with the same coding standards, naming conventions, etc. to avoid having to teach new devs coming into the project over and over again. Meet Frontend Build.

Features

  • Organized & initiative folder structure
  • Uses Sass and Compass to preprocess CSS
  • Automates the creation of styleguides using KSS Node
  • Pre-packaged with optional common classes, Sass functions and extendables
  • Automates optimization of HTML, CSS and JS
  • Provides variables file to quickly setup base theming
  • Compatible with ES2016 and Babel
  • Helps prevent spaghetti code & ramp-up time with defined standards and naming conventions
  • Allows the ability to use any frontend framework like Bootstrap or Foundation
  • Provides development and production build options for optimum optimization

After downloading, getting installed and running is simple:

$ bundle install
$ npm install
$ npm start

Download Now


I wanna hear from you!

Help me make the build process even better by commenting your suggestions below.

Author: Ben Marshall

Red Bull Addict, Self-Proclaimed Grill Master, Entrepreneur, Workaholic, Front End Engineer, SEO/SM Strategist, Web Developer, Blogger

Leave a Reply

Your email address will not be published. Required fields are marked *