Component-oriented, flexbox-based CSS library, written in Sass.


Keywords
css, style, scss, flexbox
License
MIT
Install
npm install stylific@0.10.1

Documentation

Deprecated. CSS frameworks are not worth it. These days I use a much smaller CSS core without any "components". See the repository.

Description

stylific is a CSS library, similar to Bootstrap, with a focus on modern CSS features.

See the documentation/demo site.

What's good:

  • No pixels. Dimensions are based on em and rem, making them easy to scale together.
  • Layouts are based on flexbox and don't use floats.

The library is written with Sass. The best way to use it is by importing into your Sass. This lets you configure stylific with variables, use its mixins, derive styles with @extend, and so on.

Installation

In a shell:

npm i --save-dev stylific
# or
bower i --save stylific
# or
jspm install stylific

In your Sass source (adjust the relative path to match yours):

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

Before importing, you can adjust variables exposed by the package, such as the tagname prefix, colours, media breakpoints, fonts, and other. See scss/_variables.scss for the full option reference.

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

Note: interactive functionality, like toggling dropdowns, requires the tiny JavaScript file included with the library.

Contributing

If you spot a bug or have a feature suggestion, please open an issue.

To contribute code, send a pull request.

Documentation (the gh-pages branch) is compiled from docs-src in the master branch. To contribute to the documentation, send pull requests to master.