#Edna CSS Framework
It's a custom CSS framework, dig it!
Edna contains:
- A custom HTML reset based on: normalize.css
- CSS styling for basic HTML elements
- A page layout system
- A widget layout system
- CSS styling based on SMACSS
View the Edna docs
##Working With Edna
Before moving on to custom build processes you will need to install some NPM dependencies
npm install
Then, depending on what you want to do, you will need one or more of the following build processes.
###Build Edna
Your most basic task. It will get you up and running.
grunt build
grunt-grunticon, grunt-contrib-less, grunt-contrib-cssmin, grunt quality-check
###Build the Documentation
The documentation is built using KSS(Knyle Style Sheets) from the source. Run the following command to generate the docs into ```kss-docs/'''
grunt kss-build
grunt-kss, grunt-grunticon, grunt-contrib-less
###Live Documentation Changes During Development
The documentation pages server as a great sandbox for style development. Using the following command with set up a documentation server that reloads the browser when style files have changed.
grunt-kss-dev
grunt kss-build, grunt-browser-sync, grunt-contrib-watch
###Start a Server
So you can view Edna locally you will need to run this command. It will watch for any changes you might make to local files and recompile the LESS as you go.
grunt server
grunt-express, grunt-grunticon, grunt-contrib-less, grunt-contrib-cssmin, grunt-contrib-watch
###Linting
Do this often to check out how your CSS fares. Also checks filesize and selector count.
grunt quality-check
grunt-contrib-analyze-css, grunt-css-metrics
###Check Edna's Colors
This is a specialized task that one won't need to run that often. The grunt-colorguard is the important task here.
grunt colors