Stylament

A fundament for your document styling.

This is gonna be solid. And flexible. At the same time. 😲 Awesome!

What?

Stylament is

• a design system,
• a blueprint for building well-structured and prettily-styled web pages,
• a collection of HTML & CSS patterns.

Stylament is not

• a “CSS framework” to keep you from learning CSS,
• a simple theme to apply to your pages and be done,
• a component library adding tons of JavaScript dependencies.

Why?

After decades of using big HTML & CSS frameworks like Foundation and Bootstrap, seeing hundreds of micro-frameworks popping up, being confronted with the popular misconception called “utility first”, I finally followed the urge to build my own design system. Mainly because I wanted to give proof of the viability of really systematic design approaches.

How?

🚧 N. B.: The how is still subject to change. There may be breaking changes with every release.

Standing on the Shoulders of Giants

Stylament is inspired by a lot of good work others did before me:

• organized in layers like ITCSS
• using the best of different methodologies (the right tool for the job) like CUBE CSS
• founded on axioms like Every Layout
• driven by a comprehensive set of CSS custom properties like Open Props or Pollen

Layers of Stylament

• Axioms
• Elements
• Idioms
• Objects
• Utilities

Install

npm install stylament

Configure

Create a configuration file, e. g. custom/config.scss:

$config: (
  layout: (
    length: (
      // …
    ),
    container: (
      // …
    ),
    spacing: (
      // …
    ),
  ),
  typography: (
    font-family: (
      // …
    ),
    font-weight: (
      // …
    ),
    letter-spacing: (
      // …
    ),
    line: (
      // …
    ),
    measure: (
      // …
    ),
    scale: (
      // …
    ),
  ),
  ui: (
    radius: (
      // …
    ),
    shadow: (
      // …
    ),
  ),
  coloring: (
    palettes: (
      // …
    ),
    color: (
      // …
    ),
  ),
);

See the documentation for details.

Use

In your stylesheet entry point (e. g. index.scss) load your custom configuration and all the Stylament layers, injecting your config into the axioms layer.

@use "custom/config" as custom;

@use "stylament/css/axioms" with ($config-custom: custom.$config);
@use "stylament/css/elements";
@use "stylament/css/idioms";
@use "stylament/css/objects";
@use "stylament/css/utilities";