Mojito CSS
A tiny utility-class engine. No build step. Just drop in the script.
~2kb no dependencies vanilla jsA tiny utility-class engine. No build step. Just drop in the script.
~2kb no dependencies vanilla js<script src="script.js"></script>
<div class="moji-flex moji-p-16 moji-bg-grey">...</div>
moji- elements on DOMContentLoaded and injects inline styles. No stylesheet needed.
Any number works — moji-p-4, moji-p-99, moji-fs-13 — no need to predefine.
| Class | CSS Output |
|---|---|
moji-p-{n} | padding: npx |
moji-m-{n} | margin: npx |
moji-pt-{n} | padding-top: npx |
moji-pb-{n} | padding-bottom: npx |
moji-pl-{n} | padding-left: npx |
moji-pr-{n} | padding-right: npx |
moji-mt-{n} | margin-top: npx |
moji-mb-{n} | margin-bottom: npx |
moji-ml-{n} | margin-left: npx |
moji-mr-{n} | margin-right: npx |
moji-px-{n} | padding-left + padding-right: npx |
moji-py-{n} | padding-top + padding-bottom: npx |
moji-mx-{n} | margin-left + margin-right: npx |
moji-my-{n} | margin-top + margin-bottom: npx |
moji-fs-{n} | font-size: npx |
moji-fw-{n} | font-weight: n |
moji-lh-{n} | line-height: n |
moji-ls-{n} | letter-spacing: npx |
moji-br-{n} | border-radius: npx |
moji-w-{n} | width: npx |
moji-h-{n} | height: npx |
moji-gap-{n} | gap: npx |
moji-z-{n} | z-index: n |
moji-op-{n} | opacity: n |
moji-border-{n} | border-width: npx |
| Class | CSS |
|---|---|
moji-bg-red/blue/green/grey/white/black/yellow | background-color: … |
| Class | CSS |
|---|---|
moji-red / blue / green | color: … |
moji-text-red/blue/green/white/black/grey | color: … |
| Class | CSS |
|---|---|
moji-flex / block / inline / inline-block / grid / hidden | display: … |
| Class | CSS |
|---|---|
moji-justify-center/start/end/between/around | justify-content: … |
moji-align-center/start/end | align-items: … |
moji-flex-col / flex-row / flex-wrap | flex-direction / flex-wrap |
| Class | CSS |
|---|---|
moji-bold / italic / underline | font-weight / style / decoration |
moji-uppercase / lowercase / capitalize | text-transform: … |
moji-text-center / left / right | text-align: … |
| Class | CSS |
|---|---|
moji-w-full / h-full / w-half / h-half | width/height: 100% / 50% |
moji-rounded / rounded-full | border-radius: 4px / 9999px |
moji-shadow | box-shadow: 0 2px 8px rgba(0,0,0,0.2) |
moji-cursor-pointer / overflow-hidden | cursor / overflow |