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 (
em) instead of
- flexbox-based layouts
- colour classes are universal instead of varying per-component
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.
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.
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
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
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):
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.
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
these instructions to
set up a local build for development, then send your changes to