SnapCSS Framework

A lightweight and modern CSS framework built with Sass for rapid web development.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a regular paragraph with bold text and italic text. You can also use inline code for technical terms.

This is a blockquote. It can be used for important quotes or callouts in your content.

Lists

Unordered List

  • First item
  • Second item
  • Third item
    • Nested item
    • Another nested item

Ordered List

  1. First step
  2. Second step
  3. Third step

Buttons

Standard Buttons

Outline Buttons

Button Sizes

Forms

Please enter your full name.
Email format is valid.
Password must be at least 8 characters.

Tables

Basic Table

Name Email Role Status
John Doe john@example.com Developer Active
Jane Smith jane@example.com Designer Pending
Bob Johnson bob@example.com Manager Active

Striped Table with Hover

Product Price Quantity Total
Laptop $999.00 2 $1,998.00
Mouse $29.99 5 $149.95
Keyboard $79.99 3 $239.97
Total $2,387.92

Utility Classes

Background Colors

Primary
Success
Danger
Warning
Info

Spacing Utilities

Padding 3
Padding 4
Padding 6

Border Utilities

Default Border
Rounded Border
Dashed Full Radius

Shadow Utilities

Small Shadow
Medium Shadow
Large Shadow

Flexbox Layout

Item 1
Item 2
Item 3
Centered
Items