The main package contains core and CLI.

Installation

npm i mlut -D

Usage

You can use the toolkit in 2 modes

• JIT: generate utilities on demand. The JIT engine scans your markup and generates only the utilities you use. This is current and recommended mode of working with mlut. Here you can use our CLI or a plugin for bundlers
• AOT: generate utilities using Sass tools only. You specify in the Sass configuration what utilities you want and the generator creates them (usually more than you need). This is legacу mode, but it is still working and supported. We have no plans to deprecate it for now

CLI for the JIT mode:

Usage:
  mlut [-i input.scss] [-o output.css] [--watch] [options...]

Options:
  -h, --help            Print this help message
  -i, --input           Input Sass file
  -o, --output          Output CSS file
  -w, --watch           Watch for changes and rebuild as needed
  -m, --minify          Generate minified CSS file
      --content         Paths to content with markup
      --autoprefixer		  Add vendor prefixes to CSS properties. The 'autoprefixer' is required
      --no-merge-mq     Prevent merging of CSS media queries during minification

In the input Sass file, you can customize mlut and write your own styles. Input file is optional, but if you use it, you must import mlut

@use 'mlut' with (
  $breakpoints: (
    'xxl': 1600px,
  ),
  $colors: (
    'red0': #f20,
  ),
);

.complex-block {
  // CSS
}

You can add the JIT options here too. Options must be a valid JSON, but single quotes is allowed. Paths will be resolved relative to the JIT engine working directory

@use 'mlut' with (
  $jit: (
    'output': 'src/assets/css/style.css',
    'content': [
      'src/*.ejs', 'src/assets/js/*.js'
    ]
  ),
);

To start the build process:

npx mlut -i src/assets/sass/style.scss -w

Add the compiled CSS to your template, then start adding mlut classes to your markup

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/assets/css/style.css" rel="stylesheet">
  </head>
  <body class="M0">
    <h1 class="C-red Fnw800 P2u">
      Lorem Ipsum
    </h1>
  </body>
</html>

The web package contains mlut core bundle and the script that can be used on a web page.

Installation

<script src="https://unpkg.com/@mlut/web" type="module"></script>

Usage

Add the mlut script to your page and just use classes in the markup:

<div class="P2u Bd-s">
  <h1 class="Fns3r C-red">mlut web</h1>
  <p class="Fnst-i">CDN version is very useful for atomic CSS framework</p>
</div>

You can also use Sass config with the special style tag

<style type="text/scss">
  @use "@mlut/core/tools" with (
    $breakpoints: (
      'xxl': 1600px,
    ),
  );
</style>

mlut has a plugins for Rollup, Vite and Webpack that based on unplugin

npm i -D @mlut/plugins sass-embedded

You don't need the main mlut package to use the plugins. When using this package, you will need to install Sass separately. We recommend sass-embedded, but regular sass is also suitable.

This allows you to control the versions of all your dependencies, and to choose which Sass implementation to use.

The plugin options are similar to the mlut CLI options

interface Options {
  output: string,
  input?: string,
  minify?: boolean,
  autoprefixer?: boolean,
  noMergeMq?: boolean,
}

You can add the options in your input Sass file too. Options must be a valid JSON, but single quotes is allowed. Paths will be resolved relative to the JIT engine working directory

@use '@mlut/core' with (
  $jit: (
    'output': 'dist/assets/style.css',
    'minify': true,
    'autoprefixer': true
  ),
);

Import the plugin for the appropriate bundler from the @mlut/plugins package as in one of the examples below. You can find more detailed examples using dev-server and livereload in the plugin tests directory

We also recommend adding the input file right away:

// style.scss
@use '@mlut/core';

// your CSS or mlut config

Update the config:

// rollup.config.js
import { rollup } from '@mlut/plugins';

const mlut = rollup({
  output: 'dist/style.css',
  // other options...
});

export default {
  // rollup config...
  plugins: [mlut],
};

Add the compiled CSS to your index.html

<link href="assets/style.css" rel="stylesheet">

Start your build process:

rollup --config rollup.config.js -w

Add the mlut classes to your components:

// index.js
const component = `
	<div class="wrapper Mm7">
		<h1 class="Fns5r C-purple">Rollup plugin test!</h1>
		<p>Lorem about mlut</p>
	</div>
`;

Update the config:

// vite.config.js
import { defineConfig } from 'vite';
import { vite } from '@mlut/plugins';

const mlut = vite({
  output: 'dist/assets/style.css',
  // other options...
});

export default defineConfig(() => {
  return {
    // vite config...
    plugins: [mlut],
  }
});

Add the compiled CSS to your index.html. Note that the path to it should be the same as in the production build:

<link href="assets/style.css" rel="stylesheet">

Start your build process:

vite

Add the mlut classes to your markup:

<h1 class="C-red Fnw800 P2u">Lorem Ipsu</h1>

Update the config:

// webpack.config.js
import { webpack } from '@mlut/plugins';

const mlut = webpack({
  output: 'dist/style.css',
  // other options...
});

export default {
  // webpack config...
  plugins: [mlut],
};

Add the compiled CSS to your index.html

<link href="assets/style.css" rel="stylesheet">

Start your build process:

webpack watch

Add the mlut classes to your components:

// index.js
const component = `
	<div class="wrapper xl_Mm8">
		<h1 class="Fns5r xl_C-red">Webpack plugin test</h1>
		<p>Lorem about mlut and Webpack</p>
	</div>
`;