1 #start Getting started

There are 2 ways to start using mlut:

assembled distributive
toolkit

Source: content/main.css, line 1

1.1 #start.install Installation

NPM

npm i mlut -D

CDN

With Demo theme:

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

Source: content/main.css, line 14

1.2 #start.usage 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-demo-theme.min.css" rel="stylesheet">

And just use classes in the markup:

<div class="D-g Gtc-t3">
  <div class="Bd P2u">
    <h3>Simple text</h3>

Toolkit

mlut has a CLI:

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
      --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 page and use mlut utils!

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

Source: content/main.css, line 33