Frontend Framework Features
- Gulp – Development task manager
- Sass – CSS extension language
- Compass – CSS authoring framework
- imagemin – Image minifier
- Singularity – Grid framework
- Breakpoint – Sass media queries
Using the Frontend Framework
These instructions will get you a copy of the project up setup in a new theme. See compiling for notes on how to compile the code while developing.
Download and extract the Frontend files to your project folder. Then run the following in Terminal from that location:
bundle installto install gem dependencies
npm installto install development dependencies
The following commands can be run to compile:
gulp– Compiles, then watches for changes to files to re-compile
gulp compass– Compiles Sass files
gulp images– Minifies images
CSS, Sass & Compass
Before beginning any theming, be sure to review and set the variables in the
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 separate folders including:
- design – Contains all themed sections and standalone components (header, footer, buttons, etc.)
- lib – Contains all CSS/Sass libraries (Foundation, Bootstrap, slick, etc.)
- global – All global Sass functions, variables, mixins, etc.
- layout – Contains layout styles (grids, page templates, etc.)
- jQuery is required.
- Global JS variables should be set in the
- Variables, controllers and services should all be namespaced with
Frontendto avoid conflicts with other libraries.
- All controllers loaded on a page will be automatically initialized and do not needed to be called directly.
Frontend.init();to initialize page controllers (useful with AJAX calls when new content is added).
gulpfile.jsto add, alter compiled JS files.
Scripts are organized into 3 different categories:
- Controllers – Component specific functionality (main menu dropdown, accordions, etc.)
- Services – Helper functions
Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.
- Ben Marshall – Initial work – bmarshall511
See also the list of contributors who participated in this project.
This project is licensed under the MIT License – see the LICENSE.md file for details.
Version 1.1.0 (TBD)
- Updated file documentation.
- Re-organized some folder structures.
- Installed gulp-complexity.
- Added additional Frontend common styles.
Version 1.0.0 (Oct. 18, 2016)
- Initial commit.