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

feat: header-oneline.css addon

kinda hacky? sorry, maybe there's a better way to do it. should still work fine tho

+155 -5
+9 -1
README.md
··· 75 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sticky.min.css"> 76 ``` 77 78 ### `header-sidebar.css` 79 80 - This addon turns the header into a sidebar on wide displays. The navigation items are listed vertically in this mode. The sidebar will responsively switch back to the default state if the viewport is too narrow to contain everything. If you are using this addon with `header-sticky.css`, make sure to include it **after** the `header-sticky.css` import. To use this addon, add the following line after the `dev.css` import: 81 82 ```html 83 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css">
··· 75 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sticky.min.css"> 76 ``` 77 78 + ### `header-oneline.css` 79 + 80 + This addon lays everything out in the header horizontally. This is ideal if you don't have much in your header and you want it to be more compact. It works great with `header-sticky.css`. I do not recommend adding `<p>` or more than one `<nav>` element in the header if you're using this. To use this addon, add the following line after the `dev.css` import: 81 + 82 + ```html 83 + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-oneline.min.css"> 84 + ``` 85 + 86 ### `header-sidebar.css` 87 88 + This addon turns the header into a sidebar on wide displays. The navigation items are listed vertically in this mode. The sidebar will responsively switch back to the default state if the viewport is too narrow to contain everything. If you are using this addon with `header-sticky.css` or `header-oneline.css`, make sure to import it **after** those. To use this addon, add the following line after the `dev.css` import: 89 90 ```html 91 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@intergrav/dev.css@3/addon/header-sidebar.min.css">
+50
addon/header-oneline.css
···
··· 1 + /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 + /* about: everything in the header on one line, works well with addon/header-sticky.css */ 3 + /* warn: if using with the header-sidebar addon, be sure to include this before it */ 4 + /* warn: i do not recommend using this if you have p or multiple nav elements in header */ 5 + 6 + header { 7 + align-items: center; 8 + display: flex; 9 + } 10 + 11 + header h1, 12 + header h2, 13 + header h3, 14 + header h4, 15 + header h5, 16 + header h6 { 17 + white-space: nowrap; 18 + } 19 + 20 + header * { 21 + margin: 0; 22 + line-height: 1.5; 23 + } 24 + 25 + header h1, 26 + header p { 27 + margin-right: 1rem; 28 + } 29 + 30 + header h2, 31 + header h3, 32 + header h4, 33 + header h5, 34 + header h6 { 35 + color: var(--dc-tx-2); 36 + font-weight: normal; 37 + } 38 + 39 + header h2::after, 40 + header h3::after, 41 + header h4::after, 42 + header h5::after, 43 + header h6::after { 44 + content: "/"; 45 + } 46 + 47 + /* make sure that all header elements have same font size */ 48 + header * { 49 + font-size: 1rem !important; 50 + }
+66 -3
addon/header-sidebar.css
··· 1 /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 /* about: turns the header into a sidebar if the viewport is wide enough */ 3 - /* warn: if using with the header-sticky addon, be sure to include this after it */ 4 5 - @media (min-width: calc((48rem + 4rem) + ((16rem)*2))) { 6 header { 7 all: unset; 8 } 9 10 header { ··· 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 { ··· 30 } 31 32 header nav ul li:not(:first-child)::before { 33 content: unset; 34 } 35 }
··· 1 /* addon for dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */ 2 /* about: turns the header into a sidebar if the viewport is wide enough */ 3 + /* warn: if using with the header-sticky or header-oneline addon, be sure to include this after it */ 4 5 + @media (min-width: 84rem) { 6 header { 7 all: unset; 8 + } 9 + 10 + header * { 11 + margin-top: 0; 12 + margin-bottom: 0.25rem; 13 } 14 15 header { ··· 27 padding-left: 1rem; 28 border-top: 1px solid var(--dc-bg-3); 29 padding-top: 1rem; 30 + margin-top: 0.75rem; 31 } 32 33 header nav ul li { ··· 35 } 36 37 header nav ul li:not(:first-child)::before { 38 + content: unset; 39 + } 40 + 41 + /* hacky: reset font sizes to defaults */ 42 + h1 { 43 + font-size: 2rem !important; 44 + } 45 + 46 + h2 { 47 + font-size: 1.5rem !important; 48 + } 49 + 50 + h3 { 51 + font-size: 1.17rem !important; 52 + } 53 + 54 + h4, 55 + p, 56 + a { 57 + font-size: 1rem !important; 58 + } 59 + 60 + h5 { 61 + font-size: 0.83rem !important; 62 + } 63 + 64 + h6 { 65 + font-size: 0.67rem !important; 66 + } 67 + 68 + header nav { 69 + font-size: 1rem !important; 70 + } 71 + 72 + /* hacky: reset some other stuff to default incase you are using header-oneline.css */ 73 + header h2 header h3, 74 + header h4, 75 + header h5, 76 + header h6 { 77 + color: var(--dc-tx-1); 78 + font-weight: bold; 79 + } 80 + 81 + header h1, 82 + header h2, 83 + header h3, 84 + header h4, 85 + header h5, 86 + header h6 { 87 + white-space: normal; 88 + line-height: 1; 89 + } 90 + 91 + header h2::after, 92 + header h3::after, 93 + header h4::after, 94 + header h5::after, 95 + header h6::after { 96 content: unset; 97 } 98 }
+30 -1
dev.css
··· 179 } 180 181 /* 8. typography */ 182 h1, 183 h2, 184 h3, ··· 234 margin-bottom: 0; 235 } 236 237 - /* 10. header */ 238 header { 239 background: var(--dc-bg-2); 240 border-bottom: 1px solid var(--dc-bg-3);
··· 179 } 180 181 /* 8. typography */ 182 + h1 { 183 + font-size: 2rem; 184 + } 185 + 186 + h2 { 187 + font-size: 1.5rem; 188 + } 189 + 190 + h3 { 191 + font-size: 1.17rem; 192 + } 193 + 194 + h4 { 195 + font-size: 1rem; 196 + } 197 + 198 + h5 { 199 + font-size: 0.83rem; 200 + } 201 + 202 + h6 { 203 + font-size: 0.67rem; 204 + } 205 + 206 + p, 207 + a { 208 + font-size: 1rem; 209 + } 210 + 211 h1, 212 h2, 213 h3, ··· 263 margin-bottom: 0; 264 } 265 266 + /* 10. header - make sure header addons dont break when modifying */ 267 header { 268 background: var(--dc-bg-2); 269 border-bottom: 1px solid var(--dc-bg-3);