devins.page / dev.css
tiny, simple, classless CSS framework inspired by new.css devcss.devins.page
framework lightweight css classless stylesheet
fork atom

feat: addons

devins.page d87d734c 527c27fe

+90 -6
unified split
+22 -2
README.md
··· 32 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css"> 33 ``` 34 35 - Recommended, monospace variant: 36 37 ```html 38 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css"> ··· 60 61 ### Footer 62 63 - Optionally, use the `<footer>` tag to create a large footer for your page. Only use this at the bottom of your `<body>`, or else it may look wonky. You can add whatever content in here that you'd like. 64 65 ### Text 66 ··· 90 ### More 91 92 To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/). 93 94 ## Themes 95
··· 32 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist.min.css"> 33 ``` 34 35 + Recommended monospace variant: 36 37 ```html 38 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/fonts@1/serve/geist-mono.min.css"> ··· 60 61 ### Footer 62 63 + Optionally, use the `<footer>` tag to create a footer for your page. Only use this at the bottom of your `<body>`, or else it may look wonky. You can add whatever content in here that you'd like. 64 65 ### Text 66 ··· 90 ### More 91 92 To learn about other HTML elements and how to write HTML, visit [W3Schools/html](https://www.w3schools.com/html/). 93 + 94 + ## Addons 95 + 96 + dev.css at the minimum is very basic. Addons are small CSS snippets that adjust or add on to the functionality of dev.css, based on what you want for your users. Examples include turning the header into a sidebar, or making the header sticky. If you are adding an addon, it must be added **after** the main dev.css file. You might also need order them in a specific way to make it work. Here are a few built-in addons. 97 + 98 + ### `header-sticky.css` 99 + 100 + This makes the header sticky - always at the top of the screen. Keep in mind that I do not recommend using this if your header is large, as it could affect usability of your site since it'll always be onscreen and will take up a lot of space. Only use it if your header is small, e.g. only contains a one-line `<h1>` and `<nav>`. 101 + 102 + ```html 103 + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sticky.min.css"> 104 + ``` 105 + 106 + ### `header-sidebar.css` 107 + 108 + This turns the header into a sidebar on displays that are wide enough to support it. It will list the navigation out vertically in this mode. It will responsively turn back into the default state if the viewport is too thin to contain everything. If you are using this with `header-sticky.css`, be sure to add it **after** that rather than before. To import it, add this line after `dev.css`: 109 + 110 + ```html 111 + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css"> 112 + ``` 113 114 ## Themes 115
addon/.gitkeep

This is a binary file and will not be displayed.

+35
addon/header-sidebar.css
···
··· 1 + /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 + /* warn: if using with the header-sticky addon, be sure to include this after it */ 3 + 4 + @media (min-width: calc((48rem + 4rem) + ((16rem)*2))) { 5 + /* unset header */ 6 + header { 7 + all: unset; 8 + } 9 + 10 + header { 11 + padding: 3rem 2rem; 12 + padding-right: 0; 13 + position: fixed; 14 + top: 0; 15 + left: calc(50% - ((48rem + 4rem) / 2) - (16rem)); 16 + width: 16rem; 17 + height: calc(100% - 6rem); 18 + overflow-y: auto; 19 + } 20 + 21 + header nav ul { 22 + padding-left: 1rem; 23 + border-top: 1px solid var(--dc-bg-3); 24 + padding-top: 1rem; 25 + margin-top: 1rem; 26 + } 27 + 28 + header nav ul li { 29 + display: list-item; 30 + } 31 + 32 + header nav ul li:not(:first-child)::before { 33 + content: unset; 34 + } 35 + }
+8
addon/header-sticky.css
···
··· 1 + /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 + /* warn: if using with the header-sidebar addon, be sure to include this before it */ 3 + /* warn: i do not recommend using this if your header is large, may affect usability */ 4 + 5 + header { 6 + position: sticky; 7 + top: 0; 8 + }
+12 -4
demo.html
··· 21 <h1>demo</h1> 22 <p>This is the demo page for dev.css.</p> 23 <nav> 24 - <a href="demo">demo</a> / 25 - <a href="https://github.com/intergrav/dev.css">git</a> / 26 - <a href="https://www.npmjs.com/package/@intergrav/dev.css">npm</a> / 27 - <a href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css/">jsdelivr</a> 28 </nav> 29 </header> 30
··· 21 <h1>demo</h1> 22 <p>This is the demo page for dev.css.</p> 23 <nav> 24 + <ul> 25 + <li><a href="demo">demo</a></li> 26 + <li><a href="https://github.com/intergrav/dev.css">git</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
+13
dev.css
··· 275 font-size: 0.8rem; 276 } 277 278 /* 10. Footer */ 279 footer { 280 border-top: 1px solid var(--dc-bg-3);
··· 275 font-size: 0.8rem; 276 } 277 278 + header nav ul { 279 + padding: 0; 280 + } 281 + 282 + header nav ul li { 283 + display: inline-block; 284 + margin: 0; 285 + } 286 + 287 + header nav ul li:not(:first-child)::before { 288 + content: "• "; 289 + } 290 + 291 /* 10. Footer */ 292 footer { 293 border-top: 1px solid var(--dc-bg-3);