Quick Navigation
Getting Started
Learn how to install and use Sleyt CSS Framework in your projects.
NPM Installation
npm install sleytThen import in your CSS:
@import 'sleyt/dist/css/index.css';CDN Usage
<link rel="stylesheet" href="https://unpkg.com/sleyt@latest/dist/css/index.css">Include in your HTML head section.
Base
Foundation styles including CSS reset, themes, and design tokens.
Reset
Normalize browser defaults with modern CSS reset. Includes base element styling for consistent appearance across browsers.
- • Box-sizing: border-box
- • Margin and padding reset
- • Optimized font rendering
- • Reduced motion support
Themes
Automatic dark mode support based on system preferences. Seamless theme switching with CSS variables.
- • Auto dark mode detection
- • Smooth transitions
- • Consistent colors
- • Enhanced transparency
Variables
CSS custom properties for colors, spacing, typography, and more. Easy customization through design tokens.
- • Color palette
- • Spacing scale
- • Typography system
- • Shadow and effects
Color Palette (CSS Variables)
Complete color system defined in
base/variables.css
Neutral Gray Scale (Slate)
slate-50
98%
slate-100
96%
slate-200
90%
slate-300
83%
slate-400
64%
slate-500
45%
slate-600
32%
slate-700
25%
slate-800
15%
slate-900
9%
slate-950
4%
Semantic Colors (Subdued Tones)
Note: Colors are automatically adjusted to brighter and more vibrant values in dark mode for better visibility
Success (Green)
success-500
Light: hsl(150, 35%, 40%)
Dark: hsl(150, 40%, 45%)
success-600
Light: hsl(150, 35%, 35%)
Dark: hsl(150, 40%, 40%)
success-700
Light: hsl(150, 35%, 30%)
Dark: hsl(150, 40%, 35%)
Danger (Red)
danger-500
Light: hsl(355, 50%, 45%)
Dark: hsl(355, 60%, 50%)
danger-600
Light: hsl(355, 50%, 40%)
Dark: hsl(355, 60%, 45%)
danger-700
Light: hsl(355, 50%, 35%)
Dark: hsl(355, 60%, 40%)
Warning (Yellow)
warning-400
Light: hsl(40, 70%, 50%)
Dark: hsl(40, 80%, 55%)
warning-500
Light: hsl(40, 70%, 45%)
Dark: hsl(40, 80%, 50%)
warning-600
Light: hsl(40, 70%, 40%)
Dark: hsl(40, 80%, 45%)
Info (Blue)
info-500
Light: hsl(215, 45%, 45%)
Dark: hsl(215, 50%, 50%)
info-600
Light: hsl(215, 45%, 40%)
Dark: hsl(215, 50%, 45%)
info-700
Light: hsl(215, 45%, 35%)
Dark: hsl(215, 50%, 40%)
Theme Color Mapping
Primary:
var(--color-slate-900)
Secondary:
var(--color-slate-700)
Success:
var(--color-success-600)
Danger:
var(--color-danger-600)
Warning:
var(--color-warning-500)
Info:
var(--color-info-600)
Light:
var(--color-slate-100)
Dark:
var(--color-slate-900)
All colors are defined using HSL values for easy theming and dark mode support.
Layout
Flexible layout system with container, flexbox, and grid utilities.
Container
Responsive container with automatic centering and max-width breakpoints.
<div class="container">
Content
</div>Breakpoints: 640px, 768px, 1024px, 1280px, 1536px
Flexbox
Comprehensive flexbox utilities for flexible layouts.
Example: Horizontal Layout
<div class="flex justify-between items-center">
<div>Logo</div>
<div>Menu</div>
<div>Button</div>
</div>Example: Vertical Centered Layout
<div class="flex flex-col items-center justify-center">
<div>Title</div>
<div>Content</div>
</div>Example: Card Grid with Gap
<div class="flex gap-4 flex-wrap">
<div class="flex-1">Card 1</div>
<div class="flex-1">Card 2</div>
<div class="flex-1">Card 3</div>
</div>Display:
.flex, .inline-flex
Direction:
.flex-row, .flex-row-reverse, .flex-col,
.flex-col-reverse
Wrap:
.flex-wrap, .flex-nowrap, .flex-wrap-reverse
Flex Properties:
.flex-1, .flex-auto, .flex-initial, .flex-none
.flex-grow, .flex-grow-0, .flex-shrink,
.flex-shrink-0
Justify Content:
.justify-start, .justify-end, .justify-center
.justify-between, .justify-around, .justify-evenly
Align Items:
.items-start, .items-end, .items-center, .items-baseline,
.items-stretch
Align Content:
.content-start, .content-end, .content-center,
.content-between, .content-around
Grid
CSS Grid system with responsive columns and gap utilities.
Example: 3-Column Grid
<div class="grid grid-cols-3 gap-4">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>Example: Responsive Grid
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div>Card 1</div>
<div>Card 2</div>
<div>Card 3</div>
<div>Card 4</div>
</div>Mobile: 1 column, Tablet: 2 columns, Desktop: 4 columns
Quick Reference
Most commonly used layout classes for quick access.
Container
.container, .container-fluid
Flexbox (Most Used)
.flex, .flex-row, .flex-col
.justify-center, .justify-between
.items-center, .gap-{'{1-12}'}
Grid (Most Used)
.grid, .grid-cols-{'{1-12}'}
.gap-{'{1-12}'}, .md:grid-cols-{'{1-12}'}
Components
Complete UI components library with modern glass morphism effects.
Buttons
Interactive buttons with multiple variants, sizes, and states.
Variants
Outline Variants
Sizes
States
Available Classes:
.btn, .btn-{'{variant}'} (primary, secondary, success,
danger, warning, info, light, dark)
.btn-outline-{'{variant}'}, .btn-link
.btn-sm, .btn-lg
Forms
Comprehensive form controls with validation states.
Text Inputs
Select & Textarea
Checkboxes & Radios
Validation States
Available Classes:
.form-group, .form-label, .form-control
.form-check, .form-check-input, .form-check-label
.is-valid, .is-invalid, .invalid-feedback
Cards
Flexible containers with glass morphism effects.
Card with Header
Card content goes here with header section.
Simple Card
Card with body only, no header.
Available Classes:
.card, .card-header, .card-body, .card-footer
Alerts
Contextual feedback messages for user actions.
Available Classes:
.alert, .alert-{'{variant}'} (primary, secondary, success,
danger, warning, info)
Badges
Small status indicators and count labels.
Usage Examples
Available Classes:
.badge, .badge-{'{variant}'} (primary, secondary, success,
danger, warning, info, light, dark)
Tables
Structured data display with various styles.
Basic Table
| Name | Status | |
|---|---|---|
| John Doe | john@example.com | Active |
| Jane Smith | jane@example.com | Pending |
Table Variations
| # | Item | Price |
|---|---|---|
| 1 | Product A | $19.99 |
| 2 | Product B | $29.99 |
Available Classes:
.table - Base table
.table-sm - Compact table
.table-bordered - Bordered table
.table-striped - Striped rows
.table-hover - Hover effect
Charts
Data visualization components including bar charts, line charts, and donut charts.
Bar Chart
Line Chart
Donut Chart
Available Classes:
.chart, .chart-sm, .chart-lg - Chart containers
.bar-chart, .bar-chart-item - Bar charts
.line-chart, .line-chart-svg, .line-chart-path - Line
charts
.donut-chart, .donut-chart-svg, .donut-chart-segment -
Donut charts
.chart-legend, .chart-legend-item - Chart legend
data-variant="{'{variant}'}" (primary, success, warning,
danger, info)
Navbar
Responsive navigation bar with mobile hamburger menu support.
Available Classes:
.navbar - Navigation container
.navbar-brand - Brand/logo section
.navbar-nav - Navigation list
.navbar-item - Navigation links
.navbar-toggle-checkbox, .navbar-toggle-label - Mobile menu
toggle
.active - Active state
Accordion
CSS-only collapsible content panels with smooth animations.
This is the content of the first accordion section. It expands and collapses smoothly.
This is the content of the second accordion section with more details.
This is the content of the third accordion section.
Available Classes:
.accordion - Accordion container
.accordion-item - Individual accordion item
.accordion-toggle - Hidden checkbox for toggle
.accordion-label - Clickable header
.accordion-content - Collapsible content
Code
Code block display with syntax highlighting support.
function example() {
const message = "Hello, World!";
console.log(message);
return true;
}Available Classes:
.code-preview - Code block container
Showcase & Swatch
Utility components for displaying demos and color samples.
Showcase
This is a showcase container for displaying component examples and demos.
Swatch
Available Classes:
.showcase - Demo display container
.swatch - Color sample display (100x100px)
Utilities
Comprehensive utility classes for rapid styling and customization.
Spacing
Margin and padding utilities. Values: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24, 32
Margin
.m-{'{0-32}'} - All sides
.mx-{'{0-32}'}, .mx-auto - Horizontal
.my-{'{0-32}'}, .my-auto - Vertical
.mt-{'{0-32}'}, .mt-auto - Top
.mr-{'{0-32}'}, .mr-auto - Right
.mb-{'{0-32}'}, .mb-auto - Bottom
.ml-{'{0-32}'}, .ml-auto - Left
Padding
.p-{'{0-32}'} - All sides
.px-{'{0-32}'} - Horizontal
.py-{'{0-32}'} - Vertical
.pt-{'{0-32}'} - Top
.pr-{'{0-32}'} - Right
.pb-{'{0-32}'} - Bottom
.pl-{'{0-32}'} - Left
Spacing scale (in rem):
0: 0 | 1: 0.25 | 2: 0.5 | 3: 0.75 | 4: 1 | 5: 1.25 | 6: 1.5
| 8: 2 | 10: 2.5 | 12: 3 | 16: 4 | 20: 5 | 24: 6 | 32:
8
Colors
Background and text color utilities with full slate scale.
Semantic Colors
.bg-primary
.bg-secondary
.bg-success
.bg-danger
.bg-warning
.bg-info
.bg-light
.bg-dark
Slate Scale (.bg-slate-{'{50-950}'})
.bg-slate-50
.bg-slate-100
.bg-slate-200
.bg-slate-300
.bg-slate-400
.bg-slate-500
.bg-slate-600
.bg-slate-700
.bg-slate-800
.bg-slate-900
.bg-slate-950
Text Colors
.text-primary - Primary text color
.text-secondary - Secondary text color
.text-disabled - Disabled text color
.text-success - Success color
.text-danger - Danger color
.text-warning - Warning color
.text-info - Info color
All Available Classes
Background:
.bg-body, .bg-surface, .bg-card, .bg-elevated
.bg-primary, .bg-secondary, .bg-success, .bg-danger,
.bg-warning, .bg-info
.bg-light, .bg-dark
.bg-slate-{'{50-950}'}
Text:
.text-primary, .text-secondary, .text-disabled
.text-primary-color, .text-secondary-color
.text-success, .text-danger, .text-warning,
.text-info
.text-slate-{'{50-950}'}
Typography
Complete typography system with sizes, weights, alignment, and line heights.
Font Size
.text-xs (0.75rem)
.text-sm (0.875rem)
.text-base (1rem)
.text-lg (1.125rem)
.text-xl (1.25rem)
.text-2xl (1.5rem)
.text-3xl (1.875rem)
.text-4xl (2.25rem)
.text-5xl (3rem)
Font Weight & Alignment
.font-light (300)
.font-normal (400)
.font-medium (500)
.font-semibold (600)
.font-bold (700)
.text-left, .text-center, .text-right,
.text-justify
Line Height
.leading-none (1) | .leading-tight (1.25) | .leading-snug
(1.375) | .leading-normal (1.5) | .leading-relaxed (1.625) |
.leading-loose (2)
Borders
Border and border-radius utilities.
Border Sides
.border - All sides
.border-0 - No border
.border-t - Top
.border-r - Right
.border-b - Bottom
.border-l - Left
Border Radius
.rounded-none (0)
.rounded-sm (0.375rem)
.rounded (0.5rem)
.rounded-lg (0.75rem)
.rounded-xl (1rem)
.rounded-full (9999px)
Effects
Shadow utilities for depth and elevation.
.shadow-none, .shadow-sm, .shadow, .shadow-md, .shadow-lg,
.shadow-xl
Glass Morphism
Complete glass morphism system with transparency and backdrop blur effects.
Glass Styles
.glass - Standard glass (blur: 8px)
.glass-light - Light glass (blur: 12px)
.glass-heavy - Heavy glass (blur: 16px)
.frosted - Frosted glass with gradient
.shadow-glass - Glass shadow effect
.shadow-elevated - Elevated shadow
Backdrop Blur
.backdrop-blur-none
.backdrop-blur-sm (4px)
.backdrop-blur (8px)
.backdrop-blur-md (12px)
.backdrop-blur-lg (16px)
.backdrop-blur-xl (24px)
Display & Sizing
Display properties, width, height, and overflow utilities.
Display
.block, .inline-block, .inline, .hidden
Width
.w-full, .w-auto
.w-1/2, .w-1/3, .w-2/3, .w-1/4, .w-3/4
Height
.h-full, .h-auto, .h-screen
Overflow
.overflow-auto, .overflow-hidden
.overflow-x-auto, .overflow-y-auto
Position
Position utilities and placement helpers.
Position Types
.relative, .absolute, .fixed
.sticky, .static
Placement
.inset-0 - All sides to 0
.top-0, .right-0, .bottom-0, .left-0