After a introduction to PureCSS on a previous entrance where I explained why I like this project, today let’s see how easy we can include PureCSS in our development projects.
The way of creating menus is to list items <li> inside an unorder list <ul>, and the CSS prettify everything. Let’s write an example list:
</pre> <ul> <li><a href="plantilla_purecss.html">Plantilla</a></li> <li><a href="purecss_botones.html">Botones</a></li> <li><a href="purecss_form0.html">Formulario Paso 0</a></li> </ul> <pre>
Menus are by default vertical, and they adjust to the width of the DIV element that have it. You need the classes pure-menu and pure-menu-open:
If you want to stand out an option, you can use the pure-menu-selected class, and you’ll have darker text .
If you want to createl horizontal menu, it is neccesary to add three classes: pure-menu, pure-menu-open and pure-menu-horizontal. Also, you can create headers on the menu by adding the pure-menu-heading class, with this outcome:
An alternative to menus are paginators, that you can achieve it with the pure-paginator class, applied to the <ul> element. The <li> items of the list can receive the pure-button class (we’ll see in more depth on a next entrance).
A little bit disappointed …
As you can imagine, paginators is not a feature very attractive to me!.
Maybe, you can feel as I do, but … although this part of the PureCSS is not what I expect it doesn’t mean that other options work this way! In fact, there are several cool features of PureCSS that I really like!
… eh, wait a minute …
After this disappointed, I visit the Pure CSS GitHub page, and I ascertain a complementary project called pure-dropdown-menu (NOTE: this is not an official project) that allow you to create horizontal cascade menus (several levels) only by adding extra CSS code (I included it on manejandodatos_css.css). Of course, in order to use it, you need to know the use of a few extra classes!
First of all, the base is an horizontal menú, (see the first part of this entrance). Next, eit is compulsory to follow this rules:
- The unorder lists <ul> need the pure-menu-children class
- Every <li> item that links to a new menu level need to have the pure-menu-can-have-children class
- In order to have the arrow indicating a new menu level, just add the pure-menu-label class
And the outcome is:
After that, I hope you get a better concept of PureCSS, as I got now! And the best is, …
Have a nice day!!