Overview

stylific is a CSS library written with Sass. It's designed to serve as a flexible website foundation, and provides some common UI components as building blocks.

In many ways this is similar to Bootstrap, with a few differences:

• typographic units (rem and em) instead of px
• flexbox-based layouts
• colour classes are universal instead of varying per-component
• no jQuery dependency, extremely lean JavaScript

Prior to version 0.7.0, stylific used custom tag names and attributes for most of the styling. Starting with 0.7.0, all styles are class-based for compatibility with React and/or strict HTML validators.

Flexible Units

stylific uses em and rem units for most dimensions. Unlike pixels, they scale with font size, and automatically cascade changes to the base size across the entire layout. This makes your website easily scalable, and keeps dimensions extremely stable between different screen and font sizes.

In combination with flexbox layouts, this makes you mobile-friendly practically for free. You can get away with just adjusting the html font size for different displays. In fact, stylific does that by default.

Flexbox

The flexbox specification solves problems that used to demand convoluted workarounds, obviates the need for specialised grid systems, and lets you create intelligent, self-scaling layouts without fixed dimensions. Browser support (with vendor prefixes) is already good enough. The wonderful autoprefixer can add them automatically.

See Layout for details.

Installation and Usage

To fully benefit from stylific, you'll need the Sass preprocessor and a build system to compile it. If you're not familiar with preprocessors, head over to the repository and check gulpfile.js for an example build system. It uses gulp as the task runner. Look for the style tasks.

You'll also need a package manager to install stylific. It's available on npm, jspm, and bower. Let's use npm as an example. cd to your project's root and run:

npm i --save-dev stylific

After installing, import it in your Sass source (adjust the path if needed):

@import './node_modules/stylific/scss/stylific';

This allows you to configure the library with variables, subclass built-in components, and so on.

Caution: neither Sass nor stylific account for missing vendor prefixes. You must compensate by combining it with autoprefixer in your build system.

Contributing

I'd love you to get involved!

To contribute to the library, send a pull request or open a new issue.

You can contribute to this documentation, too! It's generated from src-docs in the master branch and served as gh-pages. Follow these instructions to set up a local build for development, then send your changes to master.