mlut logo

Find us

Docs
mlut logo

Make CSS exciting again!

Atomic CSS toolkit with Sass and ergonomics for creating styles of any complexity

Getting started

Key features

This is a framework for enthusiasts who are as passionate about CSS and front-end development as we are!

  • Short and consistent naming

    The abbreviations are based on the popularity of CSS properties and are compiled according to a single algorithm. If you know CSS, you almost know mlut

  • Rich and native syntax

    It is like Vim for CSS. Conveniently create complex styles with a powerful syntax that is conceptually close to CSS

  • Written in Sass

    Leverage the full power of the preprocessor in your handwritten CSS and easily link it to utility classes

Learn more

Why choose mlut?

Compare it with other solutions

Strong naming conventions

Tailwind CSS

  • justify-*: content, items or self?
  • flex => display: flex, but flex-auto => flex:1 1 auto
  • bg-none => reset all backgrounds? 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? No, it is font-weight: bold

mlut

  • Jc-c => justify-content: center and Js-c => justify-self: center
  • Bdr => border-right: 1px solid and Bdrd1 => border-radius: 1px

Great ergonomics

Shorter class names

Tailwind CSS 

<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.

Tailwind CSS

  • [@media(any-hover:hover){&:hover}]:opacity-100
  • text-[length:var(--myVar,1.3rem)]
  • supports-[margin:1svw]:ml-[1svw]

mlut

  • @:ah_O1_h
  • Fns-$myVar?1.3
  • @s_Ml1svw

Almost all power of CSS in one utility class

See how much more code you need in handwritten CSS to reproduce the same styles written in mlut

mlut 

<div class="-Ctx Bgc#000 Bgc#000*50p_h D-f Fld-c Jc-c Ai-c">
  <div class="P2u;0 Js-fe ^:h_Js-fs">...</div>
  <div class="C-#fff ^:h_C-red">...</div>
</div>

Handwritten CSS

<div class="parent">
  <div class="child1">...</div>
  <div class="child2">...</div>
</div>

<style>
  .parent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000;
  }
  .child1 {
    padding: 0.5rem 0;
    justify-self: flex-end;
  }
  .child2 {
    color:#fff;
  }
  .parent:hover {
    background-color: rgba(0,0,0,0.5);
  }
  .parent:hover .child1 {
    justify-self: flex-start;
  }
  .parent:hover .child2 {
    color: red;
  }
</style>

CSS Art

Yes, this is pure CSS art using utility classes! With mlut it is possible

More arts

Installation

  • Install via npm

    npm i mlut -D

  • And run

    npx mlut -o output.css -w --content index.html

  • Or with Sass config and base styles

  • Create input file

    echo "@use 'mlut';" > style.scss

  • Add configuration if you need

    // style.scss
@use 'mlut' with (
  // your config
);

  • And run

    npx mlut -i input.scss -o output.css -w --content index.html
Try now