UNPKG

14 kBHTMLView Raw
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 <title>fuel</title>
8 <meta name="viewport" content="width=device-width, initial-scale=1">
9 <!-- Link to your stylesheet here -->
10 <link rel="stylesheet" href="../dist/lighter.css">
11 <link rel="stylesheet" href="../dist/fuel.css">
12 <!-- Place this tag in your head or just before your close body tag. -->
13 <script async defer src="https://buttons.github.io/buttons.js"></script>
14</head>
15
16<body class="m0">
17 <div class="tc vh-100 bg-accent">
18 <div class="vc c c-white">
19 <h1 class="mega mb0">fuel</h1>
20 <p class="large mb2">A simple, framework agnostic 1kb CSS library</p>
21 <a class="btn bg-accent c-white pill ph4 inline" href="#utilities">Utilities</a>
22 <a class="btn bg-white c-accent pill ph4 inline" href="#components">Components</a>
23 </div>
24 </div>
25 <div class="c">
26 <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>
27 <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>
28 <div>
29 <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>
30 </div>
31 <h2 class="mb1" id="utilities">Utilities</h2>
32 <p>For now, use the "view source" functionality of your browser as documentation</p>
33 <div class="card p1 b-info">
34 <a href="#spacing" class="ph2 c-info">Spacing</a>
35 <a href="#text" class="ph2 c-info">Text</a>
36 <a href="#colors" class="ph2 c-info">Colors</a>
37 <a href="#misc" class="ph2 c-info">Misc</a>
38 </div>
39 <div id="spacing">
40 <h3 class="mb1">Spacing</h3> fuel uses a simple spacing system inspired by the likes of BassCSS and Tachyons.
41 <div class="bg-info c-white ph1 pv2">ph1 pv2</div>
42 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.
43 <div class="bg-info c-white ml1 mt2">ml1 mt2</div>
44 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.
45 <div class="bg-info c-white p2 m2">p2 m2</div>
46 If you want something on all sides, just do the above, with type then level.
47 </div>
48 <div id="text">
49 <h3 class="mb1">Text</h3> fuel has several different classes for transforming text in various ways.
50
51 <div class="row">
52 <div class="6 col">
53 <h4 class="mb1">Size</h4>
54 <p class="mt0 card mega">mega</p>
55 <p class="card huge">huge</p>
56 <p class="card large">large</p>
57 <p class="card">regular</p>
58 <p class="card small">small</p>
59 </div>
60 <div class="col">
61 <h4 class="mb1">Alignment</h4>
62 <p class="card tl">tl</p>
63 <p class="card tc">tc</p>
64 <p class="card tr">tr</p>
65
66 <h4 class="mb1">Style</h4>
67 <p class="card bold">bold</p>
68 <p class="card normal">normal</p>
69 <p class="card light">light</p>
70 <p class="card caps">caps</p>
71 <p class="card tracked">tracked</p>
72 <p class="small">
73 Reminder: You can use <code>&lt;i&gt;</code> or <code>&lt;em&gt;</code> for <i>italic</i><br />
74 and <code>&lt;u&gt;</code> for <u>underline</u>
75 </p>
76 </div>
77 </div>
78 </div>
79 <div id="colors">
80 <h3 class="mb1">Colors</h3>
81 <h4>Text Colors</h4>
82 <span class="ph1 c-primary">c-primary</span>
83 <span class="ph1 c-accent">c-accent</span>
84 <span class="ph1 c-info">c-info</span>
85 <span class="ph1 c-success">c-success</span>
86 <span class="ph1 c-warning">c-warning</span>
87 <span class="ph1 c-error">c-error</span>
88 <span class="ph1 c-black">c-black</span>
89 <span class="ph1 c-white bg-black">c-white</span>
90 <span class="ph1 c-gray">c-gray</span>
91 <h4>Background Colors</h4>
92 <div class="p1 c-white bg-primary">bg-primary</div>
93 <div class="p1 c-white bg-accent">bg-accent</div>
94 <div class="p1 c-white bg-info">bg-info</div>
95 <div class="p1 c-white bg-success">bg-success</div>
96 <div class="p1 c-white bg-warning">bg-warning</div>
97 <div class="p1 c-white bg-error">bg-error</div>
98 <div class="p1 c-white bg-black">bg-black</div>
99 <div class="p1 c-black bg-white">bg-white</div>
100 <div class="p1 c-black bg-gray">bg-gray</div>
101 <h4>Border Colors</h4>
102 <div class="card p1 b-primary">b-primary</div>
103 <div class="card p1 b-accent">b-accent</div>
104 <div class="card p1 b-info">b-info</div>
105 <div class="card p1 b-success">b-success</div>
106 <div class="card p1 b-warning">b-warning</div>
107 <div class="card p1 b-error">b-error</div>
108 <div class="card p1 b-black">b-black</div>
109 <div class="card p1 b-white">b-white</div>
110 <div class="card p1 b-gray">b-gray</div>
111 </div>
112 <div id="misc">
113 <h3 class="mb1">Misc</h3>
114 <p>These elements all use the <code>inline</code> class.</p>
115 <div class="inline p2 bg-primary c-white dim">dim</div>
116 <div class="inline p2 bg-info c-white rounded">rounded</div>
117 <div class="inline p2 bg-success c-white pill">pill</div>
118 <div class="gapless row">
119 <div class="6 col">
120 <h4 class="mb0">Gapless grid</h4>
121 <small>(Only visible on non-mobile screens)</small>
122 <div class="gapless row">
123 <div class="card col"></div>
124 <div class="card col"></div>
125 </div>
126 </div>
127 <div class="6 col">
128 <h4>Regular grid</h4>
129 <div class="row">
130 <div class="card col"></div>
131 <div class="card col"></div>
132 </div>
133 </div>
134 </div>
135 </div>
136 <h2 class="mb1" id="components">Components</h2>
137 <p>For now, use the "view source" functionality of your browser as documentation</p>
138 <div class="card p1 b-accent">
139 <a href="#buttons" class="ph2">Buttons</a>
140 <a href="#alerts" class="ph2">Alerts</a>
141 <a href="#navbar" class="ph2">Navbar</a>
142 <a href="#badges" class="ph2">Badges</a>
143 <a href="#full" class="ph2">Full Page Landing</a>
144 </div>
145 <div id="buttons">
146 <h3 class="mb1">Buttons</h3>
147 Basic, solid color (<code>primary</code>) buttons are built in to lighter, but you can achieve the following buttons with various fuel classes.
148 <h4>Basic Buttons</h4>
149 <button class="btn primary">Primary Button</button>
150 <button class="btn accent">Accent Button</button>
151 <button class="btn info">Info Button</button>
152 <button class="btn success">Success Button</button>
153 <button class="btn warning">Warning Button</button>
154 <button class="btn error">Error Button</button>
155 <h4>Ghost Buttons</h4>
156 <button class="btn b-primary c-primary">Primary Button</button>
157 <button class="btn b-accent c-accent">Accent Button</button>
158 <button class="btn b-info c-info">Info Button</button>
159 <button class="btn b-success c-success">Success Button</button>
160 <button class="btn b-warning c-warning">Warning Button</button>
161 <button class="btn b-error c-error">Error Button</button>
162 <h4>Rounded Buttons</h4>
163 <button class="rounded btn primary">Primary Button</button>
164 <button class="rounded btn accent">Accent Button</button>
165 <button class="rounded btn info">Info Button</button>
166 <button class="rounded btn success">Success Button</button>
167 <button class="rounded btn warning">Warning Button</button>
168 <button class="rounded btn error">Error Button</button>
169 <br>
170 <button class="rounded btn b-primary c-primary">Primary Button</button>
171 <button class="rounded btn b-accent c-accent">Accent Button</button>
172 <button class="rounded btn b-info c-info">Info Button</button>
173 <button class="rounded btn b-success c-success">Success Button</button>
174 <button class="rounded btn b-warning c-warning">Warning Button</button>
175 <button class="rounded btn b-error c-error">Error Button</button>
176 <h4>Pill Buttons</h4>
177 <button class="pill btn primary">Primary Button</button>
178 <button class="pill btn accent">Accent Button</button>
179 <button class="pill btn info">Info Button</button>
180 <button class="pill btn success">Success Button</button>
181 <button class="pill btn warning">Warning Button</button>
182 <button class="pill btn error">Error Button</button>
183 <br>
184 <button class="pill btn b-primary c-primary">Primary Button</button>
185 <button class="pill btn b-accent c-accent">Accent Button</button>
186 <button class="pill btn b-info c-info">Info Button</button>
187 <button class="pill btn b-success c-success">Success Button</button>
188 <button class="pill btn b-warning c-warning">Warning Button</button>
189 <button class="pill btn b-error c-error">Error Button</button>
190 </div>
191 <div id="alerts">
192 <h3 class="mb1">Alerts</h3>
193 Using color classes and spacing classes, it's easy to create any kind of alert box you might need!
194 <div class="bg-error c-white pv1 ph2 rounded">
195 <p class="large m0">Oh no!</p>
196 This is an example of an error alert
197 </div>
198 <div class="bg-warning c-black pv1 ph2 rounded">
199 This is an example of a warning alert
200 </div>
201 <div class="card b-info c-info rounded">
202 You can also re-color card borders
203 </div>
204 </div>
205 <div id="navbar">
206 <h3 class="mb1">Navbar</h3>
207 By exploiting how the grid works and pairing it with color classes, you can create a convincing nav bar!
208 <!-- Note, you could use simpler HTML, but this helps screen readers navigate better! Be an A11y :) -->
209 <nav class="bg-success pv2 row">
210 <ul class="col p0" style="list-style:none;">
211 <li class="inline">
212 <a href="#buttons" class="c-white ph2">Menu</a>
213 </li>
214 <li class="inline">
215 <a href="#alerts" class="c-white ph2">Item</a>
216 </li>
217 <li class="inline">
218 <a href="#navbar" class="c-white ph2">Blog</a>
219 </li>
220 </ul>
221 <ul class="2 col p0" style="list-style:none;">
222 <li class="inline">
223 <a href="#full" class="c-white ph2">Download</a>
224 </li>
225 </ul>
226 </nav>
227 </div>
228 <div id="badges">
229 <h3 class="mb1">Badges</h3>
230 By inserting a <code>span</code> class with different background and color classes, you can create badges within another element.
231 <h4>Heading Badge <span class="bg-warning bold c-white ph1 rounded">
232 New
233 </span></h4>
234 <button class="rounded btn bg-info b-info c-white">Button Badge <span class="bg-white bold c-black ph1 rounded">
235 5
236 </span></button>
237 </div>
238 <div id="list-group">
239 <h3 class="mb1">List Groups</h3>
240 <p>This also demonstrates the <code>inline</code> class!</p>
241 <div class="inline p0 rounded">
242 <div class="card m0">Some item that is long</div>
243 <div class="card m0">Some item</div>
244 <div class="card m0">Some item, that exists</div>
245 </div>
246 <div class="inline p0 rounded">
247 <div class="card m0 bg-accent c-white">Selected Item</div>
248 <div class="card m0">Some item</div>
249 <div class="card m0">Some item, that exists</div>
250 </div>
251 </div>
252 </div>
253 <div id="full">
254 <div class="c">
255 <h3 class="mb1">Full Page Landing</h3>
256 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.
257 </div>
258 <div class="tc vh-100 bg-info">
259 <div class="vc c c-white">
260 <h1 class="mega mb0">Name</h1>
261 <p class="large mb2">Some description text</p>
262 <a class="btn bg-info c-white pill ph4">A Button</a>
263 </div>
264 </div>
265 </div>
266</body>
267
268</html>
\No newline at end of file