The entire CSS language. Uncut.

A comprehensive CSS utility library featuring single-purpose classes namespaced across multiple breakpoints. An experimental project exploring how much of CSS can reasonably fit into a single file.

📦 Raw file size:           163.04 KB
📦 Minified file size:      114.35 KB
📦 Minified + Gzipped:       20.18 KB

💾 Minification savings:    29.9%
💾 Gzip savings:            87.6%

npm install css-uncut

Or use the CDN:

<link rel="stylesheet" href="https://unpkg.com/css-uncut/css/uncut.min.css">

<div class="df flex-wrap gap-3 pa4 bg-near-white br3">
  <div class="w-100 w-50-s w-33-l pa3 bg-blue white br2">
    Responsive column
  </div>
</div>

Mobile-first responsive design with four breakpoints:

This library includes 100+ CSS property partials covering:

• Display (flex, grid, block, inline, table, etc.)
• Position (static, relative, absolute, fixed, sticky)
• Float & Clear
• Overflow
• Visibility
• Z-Index

• Spacing (margin, padding) with 8-step scale
• Widths (fixed, percentage, viewport, intrinsic)
• Heights (fixed, percentage, viewport, intrinsic)
• Min/Max Width & Height
• Box Sizing
• Aspect Ratio

• Direction, Wrap
• Justify Content, Align Items, Align Content, Align Self
• Flex Grow, Shrink, Basis
• Order
• Gap

• Template Columns & Rows
• Column & Row Span
• Auto Flow
• Place Items, Place Content, Place Self

• Font Family, Size, Weight, Style, Variant
• Line Height
• Letter Spacing
• Text Align, Transform, Decoration
• White Space, Word Break
• Text Overflow

• Text Colors
• Background Colors
• Background Size, Position, Repeat, Attachment
• Background Clip, Origin
• Background Blend Mode

• Border Width, Style, Color, Radius
• Outline

• Opacity
• Box Shadow
• Filters (blur, brightness, contrast, grayscale, etc.)
• Backdrop Filter
• Mix Blend Mode
• Isolation

• Scale, Rotate, Translate
• Transform Origin
• Perspective
• Backface Visibility

• Transition Property, Duration, Timing, Delay
• Animation Duration, Timing, Delay, Direction
• Animation Iteration Count, Fill Mode, Play State
• Will Change

• Cursor
• Pointer Events
• User Select
• Touch Action
• Resize
• Scroll Behavior, Snap
• Overscroll Behavior

• Container Queries
• Aspect Ratio
• Logical Properties
• Content Visibility
• Contain
• Scrollbar Styling
• Accent Color
• Caret Color

# Clone the repository
git clone https://github.com/mrmrs/css-uncut.git
cd css-uncut

# Build
npm run build

# Watch for changes
npm run watch

css-uncut/
├── src/
│   ├── uncut.css      # Main entry file with @import statements
│   └── css/           # Source partials (100+ files)
├── css/
│   ├── uncut.css      # Compiled CSS (output)
│   └── uncut.min.css  # Minified CSS (output)
├── build.js           # Build pipeline
└── package.json

The build process reads src/uncut.css, processes all @import statements, handles @custom-media queries, and outputs the compiled files to the css/ directory.

The library uses custom media queries internally:

@custom-media --small (min-width: 30em);
@custom-media --medium (min-width: 48em);
@custom-media --large (min-width: 60em);
@custom-media --extra-large (min-width: 90em);

CSS UNCUT embraces the atomic/functional CSS methodology:

• Single Purpose: Each class does one thing
• Responsive: Every utility available at every breakpoint
• Composable: Build any design by combining classes
• Predictable: Class names map directly to CSS properties
• Small: ~20KB gzipped despite comprehensive coverage

MIT © mrmrs