lightweight, simple, classless CSS framework inspired by new.css
devcss.devins.page
framework
lightweight
css
classless
stylesheet
1<!DOCTYPE html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>dev.css Demo</title>
7 <link rel="stylesheet" href="dev.css" />
8 </head>
9 <body>
10 <header>
11 <h1>dev.css Demo</h1>
12 <nav>
13 <a>Home</a> / <a>About</a> / <a>Portfolio</a> / <a>Awesome</a> /
14 <a>Sauce</a>
15 </nav>
16 </header>
17
18 <h1>Heading 1</h1>
19 <p>
20 This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
21 elit.
22 </p>
23 <h2>Heading 2</h2>
24 <p>
25 This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
26 elit.
27 </p>
28 <h3>Heading 3</h3>
29 <p>
30 This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
31 elit.
32 </p>
33 <h4>Heading 4</h4>
34 <p>
35 This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
36 elit.
37 </p>
38 <h5>Heading 5</h5>
39 <p>
40 This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
41 elit.
42 </p>
43 <h6>Heading 6</h6>
44 <p>
45 This is paragraph text. Lorem ipsum dolor sit amet consectetur adipisicing
46 elit.
47 </p>
48
49 <br />
50 <hr />
51 <br />
52
53 <p>
54 Lorem <mark>ipsum</mark> dolor sit amet
55 <strong>consectetur</strong> adipisicing elit. Aut
56 <i>harum molestias</i> labore amet possimus
57 <s>exercitationem aperiam</s> earum, doloribus
58 <u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae
59 quisquam. <a href="#">Voluptatibus, officiis laudantium?</a>
60 </p>
61
62 <p>
63 Lorem ipsum dolor sit amet consectetur adipisicing elit.
64 <code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate odit
65 repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, alias
66 debitis eveniet totam minima vel.
67 </p>
68
69 <ul>
70 <li>List item</li>
71 <li>List item</li>
72 <li>List item</li>
73 <li>List item</li>
74 </ul>
75
76 <ol>
77 <li>Step 1</li>
78 <li>Step 2</li>
79 <li>????</li>
80 <li>Profit!</li>
81 </ol>
82
83 <dl>
84 <dt>Web</dt>
85 <dd>The part of the Internet that contains websites and web pages</dd>
86 <dt>HTML</dt>
87 <dd>A markup language for creating web pages</dd>
88 <dt>CSS</dt>
89 <dd>A technology to make HTML look better</dd>
90 </dl>
91
92 <blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden">
93 If you think privacy is unimportant for you because you have nothing to
94 hide, you might as well say free speech is unimportant for you because you
95 have nothing useful to say.
96 <br />
97 <br />
98 – Edward Snowden
99 </blockquote>
100
101 <pre>
102<!DOCTYPE html>
103<html>
104<head>
105<title>Hello World</title>
106</head>
107<body>
108<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
109</body>
110</html></pre
111 >
112
113 <br />
114 <hr />
115 <br />
116
117 <table>
118 <caption>
119 Ho-kago Tea Time
120 </caption>
121 <thead>
122 <tr>
123 <th>Name</th>
124 <th>Instrument</th>
125 </tr>
126 </thead>
127 <tbody>
128 <tr>
129 <td>Yui Hirasawa</td>
130 <td>Lead Guitar</td>
131 </tr>
132 <tr>
133 <td>Mio Akiyama</td>
134 <td>Bass</td>
135 </tr>
136 <tr>
137 <td>Ritsu Tainaka</td>
138 <td>Drums</td>
139 </tr>
140 <tr>
141 <td>Tsumugi Kotobuki</td>
142 <td>Keyboard</td>
143 </tr>
144 <tr>
145 <td>Azusa Nakano</td>
146 <td>Rhythm Guitar</td>
147 </tr>
148 </tbody>
149 <tfoot>
150 <tr>
151 <th>Name</th>
152 <th>Instrument</th>
153 </tr>
154 </tfoot>
155 </table>
156
157 <br />
158 <hr />
159 <br />
160
161 <form>
162 <p>
163 <em>
164 This is not a real form and does not submit or save any information.
165 </em>
166 </p>
167 <p>
168 <label>First name</label><br />
169 <input type="text" name="first_name" />
170 </p>
171 <p>
172 <label>Last name</label><br />
173 <input type="text" name="last_name" />
174 </p>
175 <p>
176 <label>Gender</label><br />
177 <label>
178 <input type="radio" name="gender" value="Male" />
179 Male
180 </label>
181 <br />
182 <label>
183 <input type="radio" name="gender" value="Female" />
184 Female
185 </label>
186 <br />
187 <label>
188 <input type="radio" name="gender" value="other-none-na" />
189 Non-binary
190 </label>
191 </p>
192 <p>
193 <label>Email</label><br />
194 <input type="email" name="email" required="" />
195 </p>
196 <p>
197 <label>Phone number</label><br />
198 <input type="tel" name="phone" />
199 </p>
200 <p>
201 <label>Password</label><br />
202 <input type="password" name="password" />
203 </p>
204 <p>
205 <label>Country</label><br />
206 <select>
207 <option>China</option>
208 <option>India</option>
209 <option>United States</option>
210 <option>Indonesia</option>
211 <option>Brazil</option>
212 </select>
213 </p>
214 <p>
215 <label>Comments</label><br />
216 <textarea></textarea>
217 </p>
218 <p>
219 <label>
220 <input type="checkbox" value="terms" />
221 I agree to the <a>terms and conditions</a>
222 </label>
223 </p>
224 <p>
225 <button>Sign up</button>
226 <button type="reset">Reset form</button>
227 <button disabled="disabled">Disabled</button>
228 </p>
229 </form>
230
231 <br />
232 <hr />
233 <br />
234
235 <img
236 src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
237 alt="Mt. Fuji"
238 />
239
240 <p>
241 Inline image:
242 <a href="#"
243 ><img
244 src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg"
245 width="50"
246 alt="Mt. Fuji"
247 /></a>
248 </p>
249 </body>
250</html>