active-share-styles

Status

Contents

• Install
• Usage
• Documentation
  • Dependencies
  • Running locally
  • Publishing
  • CSS stats
• Versioning
• License
• Example

Build

npm run compile

Install

npm i -S active-share-styles

Manually

Download the latest release and copy the LESS files over to your own project. Once your files are in place, jump to the usage guidelines for including styles into your own CSS.

Usage

Once included, simply @import either the master LESS file, or the individual files as you need them.

// Example: All of Styles
@import "active-share-styles/less/active";

// Example: Individual files
@import "active-share-styles/less/base/variables";
@import "active-share-styles/less/base/font";
@import "active-share-styles/less/base/utility";

Documentations

The documentation is built with Jekyll and published to http://starandtina.github.io/active-share-styles via the gh-pages branch.

Dependencies

You'll need the following installed:

• Latest Jekyll: gem install jekyll
• Latest Rouge: gem install rouge
• Latest LESS: gem install less
• Latest Grunt CLI: npm install -g grunt-cli
• Node.js and npm

Chances are you have all this already if you work on github/github or similar projects. If you have all those set up, now you can install the dependencies:

npm i

Running locally

From the Terminal, start a local Jekyll server:

jekyll s

Open a second Terminal tab to automatically recompile the LESS files, run autoprefixer, and update our CSS stats file:

grunt watch

Alternatively, you can manually run grunt and jekyll serve when needed.

Publishing

Use the included Grunt task to generate and publish docs to the gh-pages branch.

grunt publish

This takes the _site directory, generates it's own Git repository there, and publishes the contents to the gh-pages branch here on GitHub. Changes are reflected in the hosted docs within a minute or so.

CSS stats

When compiling or watching the LESS files, Grunt will automatically generate a .css-stats.md file. This is tracked in the Git repository to provide us historical and contextual information on the changes we introduce. For example, we'll know when the number of selectors or declarations rises sharply within a single change.

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, it is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to those rules whenever possible.

License

MIT license.

Example

See starandtina/active-share-styles-example