Introducing Mr150’s MLUT: A CSS Utility that Sets a New Standard in Web Development
From an array of strategic features to robust documentation, explore the innovative aspects of this powerful toolkit for crafting custom CSS styles.
Key Aspects
- features
- naming convention
- design
- ergonomics
- extension
- integration
- documentation
Tags
My Little UI Toolkit Features
Strong Naming Convention
My Little UI Toolkit (mlut) introduces a strong naming convention that simplifies the creation and understanding of CSS classes. Unlike Tailwindcss and Tachyons, which can have ambiguous class names, mlut's naming follows a clear algorithm that directly corresponds to CSS properties. For example, 'Jc-c' translates to 'justify-content: center', and 'Js-c' to 'justify-self: center'. This consistency makes it easier for developers familiar with CSS to quickly adapt to using mlut.
Almost Arbitrary by Design
One of the standout features of mlut is its ability to handle almost arbitrary values, states, and at-rules with ease. This flexibility allows for more customized and dynamic styling. For instance, '.Ml-1/7' translates to 'margin-left: -14.3%', and states like 'Bgc-red200_h,f' can be used to define hover and focus states in a compact format. This feature significantly enhances the toolkit's versatility.
Great Ergonomics
mlut offers great ergonomics with shorter class names and a more intuitive syntax for complex values, states, and at-rules. This is demonstrated by a comparison with Tailwindcss, where mlut's class names are notably shorter and more readable. Additionally, mlut allows for the convenient addition of utilities, states, and custom at-rules with just a few lines of code, making it highly extensible and developer-friendly.
My Little UI Toolkit Structure
Library
The mlut library is modular, allowing developers to include only the necessary components. It consists of base styles, which include variables and generic CSS like reset or normalize, and helpers, which are more complex and can consist of several CSS rules. This modularity ensures that the toolkit is lightweight and tailored to the project's needs.
Tools
mlut's tools include settings, mixins, and functions that enable the generation of utilities and the writing of styles. These tools are based on the settings provided, making the toolkit highly customizable and adaptable to various project requirements.
Addons
Addons in mlut can contain any tools, settings, and styles, providing additional functionality. Currently in the preview stage, these addons are expected to be moved to separate packages in the future, further expanding the toolkit's capabilities.
My Little UI Toolkit Getting Started
Installation
Getting started with mlut involves two main approaches: using the toolkit with CLI or a plugin, or including the assembled CSS distributive. Installation can be done via NPM or through a CDN, providing flexibility depending on the project setup and developer preferences.
Usage
Usage of mlut can be as simple as including a CSS file via CDN and using classes in the markup, or more complex with the CLI for on-demand utility generation (JIT mode). The toolkit supports both JIT and AOT modes, catering to different development needs and preferences.
My Little UI Toolkit Documentation
Overview
Comprehensive documentation for mlut is available both online and can be run locally. This documentation is generated using KSS-node from comments in the source code, ensuring that it is always up-to-date with the latest features and changes. It covers all aspects of the toolkit, from basic usage to advanced customization and integration.
My Little UI Toolkit Future Developments
Upcoming Features
The mlut roadmap includes several exciting developments, such as first-class CSS functions in utilities values, states and at-rules grouping, performance optimization, and much more. These enhancements aim to further improve the toolkit's functionality, usability, and efficiency.