mlut
v7.1.1
Published
Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity
Downloads
35
Maintainers
Readme
My Little UI Toolkit
Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity. Get almost all power of CSS in one utility!
Table of Contents
Features
Strong naming convention
❌ Tailwindcss:
justify-*
: content, items or self?flex
=>display: flex
, butflex-auto
=>flex: 1 1 auto;
bg-none
- reset all background? Nope, onlybackground-image
❌ Tachyons:
br-0
=>border-right-width: 0
, butbr1
=>border-radius:.125rem
normal
: line-height, font-weight or letter-spacing?b
: bottom, border ordisplay: block
? Nope, it isfont-weight:bold
!
✅ mlut:
Jc-c
=>justify-content: center
,Js-c
=>justify-self: center
Bdr
=>border-right: 1px solid
,Bdrd1
=>border-radius: 1px
One algorithm for all. If you know CSS, you almost know mlut.
Almost arbitrary by design
- values:
.Ml-1/7
=>margin-left: -14.3%
- states:
Bgc-red200_h,f
=>.Bgc-red200_h\,f:hover, .Bgc-red200_h\,f:focus {...}
- at-rules:
@:p-c,w>=80r_D-f
=>@media (pointer: coarse), (min-width: 90rem) {...}
Great ergonomics
Shorter class names:
<!-- Example from https://www.shopify.com/ -->
<!-- Tailwindcss -->
<div class="hidden md:block md:col-span-6 md:col-start-7 lg:col-span-5 lg:col-start-8 pb-6 relative md:max-h-[130vh] reduced-motion:translate-y-0 will-change-transform duration-1000 ease-in-out transition-all reduced-motion:opacity-100">...</div>
<!-- mlut -->
<div class="D-n md_D md_Gc-s1 md_Gcs7 lg_Gc-s5 lg_Gcs8 Pb6u Ps md_Mxh130vh Tf @:pfrm_-Try0 Wlc-tf Tsd1s Tstf-eio Ts-all @:pfrm_O1">...</div>
Convenient syntax for complex values, states and at-rules. It is like Vim for CSS.
❌ Tailwindcss:
[@media(any-hover:hover){&:hover}]:opacity-100
text-[color:var(--my-var,#333)]
supports-[margin:1svw]:ml-[1svw]
✅ mlut:
@:ah_O1_h
=>@media (any-hover) { .\@\:ah_O1_h:hover { opacity: 1 } }
C-$myVar?#333
=>color: var(--ml-myVar, #333)
@s_Ml1svw
=>@supports (margin-left: 1svw) { .\@s_Ml1svw { margin-left: 1svw } }
Handy extension
Add utilities, states and custom at-rules with few lines of code
@use 'mlut' as ml with (
// add utilities
$utils-data: (
'utils': (
'registry': (
'Mil': margin-inline,
'Ir': (
'properties': image-rendering,
'keywords': (
'p': pixelated,
),
),
),
),
),
// add states
$utils-config: (
'states': (
'custom': (
'are': '[aria-expanded=“true”]',
),
),
),
);
@include ml.apply('Mil-15_-are Ir-p');
// CSS
.Mil-15_-are[aria-expanded=“true”] {
margin-inline: -15px;
}
.Ir-p {
image-rendering: pixelated;
}
And also...
- 💅️ Written in Sass and includes all its benefits
- ⚡ JIT (on-demand) and AOT mods are available
- 🔧 Fully customizable: change tokens, utilities names and any settings
- ✨ Easy to integrate in existing project. No name collisions with your CSS in the most projects. Increasing specificity in one line or for one utility.
Structure
- Sass tools
- opt-in CSS library
- Sass addons
- JIT engine
Library
The library part of toolkit consists of:
- base styles - variables and generic CSS like reset, normalize etc.
- helpers - similar to utilities: the same universal, but more complex and can consist of several CSS rules
The library is modular and you can include only what you need
Tools
Sass tools include:
- settings based on which the everything works
- mixins and functions with which you can generate utilities and write styles
Addons
Addons may contains any tools, settings and styles. Addons now at the preview stage and in the future be moved to separate packages
Packages
| Package | Description | | --- | --- | | mlut | The main package for working with CLI | | @mlut/core | The mlut core that contains Sass tools, CSS library and JIT engine | | @mlut/plugins | The mlut plugins for Rollup, Vite and Webpack |
Getting Started
There are 2 ways to start using mlut:
- toolkit: with CLI or plugin
- assembled CSS distributive
Installation
NPM
npm i mlut -D
CDN
CSS only with demo theme:
<link href="https://unpkg.com/mlut@latest/dist/mlut-demo-theme.min.css" rel="stylesheet">
Usage
Distributive
You can get assembled mlut code and include it to your project. There are some ways to get a distributive.
- just plug in with CDN
- if used
npm
, files are innode_modules/mlut/dist/
Add the files to your page like here:
<link href="css/mlut-demo-theme.min.css" rel="stylesheet">
And just use classes in the markup:
<div class="D-g Gtc-t3">
<div class="Bd P2u">
<h3>Simple text</h3>
CLI
You can use the toolkit in 2 modes
- JIT: generate utilities on demand. The JIT engine scans your markup and generates only the utilities you use. This is current and recommended mode of working with mlut. Here you can use our CLI or a plugin for bundlers
- AOT: generate utilities using Sass tools only. You specify in the Sass configuration what utilities you want and the generator creates them (usually more than you need). This is legacу mode, but it is still working and supported. We have no plans to deprecate it for now
CLI for the JIT mode:
Usage:
mlut [-i input.scss] [-o output.css] [--watch] [options...]
Options:
-h, --help Print this help message
-i, --input Input Sass file
-o, --output Output CSS file
-w, --watch Watch for changes and rebuild as needed
-m, --minify Generate minified CSS file
--content Paths to content with markup
--autoprefixer Add vendor prefixes to CSS properties. The 'autoprefixer' is required
--no-merge-mq Prevent merging of CSS media queries during minification
In the input sass file, you can customize mlut and write your own styles. Input file is optional, but if you use it, you must import mlut
@use 'mlut' with (
$breakpoints: (
'xxl': 1600px,
),
$colors: (
'red0': #f20,
),
);
.complex-block {
// CSS
}
You can add the JIT options here too. Options must be a valid JSON, but single quotes is allowed. Paths will be resolved relative to the JIT engine working directory
@use 'mlut' with (
$jit: (
'output': 'src/assets/css/style.css',
'content': [
'src/**/*.ejs', 'src/assets/js/*.js'
]
),
);
To start the build process:
npx mlut -i src/assets/sass/style.scss -w
Add the compiled CSS to your page and use mlut utils!
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/assets/css/style.css" rel="stylesheet">
</head>
<body class="M0">
<h1 class="C-red Fnw800 P2u">
Lorem Ipsum
</h1>
</body>
</html>
Plugins
mlut has a plugins for Rollup, Vite and Webpack. See details here
Documentation
Available here or can be run locally. Documentation is included in this repo and is generated using KSS-node from the comments in the sources
Articles
- Atomic CSS Deep Dive: EN, RU
- mlut - a new word in the Utility-First CSS approach
What next?
- first class CSS functions in utilities values
- states and at-rules grouping
- performance optimization
- and much more!
Acknowledgement
License
MIT