Repository files navigation

A fundament for your document styling.

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

Stylament is

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

Stylament isnot

• 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.

After decades of using big HTML & CSS frameworks likeFoundation andBootstrap, 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 ofreally systematic design approaches.

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

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

• organized in layers likeITCSS
• using the best of different methodologies (the right tool for the job) likeCUBE CSS
• founded on axioms likeEvery Layout
• driven by a comprehensive set of CSS custom properties likeOpen Props orPollen

• Axioms
• Elements
• Idioms
• Objects
• Utilities

npm install stylament

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: (// …    ),  ),);

Seethe documentation for details.

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

@use"custom/config"ascustom;@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";