Skip to content
Website Boilerplate
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

What's in this repo?

Files for JS, CSS, SCSS, Grunt and an HTML boilerplate


Included Javascript files

Customize these files as needed

JS object for validating and submitting forms. Also includes a Response object for the response from the form.
This object uses the webshim located in the js vendor directory. It must be declared for legacy browser validation to work.

Easy peasy lightbox object. Requires .lightbox, .lightbox-link classes. Change them as needed though. These classes are also referenced in the scss files.

MobileMenu.js Handles click events for hamburger icons. Inject nav elements into a mobile-nav-wrapper.

JavaScript vendor files

These files work out of the box. No need for modifications

for form validation

for media queries in legacy browsers

for html5 elements in legacy browsers

a build of jquery

support detection for browser features such as svg, canvas...included by default with webshim

for making the html5 picture element work in legacy browsers



Included SCSS files

for normalizing browsers
This file shouldn't need to be edited. It is already good to go.

for helper classes such as .mobile-only, .non-mobile and .clearfix

for global declarations site wide, such as a wrapper or html,body.

for grid layouts such as an equal height grid or a simple grid. Uses a $totalColors sass variable that is set in vars.scss

styles for a hamburger icon. Requires 4 html elements that are in this index.html file.

has styles for a mobile navigation. Requires 2 html elements.

simple styles for a basic lightbox

for all sass variables. Place re-used colors, media query sizes, font names, and any other variables you want to create.

imports all other scss files. Importing order does matter.

SASS guidelines

Create multiple files for different modules.
Such as one for the hamburger, one for the main-nav, one for the mobile-nav, one for the lightbox, one for the home-hero, one for the subpage-hero, on for typography, one for the grid...
Only nest selectors by 2 times.
Compass's "Best Practices" :

Compiling SCSS files into one

Separated files that need to be imported must be prefixed with "_", for example:
Then, in the layout.scss file, @import "hamburger"; for all .scss files.




package.json File and Grunt Tasks

Included packages:
"grunt": "~0.4.2"
Basic tool for grunt to run locally in project

"grunt-combine-media-queries": "~1.0.19"
Combines media queries in css file once scss files are compiled

"grunt-contrib-compass": "~0.9.0"
Adds compass for sass. Lots of cool features built in with compass.

"grunt-contrib-concat": "~0.5.0"
Concatenates all js files into one

"grunt-contrib-cssmin": "^0.14.0"
Minifies css files (including criticalcss files)

"grunt-contrib-imagemin": "^1.0.0"
Minifies images in an specified folder (public/img) and outputs the minified images to another (public/img-optimized)

"grunt-contrib-jshint": "~0.10.0"
Lists JS files for errors. If any are found, the build will fail.

"grunt-contrib-uglify": "~0.5.0"
Minifies js files once they are concatenated

"grunt-contrib-watch": "^0.6.1"
Watches certain folders/files for changes and runs tasks for those files

"grunt-criticalcss": "0.6.0"
Creates the criticalcss for pages when scss files are updated/saved.
The criticalcss needs to be placed in a style tag in the head element. Use a php require(file) to import them dynamically.

"grunt-grunticon": "^2.2.2"
Converts svgs into css/png and provides fallbacks and scripts.

Grunt package installation

First, make sure node, npm and grunt-cli are installed on your machine/vm.
Once they are, in your terminal, cd into the projects directory and enter the command:

npm install

Packages may take a while to install, especially phantomJS. Give it time.
Packages listed in the package.json file will be loaded into an node_modules directory.
Please add the node_modules directory to the .gitignore file

Running Grunt Tasks

In this Gruntfile.js file, the default grunt task will run the "watch" task when you enter "grunt" into the terminal.

grunt.registerTask('default', ['watch']);

To run another command at anytime, you may enter it in the terminal. Ex:

grunt jshint
You can’t perform that action at this time.