Build Status Build Status

Liteweight is an educational CSS framework by Matthew Wang and Nick O'Brien. We originally developed this to help teach members of our computer science club the ins and outs of CSS and SASS, but since then we've been working on it to make it even better.

This page offers documentation of what Liteweight has to offer, and how to use it properly. If something isn't working as intended, or we haven't documented it correctly, please let us know on GitHub.

We're working on making it easier to view this documentation (we recognize it's hard to read). For now, you'll just have to scroll.

Development Setup

Development Setup is super easy! You just need to run four commands (assuming you have Node and NPM installed):

$ git clone
$ cd liteweight
$ npm install
$ npm run build


Liteweight, from the ground up, is designed for modularity and customization. That's why all of our code is written in SASS: editing small things is as easy as cake! To theme Liteweight, you just need to write your own .scss file that imports whatever components you'd like and overrides any default variables. To show how this works, we package a theme with Liteweight (dubbed liteweight-duo), a toned-down version of Liteweight that Matt uses on his website. You can take a look at how this works by looking at the liteweight-duo.scss file.


When we designed Liteweight, we wanted to make things all colourful and pretty; that's why we designed it with a colour map in mind. Most of our components rely on this colour map to create coloured variations of themselves. You can change them to whatever you'd like in the variables.scss file. Here are the defaults:

Primary (#E95420)

Secondary (#7AD0ED)

Success (#2BD937)

Danger (#F01A1A)

Caution (#D9D92B)

Info (#6878ED)

White (#FFFFFF)

Black (#000000)

Note: all elements are also created in black and white, but we don't display them here as examples. Rest assured, you can still use them!

Colour Borders/Backgrounds

You can use bg-*, border-*, and border-[direction]-* with our colours to add flair to any object.

<div class="border-primary" style="margin:1rem;padding:1rem;">All</div>
<div class="border-top-primary" style="margin:1rem;padding:1rem;">Top</div>
<div class="border-right-primary" style="margin:1rem;padding:1rem;">Right</div>
<div class="border-bottom-primary" style="margin:1rem;padding:1rem;">Bottom</div>
<div class="border-left-primary" style="margin:1rem;padding:1rem;">Left</div>
<div class="bg-primary" style="margin:1rem;padding:1rem;">Fill</div>


Here's all the typographical elements that Liteweight modifies.


Liteweight doesn't modify the <h-*> tags directly; instead, it uses modifier classes to allow your code to be both semantically correct and rockin' awesome.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6
<h1 class="title title-1">Heading 1</h1>
<h2 class="title title-2">Heading 2</h2>
<h3 class="title title-3">Heading 3</h3>
<h4 class="title title-4">Heading 4</h4>
<h5 class="title title-5">Heading 5</h5>
<h6 class="title title-6">Heading 6</h6>

Coloured Text

Now your text can be all the pretty colours you wanted! Just use the class .text-* to set the color property for any element.








<p class="text-primary">Primary</p>
<p class="text-secondary">Secondary</p>
<p class="text-success">Success</p>
<p class="text-danger">Danger</p>
<p class="text-caution">Caution</p>
<p class="text-info">Info</p>


We add a bit of colour to links, and also let you use colours with them. Exciting!


<a href="#">Link</a>
<a class="link-secondary" href="#">Link</a>
<a class="link-success" href="#">Link</a>
<a class="link-danger" href="#">Link</a>
<a class="link-caution" href="#">Link</a>
<a class="link-info" href="#">Link</a>

Preformatted Text

We've made preformmated blocks pop out more. You can change the accent colour with our colour map.

P. Sherman
42 Wallaby Way
Sydney, NSW
Hey, I just met you, and this is crazy
But here's my number, so call me maybe
It's hard to look right at you, baby
But here's my number, so call me maybe
	P. Sherman
	42 Wallaby Way
	Sydney, NSW
<pre class="border-left-secondary">
	Hey, I just met you, and this is crazy
	But here's my number, so call me maybe
	It's hard to look right at you, baby
	But here's my number, so call me maybe


As coders, we wanted to make the code element look nice. You can even change the internal colour with our text modifiers.

.random-class console.log("A tree"); ["hip", "hip"]
<code class="text-primary>console.log("A tree");</code>
<code class="text-secondary">["hip", "hip"]</code>


We added a bit of flair to the blockquote. Spicy.

To be or not to be, that is the question.
<blockquote>To be or not to be, that is the question.</blockquote>


We added outlined buttons to liteweight, in all colours available in our colour map.

Primary Button
Secondary Button
Success Button
Danger Button
Caution Button
Info Button
<a class="button button-primary" href="#">Primary Button</a>
<a class="button button-secondary href="#">Secondary Button</a>
<a class="button button-success" href="#">Success Button</a>
<a class="button button-danger" href="#">Danger Button</a>
<a class="button button-caution" href="#">Caution Button</a>
<a class="button button-info" href="#">Info Button</a>


Cards are a nice class that wraps anything that's inside them. They can contain anything and everything.

This is a default card (with a background).
<div class="card card-full">
	This is a default card (with a background).
This is a card with the "primary" background. You can use any colour in our colour array for card backgrounds.
<div class="card bg-primary">
	This is a card with the "primary" background. You can use any colour in our colour array for card backgrounds.
This is a card with the "primary" border. You can use any colour in our colour array for card borders.
<div class="card border-primary">
	This is a card with the "primary" border. You can use any colour in our colour array for card borders.


Tags are a cool class that let you highlight or otherwise separate important pieces of text. We recommend you use tags in <span> tags. You can use tags simlarly to cards, and use our entire colour set.

Primary Secondary Success Danger Caution Info
<span class="tag bg-primary">Primary</span>
<span class="tag bg-secondary">Secondary</span>
<span class="tag bg-success">Success</span>
<span class="tag bg-danger">Danger</span>
<span class="tag bg-caution">Caution</span>
<span class="tag bg-info">Info</span>

Rounded Tags

You can spin your tags right round. Works with other tag modifiers. Awesome!

Primary Secondary Success Danger Caution Info
<span class="tag tag-rounded bg-primary">Primary</span>
<span class="tag tag-rounded bg-secondary">Secondary</span>
<span class="tag tag-rounded bg-success">Success</span>
<span class="tag tag-rounded bg-danger">Danger</span>
<span class="tag tag-rounded bg-caution">Caution</span>
<span class="tag tag-rounded bg-info">Info</span>

Bordered Tags

You can create bordered tags, similar to cards; it even works with other modifiers. Cool!

Primary Secondary Success Danger Caution Info
<span class="tag border-primary">Primary</span>
<span class="tag border-secondary">Secondary</span>
<span class="tag border-success">Success</span>
<span class="tag border-danger">Danger</span>
<span class="tag border-caution">Caution</span>
<span class="tag border-info">Info</span>

Sized Tags

Tag sizes can also be modified, and they still work with other tag modifiers.

Small Standard Large
<span class="tag tag-sm bg-primary">Small</span>
<span class="tag bg-primary">Standard</span>
<span class="tag tag-lg bg-primary">Large</span>



We added a simple utility that just makes an unstyled list.

Cool People
Cool People
<ul class="list-unstyled">
	<li>Matt (@malsf21)</li>
	<li>Nick (@obrien66)</li>

Text Positioning

We added CSS classes that change text-align to left, center, and right.

Left-aligned text

Center-aligned text

Right-aligned text

<p class="text-left">Left-aligned text</p>
<p class="text-center">Center-aligned text</p>
<p class="text-right">Right-aligned text</p>

Text Sizes

We added CSS classes that help you increase your relative font size.

2x Text

3x Text

4x Text

5x Text

<p class="text-2x">2x Text</p>
<p class="text-3x">3x Text</p>
<p class="text-4x">4x Text</p>
<p class="text-5x">5x Text</p>


.block-responsive is a simple class: it makes any block element (like an image) expand to its parent width or its original width, whichever comes first.

Really Cool Logo
<img class="block-responsive" src="logo.png" />

.block-balance does something similar, except it also sets margin-left and margin-right to auto

. Really Cool Logo
<img class="block-balance" src="logo.png" />

Experiments WIP

Experiments are components or elements that are not production-ready, but rather just testing new ideas. You shouldn't use these in production (and we don't include them in the default release).

Dropdowns WIP

Dropdowns are an extension of our buttons. Unlike most dropdown stylings, these ones are CSS only. In addition, they work with any of our colours in our colour map.

<div class="dropdown">
	<a class="button button-primary">Mouse over me</a>
	<div class="dropdown-content">
		<ul class="list-unstyled">
				<li><a>Dropdown link</a></li>
				<li><a>Dropdown link</a></li>
				<li><a>Dropdown link</a></li>
				<li><a>Dropdown link</a></li>

Navbar WIP

Here are some navbar-esque components. While they aren't responsive in the traditional sense (no hamburger menu), they are compact enough to work on most screen sizes. You can also attach .fixed-top to the nav element to make it stick to the top of the screen.

	<div class="nav-main">
		<a class="nav-title text-primary">Title</a>
		<ul class="nav-list">
			<li class="nav-item active"><a>Item</a></li>
			<li class="nav-item><a>Item</a</li>
			<li class="nav-item><a>Item</a></li>