Welcome to the BinaryCSS's Documentation

This is a simple HTML template styled with BinaryCSS framework .

Typography Utilities

Font Sizes

Font Weights

Text Alignments

Border Utilities

Border Presence

.border
.border-top
.border-right
.border-bottom
.border-left
.border-none

Border Widths

.border-0
.border (default)
.border-2
.border-4

Border Colors

.border-default
.border-gray
.border-primary
.border-danger
.border-success
.border-black

Border Radius

.rounded-none
.rounded-sm
.rounded-md
.rounded-lg
.rounded-xl
.rounded-full

Width & Height Utilities

Width

.w-auto
.w-25
.w-33
.w-50
.w-66
.w-75
.w-100
.w-screen
.w-min
.w-max

Height

.h-auto
.h-64 (16rem)
.h-80 (20rem)
.h-96 (24rem)
.h-100
.h-screen
.h-min
.h-max

Margin & Padding Utilities

Margin

.m-0 (Overall)
.mt-4 (Top)
.mb-4 (Bottom)
.mr-4 (Right)
.ml-4 (Left)
.mx-4 (Left & Right)
.my-4 (Top & Bottom)

Padding

.p-0 (Overall)
.pt-8 (Top)
.pb-8 (Bottom)
.pr-8 (Right)
.pl-8 (Left)
.px-8 (Left & Right)
.py-8 (Top & Bottom)

Font Color and Background Color Utilities

Font Color

.text-black
.text-white
.text-gray
.text-red
.text-green
.text-blue
.text-yellow
.text-purple
.text-indigo
.text-pink
.text-rose

Background Color

.bg-black
.bg-white
.bg-gray
.bg-red
.bg-green
.bg-blue
.bg-yellow
.bg-purple
.bg-indigo
.bg-pink
.bg-rose

Buttons

Cards

Card Image
Modern Card Header
This is a flexible card component. It can have a header, image, body content, and footer actions.
No Shadow
You can use modifier classes like .card--centered or .card--shadowless.

Grid System

.col-4
.col-4
.col-4
.col-12 .col-md-6
.col-12 .col-md-6
.col-auto
.col
.col-6 .offset-3

📐 Flex Utilities Documentation

.flex / .inline-flex

Item 1
Item 2

Flex Direction

.flex-row
Item
.flex-col
Item

Flex Wrap

.flex-wrap
Item
Item

Justify Content

.justify-start
.justify-center
.justify-end
.justify-between
Item

Align Items

.items-start
.items-center
.items-end

Align Self

.self-start
.self-end
.self-center

Flex Grow & Shrink

.flex-grow
Static

Flex Basis

.flex-basis-0
.flex-basis-auto

NavBar Component

📝 Contact Form

🏷️ Badges

Default Success Warning Danger

🚨 Alerts

This is a success alert — everything went well!
This is an error alert — something went wrong!
This is a warning alert — be cautious!
This is an info alert — just FYI.

📊 Table

# Name Status Email
1 Alice Active alice@example.com
2 Bob Pending bob@example.com
3 Charlie Banned charlie@example.com

🖼️ Responsive Images

Rounded Circle Responsive

🪟 Modal Demo

⬇️ Dropdown Demo

Option 1 Option 2 Option 3

🪢 Accordion Demo

What is this?
This is a responsive accordion. Click to expand or collapse.
How does it work?
JavaScript toggles the class on body to show/hide it.
Is it reusable?
Yes! Just repeat the structure with your own content.

🎠 Carousel Demo

Slide 1
Slide 2
Slide 3

🧷 Tooltip Demo

Hover me Success tooltip
Hover me Danger text tooltip

Arbitrary Margin and Padding Demo

All-Around Margins and Padding

m-[2em] p-[2em]
m-[1.5rem] p-[3em]
m-[4em] p-[1em]

Combination Examples

m-[10px] mt-[40px] px-[2rem]
mx-[auto] my-[2rem] pt-[24px]
ml-[50px] mr-[10%] py-[2em]

Arbitary Height and Width

w-[10rem] h-[10rem]
h-[15rem] w-[15rem]
h-[20rem] w-[20rem]
h-[25vh] w-[200px]

Arbitrary Font Size and Color

16px text

1.2rem text

Responsive clamped text

Changes from 14px to 18px on larger screens

tc-[red]

tc-[#3366ff]

tc-[rgb(255,0,128)]

tc-[hsl(120,100%,50%)]

tc-[var(--my-color)]

Arbitrary Background Color

bg-[#D6FFF6]
bg-[#231651]
bg-[#4DCCBD]
bg-[#2374AB]