Overview
Important! Purge!
Getting Started
Colors and Pseudo Classes
- Colors
  - Color Shades
  - Psuedo Classes
- Classes with Colors
  - Text Color
  - Background Color
  - Border Color
  - Outline Color
  - Text Decoration
  - Selection
- Transitions
  - Transition Classes
  - With Pseudo Classes
- Additional Classes
  - Font Size
  - Font Family
  - Font Weight
  - Text Decoration & Style
  - Border Width & Style
  - Outline Width & Style
Dark Mode
- With JS
- No JS
Grid
- Class Definitions
- Responsive Examples
Responsive Examples
- Breakpoints
- Max Breakpoints
- Examples
- Margin
  - Classes
  - Examples
- Padding
  - Classes
  - Examples
- Border Width
  - Classes
  - Examples
- Outline Width
  - Classes
  - Outline Offset
  - Examples
- Width
  - Rem Values
  - Percantage Values
  - Screen relative Values
  - XS - XL
- Height
  - Rem Values
  - Percantage Values
  - Screen relative Values
  - XS - XL
- Display
- Flex
  - Flex Direction
  - Flex Wrap
  - Shrink & Grow
  - Justify Content
  - Align Content
  - Align Items
  - Align Self
  - Not Included
- Text/Font
  - Font Size
  - Line Height
  - Letter Spacing
- Position
  - Top Left Right & Bottom
- Overflow
  - Overflow x & y
- Box Sizing
Box-Shadow
- Size
- Color
- Respoinsive
- Psuedo States
Other Utilities
- Text/Font
  - Align
  - Transform
  - Indent
  - Wrap
  - Font Family
  - Font Weight
  - Font Style
  - Text Decoration
  - Decoration Thickness
- Border
  - Directional Style
- Outline Style
- Cursor
- Opacity
- Visibility
- z-Index

Simple Scss Utilities

Important! Purge!

Purging will give a nice, light CSS files

Like any Utiltiy class framework, the CSS files generate are large. The default generated file is over 600 KB. For comparison, the entire game of Super Mario 3 was 40 Kb - less than 1/10th the size! It's amazing what being efficient with data can do, isn't it?

The entire game of SMB 3 was 40 KB - smaller than this image! (66 KB) (Yeah I could have compressed it but I'm just sayin')

Anyway. This page is just here to remind more than anythng:

It's Important to Purge!

The Install instructions have everythng you need to know about purging. Save 100's of KB's of page load. Even in today's world of speedy internet it can still make a difference. I just wanted to stress the point!

Happy purging, and happy coding!