lit 🔥

world's smallest responsive css framework* (398 bytes gzipped and minified)

This is the result of me playing css "code golf" with Skeleton. As such, this framework strives to maintain all of the features that Skeleton and other similar frameworks offer, while working on older browsers as well.

Any other thoughts? Head to the Github repository and make an issue! If you like this idea, don't forget to

Star
* Depends on how you define framework. For me, a framework needs to have default styles (buttons, typography, forms), and a grid system.

Documentation

Container
Grid
Typography
Navbar
Code Block
Buttons
Lists
Forms
Tables
Cards
Other

This website was built using nothing but lit, and a few custom lines of css to color the background of the grid example.

Container

Containers add margin to the sides of your content and center it. This website has one main container that wraps everything.

Container Example

    <div class="c">
        Container Example
    </div>
    

Grid

Grids are defined on a 12 column scale. Each col will take up equal width if no width number is specified. They automatically collapse on mobile to take up the full viewport. Go ahead, try it!

1 col
11 col
2 col
10 col
3 col
9 col
4 col
8 col
5 col
7 col
6 col
6 col


    <div class="row">
        <div class="7 col">Seven</div>
        <div class="5 col">Five</div>
    </div>
    

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

This is a paragraph. The font family is Nunito. Some bold text. Italics also looks nice. You can underline things you feel are important. Lit has styles that override the default heading styles, including margin.


    <h1>Heading</h1>
    <h2>Heading</h2>
    <h3>Heading</h3>
    <h4>Heading</h4>
    <h5>Heading</h5>
    <h6>Heading</h6>
    <p>This is a paragraph. The font family is <a href="https://fonts.google.com/specimen/Nunito">Nunito</a>.
    <b>Some bold text.</b> <i>Italics also looks nice.</i>
    You can <u>underline</u> things you feel are important.
    Lit has styles that override the default heading styles, including margin.</p>
    

While lit doesn't come with an explicit navbar component, you can use grids to try and make a navbar. Keep in mind that the grid wasn't designed for this, so you may experience weird spacing issues. I reccomend adding some custom css to do spacing.

Brand
News
About
Docs
Login


    <div class="row card">
        <b class="col">Brand</b>
        <div class="col"><a href="#">News</a></div>
        <div class="col"><a href="#">About</a></div>
        <div class="col"><a href="#">Docs</a></div>
        <div class="col"><a href="#">Login</a></div>
    </div>
    

Code Block

Code blocks are code tags wrapped with pre tags. They automatically overflow to become scrollable on smaller displays


    <pre><code>
    <h4>Code Block Example</h4>
    </code></pre>
    

Buttons

Lit comes with three types of buttons: normal buttons, primary buttons, and link buttons.

Link

    <a class="btn" href="">Link</a>
    <button class="btn">Button</button>
    <button class="btn primary">Primary Button</button>
    

Lists

Pretty simple and close to normal html.


    <ul>
        <li>First Item</li>
        <li>
            Second Item
            <ul>
                <li>Sub Item 1</li>
                <li>Sub Item 2</li>
            </ul>
        </li>
        <li>Third Item</li>
    </ul>
    

Forms

Forms are built in various ways. You can either place them normally, or you can use grids to create multiple columns of inputs, and then they will automatically collapse on mobile. You use the card class to style a form, and you can use the w-100 class to make an input take up the full width.

Email
Additional Info
Message I am not a robot

        <div class="row">
            <div class="6 col">
                Email
                <input class="card w-100" type="email" placeholder="opensource@mail.com">
            </div>
            <div class="6 col">
                Additional Info
                <select class="card w-100">
                    <option value="Option 1">Question</option>
                    <option value="Option 2">Compliment</option>
                    <option value="Option 3">Problem</option>
                </select>
            </div>
        </div>
        <div class="row">
            Message
            <textarea class="card w-100" placeholder="Some information here"></textarea>
            <input type="checkbox">
            I am not a robot
            <hr>
            <button class="btn primary">Submit</button>
        </div>
        

Tables

Tables work how you would expect. Use the w-100 class to make it more consistent between mobile and desktop.

Name Feature Parity (compared to lit) Size (bytes)
lit Full 398
Skeleton Full 1650
Milligram Mostly, missing blockquote and clear buttons 2240
Min Mostly, missing messages 955
Pure Decent, but Pure has more options per element 3910
Furtive Decent, but Furtive has many utility classes and media objects 2470
Basscss Decent, but Basscss is atomic based, difficult to compare 2220
        <table class="w-100">
        <thead>
            <tr>
                <th>Name</th>
                <th>Feature Parity (compared to lit)</th>
                <th>Size (bytes)</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>lit</td>
                <td>Full</td>
                <td>398</td>
            </tr>
            <tr>
                <td>Skeleton</td>
                <td>Full</td>
                <td>1650</td>
            </tr>
        </tbody>
    </table>

Cards

Cards can be used to display info in a concise and consistent manner.

Simple Card

Here is some text that generally describes the card, or something about it.


        <div class="card">
            <h4>Simple Card</h4>
            <p>Here is some text that generally describes the card, or something about it.</p>
            <button class="btn">Okay</button>
            <button class="btn primary">Cancel</button>
        </div>
        

Cards are usually nested within grids to create powerful display systems, like below.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum.

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum.

You can also easily nest images within cards.


        <div class="row">
            <div class="card col">
                <img src="https://picsum.photos/400/300/?random">
                <h4>Card Title</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum. </p>
                <button class="btn">Okay</button>
                <button class="btn primary">Cancel</button>
            </div>
            <div class="card col">
                <img src="https://picsum.photos/400/301/?random">
                <h4>Card Title</h4>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
                Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum. </p>
                <button class="btn">Okay</button>
                <button class="btn primary">Cancel</button>
            </div>
        </div>
        

Other

Horizontal Rules

Horizontal Rules are useful for dividing up content. They add a splash of color as well!


<hr>
Utility

The only utility class is w-100, which simply sets an element to take up full width. Responsive items that should use this are inputs, images, and tables.