The whole library is only 7 kb! 2 kb gzipped. You can get the size down by creating a custom build below.
You can quickly design and customize responsive, mobile-first sites with Lori.css. The page you are watching was built with it.
Add the following lines to your <head> section, and you are ready to go:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="lori.min.css">
There are 12 columns. Lori.css's grid system uses a series of rows and columns to layout and align content. You can specify the column width in the class name. The example below is an 50%-50% division.
<div class="row">
<div class="c-6"> This is a column. </div>
<div class="c-6"> This is also a column. </div>
</div>
A normal column collapsing into a row on small screens.
There are 3 breakpoints based on screen size:
| Size | Class | |
|---|---|---|
| Small | screen < 640px | c-s* |
| Normal | 640px <= screen < 1280px | c-* |
| Large | 1280px <= screen | c-l* |
Resize your browser window and watch how colums change their sizes.
<div class="row">
<div class="c-s4 c-6 c-l9">
33% on small, 50% on normal, 75% on large.
</div>
<div class="c-s8 c-6 c-l3">
66% on small, 50% on normal, 25% on large.
</div>
</div>
If you want to hide a column on a certain screen size, use one or more of the following classes:
<div class="c-6 c-sh">Hidden on small</div>
<div class="c-6 c-h">Hidden on normal</div>
<div class="c-6 c-lh">Hidden on large</div>
If you want to offset a column on a certain screen size, use one or more of the following classes:
<div class="c-s8 o-s2 c-8 o-2 c-l8 o-l2" >
8 cols with 2 offset on every screen
</div>
Menus are just simple lists with the .menu class and some additional helper "toggle" elements.
<nav class="c-12 s-3">
<label class="menutoggle orange p-1" for="menutoggle">☰</label>
<input id="menutoggle" type="checkbox">
<ul class="menu orange">
<a href="#"><li class="orange p-1"> MenuItem </li></a>
<a href="#"><li class="orange active p-1"> ActiveItem </li></a>
<a href="#"><li class="orange p-1"> MenuItem </li></a>
</ul>
</nav>
You can set background and text colors using the following classes:
You can drop shadow behind elements with the following classes:
Use the m-* or the p-* classes to set the margin or padding width, where * can be 0,1,2,3,4,5 which means 5px, 10px, 20px, 30px 40px or 50px.
Examples:
Use the ml-*, mr-*, mt-*, mb-* to set the left, right, top or bottom margin.
Use the pl-*, pr-*, pt-*, pb-* to set the left, right, top or bottom padding.
Examples:
Real life example:
<div class="m-2 pl-1">
<p>This is a div with 20px margin and 10px padding-left.</p>
</div>
Every image is responsive by default, you don't need to add any class to it:
Circle image: .circle
If you wrap video embeds with the .video class, you get a responsive scaling video.
<div class="video">
<iframe src="https://youtube...">
</div>
The form elements are automatically styled, you don't need to add any class.
<button class="purple large s-2">Large</button>
<button class="purple s-2">Normal</button>
<button class="purple small s-2">Small</button>
Other elements are automatically styled, you don't need to add any class.
| Table heading | Table heading |
|---|---|
| AAAA | 1234 |
| BBBB | 5678 |
| CCCC | 9999 |
This is a blockquote:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
This is a marked text, and a kbd text. Bold, italic, underlined, superscript, subscript.
What do you want to include in the build?
Build: (0 kb minified)