Liteweight

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 https://github.com/malsf21/liteweight.git
$ cd liteweight
$ npm install
$ npm run build
				
			

Theming

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.

Colours

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:

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>
			
		

Typography

Here's all the typographical elements that Liteweight modifies.

Headings

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.

			
<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>Default</p>
<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>
			
		

Links

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
    

			
<pre>
	P. Sherman
	42 Wallaby Way
	Sydney, NSW
</pre>
<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
</pre>
			
		

Code

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

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

Blockquote

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>
			
		

Buttons

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

			
<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

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

			
<div class="card card-full">
	This is a default card (with a background).
</div>
			
		

			
<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.
</div>
			
		

			
<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.
</div>
			
		

Tags

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.

			
<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!

			
<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!

			
<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.

			
<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>
			
		

Utilities

Lists

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

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

Text Positioning

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

			
<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.

			
<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>
			
		

Blocks

.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.

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

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

			
<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).

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.

			
<nav>
	<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>
		</ul>
	</div>
</nav>
			
		

Table WIP

Liteweight features opinionated, low-configuration tables.

Here's just .table:

The .table-condensed modifier:

The .table-border-$color modifier:

The .table-bordered modifier: