Personal configuration of Funky class-less utility CSS. https://native-elements.dev/#/docs/funky/introduction

funky.config.js

module.exports = {
  minify: false,
  outputPath: "frontend/styles/funky-utilities.css",
  breakpoints: {
    xs: { max: "575px" },
    sm: { min: "576px", max: "767px" },
    md: { min: "768px", max: "991px" },
    lg: { min: "992px", max: "1199px" },
    xl: { min: "1200px", max: "1399px" },
    xxl: "1400px"
  },
  utilities: {
    "m": {
      type: "responsive",
      property: "margin"
    },
    "mb": {
      property: "margin-block-end",
      type: "responsive",
    },
    "ml": {
      items: "",
      property: "margin-inline-start",
      type: "responsive",
    },
    "mr": {
      items: "",
      property: "margin-inline-end",
      type: "responsive",
    },
    "mt": {
      items: "",
      property: "margin-block-start",
      type: "responsive",
    },
    "p": {
      type: "responsive",
      property: "padding"
    },
    "pb": {
      property: "padding-block-end",
      type: "responsive",
    },
    "pl": {
      property: "padding-inline-start",
      type: "responsive",
    },
    "pr": {
      property: "padding-inline-end",
      type: "responsive",
    },
    "pt": {
      property: "padding-block-start",
      type: "responsive",
    },
    "bg": {
      property: "background",
      states: ["hover", "focus"],
      type: "responsive",
    },
    "border": {
      property: "border",
      states: ["hover", "focus"],
      type: "responsive",
    },
    "border-b": {
      property: "border-block-end",
      type: "responsive",
    },
    "border-c": {
      property: "border-color",
      states: ["hover", "focus"],
      type: "responsive",
    },
    "border-l": {
      property: "border-inline-start",
      type: "responsive",
    },
    "border-r": {
      property: "border-inline-end",
      type: "responsive",
    },
    "border-t": {
      property: "border-block-start",
      type: "responsive",
    },
    "color": {
      property: "color",
      states: ["hover", "focus"],
      type: "responsive",
    },
    "flex": {
      property: "flex",
      type: "responsive",
    },
    "flex-b": {
      property: "flex-basis",
      type: "responsive",
    },
    "flex-d": {
      property: "flex-direction",
      type: "responsive",
    },
    "flex-g": {
      property: "flex-grow",
      type: "responsive",
    },
    "flex-s": {
      property: "flex-shrink",
      type: "responsive",
    },
    "flex-w": {
      property: "flex-wrap",
      type: "responsive",
    },
    "font-f": {
      property: "font-family",
      type: "standard",
    },
    "font-s": {
      property: "font-size",
      type: "responsive",
    },
    "font-style": {
      property: "font-style",
      type: "responsive",
    },
    "font-w": {
      property: "font-weight",
      type: "responsive",
    },
    "gap": {
      property: "gap",
      type: "responsive",
    },
    "shadow": {
      property: "box-shadow",
      states: ["hover", "focus"],
      type: "standard",
    },
    "text-a": {
      property: "text-align",
      type: "responsive",
    },
    "text-d": {
      property: "text-decoration",
      states: ["hover", "focus"],
      type: "standard",
    },
    "text-s": {
      property: "text-shadow",
      type: "standard",
    },
    "text-t": {
      property: "text-transform",
      type: "standard",
    },
  }
}

Responsible flexbox grids directly in HTML !!

<layout-box style="display:flex; --flex-d-xs:column; --gap:20px; --gap-xs:10px">
  <layout-item style="--font-w:bold">Item 1</layout-item>
  <layout-item>Item 2</layout-item>
  <layout-item>Item 3</layout-item>
</layout-box>