lightweight, simple, classless CSS framework inspired by new.css devcss.devins.page
framework lightweight css classless stylesheet
17
fork

Configure Feed

Select the types of activity you want to include in your feed.

at c492d1190027a578998fc49596e7056edf8ea840 348 lines 8.5 kB view raw
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>Demo - dev.css</title> 7 <link rel="stylesheet" href="dev.css" /> 8 <link rel="stylesheet" href="theme/terminal.user.css" /> 9 <link 10 rel="stylesheet" 11 href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css" 12 /> 13 <link 14 rel="stylesheet" 15 href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css" 16 /> 17 </head> 18 19 <body> 20 <header> 21 <h1>dev.css</h1> 22 <p>Optional short summary of the page.</p> 23 <nav> 24 <ul> 25 <li><a href="demo">Demo</a></li> 26 <li><a href="https://github.com/intergrav/dev.css">GitHub</a></li> 27 <li> 28 <a href="https://www.npmjs.com/package/@intergrav/dev.css">npm</a> 29 </li> 30 <li> 31 <a href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css/" 32 >jsDelivr</a 33 > 34 </li> 35 </ul> 36 </nav> 37 </header> 38 39 <aside> 40 <h1>Sidebar</h1> 41 <p> 42 Optional sidebar that you can use for pretty much anything. See the 43 README for more information. 44 </p> 45 <ul> 46 <li><a href="">Page 1</a></li> 47 <li><a href="">Page 2</a></li> 48 <li><a href="">Page 3</a></li> 49 <li> 50 <a href="">Page 4</a> 51 <ul> 52 <li><a href="">Page 4.1</a></li> 53 </ul> 54 </li> 55 <li> 56 <a href="">Page 5</a> 57 <ul> 58 <li><a href="">Page 5.1</a></li> 59 <li><a href="">Page 5.2</a></li> 60 </ul> 61 </li> 62 <li><a href="">Page 6</a></li> 63 </ul> 64 </aside> 65 66 <main> 67 <h1>Demo</h1> 68 <p> 69 This is the demo page for dev.css, a classless, lightweight, and 70 accessible CSS framework! Lorem ipsum odor amet, consectetuer adipiscing 71 elit. Hac suscipit magnis a, duis sollicitudin imperdiet. 72 </p> 73 <h2>Heading 2</h2> 74 <p> 75 Lorem ipsum odor amet, consectetuer adipiscing elit. Hac suscipit magnis 76 a, duis sollicitudin imperdiet. Aliquam inceptos quis semper libero 77 gravida purus dui posuere lacinia. Aliquet erat torquent auctor leo 78 habitasse feugiat iaculis pharetra. Dignissim ridiculus gravida dictumst 79 donec iaculis. 80 </p> 81 <h3>Heading 3</h3> 82 <p> 83 Sed tortor congue mauris molestie per facilisi vulputate. Quam aenean 84 mollis dui sollicitudin; per pretium mattis. Dis luctus vestibulum proin 85 id neque porta. Vehicula sapien aenean tellus inceptos lectus facilisis 86 viverra. Lacinia habitasse convallis diam elit lobortis luctus. 87 </p> 88 <h4>Heading 4</h4> 89 <p> 90 Mattis per parturient convallis tempor nec posuere imperdiet. Natoque 91 dolor enim tempus bibendum ligula facilisis ipsum interdum. Netus 92 maximus laoreet adipiscing enim phasellus. Luctus nunc at egestas 93 torquent porttitor nostra aliquam tempus. 94 </p> 95 <h5>Heading 5</h5> 96 <p> 97 Erat interdum etiam condimentum, nullam odio ex maximus vel. Rhoncus 98 suspendisse vestibulum aptent amet torquent class suscipit ultrices 99 viverra. 100 </p> 101 <h6>Heading 6</h6> 102 <p> 103 Mattis primis lacus ac metus sollicitudin consequat bibendum luctus. 104 Ridiculus dignissim tortor viverra posuere cras curabitur. 105 </p> 106 107 <br /> 108 <hr /> 109 <br /> 110 111 <blockquote> 112 This entire page was made with just dev.css and basic HTML. You can view 113 the source 114 <a href="https://github.com/intergrav/dev.css/blob/main/demo.html" 115 >here</a 116 >. 117 </blockquote> 118 119 <br /> 120 <hr /> 121 <br /> 122 123 <p> 124 Lorem <mark>ipsum</mark> dolor sit amet 125 <strong>consectetur</strong> adipisicing elit. Aut 126 <i>harum molestias</i> labore amet possimus 127 <s>exercitationem aperiam</s> earum, doloribus 128 <u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae 129 quisquam. <a href="#">Voluptatibus, officiis laudantium?</a> 130 </p> 131 132 <p> 133 Lorem ipsum dolor sit amet consectetur adipisicing elit. 134 <code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate 135 odit repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, 136 alias debitis eveniet totam minima vel. 137 </p> 138 139 <ul> 140 <li>List item</li> 141 <li>List item</li> 142 <li>List item</li> 143 <li>List item</li> 144 </ul> 145 146 <ol> 147 <li>Step 1</li> 148 <li>Step 2</li> 149 <li>????</li> 150 <li>Profit!</li> 151 </ol> 152 153 <dl> 154 <dt>Web</dt> 155 <dd>The part of the Internet that contains websites and web pages</dd> 156 <dt>HTML</dt> 157 <dd>A markup language for creating web pages</dd> 158 <dt>CSS</dt> 159 <dd>A technology to make HTML look better</dd> 160 </dl> 161 162 <blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden"> 163 If you think privacy is unimportant for you because you have nothing to 164 hide, you might as well say free speech is unimportant for you because 165 you have nothing useful to say. 166 <br /> 167 <br /> 168 – Edward Snowden 169 </blockquote> 170 171 <pre><code>&#x3C;!DOCTYPE html&#x3E; 172 &#x3C;html&#x3E; 173 &#x3C;head&#x3E; 174 &#x3C;title&#x3E;Hello World&#x3C;/title&#x3E; 175 &#x3C;/head&#x3E; 176 &#x3C;body&#x3E; 177 &#x3C;p&#x3E;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#x3C;/p&#x3E; 178 &#x3C;/body&#x3E; 179&#x3C;/html&#x3E;</code></pre> 180 181 <br /> 182 <hr /> 183 <br /> 184 185 <details> 186 <summary>Click me!</summary> 187 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 188 </details> 189 190 <br /> 191 <hr /> 192 <br /> 193 194 <article> 195 <h1>Article element</h1> 196 <p>This is an article element by itself.</p> 197 </article> 198 199 <article> 200 <h1>Article element</h1> 201 <p>This is an article element with other nested elements.</p> 202 <article> 203 <h2>Article 1</h2> 204 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 205 </article> 206 <article> 207 <h2>Article 2</h2> 208 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 209 </article> 210 <details> 211 <summary>Click me!</summary> 212 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 213 </details> 214 </article> 215 216 <br /> 217 <hr /> 218 <br /> 219 220 <table> 221 <caption> 222 Ho-kago Tea Time 223 </caption> 224 <thead> 225 <tr> 226 <th>Name</th> 227 <th>Instrument</th> 228 </tr> 229 </thead> 230 <tbody> 231 <tr> 232 <td>Yui Hirasawa</td> 233 <td>Lead Guitar</td> 234 </tr> 235 <tr> 236 <td>Mio Akiyama</td> 237 <td>Bass</td> 238 </tr> 239 <tr> 240 <td>Ritsu Tainaka</td> 241 <td>Drums</td> 242 </tr> 243 <tr> 244 <td>Tsumugi Kotobuki</td> 245 <td>Keyboard</td> 246 </tr> 247 <tr> 248 <td>Azusa Nakano</td> 249 <td>Rhythm Guitar</td> 250 </tr> 251 </tbody> 252 <tfoot> 253 <tr> 254 <th>Name</th> 255 <th>Instrument</th> 256 </tr> 257 </tfoot> 258 </table> 259 260 <br /> 261 <hr /> 262 <br /> 263 264 <form> 265 <p> 266 <em> 267 This is not a real form and does not submit or save any information. 268 </em> 269 </p> 270 <p> 271 <label>First name</label><br /> 272 <input type="text" name="first_name" /> 273 </p> 274 <p> 275 <label>Last name</label><br /> 276 <input type="text" name="last_name" /> 277 </p> 278 <p> 279 <label>Gender</label><br /> 280 <label> 281 <input type="radio" name="gender" value="Male" /> 282 Male 283 </label> 284 <br /> 285 <label> 286 <input type="radio" name="gender" value="Female" /> 287 Female 288 </label> 289 <br /> 290 <label> 291 <input type="radio" name="gender" value="other-none-na" /> 292 Non-binary 293 </label> 294 </p> 295 <p> 296 <label>Email</label><br /> 297 <input type="email" name="email" required="" /> 298 </p> 299 <p> 300 <label>Phone number</label><br /> 301 <input type="tel" name="phone" /> 302 </p> 303 <p> 304 <label>Password</label><br /> 305 <input type="password" name="password" /> 306 </p> 307 <p> 308 <label>Country</label><br /> 309 <select> 310 <option>China</option> 311 <option>India</option> 312 <option>United States</option> 313 <option>Indonesia</option> 314 <option>Brazil</option> 315 </select> 316 </p> 317 <p> 318 <label>Comments</label><br /> 319 <textarea></textarea> 320 </p> 321 <p> 322 <label> 323 <input type="checkbox" value="terms" /> 324 I agree to the <a>terms and conditions</a> 325 </label> 326 </p> 327 <p> 328 <button>Sign up</button> 329 <button type="reset">Reset form</button> 330 <button disabled="disabled">Disabled</button> 331 </p> 332 </form> 333 334 <br /> 335 <hr /> 336 <br /> 337 338 <img 339 src="https://elements.xz.style/assets/fuji-daniel-hehn.jpg" 340 alt="Mt. Fuji" 341 /> 342 </main> 343 344 <footer> 345 <p>This is an optional footer.</p> 346 </footer> 347 </body> 348</html>