DEADB17 / klaz

Inline css class definitions

Klaz

Static generation of css classes using JavaScript based on the atomic/utility class concept.

Idea: Improve on atomic/utility classes

Keep

• Single property classes
• Fixed property values (Reduce decision fatigue; keep consistency)
• Organized by break-points
• Separate from base classes

Change

• Only generate the class names that are used instead of pre-generating and purging
• Use programming language facilities for abstraction
• Write standard css properties and values but generate compact class names
• Remove break-points and pseudo-classes from class names

Example

Writing

import { createKlaz } from "./klaz.js";

const breakPoints = [
  { id: "sm", q: "min-width:  640px" },
  { id: "md", q: "min-width:  960px" },
  { id: "lg", q: "min-width: 1280px" },
];

const { kz, render } = createKlaz(breakPoints);
const classNames = kz`
text-decoration: none;
color:purple;
sm:color: red;
sm:hover:color: yellow;
md:color: green;
md:first-of-type:color: olive;
md:hover:color: brown;
lg:color: red;
lg:hover:color: yellow;
`;

Assigns to classNames a string with the generated classes

"_7h7e _1ypurple sm1yred sm1yyellow md1ygreen md1yolive md1ybrown lg1yred lg1yyellow"

As a side effect an internal style-sheet object is updated. When rendered it yields

render();

._7h7e {
  text-decoration: none;
}
._1ypurple {
  color: purple;
}
@media (min-width: 640px) {
  .sm1yred {
    color: red;
  }
  .sm1yyellow:hover {
    color: yellow;
  }
}
@media (min-width: 960px) {
  .md1ygreen {
    color: green;
  }
  .md1yolive:first-of-type {
    color: olive;
  }
  .md1ybrown:hover {
    color: brown;
  }
}
@media (min-width: 1280px) {
  .lg1yred {
    color: red;
  }
  .lg1yyellow:hover {
    color: yellow;
  }
}