⟨⧸⟩ BinaryCSS - Modern, Lightweight CSS Framework

Getting Started

BinaryCSS is a modern, lightweight, and modular CSS framework designed to help developers build beautiful, responsive websites with ease. It provides a comprehensive suite of utility classes, a responsive grid system, and pre-built components.

Installation

You can include BinaryCSS in your project in several ways:

Option 1: Direct Download

Download the pre-compiled CSS and JS files directly from the downloads page.

HTML

<!-- CSS -->
<link rel="stylesheet" href="path/to/Binary.css">

<!-- JavaScript (optional) -->
<script src="path/to/Binary.js"></script>

Option 2: Package Manager

Install BinaryCSS via npm:

Terminal

npm install BinaryCSS

Option 3: CDN

Include BinaryCSS directly from a CDN:

HTML

<!-- CSS -->
<link rel="stylesheet" href="https://cdn.example.com/BinaryCSS/1.0.0/Binary.min.css">

<!-- JavaScript (optional) -->
<script src="https://cdn.example.com/BinaryCSS/1.0.0/Binary.min.js"></script>

Basic Usage

Here's a simple HTML template to get you started:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My BinaryCSS Project</title>
<link rel="stylesheet" href="path/to/Binary.css">
</head>
<body>
<div class="container">
<h1>Hello, BinaryCSS!</h1>

<div class="row">
  <div class="col-md-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Some quick example text to build on the card.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
  
  <div class="col-md-6">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Some quick example text to build on the card.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>
</div>

<script src="path/to/Binary.js"></script>
</body>
</html>

Browser Support

BinaryCSS is designed to work in all modern browsers. The framework is tested and compatible with:

Chrome

Firefox

Safari

Edge

Opera

Layout

Grid System

BinaryCSS includes a responsive 12-column grid system that helps you create flexible layouts for any screen size.

col-md-6

col-md-4

col-md-3

Advanced Grid Examples

.col-4

.col-12 .col-md-6

.col-auto

.col

.col-6 .offset-3

Responsive Breakpoints

The grid system includes six tiers of predefined classes for building responsive layouts:

Breakpoint	Class Prefix	Screen Width
Extra small	`col-`	<576px
Small	`col-sm-`	≥576px
Medium	`col-md-`	≥768px
Large	`col-lg-`	≥992px
Extra large	`col-xl-`	≥1200px
Extra extra large	`col-xxl-`	≥1400px

HTML

<div class="container">
<div class="row">
<div class="col-md-6">Content</div>
<div class="col-md-6">Content</div>
</div>
</div>

Utility Classes

BinaryCSS provides a comprehensive set of utility classes to quickly style elements without writing custom CSS.

Typography Utilities

Quickly style text with typography utilities:

.text-primary - Primary text color

.text-center - Centered text

.text-uppercase - UPPERCASE TEXT

.text-lg .fw-bold - Large, bold text

.text-muted - Muted text for less emphasis

Font Sizes

.text-xs
.text-sm
.text-base
.text-lg
.text-xl
.text-2xl
.text-3xl
.text-4xl

Font Weights

.font-thin
.font-light
.font-normal
.font-medium
.font-semibold
.font-bold
.font-extrabold
.font-black

Text Alignments

.text-left → Aligned Left
.text-center → Centered
.text-right → Aligned Right
.text-justify → Justified

Border Utilities

Apply borders and border styles with utility classes:

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

Arbitrary Height and Width

Define custom dimensions for your elements:

w-[10rem] h-[10rem]

h-[15rem] w-[15rem]

h-[20rem] w-[20rem]

h-[25vh] w-[200px]

📐 Flex Utilities Documentation

.flex / .inline-flex

Item 1

Item 2

Flex Direction

.flex-row

Item

.flex-col

Item

Flex Wrap

.flex-wrap

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

Flexbox Utilities

Use flexbox utilities to build flexible layouts:

HTML

<div class="d-flex justify-content-between">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>

Spacing Utilities

Control margin and padding with responsive utility classes:

Margin Utilities

.m-0 (Overall)

.mt-4 (Top)

.mb-4 (Bottom)

.mr-4 (Right)

.ml-4 (Left)

.mx-4 (Left & Right)

.my-4 (Top & Bottom)

Padding Utilities

.p-0 (Overall)

.pt-8 (Top)

.pb-8 (Bottom)

.pr-8 (Right)

.pl-8 (Left)

.px-8 (Left & Right)

.py-8 (Top & Bottom)

Arbitrary Values

BinaryCSS supports arbitrary values for more flexibility:

Arbitrary Margin and Padding

m-[2em] p-[2em]

m-[1.5rem] p-[3em]

m-[4em] p-[1em]

Combination Examples

m-[10px] mt-[40px] pl-[2rem]

mx-[auto] my-[2rem] pt-[24px]

ml-[50px] mr-[10%] py-[2em]

HTML

<!-- Margin -->
<div class="mt-4">Margin top</div>
<div class="mb-5">Margin bottom</div>
<div class="mx-auto">Horizontal centering</div>

<!-- Padding -->
<div class="p-3">Padding all sides</div>
<div class="py-4">Padding top and bottom</div>
<div class="px-5">Padding left and right</div>

Color Utilities

Apply text and background colors with utility classes:

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

Arbitrary Colors

bg-[#D6FFF6]

bg-[#231651]

bg-[#4DCCBD]

bg-[#2374AB]

Components

BinaryCSS includes a variety of reusable components to help you build common UI patterns.

Color Buttons

Outline Color Buttons

HTML

<!-- Basic Buttons -->
<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary">Secondary</button>
<button class="btn btn-success">Success</button>
<button class="btn btn-danger">Danger</button>
<button class="btn btn-warning">Warning</button>

<!-- Outline Buttons -->
<button class="btn btn-outline-primary">Primary</button>
<button class="btn btn-outline-secondary">Secondary</button>

<!-- Button Sizes -->
<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Default</button>
<button class="btn btn-primary btn-lg">Large</button>

<!-- Button with Icons -->
<button class="btn btn-primary">
<i class="fas fa-download mr-1"></i> Download
</button>

Cards

Cards are flexible content containers with multiple variants:

Card with Image

Some quick example text to build on the card.

Go somewhere

Featured

Card with Header

Some quick example text to build on the card.

Go somewhere

Last updated 3 mins ago

Colored Border Card

Card Subtitle

Some quick example text to build on the card.

Card link Another link

Advanced Cards

This is a flexible card component. It can have a header, image, body content, and footer actions.

You can use modifier classes like .card--centered or .card--shadowless.

HTML

<!-- Basic Card -->
<div class="card">
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some quick example text to build on the card.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

<!-- Card with Image (with fallback) -->
<div class="card">
<div class="card-img-container">
<img 
  src="path/to/image.jpg" 
  class="card-img-top" 
  alt="Card image"
  width="100%" 
  height="200"
  onerror="this.onerror=null; this.src='path/to/fallback.jpg';"
>
</div>
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some quick example text.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>

<!-- Card with Header and Footer -->
<div class="card">
<div class="card-header">Featured</div>
<div class="card-body">
<h5 class="card-title">Card Title</h5>
<p class="card-text">Some text here.</p>
<a href="#" class="btn btn-primary">Go somewhere</a>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>

Image Loading Best Practices

When using images in cards, follow these best practices to improve performance and user experience:

Specify dimensions: Always include width and height attributes to prevent layout shifts during page load.
Use fallbacks: Implement the onerror attribute to handle cases where images fail to load.
Optimize images: Compress images and use appropriate formats (WebP for modern browsers, with JPEG/PNG fallbacks).
Lazy loading: For long pages with many images, consider adding the loading="lazy" attribute.

HTML

<!-- Advanced Image Handling -->
<div class="card-img-container">
<img 
src="image.jpg" 
class="card-img-top" 
alt="Descriptive alt text"
width="100%" 
height="200"
loading="lazy"
onerror="this.onerror=null; this.src='fallback.jpg';"
>
</div>

Alerts

Provide contextual feedback messages for typical user actions:

This is a primary alert—check it out!

This is a success alert—check it out!

This is a danger alert—check it out!

This is a warning alert—check it out!

This is an info alert—check it out!

Alert Variants

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.

HTML

<div class="alert alert-primary">
This is a primary alert—check it out!
</div>
<div class="alert alert-success">
This is a success alert—check it out!
</div>
<div class="alert alert-danger">
This is a danger alert—check it out!
</div>
<div class="alert alert-warning">
This is a warning alert—check it out!
</div>
<div class="alert alert-info">
This is an info alert—check it out!
</div>

Forms

Style form controls and components with BinaryCSS:

Contact Form Example

HTML

<form>
<div class="form-group">
<label for="exampleFormControlInput1" class="form-label">Email address</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
</div>

<div class="form-group">
<label for="exampleFormControlSelect1" class="form-label">Example select</label>
<select class="form-control" id="exampleFormControlSelect1">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
</select>
</div>

<div class="form-group">
<label for="exampleFormControlTextarea1" class="form-label">Example textarea</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
</div>

<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="flexCheckDefault">
<label class="form-check-label" for="flexCheckDefault">
  Default checkbox
</label>
</div>

<button type="submit" class="btn btn-primary">Submit</button>
</form>

Badges

Use badges to add counts, labels, or status indicators to elements:

Default Success Warning Danger

HTML

<span class="badge">Default</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
<span class="badge danger">Danger</span>

Tables

Style tables with BinaryCSS for better readability and organization:

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

HTML

<table class="table">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Status</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Alice</td>
      <td><span class="badge success">Active</span></td>
      <td>alice@example.com</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Bob</td>
      <td><span class="badge warning">Pending</span></td>
      <td>bob@example.com</td>
    </tr>
  </tbody>
</table>

JavaScript Components

BinaryCSS includes several JavaScript components to add interactive features to your site.

Interactive Modal

HTML

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
      <span aria-hidden="true">×</span>
    </button>
  </div>
  <div class="modal-body">
    Modal content goes here...
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-primary">Save changes</button>
  </div>
</div>
</div>
</div>

HTML

Custom Tooltips

HTML

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
Tooltip on right
</button>

Dropdowns

Create toggleable, contextual menu for displaying lists of links and actions:

contextual menu for displaying lists of links and actions:

HTML

<div class="dropdown">
  <button class="dropdown-toggle btn btn-green">Select Option</button>
  <div class="dropdown-menu">
    <a href="#">Option 1</a>
    <a href="#">Option 2</a>
    <a href="#">Option 3</a>
  </div>
</div>

Collapse

Toggle the visibility of content with the collapse JavaScript plugin:

Accordion Example

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.

HTML

<p>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Button with data-target
</button>
</p>
<div class="collapse" id="collapseExample">
<div class="card card-body">
Some placeholder content for the collapse component.
</div>
</div>

Carousel

Create a slideshow component for cycling through elements:

HTML

<div class="carousel">
  <div class="carousel-track">
    <div class="carousel-item">
      <img src="path/to/image1.jpg" alt="Slide 1">
    </div>
    <div class="carousel-item">
      <img src="path/to/image2.jpg" alt="Slide 2">
    </div>
    <div class="carousel-item">
      <img src="path/to/image3.jpg" alt="Slide 3">
    </div>
  </div>

  <div class="carousel-controls">
    <button data-carousel="prev">&#10094;</button>
    <button data-carousel="next">&#10095;</button>
  </div>
</div>

Responsive Images

BinaryCSS provides utility classes for responsive and styled images:

HTML

<!-- Rounded corners image -->
<img src="image.jpg" alt="Rounded" class="img-rounded">

<!-- Circle/oval image -->
<img src="image.jpg" alt="Circle" class="img-circle">

<!-- Responsive image (full width of container) -->
<img src="image.jpg" alt="Responsive" class="img-responsive">

Arbitrary Font Size and Color

Apply custom typography styles:

text-[3rem] tc-[cyan]

text-[5.2rem] text-red

text-[clamp(1rem,2vw,2rem)] - Responsive clamped text

tc-[red]

tc-[#3366ff]

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

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

Arbitrary Background Color

Apply custom background colors to elements:

bg-[#D6FFF6]

bg-[#231651]

bg-[#4DCCBD]

bg-[#2374AB]

HTML

<!-- Arbitrary margin and padding -->
<div class="m-[2em] p-[2em]">Custom margin and padding</div>

<!-- Arbitrary width and height -->
<div class="w-[10rem] h-[10rem]">Custom width and height</div>

<!-- Arbitrary font size and color -->
<p class="text-[3rem] tc-[cyan]">Large cyan text</p>

<!-- Arbitrary background color -->
<div class="bg-[#D6FFF6]">Custom background color</div>

BinaryCSS Documentation

Getting Started

Installation

Option 1: Direct Download

Option 2: Package Manager

Option 3: CDN

Basic Usage

Browser Support

Layout

Grid System

Advanced Grid Examples

Responsive Breakpoints

Utility Classes

Typography Utilities

Font Sizes

Font Weights

Text Alignments

Border Utilities

Border Presence

Border Widths

Border Colors

Border Radius

Width & Height Utilities

Width

Height

Arbitrary Height and Width

📐 Flex Utilities Documentation

.flex / .inline-flex

Flex Direction

Flex Wrap

Justify Content

Align Items

Align Self

Flex Grow & Shrink

Flex Basis

Flexbox Utilities

Spacing Utilities

Margin Utilities

Padding Utilities

Arbitrary Values

Arbitrary Margin and Padding

Combination Examples

Color Utilities

Font Color and Background Color Utilities

Font Color

Background Color

Arbitrary Colors

Components

Color Buttons

Outline Color Buttons

Cards

Card with Image

Card with Header

Colored Border Card

Card Subtitle

Advanced Cards

Image Loading Best Practices

Alerts

Alert Variants

Forms

Contact Form Example

Badges

Tables

JavaScript Components

Interactive Modal

Modal Title

Custom Tooltips

Dropdowns

Collapse

Accordion Example

Carousel

Responsive Images

Arbitrary Font Size and Color

Arbitrary Background Color