reign-css

Description

reign-css is a CSS starter framework built with the help of SASS preprocessor. Some of the core principles of this framework are:

Scalability

The main goal of the framework is to be as unobtrusive as possible and takes scalability into consideration, being thought as a solution for large scale applications/websites. It provides an intuitive folder structure, a clear organization of the underlying logic that builds the framework and separation of concerns when it comes to the bits and pieces that connect. This should help and provide sanity when dealing with large CSS codebases.

Composition

reign-css is built with composability in mind. It's broken down into utilities, objects and components so that the user can compose them as he/she wishes. This makes a great case for reusability as well as a faster development cycle (at the cost of embedding 2 - 3 extra classes on your HTML elements).

Presentation unopinionated

reign-css doesn't care about your app styles. Actually, it tries to provide as few visuals as possible. It just helps with the underlying structure and layout. Visuals are usually something very specific and it makes to sense to provide defaults that will be then overwritten by developers. The way something looks should be your decision.

Disclaimer: minimal styles are provided for some components, otherwise they would just not render correctly. However, those can be controlled via specific SASS variables.

Instructions for building your own version

1. Clone the repository
2. Run npm install
3. Run gulp (this will automatically watch for changes and recompile)

You can check index.html in the browser for some quick examples (utilities, objects, components).

Including reign-css in your project

reign-css is also available as an npm package.

To install the latest version of reign-css, run npm install reign-css --save-dev. After installation, you can copy the entire structure under sass folder and build on top of that or just fetch the compiled version.

Changes

If you want to change the behaviour/presentation of any utility class, object or component, make sure you check the settings folder and track down what you want to change (almost everything is defined in variables).

If you need complex behavior that significantly alters the utility class, object or component, make changes via an extension class.

Add new stuff to their corresponding folder. This will help with consistency and scalability.

License

This software is released under the terms of WTFPL v2.0 license.