Getting Started

  • Installation

  • Optimization

  • Fundamentals

  • Contribute

Fundamentals

  • Responsiveness

  • Customization

  • Theme

Layout

  • Box Sizing

  • Container

  • Display

  • Floats

  • Overflow

  • Position

  • Z-Index

Flexbox & Grid

  • Flex Direction

  • Flex Wrap

  • Justify Content

  • Align Items

  • Grid

Spacing & Sizing

  • Padding

  • Margin

  • Width & Height

  • Min-Width

  • Max-Width

Components

  • Avatar

  • Buttons

  • Cards

  • Forms

  • Modals

  • Tables

  • Toasts

Typography

  • Font Family

  • Font Size

  • Font Style

  • Font Weight

  • Letter Spacing

  • Line Height

  • Text Align

  • Text Color

  • Text Decoration

  • Text Transform

Borders

  • Border Radius

  • Border Width

  • Border Style

Effects

  • Box Shadow

  • Opacity

Interaction

  • Cursor

  • Scroll Behavior

Lazyy CSS

A Utility-first CSS framework inspired by TailwindCSS with pre-made components.

Works with HTML, JS, or any other JS framework such as Next.js, Nuxt.js, and others!

Quick start

Looking to quickly add lazyy CSS to your project? To get started, Import our CDN.

<link rel="stylesheet" href="https://lazyy-css.vercel.app/dist/css/index.css" />

Optimization

Lazyy CSS can be optimized using PurgeCSS, Autoprefixer and cssnano. This will remove unused CSS from your project.

Components

Lazyy CSS has pre-made components for common UI elements. Hundreds of beautiful and responsive UI components, premade and ready to use for your next project.

Responsiveness

Developing adaptable user interfaces via the usage of responsive utility variations. Build a mobile-first site without using bunch of media queries.