On a previous entrance I wrote about the framework PureCSS, from Yahoo!, and I consider it really interesting for those deves that don’t like the front-end work, so, with this framework it’s very easy to beautify Web apps.
Buttons
The classes to improve the aspect of buttons can by applied to tags <a> and <button>. Anyway, in the documentation you can find excla classes that I have included on manejandodatos_purecss.css , and are not included on the official PureCSS archive.
If you want to create a button, use the pure-button class, and next, you can combine it with ither classes such as pure-button-primary, pure-warning, pure-error, pure-success or pure-secondary. You can modify the size of the buttons by adding the classes button-xsmall, button-small, .button-large, .button-xlarge. You have an example here:
botones con PureCSS
Forms
I must wanr that the forms here presented have no functionality, that should be included by using Javascript.
Let’s create a form with a few input boxes and two buttons, as we did when testing the TB. The outcome is here:
Formulario inicial con pureCSS
The basic class for creating a form is pure-form, and you get a better aspect (step 1). By default, the form is in line, I mean, all elements on one line.:
Formulario con PureCSS
To get a new aspect, let’s beautify the buttons with the pure-button class, and I will use the pure-button-primary class for one of them.
For complex forms where you need to group on one line several inputs, you need to modify the structure of your HTML code, and make use of new clases: use pure-form-aligned class and for creating gruops, you need to create divs with the pure-control-group class. The HTML code is:
</pre><br /><form><br />Formulario agrupado y centrado - Paso 2<br /><div><label for="nombre">Nombre</label><br /><input id="nombre" type="text" placeholder="Escriba su nombre ..." /></div><br /><div><label for="apellido">Apellido</label><br /><input id="apellido" type="text" placeholder="Escriba su apellido ..." /></div><br /><button>Boton 1</button><br /><button>Boton 2</button></form><br /><pre><br />
The aspect of step 2 is:
Formularios con PureCSS
A new style for the form (step 3) is this:
Formulario con PureCSS
I have used the pure-form-stacked class to get all elements one next to the other but everyone on a different line.
I hope you find very interesting PureCSS. as you can imagine, I’m using it for a few months right now!
There is a new entrance of PureCSS coming, where I show you more useful classes.
Have a nive day!!