tiny, simple, classless CSS framework inspired by new.css
devcss.devins.page
devins.page
framework
lightweight
css
classless
stylesheet
feat: rm custom styling for aside details
you can wrap everything in your `aside` with a `details` tag to make it collapsible if its too large. you can make it open by default by adding the `open` attribute.
+18
-16
README.md
+18
-16
README.md
···
106
106
107
107
### Sidebar
108
108
109
-
Optionally, you can add a sidebar to your page for pretty much anything you'd like. A good usage for this could be, for example, complex navigation on a docs website, where you wouldn't be able to fit it all into the header. The sidebar will sort normally with the rest of the content on smaller screens. To make a sidebar, place an `<aside>` tag, and then put an `<article>` inside. You must put it above the `<main>` content. You can have up to two sidebars per page - the second one will appear on the right side. Here's an example:
109
+
Optionally, you can add a sidebar to your page for pretty much anything you'd like. A good usage for this could be, for example, complex navigation on a docs website, where you wouldn't be able to fit it all into the header. The sidebar will sort normally with the rest of the content on smaller screens. To make a sidebar, place an `<aside>` tag, and then put an `<article>` inside. You must put it above the `<main>` content. You can have up to two sidebars per page - the second one will appear on the right side. You can also make a sidebar collapsible by wrapping it's contents in a `<details>` tag - adding the `open` attribute will make it open by default. Here's an example:
110
110
111
111
```html
112
112
<aside>
113
113
<article>
114
-
<h1>Sidebar</h1>
115
-
<nav>
116
-
<ul>
117
-
<li><a href="https://example.com">Page 1</a></li>
118
-
<li>
119
-
<a href="https://example.com">Page 2</a>
120
-
<ul>
121
-
<li><a href="https://example.com">Page 2.1</a></li>
122
-
<li><a href="https://example.com">Page 2.2</a></li>
123
-
</ul>
124
-
</li>
125
-
<li><a href="https://example.com">Page 3</a></li>
126
-
<li><a href="https://example.com">Page 4</a></li>
127
-
</ul>
128
-
</nav>
114
+
<details open>
115
+
<summary>Sidebar</summary>
116
+
<nav>
117
+
<ul>
118
+
<li><a href="https://example.com">Page 1</a></li>
119
+
<li>
120
+
<a href="https://example.com">Page 2</a>
121
+
<ul>
122
+
<li><a href="https://example.com">Page 2.1</a></li>
123
+
<li><a href="https://example.com">Page 2.2</a></li>
124
+
</ul>
125
+
</li>
126
+
<li><a href="https://example.com">Page 3</a></li>
127
+
<li><a href="https://example.com">Page 4</a></li>
128
+
</ul>
129
+
</nav>
130
+
</details>
129
131
</article>
130
132
</aside>
131
133
```