Frontend — A light-weight, skeleton frontend framework.

About Frontend

Welcome

Frontend by Ben Marshall was created to give frontend developers a jumpstart when building new themes and sites. It's a light-weight, no-bloat, skeleton framework that utilizes Gulp to compile stylesheets, JavaScript files and images in a organized, easy to navigate folder structure.

Features

License

Frontend by Ben Marshall 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 LICENSE.md file for details.


Getting Started

These instructions will get a copy of the project setup in a new theme. See compiling for details on how to compile code while developing.

Prerequisites

Installation

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

Compiling

The following commands can be run to compile:

  • Compiles, then watches for changes to files to re-compile:
    $ gulp
  • Lints JavaScript files:
    $ gulp lint
  • Lints and compiles JavaScript files:
    $ gulp scripts
  • Compiles Sass files:
    $ gulp compass
  • Minifies images:
    $ gulp images

Documentation

CSS, Sass & Compass

Before beginning any theming, be sure to review and set the variables in the src/scss/partials/global/_variables.scss file.

Sass files are organized into 4 main folders:

  • base - All theme base styles (base selectors, styles set via variables). DO NOT EDIT ANY OF THESE FILES!
  • components - Includes all styled components broken down into seperate folders including:
    • design - Contains all themed sections and standalone components (header, footer, buttons, etc.)
    • lib - Contains all themed sections and standalone components (header, footer, buttons, etc.)
  • global - All global Sass functions, variables, mixins, etc.
  • layout - Contains layout styles (grids, page templates, etc.)

JavaScript

  • jQuery is required.
  • Global JS variables should be set in the src/js/config.js file.
  • Variables, controllers and services should all be namespaced with Frontend to avoid conflicts with other libraries.
  • All controllers loaded on a page will be automatically initialized and do not needed to be called directly.
  • Call Frontend.init(); to reinitialize page controllers (useful with AJAX calls when new content is added).
  • Modify the JavaScript Task in the gulpfile.js to add, alter compiled JS files.

Scripts are organized into 3 different categories:

  • Controllers - Component specific functionality (main menu dropdown, accordions, etc.)
  • Services - Helper functions
  • Libraries - JavaScript libraries (jQuery, slick, etc.)

Contributing

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

Versioning

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

Authors

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


Changelog

v1.1.0 (TBD)

  • Updated file documentation.
  • Re-organized some folder structures.
  • Installed gulp-complexity.
  • Added additional Frontend common styles.
  • Added opitonal Wordpress core styles.

v1.0.0 (Oct 18, 2016)

  • Initial commit.

This documentation template is provided by Frittt Templates.