@alamantus/lighter
Version:
a ridiculously small css framework
268 lines (263 loc) • 14 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>fuel</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Link to your stylesheet here -->
<link rel="stylesheet" href="../dist/lighter.css">
<link rel="stylesheet" href="../dist/fuel.css">
<!-- Place this tag in your head or just before your close body tag. -->
<script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body class="m0">
<div class="tc vh-100 bg-accent">
<div class="vc c c-white">
<h1 class="mega mb0">fuel</h1>
<p class="large mb2">A simple, framework agnostic 1kb CSS library</p>
<a class="btn bg-accent c-white pill ph4 inline" href="#utilities">Utilities</a>
<a class="btn bg-white c-accent pill ph4 inline" href="#components">Components</a>
</div>
</div>
<div class="c">
<p>fuel is a library made with atomic css principles, designed to extend other frameworks. This site is built only with <a href="https://alamantus.github.io/lighter/">lighter</a> and fuel.</p>
<p>Any other thoughts? Head to the <a href="https://github.com/Alamantus/lighter">Github</a> repository and make an issue! If you like this idea, don't forget to </p>
<div>
<a class="github-button" href="https://github.com/Alamantus/lighter" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star Alamantus/lighter on GitHub">Star</a>
</div>
<h2 class="mb1" id="utilities">Utilities</h2>
<p>For now, use the "view source" functionality of your browser as documentation</p>
<div class="card p1 b-info">
<a href="#spacing" class="ph2 c-info">Spacing</a>
<a href="#text" class="ph2 c-info">Text</a>
<a href="#colors" class="ph2 c-info">Colors</a>
<a href="#misc" class="ph2 c-info">Misc</a>
</div>
<div id="spacing">
<h3 class="mb1">Spacing</h3> fuel uses a simple spacing system inspired by the likes of BassCSS and Tachyons.
<div class="bg-info c-white ph1 pv2">ph1 pv2</div>
In this example, p means padding (m means margin), h means horizontal while v means vertical, and the number at the end is the level. Levels go from 0-4.
<div class="bg-info c-white ml1 mt2">ml1 mt2</div>
This example shows off margins. For the middle selector, you use t (top), b (bottom), l (left), and r (right) to say which direction you want the margin. Margin does not have v or h as directions.
<div class="bg-info c-white p2 m2">p2 m2</div>
If you want something on all sides, just do the above, with type then level.
</div>
<div id="text">
<h3 class="mb1">Text</h3> fuel has several different classes for transforming text in various ways.
<div class="row">
<div class="6 col">
<h4 class="mb1">Size</h4>
<p class="mt0 card mega">mega</p>
<p class="card huge">huge</p>
<p class="card large">large</p>
<p class="card">regular</p>
<p class="card small">small</p>
</div>
<div class="col">
<h4 class="mb1">Alignment</h4>
<p class="card tl">tl</p>
<p class="card tc">tc</p>
<p class="card tr">tr</p>
<h4 class="mb1">Style</h4>
<p class="card bold">bold</p>
<p class="card normal">normal</p>
<p class="card light">light</p>
<p class="card caps">caps</p>
<p class="card tracked">tracked</p>
<p class="small">
Reminder: You can use <code><i></code> or <code><em></code> for <i>italic</i><br />
and <code><u></code> for <u>underline</u>
</p>
</div>
</div>
</div>
<div id="colors">
<h3 class="mb1">Colors</h3>
<h4>Text Colors</h4>
<span class="ph1 c-primary">c-primary</span>
<span class="ph1 c-accent">c-accent</span>
<span class="ph1 c-info">c-info</span>
<span class="ph1 c-success">c-success</span>
<span class="ph1 c-warning">c-warning</span>
<span class="ph1 c-error">c-error</span>
<span class="ph1 c-black">c-black</span>
<span class="ph1 c-white bg-black">c-white</span>
<span class="ph1 c-gray">c-gray</span>
<h4>Background Colors</h4>
<div class="p1 c-white bg-primary">bg-primary</div>
<div class="p1 c-white bg-accent">bg-accent</div>
<div class="p1 c-white bg-info">bg-info</div>
<div class="p1 c-white bg-success">bg-success</div>
<div class="p1 c-white bg-warning">bg-warning</div>
<div class="p1 c-white bg-error">bg-error</div>
<div class="p1 c-white bg-black">bg-black</div>
<div class="p1 c-black bg-white">bg-white</div>
<div class="p1 c-black bg-gray">bg-gray</div>
<h4>Border Colors</h4>
<div class="card p1 b-primary">b-primary</div>
<div class="card p1 b-accent">b-accent</div>
<div class="card p1 b-info">b-info</div>
<div class="card p1 b-success">b-success</div>
<div class="card p1 b-warning">b-warning</div>
<div class="card p1 b-error">b-error</div>
<div class="card p1 b-black">b-black</div>
<div class="card p1 b-white">b-white</div>
<div class="card p1 b-gray">b-gray</div>
</div>
<div id="misc">
<h3 class="mb1">Misc</h3>
<p>These elements all use the <code>inline</code> class.</p>
<div class="inline p2 bg-primary c-white dim">dim</div>
<div class="inline p2 bg-info c-white rounded">rounded</div>
<div class="inline p2 bg-success c-white pill">pill</div>
<div class="gapless row">
<div class="6 col">
<h4 class="mb0">Gapless grid</h4>
<small>(Only visible on non-mobile screens)</small>
<div class="gapless row">
<div class="card col"></div>
<div class="card col"></div>
</div>
</div>
<div class="6 col">
<h4>Regular grid</h4>
<div class="row">
<div class="card col"></div>
<div class="card col"></div>
</div>
</div>
</div>
</div>
<h2 class="mb1" id="components">Components</h2>
<p>For now, use the "view source" functionality of your browser as documentation</p>
<div class="card p1 b-accent">
<a href="#buttons" class="ph2">Buttons</a>
<a href="#alerts" class="ph2">Alerts</a>
<a href="#navbar" class="ph2">Navbar</a>
<a href="#badges" class="ph2">Badges</a>
<a href="#full" class="ph2">Full Page Landing</a>
</div>
<div id="buttons">
<h3 class="mb1">Buttons</h3>
Basic, solid color (<code>primary</code>) buttons are built in to lighter, but you can achieve the following buttons with various fuel classes.
<h4>Basic Buttons</h4>
<button class="btn primary">Primary Button</button>
<button class="btn accent">Accent Button</button>
<button class="btn info">Info Button</button>
<button class="btn success">Success Button</button>
<button class="btn warning">Warning Button</button>
<button class="btn error">Error Button</button>
<h4>Ghost Buttons</h4>
<button class="btn b-primary c-primary">Primary Button</button>
<button class="btn b-accent c-accent">Accent Button</button>
<button class="btn b-info c-info">Info Button</button>
<button class="btn b-success c-success">Success Button</button>
<button class="btn b-warning c-warning">Warning Button</button>
<button class="btn b-error c-error">Error Button</button>
<h4>Rounded Buttons</h4>
<button class="rounded btn primary">Primary Button</button>
<button class="rounded btn accent">Accent Button</button>
<button class="rounded btn info">Info Button</button>
<button class="rounded btn success">Success Button</button>
<button class="rounded btn warning">Warning Button</button>
<button class="rounded btn error">Error Button</button>
<br>
<button class="rounded btn b-primary c-primary">Primary Button</button>
<button class="rounded btn b-accent c-accent">Accent Button</button>
<button class="rounded btn b-info c-info">Info Button</button>
<button class="rounded btn b-success c-success">Success Button</button>
<button class="rounded btn b-warning c-warning">Warning Button</button>
<button class="rounded btn b-error c-error">Error Button</button>
<h4>Pill Buttons</h4>
<button class="pill btn primary">Primary Button</button>
<button class="pill btn accent">Accent Button</button>
<button class="pill btn info">Info Button</button>
<button class="pill btn success">Success Button</button>
<button class="pill btn warning">Warning Button</button>
<button class="pill btn error">Error Button</button>
<br>
<button class="pill btn b-primary c-primary">Primary Button</button>
<button class="pill btn b-accent c-accent">Accent Button</button>
<button class="pill btn b-info c-info">Info Button</button>
<button class="pill btn b-success c-success">Success Button</button>
<button class="pill btn b-warning c-warning">Warning Button</button>
<button class="pill btn b-error c-error">Error Button</button>
</div>
<div id="alerts">
<h3 class="mb1">Alerts</h3>
Using color classes and spacing classes, it's easy to create any kind of alert box you might need!
<div class="bg-error c-white pv1 ph2 rounded">
<p class="large m0">Oh no!</p>
This is an example of an error alert
</div>
<div class="bg-warning c-black pv1 ph2 rounded">
This is an example of a warning alert
</div>
<div class="card b-info c-info rounded">
You can also re-color card borders
</div>
</div>
<div id="navbar">
<h3 class="mb1">Navbar</h3>
By exploiting how the grid works and pairing it with color classes, you can create a convincing nav bar!
<!-- Note, you could use simpler HTML, but this helps screen readers navigate better! Be an A11y :) -->
<nav class="bg-success pv2 row">
<ul class="col p0" style="list-style:none;">
<li class="inline">
<a href="#buttons" class="c-white ph2">Menu</a>
</li>
<li class="inline">
<a href="#alerts" class="c-white ph2">Item</a>
</li>
<li class="inline">
<a href="#navbar" class="c-white ph2">Blog</a>
</li>
</ul>
<ul class="2 col p0" style="list-style:none;">
<li class="inline">
<a href="#full" class="c-white ph2">Download</a>
</li>
</ul>
</nav>
</div>
<div id="badges">
<h3 class="mb1">Badges</h3>
By inserting a <code>span</code> class with different background and color classes, you can create badges within another element.
<h4>Heading Badge <span class="bg-warning bold c-white ph1 rounded">
New
</span></h4>
<button class="rounded btn bg-info b-info c-white">Button Badge <span class="bg-white bold c-black ph1 rounded">
5
</span></button>
</div>
<div id="list-group">
<h3 class="mb1">List Groups</h3>
<p>This also demonstrates the <code>inline</code> class!</p>
<div class="inline p0 rounded">
<div class="card m0">Some item that is long</div>
<div class="card m0">Some item</div>
<div class="card m0">Some item, that exists</div>
</div>
<div class="inline p0 rounded">
<div class="card m0 bg-accent c-white">Selected Item</div>
<div class="card m0">Some item</div>
<div class="card m0">Some item, that exists</div>
</div>
</div>
</div>
<div id="full">
<div class="c">
<h3 class="mb1">Full Page Landing</h3>
Using the <code>vh-100</code>, <code>vc</code>, and <code>tc</code> classes with a background color, you can create a screen-filling hero section.
</div>
<div class="tc vh-100 bg-info">
<div class="vc c c-white">
<h1 class="mega mb0">Name</h1>
<p class="large mb2">Some description text</p>
<a class="btn bg-info c-white pill ph4">A Button</a>
</div>
</div>
</div>
</body>
</html>