This is a tool to create a build of the standard CLF distribution with all unused css removed. (http://clf.ubc.ca)
No, you should just use the CSS files located in full-width > release > optimized or standard > release > optimized.
It's for developers building a UBC CLF website, who don't want to include the entire Bootstrap 2 CSS framework.
You can, but if you're relying on styling or layout from the default CLF version, these may break.
You want a clean slate of CSS with just the bare minimum required by the UBC CLF.
Only css required for the 'required' CLF elements and the primary navigation, plus the Bootstrap 2 Grid system (span and offset classes). These have been replaced from alpha versions becuase the savings wasn't significant, but the potential problems were :)
Everything else.
YES! Fixed width
- //cdn.ubc.ca/clf/7.0.4-minimal/css/minimal-clf-7.0.4.css
- //cdn.ubc.ca/clf/7.0.4-minimal/css/minimal-clf-7.0.4-bw.css
- //cdn.ubc.ca/clf/7.0.4-minimal/css/minimal-clf-7.0.4-gw.css
- //cdn.ubc.ca/clf/7.0.4-minimal/css/minimal-clf-7.0.4-wg.css
Full width
- //cdn.ubc.ca/clf/7.0.4-minimal/css/minimal-clf-full-7.0.4.css
- //cdn.ubc.ca/clf/7.0.4-minimal/css/minimal-clf-full-7.0.4-bw.css
- //cdn.ubc.ca/clf/7.0.4-minimal/css/minimal-clf-full-7.0.4-gw.css
- //cdn.ubc.ca/clf/7.0.4-minimal/css/minimal-clf-full-7.0.4-wg.css
- complete-clf-no-fontawesome -- the original full package CSS files with only Fontawesome removed
- full-width -- full and fluid width CLF file package
- standard -- fixed width CLF file package
- [package]/original-css -- the unmodified CSS files, including the entire framework
- [package]/release/css -- the compressed CSS files with unused classes removed
- [package]/release/optimized -- the minimal release CSS files with Fontawesome removed
- [package]/uncompressed/css -- the uncompressed CSS files with unused classes removed
- If node.js is not installed, https://docs.npmjs.com/getting-started/installing-node
- Update Node Pakage Manager (npm) by running:
sudo npm install npm -g - Install grunt:
npm install -g grunt-cli
- Make a local copy of the git repo (using github app, etc)
- Using terminal or your cli, navigate to the repo and then into either the full-width or standard directory.
- Run npm to install the necessary packages:
npm install
- Run grunt:
grunt
There are two grunt tasks kicked off every time grunt is run: browsersync and watch. Browsersync opens the currently selected html file in a localhost environment,usually localhost:3000, and the Browsersync application at localhost:3001. The watch task updates your html with any updated css.
The other optional tasks are
- uncss
- cssmin
- criticalcss
- lesslint
- csslint
- imagemin
- cssnano
- optimize (runs uncss and cssmin)
- lint (runs csslint and lesslint)
- nano (runs cssnano)
https://www.npmjs.com/package/grunt-uncss Uncss scans the compares the used css selectors used in an associated html file and strips all unused selectors. It then saves the stripped css file to the 'uncompressed' directory. For details, refer to gruntfile.js.
https://www.npmjs.com/package/grunt-contrib-cssmin Cssmin minifies the css files in the 'uncompressed' directory and resaves them into the 'release' directory.
https://www.npmjs.com/package/grunt-criticalcss
https://www.npmjs.com/package/grunt-lesslint
https://www.npmjs.com/package/grunt-contrib-csslint
https://www.npmjs.com/package/grunt-contrib-imagemin
https://www.npmjs.com/package/grunt-cssnano This task should be run last. It's currently parsing the release/css files and doing some additional tasks, including removing the Fontawesome @font-face rule.