Ultra-lean CSS library
Or get it running quickly:<link rel="stylesheet" href="https://raw.githubusercontent.com/luckyshot/LittleCSS/main/little.css">
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
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:
.row-nobreak)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.
.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
.text-bold
.text-regular
.text-light
.text-sans
.text-serif
.text-mono
.text-left
.text-center
.text-right
.text-justify
| 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:
Tweaking the opacity of elements gives us a wide variety of color combinations that are very easy to combine.
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.
A standard top navigation bar usually used to place a logo and the main menu.
A nice and big section to announce something important.
A few examples on displaying lists of rich items.
Smiling face
Happy days
Hearty eyes
For the loved one
Halo
Good boy
Screaming
Like in the movie
.row-nobreak .colSmiling face
Happy days
Hearty eyes
For the loved one
Halo
Good boy
Screaming
Like in the movie
.float-*Escape to nature
Unique places
Discover the world
For pets
An example of a fully styled form including textboxes, labels and buttons.
A Dashboard for an Administrator's UI with top navigation, a left sidebar and a main area for any content.
42
New Users
85
Sales
239€
Earnings today
3,382€
Earnings this month
| Name | Campaign | Country |
|---|---|---|
| John Smith | Halloween Promo | US |
| Peter Griffin | Organic | US |
| Pedro García | Halloween Promo | ES |
| Name | Campaign | Country |
|---|---|---|
| John Smith | 11.99€ | US |
| Peter Griffin | 7.99€ | US |
| Pedro García | 19.99€ | ES |
| Campaign | Country | Amount |
|---|---|---|
| Halloween Promo | US | $ 2,139 |
| Halloween Promo | US | $ 1,840 |
| Organic | CA | $ 1,337 |
The Baremetric's home page recoded using only LittleCSS default 6KB library.
Metrics, dunning, and engagement tools for SaaS & subscription businesses.
Get Started Talk to usWant to see for yourself? Check out our live preview.
Integrates with your favorite payment providers and platforms
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.
Made with ❤ by Xavi Esteve