I recently opened a new github repo to make a website for txml the fastest xml parser. I want to make the page using 11ty. Today I have been looking for a css framework, that is small and does not need any compilation. With mini.css there is a css framework, without any js that has some cool features.
It can easily change the direction of a table, simply by adding the class
horizontal to the table. But a feature that has really surprized me was the so called
The area, that should slide in and out, need to be next to an input checkbox. Then there are css rules, to target the input and its attribute checked and its next element. The next element is supposed to be the area you want to slide in and out. Using
label tags and the
for attribute, you can click on elements other than the checkbox and sill toggle the checkbox and with that hide and show a navigation or other container.
here is how to use it:
First you need to add mini.css to you websites header:
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v3.0.1/dist/mini-default.min.css">
This is hosted on a cdn, I personally would download it and serve it from the apps webserver.
Then in your page, the drawer is used like this:
<label for="open_menue" class="drawer-toggle persistent"></label>
And this makes a menu button like the following, feel free to click it.