This repository was archived by the owner on Jan 23, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
209 lines (190 loc) · 8.74 KB
/
index.html
File metadata and controls
209 lines (190 loc) · 8.74 KB
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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Semstrap: Basic styling withouth the bloat</title>
<link rel="stylesheet" href="./dist/semstrap.css">
<link rel="stylesheet" href="./assets/styles/main.css">
</head>
<body>
<header class="hero">
<h1 class="brand-header">
<img src="./assets/images/logo.svg" alt="Tromsø mountains, Norway, Photo by Frank Thomsen">
<span style="color: #fff;">Semstrap</span>
</h1>
<p class="byline">
Simple styles for semantic HTML that don't make your eyes bleed
</p>
</header>
<main>
<nav class="sitenav container">
<a href="#article">Article <article></a>
<a href="#buttons">Buttons <button></a>
<a href="#code">Code <code></a>
<a href="#definition-list">Definition list <dl></a>
<a href="#forms">Forms <form></a>
<a href="#headings">Headings <h1>, <h2>, <h3> …</a>
<a href="#links">Links <a></a>
<a href="#tables">Tables <table></a>
<a href="#hr">Thematic break <hr></a>
</nav>
<article id="about">
<h2>About Semstrap</h2>
<p>
Many developers turn to frontend frameworks just to easily improve the looks of their web projects. Unfortunately this approach results in a loot of framework-specific code like class names and wrapping elements being added to your HTML. Sometimes you even end up adding a bit of code from a another web project that relies on a different front end framework and you get a mess of dependencies and conflicting class names.
</p>
<p>
Semstrap styles only targets elements. When you want to use it to style a form element you just add the element like so:
</p>
<code>
<pre>
<form>
<label for="inputEmail">Email address</label>
<input id="inputEmail" type="email">
</form>
</pre>
</code>
<p>
... as opposed to:
</p>
<code>
<pre>
<form class="form form-modifier">
<div class="form__wrapper form__wrapper-modifier">
<label class="form__wrapper__label" for="exampleInputEmail1">Email address</label>
<input class="form__wrapper__input form__wrapper__input-modifier" type="email" id="exampleInputEmail1">
</div>
</form>
</pre>
</code>
<p>Check it out on Github: <a href="https://github.com/iamfrank/semstrap">https://github.com/iamfrank/semstrap</a></p>
<h3>Using it</h3>
<p>
If you want to use Semstrap in your project, <a href="./dist/semstrap.css">just download semstrap.css</a> and add it to your project's head section:
</p>
<code>
<link rel="stylesheet" type="text/css" href="semstrap.css">
</code>
<p>
That's it. Take a look beneath to see the cool stuff you can build with pure HTML elements and Semstrap.
</p>
</article>
<article id="article">
<h2>Article</h2>
<p>The <em><article></em> element is a semantic wrapper for anything that can be percieved as a single unit of information or functionality. Examples are a blog post or a signup form.</p>
<p>Articles are semantic containers and they don't need a lot of styling (we save that for the content), but we assume a padding inside any article would make it's content easier to distinguish from other parts of your webpage.</p>
<article style="border: dashed 1px #eee;">Stuff inside an article</article>
</article>
<article id="buttons">
<h2>Buttons</h2>
<button onclick="alert('It was touched');">Touch me</button>
<button disabled>Disabled</button>
<h2>Buttons in forms </h2>
<form>
<input type="submit" value="Submit">
<button type="button">With button element</button>
<input type="button" value="With input element">
<input type="reset" value="Reset">
<input type="submit" value="Nothing" disabled>
</form>
</article>
<article id="code">
<h2>Code</h2>
<code>Some code</code>
</article>
<article id="forms">
<h2>Forms</h2>
<form>
<fieldset>
<label for="myInputField1">Text entry</label>
<input id="myInputField1" type="text" placeholder="Enter some text" required>
</fieldset>
<fieldset>
<label for="myInputField2">Optional text</label>
<input id="myInputField2" type="text" placeholder="">
</fieldset>
<fieldset>
<input id="myInputField3" type="checkbox">
<label for="myInputField3">Tick this box</label>
</fieldset>
<fieldset>
<input type="submit" value="Submit">
<input type="button" value="Cancel">
</fieldset>
</form>
<p><a href="./pages/form-examples.html">Check out more form examples.</a></p>
</article>
<article id="definition-list">
<h2>Definition list</h2>
<dl>
<dt>Term A</dt>
<dd>Definition description A</dd>
<dt>Term B</dt>
<dd>Definition description B. <br>Can be an entire multiline paragraph.</dd>
<dt>Term C</dt>
<dd>Definition description C</dd>
</dl>
</article>
<article id="headings">
<h2>Headings</h2>
<p>
Headings are defined with the <h1> to <h6> tags.
<h1> defines the top level heading
</p>
<h1>This is a heading level 1</h1>
<h2>This is a heading level 2</h2>
<h3>This is a heading level 3</h3>
<h4>This is a heading level 4</h4>
<h5>This is a heading level 5</h5>
<h6>This is a heading level 6</h6>
</article>
<article id="links">
<h2>Links</h2>
<a href="#">Going somewhere?</a>
</article>
<article id="tables">
<h2>Tables</h2>
<p>Tables are for displaying large datasets in a structured manner.</p>
<table>
<thead>
<tr>
<th>Table header 1</th>
<th>Table header 2</th>
<th>Table header 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Table data 1.1</td>
<td>Table data 1.2</td>
<td>Table data 1.3</td>
</tr>
<tr>
<td>Table data 2.1</td>
<td>Table data 2.2</td>
<td>Table data 2.3</td>
</tr>
<tr>
<td>Table data 3.1</td>
<td>Table data 3.2</td>
<td>Table data 3.3</td>
</tr>
</tbody>
</table>
</article>
<article id="hr">
<h2>Thematic break (hr)</h2>
<p>Some content before divider</p>
<hr>
<p>Some content after divider</p>
</article>
</main>
<footer>
<p class="container">
Created with ♥ by <a href="https://github.com/iamfrank/">iamfrank</a>
</p>
</footer>
</body>
</html>