-
Notifications
You must be signed in to change notification settings - Fork 0
/
basics.html
288 lines (254 loc) · 12.4 KB
/
basics.html
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
<!DOCTYPE html>
<html lang="en">
<!--
Website: sta.css project
Page: basics.html
Author: Kevin Robell
Purpose: This page shows the basic uses of the framework.
-->
<head>
<meta charset="utf-8" />
<title> sta.css : basics </title>
<link href="css/sta.css" rel="stylesheet" type="text/css" />
</head>
<body class="body">
<header class="header">
<h1 class="title-txt"> sta.css </h1>
<h5 class="title-txt"> A minimalist CSS framework. </h5>
</header>
<nav class="nav">
<a href="index.html">Home</a>
<a id="current-page" href="basics.html">Basics</a>
<a href="themes.html">Themes</a>
<a href="more.html">More</a>
</nav>
<!-- Basics -->
<div class="box w4">
<h2> Basics </h2>
<hr>
This page shows the basic uses of this framework. If you want a more detailed explanation of each class, take a look at <a href="https://github.com/apainintheneck/sta.css/wiki/Using-sta.css" target="_blank">the wiki</a>.
<br><br>
Here are the basic CSS classes found in this framework.
<ul>
<li><a href="#body">Body</a>: Centers elements on page, sets font, and sets background.</li>
<li><a href="#nav">Nav</a>: The nav bar holds all of the relevant links at the top of the page.</li>
<li><a href="#width">Width</a>: Controls the max-width of given elements.</li>
<li><a href="#boxes">Boxes</a>: Basic containers with internal padding that can be used for text and media.</li>
<li><a href="#media">Media</a>: Full width borderless containers for images, videos, and iframes.</li>
<li><a href="#code">Code</a>: Display code easily.</li>
<li><a href="#buttons">Buttons</a>: Button styles can be applied to links or buttons.</li>
<li><a href="#footer">Footer</a>: The footer holds crediting and contact info at the bottom of the page.</li>
</ul>
<hr>
</div>
<br>
<!-- Body -->
<div id="body" class="box w3">
<h2> Body </h2>
<hr>
The <code>.body</code> class controls the background(color and image), centers child elements, and controls the default font and text color. This entire page is an example of the <code>.body</code> class.
</div>
<details>
<summary class="btn">Code</summary>
<pre class="box code w2">
<body class="body">
...
</body></pre>
</details>
<br>
<!-- Nav -->
<div id="nav" class="box w3">
<h2> Nav </h2>
<hr>
The <code>.nav</code> class allows you to create nav bars on the page. The links are automatically spaced away from each other and the <code>#current-page</code> id allows you to bold the current page. Links are underlined when hovered over. It shares the same background as the <code>.footer</code> class.
</div>
<details>
<summary class="btn">Example</summary>
<nav class="nav">
<a href="#example-url">Page 1</a>
<a id="current-page" href="#example-url">Page 2</a>
<a href="#example-url">Page 3</a>
<a href="#example-url">Page 4</a>
</nav>
</details>
<details>
<summary class="btn">Code</summary>
<pre class="box code w2">
<nav class="nav">
<a href="#example-url">Page 1</a>
<a id="current-page" href="#example-url">Page 2</a>
<a href="#example-url">Page 3</a>
<a href="#example-url">Page 4</a>
</nav></pre>
</details>
<br>
<!-- Width -->
<div id="width" class="box w3">
<h2> Width </h2>
<hr>
Almost anything can be sized using the max-width properties but they are most frequently used with the classes <code>.box</code> and <code>.media</code>. There are six default sizes that go from smallest to largest: <code>.w0</code> <code>.w1</code> <code>.w2</code> <code>.w3</code> <code>.w4</code> <code>.w5</code>. Additionally, there is the <code>.wfull</code> class which sets the max-width to 100%.
</div>
<details>
<summary class="btn">Example</summary>
<div class="box w1">
<h3> .w1 </h3>
</div>
<div class="box w3">
<h3> .w3 </h3>
</div>
<div class="box w5">
<h3> .w5 </h3>
</div>
</details>
<details>
<summary class="btn">Code</summary>
<pre class="box code w2">
<div class="box w1">
<h3> .w1 </h3>
</div>
<div class="box w3">
<h3> .w3 </h3>
</div>
<div class="box w5">
<h3> .w5 </h3>
</div></pre>
</details>
<br>
<!-- Boxes -->
<div id="boxes" class="box w3">
<h2> Boxes </h2>
<hr>
Boxes are basic containers with internal padding that can be used for text and media. There are two main types of classes: <code>.box</code> and <code>.box.clear</code>. All boxes have <code><h1></code> and <code><h2></code> tags automatically centered. Child <code>.box</code> and <code>.media</code> classes automatically have a max-width of 100%.
</div>
<details>
<summary class="btn">Example</summary>
<div class="box clear w2">
<h3> .box.clear </h3>
Ut porttitor, lacus et tristique ultrices, diam nisi tempor leo, eget gravida tellus mauris elementum mi. Maecenas efficitur erat at quam gravida ullamcorper.
</div>
<div class="box w2">
<h3> .box </h3>
Ut porttitor, lacus et tristique ultrices, diam nisi tempor leo, eget gravida tellus mauris elementum mi. Maecenas efficitur erat at quam gravida ullamcorper.
<div class="box">
<h3> .box > .box </h3>
Ut porttitor, lacus et tristique ultrices, diam nisi tempor leo, eget gravida tellus mauris elementum mi. Maecenas efficitur erat at quam gravida ullamcorper.
</div>
</div>
</details>
<details>
<summary class="btn">Code</summary>
<pre class="box code w2">
<div class="box clear w2">
<h3> .box.clear </h3>
Ut porttitor, lacus et tristique ultrices, diam nisi tempor leo, eget gravida tellus mauris elementum mi. Maecenas efficitur erat at quam gravida ullamcorper.
</div>
<div class="box w2">
<h3> .box </h3>
Ut porttitor, lacus et tristique ultrices, diam nisi tempor leo, eget gravida tellus mauris elementum mi. Maecenas efficitur erat at quam gravida ullamcorper.
<div class="box">
<h3> .box > .box </h3>
Ut porttitor, lacus et tristique ultrices, diam nisi tempor leo, eget gravida tellus mauris elementum mi. Maecenas efficitur erat at quam gravida ullamcorper.
</div>
</div></pre>
</details>
<br>
<!-- Media -->
<div id="media" class="box w3">
<h2> Media </h2>
<hr>
The <code>.media</code> class styles a borderless media container. It is built to be used with the <code><img></code>, <code><video></code>, and <code><iframe></code> tags.
</div>
<details>
<summary class="btn">Example</summary>
<img class="media w2" src="https://picsum.photos/700/100"/>
<br>
<iframe class="media w2" width="480" height="360" src="https://www.youtube.com/embed/J---aiyznGQ?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</details>
<details>
<summary class="btn">Code</summary>
<pre class="box code w2">
<img class="media w2" src="https://picsum.photos/700/100"/>
<br>
<iframe class="media w2" width="480" height="360" src="https://www.youtube.com/embed/J---aiyznGQ?controls=0" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></pre>
</details>
<br>
<!-- Code -->
<div id="code" class="box w3">
<h2> Code </h2>
<hr>
The <code>.code</code> class allows you to style bits of code. It is applied automatically to all <code><code></code> tags that are inside a container that uses the <code>.box</code> class. Additionally, there are custom <code>.box.code</code> containers for multiple lines of code that are best built with the <code><pre></code> tag.
</div>
<details>
<summary class="btn">Example</summary>
Lorem <span class="code">consectetur</span> elit.
<div class="box w2">
Etiam nibh enim, luctus ac <code>faucibus</code> sit amet, molestie nec ex.
<pre class="box code">
Mauris commodo tincidunt vestibulum. Morbi faucibus vulputate mollis. Duis sed dui condimentum lacus ultrices porta in eget est.</pre>
</div>
</details>
<details>
<summary class="btn">Code</summary>
<pre class="box code w2">
Lorem <span class="code">consectetur</span> elit.
<div class="box w2">
Etiam nibh enim, luctus ac <code>faucibus</code> sit amet, molestie nec ex.
<pre class="box code">
Mauris commodo tincidunt vestibulum. Morbi faucibus vulputate mollis. Duis sed dui condimentum lacus ultrices porta in eget est.</pre>
</div></pre>
</details>
<br>
<!-- Buttons -->
<div id="buttons" class="box w3">
<h2> Buttons </h2>
<hr>
The main button is created using the <code>.btn</code> class. There are four default hover effects: <code>.btn.dark</code>, <code>.btn.light</code>, <code>.btn.border</code>, and <code>.btn.lines</code>. Each of these can be seen below. Anything that is clickable can be styled to look like a button.
</div>
<details>
<summary class="btn">Example</summary>
<div class="box w3">
<span class="btn">.btn</span>
<span class="btn dark">.btn.dark</span>
<span class="btn light">.btn.light</span>
<span class="btn border">.btn.border</span>
<span class="btn lines">.btn.lines</span>
</div>
</details>
<details>
<summary class="btn">Code</summary>
<pre class="box code w2">
<div class="box w1">
<span class="btn">.btn</span>
<span class="btn dark">.btn.dark</span>
<span class="btn light">.btn.light</span>
<span class="btn border">.btn.border</span>
<span class="btn lines">.btn.lines</span>
</div></pre>
</details>
<br>
<!-- Footer -->
<div id="footer" class="box w3">
<h2> Footer </h2>
<hr>
The <code>.footer</code> class creates a footer for the page and its background and width match those found in the <code>.body</code> class. This space is used for crediting and branding.
</div>
<details>
<summary class="btn">Example</summary>
<footer class="footer">
Year© Last Name<br>
Find more of my work on Github.
</footer>
</details>
<details>
<summary class="btn">Code</summary>
<pre class="box code w2">
<footer class="footer">
Year&copy; Last Name<br> Find more of my work on Github.
</footer></pre>
</details>
<footer class="footer">
2020© Robell<br>
Find more of my work on <a href="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/apainintheneck">Github</a>.
</footer>
</body>
</html>