LazIt CSS

It was born with the idea that the user (dev) must have all the control of his tools.

If it's a tool, so it must have a function, or more than one. Like, you can use a screwdriver as a hammer if you want, can't you? So why you woulnd't be able to use LazIt as you want?

This is what it does, you make it what you want it to be, I'm just giving you a way to do it.

If you have any issues, just let me know.
If you want to buy me a coffe, just let me know.
If you want to conquer the word, just let me know.
If you have another other problem, just forget that I exist.

Installation

First, install Lazit as a dependency in your project using one of the following package managers:

npm install lazit-css or pnpm add lazit-css or yarn add lazit-css

Customization (Optional)

To tailor Lazit to your project's needs, you can create a lazit.conf.json file in the root of your project. This JSON file lets you define various configuration options to customize the utility classes generated by Lazit.

Setup

The setup section contains the main configuration options for Lazit:

setup {
  prefix: The prefix preceding utility classes (e.g., _dn for display utilities).
  separator: The separator between the prefix and utility class (e.g., _d-n for display utilities).
  defaultFontSize: The default font size.
  rootVars: Define a list with all the CSS variables the user wants to be created. Supported values are `enabled: true`, `colors: true`, `spacements: true`
}

Settings

The settings section allows you to configure various settings for your utility classes:

{
  breakpoints: Define responsive breakpoints for your project.
  colors: Configure color-related settings, including custom colors and aliases.
  spacing: Customize spacing values for margins and padding.
  directions: Customize directions
}

• Breakpoints

  {
    enabled: Define if the projects needs or not reponsive classes
    separator: The separator between the utilities and the breakpoint (e.g., _dn@mobile for mobile screens)
    breakpoints: Define a list with breakpoint names and values (e.g., "mobile": "600px")
  }

• Colors

  {
    enabled: Define if the projects needs or not colors configs
    includeHTMLColors: If its true, the lib will include all HTML colors, such as aquablue, cadetblue and etc
    colors: Define a list with colors names and values (e.g., "red": "#f44336"). Supports all types of CSS colors, such as Hex values, rgb, rgba, etc
    colorAlias: Define a list with the colors alia and its values (e.g., "primary": "red"). The value must be one colors configured in the "colors" section
  }

• Spacing

  {
    enabled: Define if the projects needs or not spacements configs
    defaultSpacingValue: Its the default spacing value, when nothing more is specified, this value will be used
    spacements: Define a list with the spacements names and values (e.g, "small": "0.25"). The value must be a decimal.
  }

• Directions

  {
    enabled: Define if the projects needs or not spacements configs
    directions: The directions that will be used to create the classes
    customDirections: Define custom directions, that can be a combination of normal directions
  }

Utilities

The utilities section is where you define the utility classes you want to generate:

{
  enabled: If you want the utilities to be created
  utilities: {  The list with all the utilities configs, for now, just the options listed here can be used
    display: Configure display utilities
    position: Configure position utilities
    cursor: Configure cursor utilities
    textAlign: Configure text alignment utilities
    textColor: Configure textColor utilities
    backgroundColor: Configure backgroundColor utilities
    padding: Configure padding utilities
    margin: Configure margin utilities
  }
}

• display, position, cursor and textAlign

  {
    enabled: Define if the utility is enabled
    initial: Define the initial of the utility (e.g., d for display generated _dn for display none)
    rules: Define a list with the rules names and values (e.g., "n": "none"). The values must be existents css properties values
  }

• textColor and backgroundColor

  {
    enabled: Define if the projects needs or not reponsive classes
    initial: Define the initial of the utility
  }

• padding and margin

  {
    enabled: Define if the projects needs or not reponsive classes
    initial: Define the initial of the utility
    measureUnit: Define the measure unit of the utility, if the measure defined here is inexistent, pixel will be used as a fallback
    useDirections: Define if the classes must use the directions (e.g.: _mt for margin top)
  }

{
  "setup": {
    "prefix": "",
    "separator": "-",
    "defaultFontSize": "16px",
    "rootVars": {
      "enabled": true,
      "colors": true,
      "spacements": true
    }
  },
  "settings": {
    "breakpoints": {
      "enabled": true,
      "breakpoints": {
        "mobile": "600px"
      },
      "separator": "@"
    },
    "colors": {
      "enabled": true,
      "includeHTMLColors": true,
      "colors": {
        "red": "#f00",
        "blue": "#00f"
      },
      "colorAlias": {
        "primary": "red"
      }
    },
    "spacing": {
      "enabled": true,
      "defaultSpacingValue": "8px",
      "spacements": {
        "small": "0.25"
      }
    }
  },
  "utilities": {
    "enabled": true,
    "utilities": {
      "display": {
        "enabled": true,
        "initial": "",
        "rules": {
          "n": "none"
        }
      },
      "position": {
        "enabled": true,
        "initial": "",
        "rules": {
          "r": "relative"
        }
      },
      "cursor": {
        "enabled": true,
        "initial": "",
        "rules": {
          "p": "pointer"
        }
      },
      "textColor": {
        "enabled": true,
        "initial": "c",
      },
      "backgroundColor": {
        "enabled": true,
        "initial": "bg",
      },
      "padding": {
        "enabled": true,
        "initial": "p",
        "measureUnit": "px"
      },
      "margin": {
        "enabled": true,
        "initial": "m",
        "measureUnit": "px"
      }
    }
  }
}

The default config file can be accessed here

Generating Utility Classes

Once Lazit is installed and, optionally, your lazit.conf.json is configured, you can generate utility classes using the following command:

npx lazit-css

This command will generate utility classes based on your configuration and save them to a CSS file.

Importing Lazit

To use the utility classes in your project, import Lazit as follows:

import 'lazit-css';