My Little UI Toolkit

Microlaunch - Launch, get feedback, exposure and first customers over a month

Награда Продукт недели #2 | Product Radar

The best CSS framework for custom websites and creative coding.
Make CSS exciting again!

Table of Contents

Features

Strong naming convention

❌ Tailwindcss:

justify-*: content, items or self?
flex => display: flex, but flex-auto => flex: 1 1 auto;
bg-none - reset all background? Nope, only background-image

❌ Tachyons:

br-0 => border-right-width: 0, but br1 => border-radius:.125rem
normal: line-height, font-weight or letter-spacing?
b: bottom, border or display: block? Nope, it is font-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:

<!-- Tailwindcss -->
<div class="relative -bottom-px col-span-full col-start-1 row-start-2 h-px bg-(--cardBg)"></div>

<!-- mlut -->
<div class="Ps B-1 Gc1/-1 Gcs1 Grs2 H1 Bgc-$cardBg"></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-[length:var(--myVar,1.3rem)]
supports-[margin:1svw]:ml-[1svw]

✅ mlut:

@:ah_O1_h => @media (any-hover) { .\@\:ah_O1_h:hover { opacity: 1 } }
Fns-$myVar?1.3 => font-size: var(--ml-myVar, 1.3rem);
@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 in node_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
Interactive lesson: EN, RU
Man or boy test in CSS: EN, RU
CSS counters in Atomic CSS — Part 1: EN, RU
CSS counters in Atomic CSS — Part 2: EN, RU
How to combine utilities and handwritten styles in Atomic CSS?: EN, RU
How Atomic CSS and Functional Programming Are Related: EN, RU
Atomic CSS - layout and ease of being: RU
How to make one plugin for all frontend bundlers at once: RU
I hired a junior dev for my open source project. This is what happened: RU

What next?

multiple gradients
first-class pseudoselectors with arguments like has()
performance optimization
plugins for editors and IDEs with hints and autocompletion
and much more!

Acknowledgement

License

MIT