LittleCSS

Ultra-lean CSS library

LittleCSS is a minimal CSS library of less than 6 KB (gzipped) that includes the necessary CSS classes and helpers for 99% of projects. It is heavily inspired by the best parts of TailwindCSS and Bootstrap frameworks.

All of the code is easily extendable and uses no pre-processors, taking advantage of the latest modern CSS native features (CSS variables, flexbox, calc()…). This page you are seeing right now is using the default LittleCSS library and was built in a few minutes.

🍃

Lightweight

LittleCSS is so small that you don't need to worry about file size and optimization, it's ready to deploy

🏃

Plug'n'play

Include little.css and you can already start customizing, no need to make builds or run commands

😇

Easy

The code itself is quick and easy to understand, no complicated patterns or learning curve

🧱

Hackable

Change the code directly, no need to create new variables and child themes

👁️‍🗨️

Native CSS

Nowadays vanilla CSS is very powerful and most browsers support variables and such

📦

Simple

Most of the time we don't need compilers, build tools and complex directory structures

Dark mode

LittleCSS includes a very basic Dark mode that can (and should) be customized further if you need to. Toggling it on/off is as simple as adding a dark CSS class to the html tag. Try it out:

Toggle dark mode

Grid

.col
.col
.col
.col
.col
.col
.col
.col
.col-2
.col
.col-2
.col
.col-4

Grid with spacing

.col.m-2
.col.m-2
.col.m-2
.col.m-2

Default tags

LittleCSS defines classless HTML tags straight away, here's a few of them.

Acme Industries
42 Cave Road

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum semper, elit sed pellentesque pellentesque, erat diam malesuada lectus, nec porta magna tortor eu ipsum.

Ut feugiat arcu at risus convallis egestas. Praesent id ante id augue auctor ultricies. Suspendisse potenti. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In a porttitor diam. Nunc sed quam semper, blandit ligula ut, interdum enim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Fonts

Font size

.text-s6

.text-s5

.text-s4

.text-s3

.text-s2

.text-s1

Normal

.text-l1

.text-l2

.text-l3

.text-l4

.text-l5

.text-l6

.text-l7

.text-l8

.text-l9

Font weight

.text-bold

.text-regular

.text-light

Font family

.text-sans

.text-serif

.text-mono

Text align

.text-left

.text-center

.text-right

.text-justify

Forms

Tables

First name Last name Plan Balance  
Petter Griffin
Petter Griffin
Petter Griffin
Petter Griffin

Colors

LittleCSS uses the amazing TailwindCSS's color palette as CSS native variables. You can find the color palette here.

We've also set a few color combinations already:

.dark-success A dark success box
.dark-info A dark info box
.dark-warning A dark warning box
.dark-danger A dark danger box
.dark-secondary A dark secondary box
.light-success A light success box
.light-info A light info box
.light-warning A light warning box
.light-danger A light danger box
.light-secondary A light secondary box

Space and positioning

Size

.width-25
.width-33
.width-50
.width-66
.width-100

Alignment

.align-left
.align-center
.align-right

Margins and Paddings

.p-1
.p-2
.p-3
.p-4
.p-5
.p-6
.p-7

Examples

Hero

This is amazing

The revolutionary styling library that will blow your mind

Download Learn more

Login form

Log in to your account

Made with by Xavi Esteve