stylament v0.23.6
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";
5 months ago
6 months ago
6 months ago
6 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
11 months ago
11 months ago
12 months ago
11 months ago
12 months ago
11 months ago
11 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago