Something went wrong. Try again.
lightweight, simple, classless CSS framework inspired by new.css devcss.devins.page
framework lightweight css classless stylesheet
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Home - dev.css</title> <meta name="title" content="dev.css" /> <meta name="description" content="dev.css is a lightweight, classless CSS framework" /> <meta name="keywords" content="css, web development, framework, lightweight, vercel, geist" /> <meta name="robots" content="index, follow" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="language" content="English" /> <meta name="author" content="intergrav" /> <link rel="stylesheet" href="dev.css" /> </head>
<body> <header> <h1>dev.css</h1> <p>A lightweight, simple, classless CSS framework.</p> <nav> <ul> <li><a href="https://tangled.org/devins.page/dev.css">git</a></li> <li> <a href="https://www.npmjs.com/package/@intergrav/dev.css">npm</a> </li> <li> <a href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css/" >jsDelivr</a > </li> </ul> </nav> </header>
<aside> <details> <summary>Sidebar</summary> <p> Optional sidebar that you can use for pretty much anything. See the README for more information. </p> <ul> <li><a href="https://example.org">Page 1</a></li> <li><a href="https://example.org">Page 2</a></li> <li><a href="https://example.org">Page 3</a></li> <li> <a href="https://example.org">Page 4</a> <ul> <li><a href="https://example.org">Page 4.1</a></li> </ul> </li> <li> <a href="https://example.org">Page 5</a> <ul> <li><a href="https://example.org">Page 5.1</a></li> <li><a href="https://example.org">Page 5.2</a></li> </ul> </li> <li><a href="https://example.org">Page 6</a></li> </ul> </details> </aside>
<main> <section> <h1>Home</h1> <p> A tiny, classless CSS framework inspired by <a href="https://newcss.net">new.css</a>. Drop it in and any plain HTML file becomes modern and responsive. The minified stylesheet weighs ~5kb. Good for simple blogs, personal sites, link pages, and HTML prototyping. Not meant for very complex web apps or sites, though you can build from it. Scroll down for a demo. </p> <p> For installation instructions and much more information, see the <a href="https://tangled.org/devins.page/dev.css">README.</a> </p> <h2>Who is this for?</h2> <p>dev.css is a great choice for:</p> <ul> <li>A simple blog</li> <li>A simple "about me" website</li> <li>Collecting your most used links</li> <li>Prototyping your raw HTML</li> </ul> <p>dev.css was not meant for very complex websites.</p> <p> If you're using dev.css on your site, feel free to use this "powered by dev.css" badge if you want to promote the project: </p> <pre><code><a href="https://devcss.devins.page"><img src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/badge.svg" alt="powered by dev.css"></a></code></pre> <a href="https://devcss.devins.page" ><img src="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@4/badge.svg" alt="powered by dev.css" /></a> </section>
<section> <h1>Demo</h1> <p> Below is the demo for dev.css, a classless, lightweight, and accessible CSS framework! Lorem ipsum odor amet, consectetuer adipiscing elit. Hac suscipit magnis a, duis sollicitudin imperdiet. </p> <h2>Heading 2</h2> <p> Lorem ipsum odor amet, consectetuer adipiscing elit. Hac suscipit magnis a, duis sollicitudin imperdiet. Aliquam inceptos quis semper libero gravida purus dui posuere lacinia. Aliquet erat torquent auctor leo habitasse feugiat iaculis pharetra. Dignissim ridiculus gravida dictumst donec iaculis. </p> <h3>Heading 3</h3> <p> Sed tortor congue mauris molestie per facilisi vulputate. Quam aenean mollis dui sollicitudin; per pretium mattis. Dis luctus vestibulum proin id neque porta. Vehicula sapien aenean tellus inceptos lectus facilisis viverra. Lacinia habitasse convallis diam elit lobortis luctus. </p> <h4>Heading 4</h4> <p> Mattis per parturient convallis tempor nec posuere imperdiet. Natoque dolor enim tempus bibendum ligula facilisis ipsum interdum. Netus maximus laoreet adipiscing enim phasellus. Luctus nunc at egestas torquent porttitor nostra aliquam tempus. </p> <h5>Heading 5</h5> <p> Erat interdum etiam condimentum, nullam odio ex maximus vel. Rhoncus suspendisse vestibulum aptent amet torquent class suscipit ultrices viverra. </p> <h6>Heading 6</h6> <p> Mattis primis lacus ac metus sollicitudin consequat bibendum luctus. Ridiculus dignissim tortor viverra posuere cras curabitur. </p>
<br /> <hr /> <br />
<blockquote> This entire page was made with just dev.css and basic HTML. You can view the source <a href="https://tangled.org/devins.page/dev.css/blob/main/index.html" >here</a >. </blockquote>
<br /> <hr /> <br />
<p> Lorem <mark>ipsum</mark> dolor sit amet <strong>consectetur</strong> adipisicing elit. Aut <i>harum molestias</i> labore amet possimus <s>exercitationem aperiam</s> earum, doloribus <u>nobis ducimus</u> maiores quia voluptates quis omnis molestiae quisquam. <a href="#">Voluptatibus, officiis laudantium?</a> </p>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. <code>Hic culpa, nobis doloremque</code> veniam non, nihil cupiditate odit repellat est <kbd>ALT + F4</kbd> expedita facilis. Fuga aspernatur, alias debitis eveniet totam minima vel. </p>
<ul> <li>List item</li> <li>List item</li> <li>List item</li> <li>List item</li> </ul>
<ol> <li>Step 1</li> <li>Step 2</li> <li>????</li> <li>Profit!</li> </ol>
<dl> <dt>Web</dt> <dd>The part of the Internet that contains websites and web pages</dd> <dt>HTML</dt> <dd>A markup language for creating web pages</dd> <dt>CSS</dt> <dd>A technology to make HTML look better</dd> </dl>
<blockquote cite="https://en.wikiquote.org/wiki/Edward_Snowden"> If you think privacy is unimportant for you because you have nothing to hide, you might as well say free speech is unimportant for you because you have nothing useful to say. <br /> <br /> – Edward Snowden </blockquote>
<pre><code><!DOCTYPE html> <html> <head> <title>Hello World</title> </head> <body> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </body></html></code></pre>
<br /> <hr /> <br />
<details> <summary>Click me!</summary> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </details>
<br /> <hr /> <br />
<article> <h1>Article element</h1> <p>This is an article element by itself.</p> </article>
<article> <h1>Article element</h1> <p>This is an article element with other nested elements.</p> <article> <h2>Article 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </article> <article> <h2>Article 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </article> <details> <summary>Click me!</summary> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </details> </article>
<br /> <hr /> <br />
<table> <caption> Table caption </caption> <thead> <tr> <th>Meal</th> <th>Time</th> </tr> </thead> <tbody> <tr> <td>Breakfast</td> <td>5-10 AM</td> </tr> <tr> <td>Lunch</td> <td>12-2 PM</td> </tr> <tr> <td>Dinner</td> <td>6-9 PM</td> </tr> </tbody> </table>
<br /> <hr /> <br />
<form> <p> <label>First name</label><br /> <input type="text" name="first_name" /> </p> <p> <label>Last name</label><br /> <input type="text" name="last_name" /> </p> <p> <label>Number</label><br /> <label> <input type="radio" name="radiooptions" value="1" /> 1 </label> <br /> <label> <input type="radio" name="radiooptions" value="2" /> 2 </label> <br /> <label> <input type="radio" name="radiooptions" value="3" /> 3 </label> </p> <p> <label>Email</label><br /> <input type="email" name="email" required="" /> </p> <p> <label>Phone number</label><br /> <input type="tel" name="phone" /> </p> <p> <label>Password</label><br /> <input type="password" name="password" /> </p> <p> <label>Country</label><br /> <select> <option>United States</option> <option>China</option> <option>India</option> <option>Indonesia</option> <option>Brazil</option> </select> </p> <p> <label>Comments</label><br /> <textarea></textarea> </p> <p> <label> <input type="checkbox" value="terms" /> I agree to the <a>terms and conditions</a> </label> </p> <p> <button>Sign up</button> <button type="reset">Reset form</button> <button disabled="disabled">Disabled</button> </p> </form>
<br /> <hr /> <br />
<form> <fieldset> <legend>Fieldset:</legend> <label for="fname">First name:</label> <input type="text" id="fname" name="fname" /><br /><br /> <label for="lname">Last name:</label> <input type="text" id="lname" name="lname" /><br /><br /> <label for="email">Email:</label> <input type="email" id="email" name="email" /><br /><br /> <label for="birthday">Birthday:</label> <input type="date" id="birthday" name="birthday" /><br /><br /> <input type="submit" value="Submit" /> </fieldset> </form>
<br /> <hr /> <br />
<figure> <img alt="Mount Fuji" src="https://upload.wikimedia.org/wikipedia/commons/3/36/Lake_Kawaguchiko_Sakura_Mount_Fuji_4.JPG" /> <figcaption> <a href="https://commons.wikimedia.org/wiki/File:Lake_Kawaguchiko_Sakura_Mount_Fuji_4.JPG" >Midori</a >, <a href="https://creativecommons.org/licenses/by/3.0">CC BY 3.0</a>, via Wikimedia Commons </figcaption> </figure> </section> </main>
<footer> <p> dev.css and this website was written by <a href="https://devins.page">intergrav</a>. Inspired by <a href="https://github.com/xz/new.css">new.css</a>. </p> </footer> </body> <script src="addon/responsive-sidebar.js"></script></html>