LittleCss Features Documentation Examples
Source Code Download


Ultra-lean CSS library

Or get it running quickly:
<link rel="stylesheet" href="">

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.



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



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



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



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



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 with spacing


Unbreakable grid (for small screens, .row-nobreak)


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 Control + P. Nunc sed quam semper, blandit ligula ut, interdum enim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

This is a blockquote, it doesn't have much style by default but a few classes make it look great.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.


Font size

















Font weight




Font family




Text align







  First name Last name Plan Balance  
πŸ‘¨β€πŸ’» Petter Griffin
πŸ‘¨β€πŸŽ¨ John Malkovich
πŸ‘¨β€πŸŒΎ Frodo Baggins
πŸ§™β€β™‚οΈ Harry Potter


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:

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

Opacity and Transparency

Tweaking the opacity of elements gives us a wide variety of color combinations that are very easy to combine.


Space and positioning





Margins and Paddings


Also for specific sides:


Here ends the documentation, it's short but it covers 99% of what you'll need to design a website.


What follows are some examples on what you can accomplish in just a few minutes. We keep updating regularly so bookmark this page to grab components and save yourself some time.

View the source code of this HTML file to see how easy and succint it is to style with LittleCSS, and how pretty and clear the HTML code looks too.

Top navigation

A standard top navigation bar usually used to place a logo and the main menu.


A nice and big section to announce something important.

Everest Summit 2022

Expeditions will meet in Kathmandu on July 18th

Apply for membership Learn more



A few examples on displaying lists of rich items.


Smiling face

Happy days


Hearty eyes

For the loved one



Good boy



Like in the movie

Using .row-nobreak .col


Smiling face

Happy days


Hearty eyes

For the loved one



Good boy



Like in the movie

Using .float-*

Escape to nature

Unique places

Discover the world

For pets

Personal experiences

Custom ideas for your travels

Read more

Online experiences

Live interactive activities with your friends

Read more

Traveller spirit

Travel abroad from your sofa

Read more

Login form

An example of a fully styled form including textboxes, labels and buttons.


Sign in to your account

Password is required

Don't have an account? Sign up

Admin panel

A Dashboard for an Administrator's UI with top navigation, a left sidebar and a main area for any content.


New Users




Earnings today


Earnings this month

Users New sign ups

Name Campaign Country
John Smith Halloween Promo US
Peter Griffin Organic US
Pedro GarcΓ­a Halloween Promo ES

Users Best today

Name Campaign Country
John Smith 11.99€ US
Peter Griffin 7.99€ US
Pedro GarcΓ­a 19.99€ ES

Sales Highest today

Campaign Country Amount
Halloween Promo US $ 2,139
Halloween Promo US $ 1,840
Organic CA $ 1,337

Home page

The Baremetric's home page recoded using only LittleCSS default 6KB library.

Make more with Baremetrics.

Metrics, dunning, and engagement tools for SaaS & subscription businesses.

Get Started Talk to us

Want to see for yourself? Check out our live preview.

Integrates with your favorite payment providers and platforms

Google Play
App Store Connect
shopify partners

Make more by knowing your business metrics in real-time.

Baremetrics cuts through the noise and reveals the insights you need to make profitable decisions that propel the business forward. See what's happening today, plan for tomorrow, and strategize for growth months and years down the road.

6KB of CSS go a long way…

Then it's your turn to make it shine.

Download LittleCSS

Go back up

Made with ❀ by Xavi Esteve