About

This is a basic 12 column grid, utility-first CSS framework.

No pre-built component classes are provided. Users are encouraged to style elements by directly adding the basic utility classes in their HTML. For example, insead of styling a button by adding a .button component class to an input element, utility classes like .border .bg-gray-500 .p-3 .box-shadow may be added instead.

This approach was chosen for the ease of the creation, maintenance, and extension of the framework. At some point, if desired, component classes can be extracted. As you get used to the class names, you'll eventually be able to style entire pages without ever looking at the CSS. More can be read about the 'utility first' concept here.

How to Use

To use it in your project, clone the repo here. You can then either use the precompiled stylesheets/main.css or compile it from sass by running the command sass stylesheets/main.scss stylesheets/main.css

To install sass, click here.