os-toolkit/index.html at master · ObjectiveSubject/os-toolkit · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>OS Toolkit</title>
    <link href="./dist/css/os-toolkit.css" rel="stylesheet" />
    <style>
        html {
            font-size: 100%;
        }
        body {
            font-size: 1.125rem;
            line-height: 1.5;
        }
        .os-l-cell {
            /* outline: 1px dotted rgba(0,0,0,0.5); */
            text-align: center;
            margin-top: 20px;
            margin-bottom: 20px;
            background: lavender;
            line-height: 3;
        }
        .font-mono {
            font-family: monospace;
        }
    </style>
</head>
<body>

    <div class="os-l-container">
        <h1>OS Toolkit</h1>

        <hr/>

        <h1 id="typography" class="os-l-my-4">Typography</h1>

        <h1>H1. Fusce sed molestie eros cras non justo nunc.</h1>

        <h2>H2. Nulla eleifend tortor vitae lorem accumsan</h2>

        <h3>H3. Aenean at volutpat urna, quis mattis augue. Maecenas tincidunt sollicitudin bibendum.</h3>

        <h4>H4. Aenean at volutpat urna, quis mattis augue. Maecenas tincidunt sollicitudin bibendum.</h4>

        <h5>H5. Aenean at volutpat urna, quis mattis augue. Maecenas tincidunt sollicitudin bibendum.</h5>

        <h6>H6. Aenean at volutpat urna, quis mattis augue. Maecenas tincidunt sollicitudin bibendum.</h6>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Morbi justo lorem</a>, congue eu ipsum eu, feugiat ornare ex. Nulla eleifend tortor vitae lorem accumsan, ac pellentesque elit pretium. Mauris ac ipsum eros. Suspendisse dolor mi, viverra sit amet diam in, convallis tempus ex. Ut cursus mi vel lacus facilisis suscipit. Curabitur facilisis turpis in augue finibus, eu congue magna condimentum.</p>

        <blockquote>
            Blockquote, massa ut fermentum maximus, nisl libero eleifend odio, ornare consectetur massa velit vel tellus.
            <cite>Quote Source</cite>
        </blockquote>

        <p>Aenean at volutpat urna, quis mattis augue. Maecenas tincidunt sollicitudin bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur et interdum sem, et convallis lacus. Fusce efficitur, massa ut fermentum maximus, nisl libero eleifend odio, ornare consectetur massa velit vel tellus. Morbi rhoncus arcu at orci blandit, non dapibus est vestibulum. Fusce in vestibulum metus. Sed gravida eu mi non pharetra. Suspendisse egestas nibh imperdiet augue iaculis posuere. Donec bibendum diam rhoncus, porta nulla nec, facilisis est. Donec in erat nec odio venenatis faucibus et ac nunc.</p>


        <h1 id="unordered-lists" class="os-l-mt-6">Unordered Lists</h1>

        <ul>
            <li>This is a list item in an unordered list</li>
            <li>An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line. </li>
            <li>
                Lists can be nested inside of each other
                <ul>
                    <li>
                        This is a nested list item
                        <ul>
                            <li>This is a nested list item</li>
                            <li>This is another nested list item in an unordered list</li>
                        </ul>
                    </li>
                    <li>This is another nested list item in an unordered list</li>
                </ul>
            </li>
            <li>This is the last list item</li>
        </ul>

        <h1 id="ordered-lists" class="os-l-mt-6">Ordered Lists</h1>

        <ol>
            <li>This is a list item in an ordered list</li>
            <li>An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.</li>
            <li>
                Lists can be nested inside of each other
                <ol>
                    <li>
                        This is a nested list item
                        <ol>
                            <li>This is a nested list item</li>
                            <li>This is another nested list item in an ordered list</li>
                        </ol>
                    </li>
                    <li>This is another nested list item in an ordered list</li>
                </ol>
            </li>
            <li>This is the last list item</li>
        </ol>


        <h1 id="code" class="os-l-mt-6">Preformatted & code</h1>

        <p>Aenean at volutpat urna, quis mattis augue. <code>Maecenas tincidunt sollicitudin bibendum</code>. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>

        <pre>
.example {
    display: block;
    margin: 1em;
    float: left;
}</pre>


        <h1 id="form-fields" class="os-l-mt-6">Form Fields</h1>

        <p>Use classname <code>os-b-input</code> on input and textarea elements</p>

        <form>
            <p>
                <label class="os-b-label" for="text">Text Input <abbr title="Required">*</abbr></label>
                <input id="text" type="text" class="os-b-input" placeholder="Text Input">
<pre>
&lt;input type="text" class="os-b-input" placeholder="Text Input"&gt;
</pre>
            </p>
            <p>
            <label class="os-b-label" for="password">Password</label>
            <input id="password" type="password" class="os-b-input" placeholder="Type your Password">
            </p>
            <p>
            <label class="os-b-label" for="webaddress">Web Address</label>
            <input id="webaddress" type="url" class="os-b-input" placeholder="http://yoursite.com">
            </p>
            <p>
            <label class="os-b-label" for="emailaddress">Email Address</label>
            <input id="emailaddress" type="email" class="os-b-input" placeholder="[email protected]">
            </p>
            <p>
            <label class="os-b-label" for="search">Search</label>
            <input id="search" type="search" class="os-b-input" placeholder="Enter Search Term">
            </p>
            <p>
            <label class="os-b-label" for="number">Number Input <abbr title="Required">*</abbr></label>
            <input id="number" type="number" class="os-b-input" placeholder="Enter a Number" pattern="[0-9]*">
            </p>
            <p>
            <label class="os-b-label" for="textarea">Textarea</label>
            <textarea id="textarea" class="os-b-input" rows="8" cols="48" placeholder="Enter your message here"></textarea>
            </p>

        </form>


        <h1 id="buttons" class="os-l-mt-6">Buttons</h1>

        <p><input id="submit" value="Standard button" type="button" class="os-b-btn"/></p>


        <h1 id="tables" class="os-l-mt-6">Tables</h1>

        <h4>Default</h4>

        <pre><code>&lt;table class="os-b-table"&gt;</code></pre>

        <table class="os-b-table">
            <thead>
                <tr>
                    <th>Table Heading 1</th>
                    <th>Table Heading 2</th>
                    <th>Table Heading 3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Table Cell 1</td>
                    <td>Table Cell 2</td>
                    <td>Table Cell 3</td>
                </tr>
                <tr>
                    <td>Table Cell 1</td>
                    <td>Table Cell 2</td>
                    <td>Table Cell 3</td>
                </tr>
                <tr>
                    <td>Table Cell 1</td>
                    <td>Table Cell 2</td>
                    <td>Table Cell 3</td>
                </tr>
                <tr>
                    <td>Table Cell 1</td>
                    <td>Table Cell 2</td>
                    <td>Table Cell 3</td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <th>Table Footer 1</th>
                    <th>Table Footer 2</th>
                    <th>Table Footer 3</th>
                </tr>
            </tfoot>
        </table>


        <h1 id="grid" class="os-l-mt-6">Grid System</h1>

        <pre>
&lt;!-- Example --&gt;

&lt;div class="os-l-grid"&gt;
    &lt;div class="os-l-cell col-6"&gt;.col-6&lt;/div&gt;
    &lt;div class="os-l-cell col-6"&gt;.col-6&lt;/div&gt;
&lt;/div&gt;
</pre>


        <div class="os-l-grid os-l-mt-3">

            <div class="os-l-cell font-mono col-1">.col-1</div>
            <div class="os-l-cell font-mono col-1">.col-1</div>
            <div class="os-l-cell font-mono col-1">.col-1</div>
            <div class="os-l-cell font-mono col-1">.col-1</div>
            <div class="os-l-cell font-mono col-1">.col-1</div>
            <div class="os-l-cell font-mono col-1">.col-1</div>
            <div class="os-l-cell font-mono col-1">.col-1</div>
            <div class="os-l-cell font-mono col-1">.col-1</div>
            <div class="os-l-cell font-mono col-1">.col-1</div>
            <div class="os-l-cell font-mono col-1">.col-1</div>
            <div class="os-l-cell font-mono col-1">.col-1</div>
            <div class="os-l-cell font-mono col-1">.col-1</div>

            <div class="os-l-cell font-mono col-2">.col-2</div>
            <div class="os-l-cell font-mono col-2">.col-2</div>
            <div class="os-l-cell font-mono col-2">.col-2</div>
            <div class="os-l-cell font-mono col-2">.col-2</div>
            <div class="os-l-cell font-mono col-2">.col-2</div>
            <div class="os-l-cell font-mono col-2">.col-2</div>

            <div class="os-l-cell font-mono col-3">.col-3</div>
            <div class="os-l-cell font-mono col-3">.col-3</div>
            <div class="os-l-cell font-mono col-3">.col-3</div>
            <div class="os-l-cell font-mono col-3">.col-3</div>

            <div class="os-l-cell font-mono col-4">.col-4</div>
            <div class="os-l-cell font-mono col-4">.col-4</div>
            <div class="os-l-cell font-mono col-4">.col-4</div>

            <div class="os-l-cell font-mono col-5">.col-5</div>
            <div class="os-l-cell font-mono col-2">.col-2</div>
            <div class="os-l-cell font-mono col-5">.col-5</div>

            <div class="os-l-cell font-mono col-6">.col-6</div>
            <div class="os-l-cell font-mono col-6">.col-6</div>

            <div class="os-l-cell font-mono col-7">.col-7</div>
            <div class="os-l-cell font-mono col-5">.col-5</div>

            <div class="os-l-cell font-mono col-8">.col-8</div>
            <div class="os-l-cell font-mono col-4">.col-4</div>

            <div class="os-l-cell font-mono col-9">.col-9</div>
            <div class="os-l-cell font-mono col-3">.col-3</div>

            <div class="os-l-cell font-mono col-10">.col-10</div>
            <div class="os-l-cell font-mono col-2">.col-2</div>

            <div class="os-l-cell font-mono col-11">.col-11</div>
            <div class="os-l-cell font-mono col-1">.col-1</div>

        </div>

        <h3 class="os-l-mt-4">With offsets</h3>

        <div class="os-l-grid">

            <div class="os-l-cell font-mono col-2">.col-2</div>
            <div class="os-l-cell font-mono col-2 start-4">.col-2.start-4</div>
            <div class="os-l-cell font-mono col-2 start-8">.col-2.start-8</div>
            <div class="os-l-cell font-mono col-2 start-11">.col-2.start-11</div>

            <div class="os-l-cell font-mono col-6 col-5-lg start-2-lg">.col-6.col-4-lg.start-3-lg</div>
            <div class="os-l-cell font-mono col-6 col-5-lg">.col-6.col-4-lg</div>

            <div class="os-l-cell font-mono col-6 col-4-lg start-3-lg">.col-6.col-4-lg.start-3-lg</div>
            <div class="os-l-cell font-mono col-6 col-4-lg">.col-6.col-4-lg</div>

            <div class="os-l-cell font-mono col-11 start-2">.col-11.start-2</div>
            <div class="os-l-cell font-mono col-10 start-3">.col-10.start-3</div>
            <div class="os-l-cell font-mono col-9 start-4">.col-9.start-4</div>
            <div class="os-l-cell font-mono col-8 start-5">.col-8.start-5</div>
            <div class="os-l-cell font-mono col-7 start-6">.col-7.start-6</div>
            <div class="os-l-cell font-mono col-6 start-7">.col-6.start-7</div>
            <div class="os-l-cell font-mono col-5 start-8">.col-5.start-8</div>
            <div class="os-l-cell font-mono col-4 start-9">.col-4.start-9</div>
            <div class="os-l-cell font-mono col-3 start-10">.col-3.start-10</div>
            <div class="os-l-cell font-mono col-2 start-11">.col-2.start-11</div>
            <div class="os-l-cell font-mono col-1 start-12">.col-1.start-12</div>

        </div>


        <h1 id="spacing" class="os-l-mt-6">Spacing System</h1>

        <p>The toolkit allows you to specify spacing (margin and/or padding) for an element. To specify the spacing direction, use the following class names where <code>$n</code> is the spacing size:</p>
        <ul>
            <li><code>os-l-ma-$n</code> all 4 directions</li>
            <li><code>os-l-mx-$n</code> left and right</li>
            <li><code>os-l-my-$n</code> top and bottom</li>
            <li><code>os-l-mt-$n</code> top</li>
            <li><code>os-l-mb-$n</code> bottom</li>
            <li><code>os-l-ml-$n</code> left</li>
            <li><code>os-l-mr-$n</code> right</li>
        </ul>

        <p>The spacing system incorporates a scale of 6 steps. Use "0", "nudge", "auto", or the numbers "1" through "6" to specify the amount of space for an element.</p>

        <p><strong>Top margin example:</strong></p>

        <div class="os-l-grid">

            <div class="os-l-cell col-6">
                <div class="os-l-mt-0 font-mono" style="background:coral">.os-l-mt-0</div>
            </div>
            <div class="os-l-cell col-6">
                <div class="os-l-mt-nudge font-mono" style="background:coral">.os-l-mt-nudge</div>
            </div>
            <div class="os-l-cell col-2">
                <div class="os-l-mt-1 font-mono" style="background:coral">.os-l-mt-1</div>
            </div>
            <div class="os-l-cell col-2">
                <div class="os-l-mt-2 font-mono" style="background:coral">.os-l-mt-2</div>
            </div>
            <div class="os-l-cell col-2">
                <div class="os-l-mt-3 font-mono" style="background:coral">.os-l-mt-3</div>
            </div>
            <div class="os-l-cell col-2">
                <div class="os-l-mt-4 font-mono" style="background:coral">.os-l-mt-4</div>
            </div>
            <div class="os-l-cell col-2">
                <div class="os-l-mt-5 font-mono" style="background:coral">.os-l-mt-5</div>
            </div>
            <div class="os-l-cell col-2">
                <div class="os-l-mt-6 font-mono" style="background:coral">.os-l-mt-6</div>
            </div>

        </div>

        <p><strong>Auto margin example:</strong></p>

        <div class="os-l-mt-1" style="outline: 1px dotted">
            <div class="font-mono os-l-mx-auto" style="background:coral;text-align:center;max-width:400px;line-height:3">
                .os-l-mx-auto[style="max-width:400px"]
            </div>
        </div>

    </div>

</body>
</html>