Skip to content

smnscp/stylament

Repository files navigation

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

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";