UNPKG

16.1 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>lighter 🔥</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 <!-- Place this tag in your head or just before your close body tag. -->
12 <script async defer src="https://buttons.github.io/buttons.js"></script>
13 <style>
14 .example-grid .row {
15 /*stolen from skeleton for the time being*/
16 text-align: center;
17 font-size: .8em;
18 letter-spacing: .1rem;
19 margin: .8em 0;
20 }
21
22 .example-grid .col {
23 background: #EEE;
24 padding: .3em;
25 }
26 </style>
27</head>
28
29<body class="c">
30 <h1>lighter 🔥</h1>
31 <h5>a ridiculously small responsive css framework* (<a href="https://github.com/Alamantus/lighter/blob/master/dist/lighter.css.gz">443 bytes</a> gzipped and minified)</h5>
32 <p>
33 This is the result of <a href="https://github.com/ajusa" target="_blank">ajusa</a> playing css "code golf" with <a href="http://www.getskeleton.com" target="_blank">Skeleton</a>.
34 As such, this framework strives to maintain all of the features that Skeleton and other similar frameworks offer, while working on older browsers as well.
35 </p>
36 <p>If you want a little more, try using <a href="./fuel.html">fuel</a>, an addon for lighter</p>
37 <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>
38 <div>
39 <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>
40 </div>
41 <h6>* Depends on how you define framework. lighter has default styles for buttons, typography, forms, and a grid system.</h6>
42 <h2>Documentation</h2>
43 <div class="row card">
44 <div class="col"><a href="#container">Container</a></div>
45 <div class="col"><a href="#grid">Grid</a></div>
46 <div class="col"><a href="#typography">Typography</a></div>
47 <div class="col"><a href="#navbar">Navbar</a></div>
48 <div class="col"><a href="#codeBlock">Code Block</a></div>
49 <div class="col"><a href="#buttons">Buttons</a></div>
50 <div class="col"><a href="#lists">Lists</a></div>
51 <div class="col"><a href="#forms">Forms</a></div>
52 <div class="col"><a href="#tables">Tables</a></div>
53 <div class="col"><a href="#cards">Cards</a></div>
54 <div class="col"><a href="#other">Other</a></div>
55 </div>
56 <p>This website was built using nothing but lighter, and a few custom lines of css to color the background of the grid example.</p>
57 <h4 id="container">Container</h4>
58 <p>Containers add margin to the sides of your content and center it. This website has one main container that wraps everything.</p>
59 <div class="c">
60 Container Example
61 </div>
62<pre><code>&lt;div class="c"&gt;
63 Container Example
64&lt;/div&gt;</code></pre>
65 <h4 id="grid">Grid</h4>
66 <p>Grids are defined on a 12 column scale. Each col will take up equal width if no width number is specified. They automatically collapse on mobile to take up the full viewport. Go ahead, try it!</p>
67 <div class="example-grid">
68 <div class="row">
69 <div class="1 col">1 col</div>
70 <div class="11 col">11 col</div>
71 </div>
72 <div class="row">
73 <div class="2 col">2 col</div>
74 <div class="10 col">10 col</div>
75 </div>
76 <div class="row">
77 <div class="3 col">3 col</div>
78 <div class="9 col">9 col</div>
79 </div>
80 <div class="row">
81 <div class="4 col">4 col</div>
82 <div class="8 col">8 col</div>
83 </div>
84 <div class="row">
85 <div class="5 col">5 col</div>
86 <div class="7 col">7 col</div>
87 </div>
88 <div class="row">
89 <div class="6 col">6 col</div>
90 <div class="6 col">6 col</div>
91 </div>
92 </div>
93 <br>
94<pre><code>&lt;div class=&quot;row&quot;&gt;
95 &lt;div class=&quot;7 col&quot;&gt;Seven&lt;/div&gt;
96 &lt;div class=&quot;5 col&quot;&gt;Five&lt;/div&gt;
97&lt;/div&gt;</code></pre>
98 <h4 id="typography">Typography</h4>
99 <h1>Heading 1</h1>
100 <h2>Heading 2</h2>
101 <h3>Heading 3</h3>
102 <h4>Heading 4</h4>
103 <h5>Heading 5</h5>
104 <h6>Heading 6</h6>
105 <p>
106 This is a paragraph. The font family is whatever the default sans-serif font is on your device.
107 <small>(We recommend changing this to <code>BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif</code> for the nicest result, but default is fine.)</small><br />
108 <b>Some bold text.</b> <i>Italics also looks nice.</i> You can <u>underline</u> things you feel are important.<br />
109 <a href="fuel.html">fuel</a> has styles that override the default heading styles, including margin.
110 </p>
111<pre><code>&lt;h1&gt;Heading&lt;/h1&gt;
112&lt;h2&gt;Heading&lt;/h2&gt;
113&lt;h3&gt;Heading&lt;/h3&gt;
114&lt;h4&gt;Heading&lt;/h4&gt;
115&lt;h5&gt;Heading&lt;/h5&gt;
116&lt;h6&gt;Heading&lt;/h6&gt;
117&lt;p&gt;This is a paragraph. The font family is whatever the default sans-serif font is on your device.
118&lt;small&gt;(We recommend changing this to &lt;code&gt;BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif&lt;/code&gt; for the nicest result, but default is fine)&lt;/small&gt;&lt;br /&gt;
119&lt;b&gt;Some bold text.&lt;/b&gt; &lt;i&gt;Italics also looks nice.&lt;/i&gt;
120You can &lt;u&gt;underline&lt;/u&gt; things you feel are important.&lt;br /&gt;
121&lt;a href="fuel.html"&gt;fuel&lt;/a&gt; has styles that override the default heading styles, including margin.&lt;/p&gt;</code></pre>
122 <h4 id="navbar">Navbar</h4>
123 <p>While lighter doesn't come with an explicit navbar component, you can use grids to try and make a navbar. Keep in mind that the grid wasn't designed for this, so you may experience weird spacing issues. I recommend adding some custom css to do spacing.</p>
124 <div class="row card">
125 <b class="col">Brand</b>
126 <div class="col"><a href="#">News</a></div>
127 <div class="col"><a href="#">About</a></div>
128 <div class="col"><a href="#">Docs</a></div>
129 <div class="col"><a href="#">Login</a></div>
130 </div>
131 <br>
132<pre><code>&lt;div class=&quot;row card&quot;&gt;
133 &lt;b class=&quot;col&quot;&gt;Brand&lt;/b&gt;
134 &lt;div class=&quot;col&quot;&gt;&lt;a href=&quot;#&quot;&gt;News&lt;/a&gt;&lt;/div&gt;
135 &lt;div class=&quot;col&quot;&gt;&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;&lt;/div&gt;
136 &lt;div class=&quot;col&quot;&gt;&lt;a href=&quot;#&quot;&gt;Docs&lt;/a&gt;&lt;/div&gt;
137 &lt;div class=&quot;col&quot;&gt;&lt;a href=&quot;#&quot;&gt;Login&lt;/a&gt;&lt;/div&gt;
138&lt;/div&gt;</code></pre>
139 <h4 id="codeBlock">Code Block</h4>
140 <p>Code blocks are code tags wrapped with pre tags. They automatically overflow to become scrollable on smaller displays</p>
141<pre><code>&lt;pre&gt;&lt;code&gt;
142&lt;h4&gt;Code Block Example&lt;/h4&gt;
143&lt;/code&gt;&lt;/pre&gt;</code></pre>
144 <h4 id="buttons">Buttons</h4>
145 <p>lighter comes with three types of buttons: normal buttons, primary buttons, and link buttons.</p>
146 <div>
147 <a class="btn" href="">Link</a>
148 <button class="btn">Button</button>
149 <button class="btn primary">Primary Button</button>
150 </div>
151<pre><code>&lt;a class=&quot;btn&quot; href=&quot;&quot;&gt;Link&lt;/a&gt;
152&lt;button class=&quot;btn&quot;&gt;Button&lt;/button&gt;
153&lt;button class=&quot;btn primary&quot;&gt;Primary Button&lt;/button&gt;</code></pre>
154 <br>
155 <h4 id="lists">Lists</h4>
156 <p>Pretty simple and close to normal html.</p>
157 <ul>
158 <li>First Item</li>
159 <li>
160 Second Item
161 <ul>
162 <li>Sub Item 1</li>
163 <li>Sub Item 2</li>
164 </ul>
165 </li>
166 <li>Third Item</li>
167 </ul>
168<pre><code>&lt;ul&gt;
169 &lt;li&gt;First Item&lt;/li&gt;
170 &lt;li&gt;
171 Second Item
172 &lt;ul&gt;
173 &lt;li&gt;Sub Item 1&lt;/li&gt;
174 &lt;li&gt;Sub Item 2&lt;/li&gt;
175 &lt;/ul&gt;
176 &lt;/li&gt;
177 &lt;li&gt;Third Item&lt;/li&gt;
178&lt;/ul&gt;</code></pre>
179 <h4 id="forms">Forms</h4>
180 <p>Forms are built in various ways. You can either place them normally, or you can use grids to create multiple columns of inputs, and then they will automatically collapse on mobile. You use the card class to style a form, and you can use the w-100 class to make an input take up the full width.</p>
181 <div class="row">
182 <div class="6 col">
183 Email
184 <input class="card w-100" type="email" placeholder="opensource@mail.com">
185 </div>
186 <div class="6 col">
187 Additional Info
188 <select class="card w-100">
189 <option value="Option 1">Question</option>
190 <option value="Option 2">Compliment</option>
191 <option value="Option 3">Problem</option>
192 </select>
193 </div>
194 </div>
195 <div class="row">
196 Message
197 <textarea class="card w-100" placeholder="Some information here"></textarea>
198 <input type="checkbox"> I am not a robot
199 <hr>
200 <button class="btn primary">Submit</button>
201 </div>
202<pre><code>&lt;div class=&quot;row&quot;&gt;
203 &lt;div class=&quot;6 col&quot;&gt;
204 Email
205 &lt;input class=&quot;card w-100&quot; type=&quot;email&quot; placeholder=&quot;opensource@mail.com&quot;&gt;
206 &lt;/div&gt;
207 &lt;div class=&quot;6 col&quot;&gt;
208 Additional Info
209 &lt;select class=&quot;card w-100&quot;&gt;
210 &lt;option value=&quot;Option 1&quot;&gt;Question&lt;/option&gt;
211 &lt;option value=&quot;Option 2&quot;&gt;Compliment&lt;/option&gt;
212 &lt;option value=&quot;Option 3&quot;&gt;Problem&lt;/option&gt;
213 &lt;/select&gt;
214 &lt;/div&gt;
215&lt;/div&gt;
216&lt;div class=&quot;row&quot;&gt;
217 Message
218 &lt;textarea class=&quot;card w-100&quot; placeholder=&quot;Some information here&quot;&gt;&lt;/textarea&gt;
219 &lt;input type=&quot;checkbox&quot;&gt;
220 I am not a robot
221 &lt;hr&gt;
222 &lt;button class=&quot;btn primary&quot;&gt;Submit&lt;/button&gt;
223&lt;/div&gt;</code></pre>
224 <h4 id="tables">Tables</h4>
225 <p>Tables work how you would expect. Use the w-100 class to make it more consistent between mobile and desktop.</p>
226 <table class="w-100">
227 <thead>
228 <tr>
229 <th>Name</th>
230 <th>Feature Parity (compared to lighter)</th>
231 <th>Size (bytes)</th>
232 </tr>
233 </thead>
234 <tbody>
235 <tr>
236 <td>lighter</td>
237 <td>Full</td>
238 <td>565</td>
239 </tr>
240 <tr>
241 <td>Skeleton</td>
242 <td>Full</td>
243 <td>1650</td>
244 </tr>
245 <tr>
246 <td>Milligram</td>
247 <td>Mostly, missing blockquote and clear buttons</td>
248 <td>2240</td>
249 </tr>
250 <tr>
251 <td>Min</td>
252 <td>Mostly, missing messages</td>
253 <td>955</td>
254 </tr>
255 <tr>
256 <td>Pure</td>
257 <td>Decent, but Pure has more options per element</td>
258 <td>3910</td>
259 </tr>
260 <tr>
261 <td>Furtive</td>
262 <td>Decent, but Furtive has many utility classes and media objects</td>
263 <td>2470</td>
264 </tr>
265 <tr>
266 <td>Basscss</td>
267 <td>Decent, but Basscss is atomic based, difficult to compare</td>
268 <td>2220</td>
269 </tr>
270 </tbody>
271 </table>
272<pre><code>&lt;table class=&quot;w-100&quot;&gt;
273 &lt;thead&gt;
274 &lt;tr&gt;
275 &lt;th&gt;Name&lt;/th&gt;
276 &lt;th&gt;Feature Parity (compared to lighter)&lt;/th&gt;
277 &lt;th&gt;Size (bytes)&lt;/th&gt;
278 &lt;/tr&gt;
279 &lt;/thead&gt;
280 &lt;tbody&gt;
281 &lt;tr&gt;
282 &lt;td&gt;lighter&lt;/td&gt;
283 &lt;td&gt;Full&lt;/td&gt;
284 &lt;td&gt;395&lt;/td&gt;
285 &lt;/tr&gt;
286 &lt;tr&gt;
287 &lt;td&gt;Skeleton&lt;/td&gt;
288 &lt;td&gt;Full&lt;/td&gt;
289 &lt;td&gt;1650&lt;/td&gt;
290 &lt;/tr&gt;
291 &lt;/tbody&gt;
292&lt;/table&gt;</code></pre>
293 <h4 id="cards">Cards</h4>
294 <p>Cards can be used to display info in a concise and consistent manner. </p>
295 <div class="card">
296 <h4>Simple Card</h4>
297 <p>Here is some text that generally describes the card, or something about it.</p>
298 <button class="btn">Okay</button>
299 <button class="btn primary">Cancel</button>
300 </div>
301<pre><code>&lt;div class=&quot;card&quot;&gt;
302 &lt;h4&gt;Simple Card&lt;/h4&gt;
303 &lt;p&gt;Here is some text that generally describes the card, or something about it.&lt;/p&gt;
304 &lt;button class=&quot;btn&quot;&gt;Okay&lt;/button&gt;
305 &lt;button class=&quot;btn primary&quot;&gt;Cancel&lt;/button&gt;
306&lt;/div&gt;</code></pre>
307 <p>Cards are usually nested within grids to create powerful display systems, like below.</p>
308 <div class="row">
309 <div class="card col">
310 <img src="https://picsum.photos/400/300/?random" class="w-100">
311 <h4>Card Title</h4>
312 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum. </p>
313 <button class="btn">Okay</button>
314 <button class="btn primary">Cancel</button>
315 </div>
316 <div class="card col">
317 <img src="https://picsum.photos/400/301/?random" class="w-100">
318 <h4>Card Title</h4>
319 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum. </p>
320 <button class="btn">Okay</button>
321 <button class="btn primary">Cancel</button>
322 </div>
323 </div>
324 <p>You can also easily nest images within cards.</p>
325<pre><code>&lt;div class=&quot;row&quot;&gt;
326 &lt;div class=&quot;card col&quot;&gt;
327 &lt;img src=&quot;https://picsum.photos/400/300/?random&quot; class=&quot;w-100&quot;&gt;
328 &lt;h4&gt;Card Title&lt;/h4&gt;
329 &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.
330 Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum. &lt;/p&gt;
331 &lt;button class=&quot;btn&quot;&gt;Okay&lt;/button&gt;
332 &lt;button class=&quot;btn primary&quot;&gt;Cancel&lt;/button&gt;
333 &lt;/div&gt;
334 &lt;div class=&quot;card col&quot;&gt;
335 &lt;img src=&quot;https://picsum.photos/400/301/?random&quot; class=&quot;w-100&quot;&gt;
336 &lt;h4&gt;Card Title&lt;/h4&gt;
337 &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit.
338 Consectetur adipisci, asperiores odit repellat, explicabo expedita atque aut illum. &lt;/p&gt;
339 &lt;button class=&quot;btn&quot;&gt;Okay&lt;/button&gt;
340 &lt;button class=&quot;btn primary&quot;&gt;Cancel&lt;/button&gt;
341 &lt;/div&gt;
342&lt;/div&gt;</code></pre>
343 <h4 id="other">Other</h4>
344 <h5>Horizontal Rules</h5>
345 <p>Horizontal Rules are useful for dividing up content. They add a splash of color as well!</p>
346 <hr>
347 <pre><code>&lt;hr&gt;</code></pre>
348 <h5>Utility</h5>
349 <p>The only utility class is <code>w-100</code>, which simply sets an element to take up full width. Responsive items that should use this are inputs, images, and tables.</p>
350 <hr>
351 <br>
352</body>
353
354</html>
\No newline at end of file