Base-2 is a lightweight CSS/JS framework. Click buttons to see code.
Choose your preferred installation method:
Add these links to your HTML <head>
Color palette with CSS custom properties.
Text styles and sizing utilities.
.b2-text-xs (12px)
.b2-text-sm (14px)
.b2-text-base (16px)
.b2-text-lg (18px)
.b2-text-xl (20px)
.b2-text-2xl (24px)
Flexible 12-column grid and CSS Grid utilities.
Button styles, sizes, and states.
Form inputs, selects, and validation states.
Flexible card components for content.
Card content goes here.
Shadow card.
Contextual feedback messages.
Small count and labeling components.
Visual indicators for completion status.
Styled tables for data display.
| Name | Status | |
|---|---|---|
| John Doe | john@example.com | Active |
| Jane Smith | jane@example.com | Pending |
Contextual information on hover.
Tabs, breadcrumbs, and nav components.
Margin and padding utility classes.
| Class | Value |
|---|---|
.b2-m-0, .b2-p-0 | 0 |
.b2-m-1, .b2-p-1 | 4px |
.b2-m-2, .b2-p-2 | 8px |
.b2-m-4, .b2-p-4 | 16px |
.b2-m-6, .b2-p-6 | 24px |
.b2-m-8, .b2-p-8 | 32px |
Control element display behavior.
| Class | CSS Property |
|---|---|
.b2-block | display: block |
.b2-inline | display: inline |
.b2-inline-block | display: inline-block |
.b2-flex | display: flex |
.b2-grid | display: grid |
.b2-hidden | display: none |
Flex layout helper classes.
CSS animations and JS motion library.
For advanced animations, see the full Motion documentation: