Sleyt CSS Framework - Documentation

Quick Navigation

Installation Base Layout Components Utilities

Demo Pages

Getting Started

Learn how to install and use Sleyt CSS Framework in your projects.

Quick Start: Install via npm or include directly in your HTML.

NPM Installation

npm install sleyt

Then 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)

500

success-500 Light: hsl(150, 35%, 40%) Dark: hsl(150, 40%, 45%)

600

success-600 Light: hsl(150, 35%, 35%) Dark: hsl(150, 40%, 40%)

700

success-700 Light: hsl(150, 35%, 30%) Dark: hsl(150, 40%, 35%)

Danger (Red)

500

danger-500 Light: hsl(355, 50%, 45%) Dark: hsl(355, 60%, 50%)

600

danger-600 Light: hsl(355, 50%, 40%) Dark: hsl(355, 60%, 45%)

700

danger-700 Light: hsl(355, 50%, 35%) Dark: hsl(355, 60%, 40%)

Warning (Yellow)

400

warning-400 Light: hsl(40, 70%, 50%) Dark: hsl(40, 80%, 55%)

500

warning-500 Light: hsl(40, 70%, 45%) Dark: hsl(40, 80%, 50%)

600

warning-600 Light: hsl(40, 70%, 40%) Dark: hsl(40, 80%, 45%)

Info (Blue)

500

info-500 Light: hsl(215, 45%, 45%) Dark: hsl(215, 50%, 50%)

600

info-600 Light: hsl(215, 45%, 40%) Dark: hsl(215, 50%, 45%)

700

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

Logo

Button

<div class="flex justify-between items-center">
  <div>Logo</div>
  <div>Menu</div>
  <div>Button</div>
</div>

Example: Vertical Centered Layout

Title

Content

<div class="flex flex-col items-center justify-center">
  <div>Title</div>
  <div>Content</div>
</div>

Example: Card Grid with Gap

Card 1

Card 2

Card 3

<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

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

<div class="grid grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

Example: Responsive Grid

Card 1

Card 2

Card 3

Card 4

<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 .btn-icon, .btn-icon-sm - Icon button

Forms

Comprehensive form controls with validation states.

Text Inputs

Default Input

Disabled Input

Select & Textarea

Select Dropdown

Textarea

Checkboxes & Radios

Checked checkbox

Unchecked checkbox

Disabled checkbox

Selected radio

Unselected radio

Validation States

Valid Input

Invalid Input

This field is required.

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.

Footer section

Available Classes:

.card, .card-header, .card-body, .card-footer

Alerts

Contextual feedback messages for user actions.

Primary - General information message

Secondary - Secondary information message

Success! - Action completed successfully

Danger! - Error or critical message

Warning! - Caution or attention needed

Info - Informational message

Available Classes:

.alert, .alert-{'{variant}'} (primary, secondary, success,
                    danger, warning, info)

Badges

Small status indicators and count labels.

Primary Secondary Success Danger Warning Info Light Dark

Usage Examples

New Active 5 99+

Available Classes:

.badge, .badge-{'{variant}'} (primary, secondary, success,
                    danger, warning, info, light, dark)

Tables

Structured data display with various styles.

Basic Table

Name	Email	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

Primary 50%

Success 25%

Warning 25%

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.

First Section

This is the content of the first accordion section. It expands and collapses smoothly.

Second Section

This is the content of the second accordion section with more details.

Third Section

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

#3B82F6

#10B981

#EF4444

Available Classes:

.showcase - Demo display container .swatch - Color sample display (100x100px)

Spinners

Loading spinners and skeleton loaders for async operations.

Basic Spinner

Sizes

Color Variants

Skeleton Loaders

Available Classes:

.spinner, .spinner-{'{size}'} (sm, lg, xl)

.spinner-{'{variant}'} (primary, success, danger,
                    etc.)

.skeleton, .skeleton-text, .skeleton-title,
                    .skeleton-avatar

.loading-overlay - Full page loading overlay

Tabs

Tab navigation for organizing content into sections.

Basic Tabs

Pills Variant

Boxed Variant

Available Classes:

.tabs, .tabs-nav - Tab container .tab, .tab.active - Tab button .tabs-pills - Pill-style tabs .tabs-boxed - Boxed-style tabs

Navigation

Breadcrumbs and pagination components.

Breadcrumbs

Pagination

Pagination Sizes

Available Classes:

.breadcrumbs, .breadcrumb-item,
                    .breadcrumb-item.active

.pagination, .page-item, .page-item.active

.pagination-sm, .pagination-lg, .pagination-rounded,
                    .pagination-simple

Progress

Progress bars for loading and completion indicators.

Basic Progress

Striped & Animated

Available Classes:

.progress, .progress-bar, .progress-striped,
                    .progress-animated

.progress-indeterminate - Indeterminate loading state

Tooltip

CSS-only tooltips using the data-tooltip attribute. No JavaScript required.

Directions (default: top)

Multi-line Tooltip

Code Example

<span class="tooltip" data-tooltip="Tooltip text">Hover me</span>
<span class="tooltip tooltip-bottom" data-tooltip="Below">Bottom</span>
<span class="tooltip tooltip-left" data-tooltip="Left side">Left</span>
<span class="tooltip tooltip-right" data-tooltip="Right side">Right</span>

Available Classes:

.tooltip - Base class (shows tooltip on hover/focus,
                    default: top)

.tooltip-bottom, .tooltip-left, .tooltip-right - Direction
                    modifiers

Attribute:

data-tooltip="text" - Tooltip content (use &#10; for
                    line breaks)

Prose

Styled long-form content for articles, blog posts, and Markdown-rendered HTML.

Example

Article Heading

A paragraph of body text with an inline link and bold text.

A blockquote for highlighted passages.

List item one
List item two
List item three

Column A	Column B
Cell 1	Cell 2

Available Classes:

.prose - Styled long-form content (max-width: 65ch) .prose-full - Remove max-width constraint

Modals & Dropdown

Overlay dialogs and contextual dropdown menus.

Modal Structure

Dialog Title

Modal body content goes here.

Dropdown

Modal Classes:

.modal, .modal.active - Overlay; add .active to show

.modal-content, .modal-header, .modal-title, .modal-close,
                    .modal-body, .modal-footer

.modal-{'{sm|md|lg|xl|full}'} - Size variants

Dropdown Classes:

.dropdown, .dropdown-menu, .dropdown-item,
                    .dropdown-divider

.dropdown-menu.dropdown-right, .dropdown-menu.dropdown-top
                    - Positions

Sidebar

Fixed-width vertical navigation sidebar, responsive with a CSS-only mobile toggle.

Example

Available Classes:

.sidebar - Fixed 220px vertical nav (sticky,
                    full-height)

.sidebar-brand, .sidebar-brand-icon - Logo / brand
                    area

.sidebar-nav, .sidebar-section-label - Navigation container
                    and section labels

.sidebar-link, .sidebar-link.active - Nav links; .active
                    for current page

.sidebar-link-icon - Optional icon inside a link

.sidebar-footer, .sidebar-user, .sidebar-user-avatar -
                    Footer area

.sidebar-toggle-checkbox, .sidebar-toggle-label - CSS-only
                    mobile toggle

Utilities

Comprehensive utility classes for rapid styling and customization.

Spacing

Margin and padding utilities. Values: 0, 0.5, 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 | 0.5: 0.125 | 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

Primary

.bg-primary

Secondary

.bg-secondary

Success

.bg-success

Danger

.bg-danger

Warning

.bg-warning

Info

.bg-info

Light

.bg-light

Dark

.bg-dark

Slate Scale (.bg-slate-{'{50-950}'})

.bg-slate-50

100

.bg-slate-100

200

.bg-slate-200

300

.bg-slate-300

400

.bg-slate-400

500

.bg-slate-500

600

.bg-slate-600

700

.bg-slate-700

800

.bg-slate-800

900

.bg-slate-900

950

.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 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, opacity, cursor, and interaction utilities.

Shadows

shadow-none

shadow-sm

shadow

shadow-md

shadow-lg

shadow-xl

.shadow-none, .shadow-sm, .shadow, .shadow-md, .shadow-lg,
                  .shadow-xl

Opacity

100

.opacity-{'{0-100}'} - Values: 0, 5, 10, 20, 25, 30, 40, 50,
                  60, 70, 75, 80, 90, 95, 100

Cursor

pointer

not-allowed

grab

wait

help

move

.cursor-{'{type}'} - 30+ cursor types: pointer, not-allowed,
                  grab, grabbing, wait, help, move, all resize directions,
                  zoom-in/out, etc.

Pointer Events & User Select

.pointer-events-none, .pointer-events-auto .select-none, .select-text, .select-all, .select-auto

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)

glass

glass-light

glass-heavy

Display & Sizing

Display properties, width, height, and overflow utilities.

Display

.block, .inline-block, .inline, .hidden

Responsive Display

.md:hidden, .md:block, .md:flex, .md:inline-flex .lg:hidden, .lg:block, .lg:flex, .lg:inline-flex

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

Aspect Ratio

.aspect-video (16/9), .aspect-square (1/1) .aspect-16-6, .aspect-16-7

Overflow

.overflow-auto, .overflow-hidden .overflow-x-auto, .overflow-y-auto

Position

Position utilities, placement helpers, and z-index layering.

Position Types

.relative, .absolute, .fixed .sticky, .static

Placement

.inset-0 - All sides to 0 .top-0, .right-0, .bottom-0, .left-0


                      .top-1/2, .left-1/2 - Fractional (50%)


                      .top-full, .left-full - Full (100%)

Z-Index

.z-0 - z-index: 0 .z-10 - z-index: 10 .z-20 - z-index: 20 .z-30 - z-index: 30 .z-40 - z-index: 40 .z-50 - z-index: 50 .z-auto - z-index: auto

Transforms

Transform utilities for scale, rotate, translate, and transform-origin.

Scale

.scale-0 through .scale-150 Values: 0, 50, 75, 90, 95, 100, 105, 110, 125, 150

Rotate

.rotate-0, .rotate-45, .rotate-90, .rotate-180 .-rotate-45, .-rotate-90, .-rotate-180 (negative)

Translate

.translate-x-1/2, .translate-y-1/2 (50%) .translate-x-full, .translate-y-full (100%) .-translate-x-1/2, .-translate-y-1/2 (negative)

Transform Origin

.origin-center .origin-top, .origin-bottom .origin-left, .origin-right .origin-top-left, .origin-top-right .origin-bottom-left, .origin-bottom-right

Examples

scale-75

rotate-45

Transitions & Animations

Transition and animation utilities for smooth effects.

Transition Properties

.transition-all - All properties .transition-colors - Colors .transition-opacity - Opacity .transition-shadow - Shadow .transition-transform - Transform

Duration

.duration-{'{ms}'} Values: 75, 100, 150, 200, 300, 500, 700, 1000

Timing

.ease-linear, .ease-in, .ease-out, .ease-in-out

Delay

.delay-{'{ms}'} Values: 75, 100, 150, 200, 300, 500, 700, 1000

Animations

.animate-none - No animation .animate-spin - Spinning .animate-ping - Ping effect .animate-pulse - Pulsing .animate-bounce - Bouncing

Example

Hover me