Make CSS exciting again!
Tailwind CSS alternative for custom websites and creative coding
Key features
This is a framework for enthusiasts who are as passionate about CSS and front-end development as we are!
-
Rich syntax
It is like Vim for CSS. Conveniently create complex styles with a powerful syntax that is conceptually close to CSS
mlut syntax@:ah_01_hCSS@media (any-hover) { .\@\:ah_01_h:hover { opacity: 1 } } -
Consistent naming
Abbreviations are generated by a single algorithm based on CSS property popularity. If you know CSS, you already know mlut.
-
Written in Sass
Leverage the full power of the preprocessor in your handwritten CSS and easily link it to utility classes
Why choose mlut?
Strong naming
-
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
Shorter class names and convenient syntax
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
Tailwind
-
[@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>
See how much more code you need in handwritten CSS to reproduce the same styles written in mlut
Almost all power of CSS in one utility class
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>
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>Installation
Installation type
-
Install via NPM
npm i mlut -D -
And run
npx mlut -o output.css -w --content index.html -
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