Edna CSS Framework

It's a custom CSS framework, dig it!

THIS VERSION OF EDNA SHOULD ONLY BE USED FOR THE NEW REACT BUZZ

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

The default task that runs grunt-contrib-less and grunt-contrib-cssmin.

Build Options

grunt build --grunticon

This runs grunt-grunticon so you can get some fancy SVG icons.

grunt build --lint

This runs grunt-contrib-csslint and https://github.com/gruntjs/grunt-contrib-sass. Both of these will go through the CSS and show you errors.

grunt build --colors

This runs grunt-colorguard which will give you a bunch of information on all the colors used in Edna.

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

This runs grunt-kss, grunt-grunticon and 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

This runs the grunt kss-build task above along with grunt-browser-sync and 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

This runs a whole slew of things: grunt-express, grunt-grunticon, grunt-contrib-less, grunt-contrib-cssmin and grunt-contrib-watch