A way to organize and write CSS https://smcss.vbarbarosh.com
<div class="abs-f ma hsplit w800 h200 bs10 rainbow">
<div class="w200"></div>
<div class="fluid"></div>
<div class="w200"></div>
</div>
A small set of utility classes for prototyping layouts. Each class does one thing, so the class list reads as a description of the element: the snippet above is an 800×200 box centered on the screen, split horizontally into two 200px columns and a fluid middle.
$ npm i @vbarbarosh/smcss
<link href="https://unpkg.com/@vbarbarosh/smcss@2.0.0/dist/reset.css" rel="stylesheet" />
<link href="https://unpkg.com/@vbarbarosh/smcss@2.0.0/dist/sm.css" rel="stylesheet" />
A minified build is available as dist/sm.min.css.
Requires dart-sass 1.33 or newer. The public API is sm() (apply tokens to
the current selector) and smx() (emit classes).
// standalone sass >= 1.71: sass --pkg-importer=node
@use 'pkg:@vbarbarosh/smcss' as *; // exports only sm() and smx()
.card { @include sm('w200 p10 bbox'); }
// vite / webpack sass-loader resolve the package name directly
@use '@vbarbarosh/smcss' as *; // exports only sm() and smx()
// legacy @import still works, until Dart Sass 3.0 removes it
@import '@vbarbarosh/smcss';
.card { @include sm('w200 p10 bbox'); }
hsplit and vsplit split a container horizontally or vertically (but not
both). Children are inflexible by default: they keep their wN/hN size,
and fluid takes whatever is left. A classic app shell:
<body class="abs-f vsplit">
<div class="h50">header</div>
<div class="fluid hsplit">
<div class="w200 oa">sidebar</div>
<div class="fluid oa">content</div>
</div>
<div class="h50">footer</div>
</body>
Margin groups set the gap between immediate children — no margin after the
last one. mgN is for blocks (margin-bottom), miN is for inline rows
(margin-right).
<ul class="mg10">
<li>first</li>
<li>second</li>
<li>third</li>
</ul>
<div class="flex-row mi10">
<button>Save</button>
<button>Cancel</button>
</div>
<!-- center a fixed-size box inside the nearest positioned ancestor -->
<div class="abs-f ma w400 h300">modal</div>
<!-- center children of a flex row; also: cl, cr, ct, cb, tl, tr, bl, br -->
<div class="w300 h100 flex-row-c">...</div>
<div class="w200 ellipsis">one line, then …</div>
<div class="w200 ellipsis2">at most two lines, then …</div>
<div class="w200 ellipsis3">at most three lines, then …</div>
- Concepts — container, margin group, hsplit
- Reference — every class with its CSS
- Demos — live pages, also in the demos directory of this repo
$ bin/configure # npm install
$ bin/test # mocha test suite
$ bin/build # rebuild dist/ and demos/demo.css
$ bin/update-docs # regenerate docs/ (requires php)
$ bin/release # major|minor|patch — test, bump, rebuild, publish