bitUI
bitUI is a simple CSS toolkit for making websites look nice. The goal is control & simplicity. It has a 12-column grid, simple position for elements, and a col-flex option that automatically adjusts to parent containers.
Unified Grid System
One system to rule them all - columns, auto grid, and masonry
1. Trad Grid
Uses 12 column system with .row and .col-* classes for precise control
1.1 Column Positioning
Position smaller columns left, center, or right on the page
col-3 center
col-3 right
row center
row center
row right
row right
1.2 Panel Content Alignment
Align content within panels using the same classes, ex: panel center
Left-aligned panel
Content aligns to the left
Center-aligned panel
Content centers in the panel
Right-aligned panel
Content aligns to the right
2. Auto Grid
Uses grid (auto-fill by default) for responsive, automatically sized
columns
Auto Grid Item
These columns automatically adjust based on available width
Auto Grid Item
These columns automatically adjust based on available width
Auto Grid Item
These columns automatically adjust based on available width
Auto Grid Item
These columns automatically adjust based on available width
2.1 Auto Grid fit
Uses grid fit for responsive, automatically sized columns that expand
to fill the container
Auto Grid Item
These columns automatically adjust based on available width
Auto Grid Item
These columns automatically adjust based on available width
Auto Grid Item
These columns automatically adjust based on available width
Auto Grid Item
These columns automatically adjust based on available width
3. Fixed Column Grid
Uses grid cols-* for a specific number of columns
3-Column Grid
Always 3 columns (responsive at breakpoints)
3-Column Grid
Always 3 columns (responsive at breakpoints)
3-Column Grid
Always 3 columns (responsive at breakpoints)
3-Column Grid
Always 3 columns (responsive at breakpoints)
3-Column Grid
Always 3 columns (responsive at breakpoints)
4. Masonry Grid - Fill Dense (Original Masonry)
Uses grid dense (auto-fill by default) for traditional masonry layout
with dense packing
Tall Item
This item spans 2 rows with .tall
The panel now fills the entire grid item height automatically
Normal Item
Standard grid item
Normal Item
Standard grid item
Wide Item
This item spans 2 columns with .wide
Normal Item
Standard grid item
Large Item
This item spans 2 columns and 2 rows with .large
The panel fills the entire grid item area automatically
Normal Item
Standard grid item
Normal Item
Standard grid item
5. Masonry Grid - Fit Dense (Adaptive Masonry)
Uses grid fit dense for masonry layout that adapts to content with
dense packing
Tall Item
This item spans 2 rows with .tall
The panel now fills the entire grid item height automatically
Normal Item
Standard grid item
Normal Item
Standard grid item
Wide Item
This item spans 2 columns with .wide
Normal Item
Standard grid item
Large Item
This item spans 2 columns and 2 rows with .large
The panel fills the entire grid item area automatically
Normal Item
Standard grid item
Normal Item
Standard grid item
Structure
container >
row >
col > your content.
Use panel or panel dark for basic style.
Layout
Create nested layouts by placing row
and col elements inside each other.
You can nest as many row, col,
and panel elements as needed.
This nested column (50%) contains content on the left side of the full-width panel.
This nested column (50%) contains content on the right side of the full-width panel.
This nested column (100%) contained within the 50% right column.
Typography
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
.f-danger
.f-confirm
.f-info
.f-warning
.f-white
.f-black
.f-gray
.f-light (100)
.f-regular (400)
.f-heavy (900)
.f-small (0.75)
.f-large (1.25)
Forms
Standard Inputs
Form States
Textarea
Select
Ranges, Radios, Checkboxes
Buttons
Holo or disabled buttons appear better in a panel light