Skip to content

DanonymousCoder/Anon-UI

1 Branch0 Tags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

DanonymousCoderDanonymousCoder
Merge branch 'main' of https://github.com/DanonymousCoder/Anon-UI
Dec 14, 2025
aaac6cd · · Dec 14, 2025

History

26 Commits
cli
cli
Dec 14, 2025
dist
dist
Dec 8, 2025
src
src
Dec 14, 2025
test
test
Dec 11, 2025
README.md
README.md
Dec 12, 2025
build.js
build.js
Nov 23, 2025
package.json
package.json
Dec 8, 2025
responsive.css
responsive.css
Dec 11, 2025

Repository files navigation

Anon UI

Dark-first utility CSS framework with innovative bracket-based responsive syntax

npm version License: MIT

Why Anon UI?

  • Dark-First: Built for dark mode by default
  • Utility-First: Like Tailwind, but cleaner
  • Bracket Syntax: Group responsive utilities: md-[text-center bg-success p-4]
  • Zero Config: Works out of the box
  • Pure CSS: No PostCSS required
  • Mobile-First: Responsive by default

Installation

Demo Video

https://www.youtube.com/watch?v=r7hC9GpXKv4

Via npm

npm install anon_ui

Via CDN

link rel="stylesheet" href="https://unpkg.com/ano_ui/dist/ano_ui.css" />gt;
/ano_ui.css" />" tabindex="0" role="button">

Quick Start

1. Install the framework

npm install anon_ui

2. Link in your HTML

>gt;

html>gt;
   head>gt;
     link rel="stylesheet" href="node_modules/anon_ui/dist/anon_ui.css" />gt;
   head>gt;
   body class="bg-primary text-primary">gt;
     h1 class="text-2xl font-bold">gt;Hello Anon UI!h1>gt;
   body>gt;

html>gt;

Hello Anon UI!

t;>Hello Anon UI! " tabindex="0" role="button">

3. Use responsive bracket syntax

div class="md-[center bg-success p-6] lg-[left bg-danger p-8]">gt;
  Changes style at different breakpoints!

div>gt;
Changes style at different breakpoints!
ts!
v>" tabindex="0" role="button">

4. Generate responsive CSS

npx anocss parse index.html responsive.css

5. Link generated CSS

link rel="stylesheet" href="responsive.css" />gt;
ponsive.css" />" tabindex="0" role="button">

Syntax Comparison

Tailwind:

div
   class="center md:left lg:right bg-red-500 md:bg-blue-500 lg:bg-green-500"

>gt;div>gt;
t; >
v>" tabindex="0" role="button">

Anon UI:

div class="md-[left bg-blue-500] lg-[right bg-green-500]">gt;div>gt;
ot;>
" tabindex="0" role="button">
  • [ X ] Cleaner
  • [ X ] Less repetition
  • [ X ] Grouped by breakpoint

CLI Commands

# Parse HTML and generate responsive CSS

anon_ui parse index.html responsive.css



# Watch mode (auto-rebuild on changes)

anon_ui watch index.html responsive.css



# Create config file

anon_ui init



# Show version

anon_ui --versionon

Utility Classes

Layout

Display & Flexboxxbox

-->

div class="flex">gt;Flexbox containerdiv>gt;

div class="grid">gt;Grid containerdiv>gt;

div class="block">gt;Block elementdiv>gt;

div class="inline-block">gt;Inline blockdiv>gt;

div class="none">gt;Hidden elementdiv>gt;


-->

div class="flex flex-row">gt;Horizontal flexdiv>gt;

div class="flex flex-column">gt;Vertical flexdiv>gt;

div class="flex flex-row-reverse">gt;Reversed horizontaldiv>gt;

div class="flex flex-column-reverse">gt;Reversed verticaldiv>gt;


-->

div class="flex flex-wrap">gt;Wrapping flex itemsdiv>gt;

div class="flex flex-nowrap">gt;No wrappingdiv>gt;


-->

div class="flex items-start">gt;Align topdiv>gt;

div class="flex items-center">gt;Align centerdiv>gt;

div class="flex items-end">gt;Align bottomdiv>gt;

div class="flex items-stretch">gt;Stretch itemsdiv>gt;

div class="flex items-baseline">gt;Align baselinediv>gt;


-->

div class="flex justify-start">gt;Justify startdiv>gt;

div class="flex justify-center">gt;Justify centerdiv>gt;

div class="flex justify-end">gt;Justify enddiv>gt;

div class="flex justify-between">gt;Space betweendiv>gt;

div class="flex justify-around">gt;Space arounddiv>gt;
Flexbox container
Grid container
Block element
Inline block
Hidden element
Horizontal flex
Vertical flex
Reversed horizontal
Reversed vertical
Wrapping flex items
No wrapping
Align top
Align center
Align bottom
Stretch items
Align baseline
Justify start
Justify center
Justify end
Space between
Space around
quot;>Justify center
Justify end
Space between
Space around
ound">Space around
" tabindex="0" role="button">

Grid

div class="grid grid-cols-2">gt;2 columnsdiv>gt;

div class="grid grid-cols-3">gt;3 columnsdiv>gt;

div class="grid grid-cols-4">gt;4 columnsdiv>gt;

div class="grid grid-cols-5">gt;5 columnsdiv>gt;
2 columns
3 columns
4 columns
5 columns
t;grid grid-cols-5">5 columns
iv>" tabindex="0" role="button">

Width & Heightight

-->

div class="w-full">gt;Full width (100%)div>gt;

div class="w-auto">gt;Auto widthdiv>gt;

div class="w-screen">gt;Viewport width (100vw)div>gt;


-->

div class="max-w-sm">gt;Small max width (600px)div>gt;

div class="max-w-md">gt;Medium max width (725px)div>gt;

div class="max-w-lg">gt;Large max width (1200px)div>gt;

div class="max-w-xl">gt;XL max width (1450px)div>gt;


-->

div class="h-full">gt;Full height (100%)div>gt;

div class="h-auto">gt;Auto heightdiv>gt;

div class="h-screen">gt;Viewport height (100vh)div>gt;

div class="min-h-screen">gt;Min viewport heightdiv>gt;
Full width (100%)
Auto width
Viewport width (100vw)
Small max width (600px)
Medium max width (725px)
Large max width (1200px)
XL max width (1450px)
Full height (100%)
Auto height
Viewport height (100vh)
Min viewport height
uot;h-screen">Viewport height (100vh)
Min viewport height
rt height
" tabindex="0" role="button">

Border Radius

div class="rounded-sm">gt;Small radiusdiv>gt;

div class="rounded-md">gt;Medium radiusdiv>gt;

div class="rounded-lg">gt;Large radiusdiv>gt;

div class="rounded-xl">gt;XL radiusdiv>gt;

div class="rounded-full">gt;Full radius (circle)div>gt;

div class="rounded">gt;Default radiusdiv>gt;
Small radius
Medium radius
Large radius
XL radius
Full radius (circle)
Default radius
e)
Default radius
/div>" tabindex="0" role="button">

Spacing

Padding

-->

div class="p-0">gt;No paddingdiv>gt;

div class="p-1">gt;Padding 1div>gt;

div class="p-2">gt;Padding 2div>gt;

div class="p-4">gt;Padding 4div>gt;

div class="p-8">gt;Padding 8div>gt;

div class="p-12">gt;Padding 12div>gt;

div class="p-16">gt;Padding 16div>gt;


ht) -->

div class="px-2">gt;Horizontal paddingdiv>gt;

div class="px-4">gt;Horizontal padding 4div>gt;

div class="px-8">gt;Horizontal padding 8div>gt;


om) -->

div class="py-2">gt;Vertical paddingdiv>gt;

div class="py-4">gt;Vertical padding 4div>gt;

div class="py-8">gt;Vertical padding 8div>gt;
No padding
Padding 1
Padding 2
Padding 4
Padding 8
Padding 12
Padding 16
Horizontal padding
Horizontal padding 4
Horizontal padding 8
Vertical padding
Vertical padding 4
Vertical padding 8
y-2">Vertical padding
Vertical padding 4
Vertical padding 8
l padding 8
" tabindex="0" role="button">

Margin

-->

div class="m-0">gt;No margindiv>gt;

div class="m-2">gt;Margin 2div>gt;

div class="m-4">gt;Margin 4div>gt;

div class="m-8">gt;Margin 8div>gt;


ht) -->

div class="mx-2">gt;Horizontal margindiv>gt;

div class="mx-4">gt;Horizontal margin 4div>gt;

div class="mx-auto">gt;Center with auto marginsdiv>gt;


om) -->

div class="my-2">gt;Vertical margindiv>gt;

div class="my-4">gt;Vertical margin 4div>gt;

div class="my-auto">gt;Vertical auto marginsdiv>gt;
No margin
Margin 2
Margin 4
Margin 8
Horizontal margin
Horizontal margin 4
Center with auto margins
Vertical margin
Vertical margin 4
Vertical auto margins
iv class="my-4">Vertical margin 4
Vertical auto margins
margins
" tabindex="0" role="button">

Gap (for Flex & Grid)rid)

div class="flex gap-1">gt;Small gapdiv>gt;

div class="flex gap-2">gt;Gap 2div>gt;

div class="flex gap-4">gt;Gap 4div>gt;

div class="flex gap-8">gt;Gap 8div>gt;

div class="grid gap-6">gt;Grid gap 6div>gt;
Small gap
Gap 2
Gap 4
Gap 8
Grid gap 6
Grid gap 6
div>" tabindex="0" role="button">

Typography

Font Size

p class="text-xs">gt;Extra small textp>gt;

p class="text-sm">gt;Small textp>gt;

p class="text-base">gt;Base text (default)p>gt;

p class="text-md">gt;Medium textp>gt;

p class="text-lg">gt;Large textp>gt;

p class="text-xl">gt;XL textp>gt;

p class="text-2xl">gt;2XL textp>gt;

p class="text-3xl">gt;3XL textp>gt;

p class="text-4xl">gt;4XL textp>gt;

p class="text-5xl">gt;5XL textp>gt;
Extra small text

Small text

Base text (default)

Medium text

Large text

XL text

2XL text

3XL text

4XL text

5XL text

;>3XL text

4XL text

5XL text

text

" tabindex="0" role="button">

Font Weight

p class="light">gt;Light (300)p>gt;

p class="normal">gt;Normal (400)p>gt;

p class="medium">gt;Medium (500)p>gt;

p class="semibold">gt;Semibold (600)p>gt;

p class="bold">gt;Bold (700)p>gt;
Light (300)

Normal (400)

Medium (500)

Semibold (600)

Bold (700)

(600)

Bold (700)

" tabindex="0" role="button">

Text Alignment

p class="left">gt;Left alignedp>gt;

p class="center">gt;Center alignedp>gt;

p class="right">gt;Right alignedp>gt;
Left aligned

Center aligned

Right aligned

;right">Right aligned

p>" tabindex="0" role="button">

Text Transform

p class="uppercase">gt;UPPERCASE TEXTp>gt;

p class="lowercase">gt;lowercase textp>gt;

p class="capitalize">gt;Capitalized Textp>gt;
UPPERCASE TEXT

lowercase text

Capitalized Text

ize">Capitalized Text

p>" tabindex="0" role="button">

Colors

Background Colors

div class="bg-primary">gt;Primary backgrounddiv>gt;

div class="bg-secondary">gt;Secondary backgrounddiv>gt;

div class="bg-tertiary">gt;Tertiary backgrounddiv>gt;

div class="bg-accent">gt;Accent backgrounddiv>gt;

div class="bg-neutral">gt;Neutral backgrounddiv>gt;

div class="bg-success">gt;Success backgrounddiv>gt;

div class="bg-warning">gt;Warning backgrounddiv>gt;
Primary background
Secondary background
Tertiary background
Accent background
Neutral background
Success background
Warning background
round
Warning background
" tabindex="0" role="button">

Text Colors

p class="text-primary">gt;Primary textp>gt;

p class="text-secondary">gt;Secondary textp>gt;

p class="text-tertiary">gt;Tertiary textp>gt;
Primary text

Secondary text

Tertiary text

rtiary">Tertiary text

p>" tabindex="0" role="button">

Border Colors

div class="border-primary">gt;Primary borderdiv>gt;

div class="border-accent">gt;Accent borderdiv>gt;
Primary border
Accent border
>Accent border
>" tabindex="0" role="button">

Dark Mode

Anon UI is dark by default. For light mode, add .light class:

body class="light">gt;
   -->

body>gt;
-> y>" tabindex="0" role="button">

Toggle with JavaScript:

document.body.classList.toggle("light");

Customization

Create anon_ui.config.js:

module.exports = {
   input: "src/*_/_.html",
   output: "dist/responsive.css",
   breakpoints: {
     sm: "600px",
     md: "750px",
     lg: "1024px",
     xl: "1400px",
   },

};

Docs Link: https://anon-ui.netlify.app/

About

My very own CSS framework

Resources

Readme
Activity

Stars

0 starss

Watchers

0 watchingg

Forks

0 forkss
Report repository

Releases

No releases published

Packages

No packages published

Contributors 1

Languages