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
  • 🎨 Almost arbitrary by design
  • ✋ Great ergonomics
  • 🔨 Easiest utils generation
  • 🧩 Handy extension
  • 👀 And also...
• Structure
  • Library
  • Tools
  • Addons
• Getting Started
  • Installation
  • Usage
• Documentation
• What next
• Acknowledgement
• License

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:

<!-- 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 } }

Easiest utils generation

JIT mode planned but here is what we have now:

Range syntaxes

@use 'mlut' with (
  $utils: (
    'Bdw': ([2u, 4],),
  )
);

.Bdw2u {
  border-width: 0.5rem;
}

.Bdw3u {
  border-width: 0.75rem;
}

.Bdw4u {
  border-width: 1rem;
}

Components syntax

@use 'mlut' with (
  $utils: (
    'D': ('xl _ib_ b af'),
  )
);

.D-ib {
  display: inline-block;
}

.D-ib_b::before {
  display: inline-block;
}

.D-ib_af::after {
  display: inline-block;
}

@media (min-width: 1200px) {
  .xl_D-ib {
    display: inline-block;
  }
}

Groups

@use 'mlut' with (
  $utils: (
    'Paddings': (150),
  )
);

.P150 {
  padding: 150px;
}

.Pt150 {
  padding-top: 150px;
}

.Pr150 {
  padding-right: 150px;
}

// etc.

Top-level apply

@include ml.apply(
  '^0:+_-MyPad1.5;3u -Gdl-r,#0f0;30p,#00f;80p,red'
);

.-Ctx0 + .\^0\:\+_-MyPad1\.5\;3u {
  --ml-myPad: 1.5rem 0.75rem;
}

.-Gdl-r\,\#0f0\;30p\,\#00f\;80p\,red {
  background-image: linear-gradient(to right, #0f0 30%, #00f 80%, red);
}

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
• 🔧 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
• 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

Only core:

<link href="https://unpkg.com/mlut@latest/dist/mlut.min.css" rel="stylesheet">

or with Demo theme included:

<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.min.css" rel="stylesheet">

And just add classes to markup:

<div class="D-g Gtc-t3">
  <div class="Bd P2u">
    <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, and in particular sass-embedded for better performance
• 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: 5px,
  $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(
    'P2u 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 next?

• CLI
• JIT mode
• first class CSS functions in utils values
• and much more!

Acknowledgement

• CSS
• Emmet
• ACSS
• Tailwind CSS
• Tachyons

License

MIT