GNU - 2014-2015 WordPress Theme
WordPress theme for the GNU.com Wordpress websites.
Author(s) / Inspiration
What it does
CSS development files are compiled into the _/compiled/ directory from the files imported by the _ui/css/gnu.main.scss file. They are then compressed into a production file (_ui/css/gnu.main.css) without debug info or a source map. The main CSS file is then minified for a final production build (_ui/css/gnu.main.min.css). Note that whenever a new .scss file is added, it must be manually added to the _ui/css/gnu.main.scss file.
The CSS directory structure broken into four categories.
- helpers - Used primarily for things like CSS reset/normalize files, SASS variables and mixins.
- base - Intended for base, classless, global styles for HTML elements. In addition, utilities like clear fixes and offscreen text can be considered base styles.
- components - Where the majority of your custom styling should take place. For best organization, create a new file for each new component you build and take advantage of SASS nesting techniques to keep your components self contained.
- components - Outside of the _/js/gnu.main.js file, all of your JS components should be placed here. By default, this comes with an empty name spaced file to used as a template.
- libs - Put all 3rd party JS libraries here. They can be loaded into the header or footer by specifying them at the top of the Gruntfile.js file. 3rd party library files can also be included conditionally outside of the compiled header and footer files. This comes with jQuery 1.11.1, Modernizr 2.7.2, FitVids 1.1.0, and Respond.js 1.4.2 by default.
_/inc/header-includes.php - If the development host is detected, the extended syntax _/css/gnu.main.css and compiled list of scripts as described in the Usage section below (_/inc/header-scripts.php) files will be loaded. If the host is anything other than the one mentioned in the if/then, the compiled and minified _/css/gnu.main.min.css and the concatenated and uglified _/js/gnu.header.min.js will be loaded instead.
_/inc/footer-includes.php - Similar to the header-includes.php file above, this performs the same test, but instead will either load the compiled list of scripts (_/inc/footer-scripts.php) or the concatenated and uglified _/js/gnu.footer.min.js will be loaded instead.
To get the app up and running, you will need to make sure you have the following software installed prior to running. If you've already got these all installed, skip to the app dependencies.
- Node - Download and install using the link provided.
- NPM - This should be installed automatically with Node.js.
- Grunt - Run the following command after Node/NPM are installed:
$ npm install grunt-cli -g
- Sass - Assuming you're running ruby, run the following command (if you get an error, try running with sudo):
gem install sass
Once you have the proper system dependencies installed, run the following command in the application's root directory:
Below you'll fine a list of commands to perform varying tasks followed by a detailed description of what each does.
- The run grunt task will check the _/css/gnu.main.scss file and compile all the specified scss files into _/compiled/gnu.main.css. This CSS style is expanded, have a sourcemap file, trace, debug info and line number. This is the CSS file loaded when viewing the development site.
The watch task will look for changes on all SCSS and JS files, automatically run the same processes as the default grunt task, and reload your webpage for you. (Note: If new files are added, you will make sure they are added as described above and the default grunt task will need to be run first.)
The build task should be run when you're ready to generate or update your optimized production files.
- Again, the task will check your _/css/gnu.main.scss file for which SASS files to include.
- This time, it will compile to _/css/gnu.main.css but will be compressed and will not include any of the debug options turned on for the development build.
- From that compiled file, CSS minification will be performed, further compressing the file size to a new production ready file _/css/gnu.main.min.css.
- Again, the _/inc/header-scripts.php and _/inc/footer-scripts.php files will be created.
- From those, two files will be created (_/js/gnu.header.min.js and _/js/gnu.footer.min.js) where all of the separate files listed in the PHP includes will be concatenated.
- From there, both of the concatinated JS files will be uglified (compressed).
- jQuery 1.11.1
- Modernizr 2.7.2
- FitVids 1.1.0
- RespondJS 1.4.2
- GSAP 1.14.2
- ScrollMagic 1.3.0