A fundament for your document styling.
This is gonna be solid. And flexible. At the same time. 😲 Awesome!
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.
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.
🚧 N. B.: The how 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 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
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: (
// …
),
),
);
See the 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 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";