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.
If you want a little more, try using util, an addon for lit
Any other thoughts? Head to the Github repository and make an issue! If you like this idea, don't forget to
This website was built using nothing but lit, and a few custom lines of css to color the background of the grid example.
Containers add margin to the sides of your content and center it. This website has one main container that wraps everything.
<div class="c">
Container Example
</div>
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!
<div class="row">
<div class="7 col">Seven</div>
<div class="5 col">Five</div>
</div>
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 recommend adding some custom css to do spacing.
<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 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>
Lit comes with three types of buttons: normal buttons, primary buttons, and link buttons.
<a class="btn" href="">Link</a>
<button class="btn">Button</button>
<button class="btn primary">Primary Button</button>
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 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.
<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 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 | 395 |
| 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>395</td>
</tr>
<tr>
<td>Skeleton</td>
<td>Full</td>
<td>1650</td>
</tr>
</tbody>
</table>Cards can be used to display info in a concise and consistent manner.
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum.
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" class="w-100">
<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" class="w-100">
<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>
Horizontal Rules are useful for dividing up content. They add a splash of color as well!
<hr>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.