README
My Little UI Toolkit
Full-featured and hackable toolkit for writing standards-based Atomic CSS. Get almost all power of CSS in one utility.
Mission
- Maximum realize the potential of the Atomic CSS methodology
- Destroy the myth that Atomic CSS for those who don't know or don't like CSS
Features
- Strong naming convention: one algorithm for all. If you know CSS, you almost know Mlut
- Constructable and almost arbitrary values, states and at-rules by design
- Fully customizable: change tokens, utils names and any settings
- Configuration with great DX. All in one config: add utils, states, change settings and more with few lines of code
- Easiest utilities generation: range and components syntaxes, utils groups, top-level
apply
and not only - Well compatible with CSS conceptually. Designed for organic growing together with CSS.
- Easy to use in existing project
- Written in Sass and includes all its benefits
Structure
- Sass tools
- opt-in CSS library
- addons
Library
The library part of toolkit named Core
and 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
- utilities - such that can be used in any project, regardless of design: no colors, typography, etc. Theme utils you can find in addons
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, utilities and styles. In the core/utils/init.scss
module implemented a method to work with sets of utilities from addons. Addons now at the preview stage and in the future, may be moved to separate packages
Getting Started
There are 2 ways to start using Mlut:
- assembled distributive
- toolkit
Installation
NPM
npm i mlut -D
CDN
<link href="https://unpkg.com/mlut@latest/dist/css/mlut.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.min.css" rel="stylesheet">
And just add classes to markup:
<div class="D-g Gtc-t3">
<div class="Bd P2su">
<h3>Simple text</h3>
Toolkit
To use all Mlut features you need an assembly. You will need to install a package via NPM and:
- Dart Sass
- CSS minifier or PostCSS plugin that can group media queries. For example: CSSO or this plugin
- PurgeCSS is recommended for removing unused CSS
Once the assembly is configured, just import Mlut to your stylesheet, and configure it as you need:
@use '../../node_modules/mlut' as ml with (
$su-cf: 5,
$breakpoints: (
'xxl': 1400px
),
$colors: (
'red0': #f20,
),
$utils: (
'^_D': ('', 'n', 'f'),
),
);
Also now you can use Sass tools for writing CSS manually:
.my-card {
display: block;
@include ml.apply(
'P2su Fns1r'
);
@include ml.bp('md') {
font-size: calc(ml.px2rem(20px) + 1vw);
}
}
Probably you want to set the Sass load path for easier import:
@use 'mlut' as ml with (
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.
What's next?
- complete the documentation and add more examples
- more utilities
- JIT mode
- first class CSS functions in utils values
- and much more!
Acknowledgement
License
MIT