mlut

Full-featured and hackable toolkit for writing standards-based Atomic CSS. Get almost all power of CSS in one utility.

Usage no npm install needed!

<script type="module">
  import mlut from 'https://cdn.skypack.dev/mlut';
</script>

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.

Build Status

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 in node_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