What's in this repo?
Files for JS, CSS, SCSS, Grunt and an HTML boilerplate
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.
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.
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" : http://compass-style.org/help/tutorials/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
Basic tool for grunt to run locally in project
Combines media queries in css file once scss files are compiled
Adds compass for sass. Lots of cool features built in with compass.
Concatenates all js files into one
Minifies css files (including criticalcss files)
Minifies images in an specified folder (public/img) and outputs the minified images to another (public/img-optimized)
Lists JS files for errors. If any are found, the build will fail.
Minifies js files once they are concatenated
Watches certain folders/files for changes and runs tasks for those files
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.
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:
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.
To run another command at anytime, you may enter it in the terminal. Ex: