En la entrada anterior hablamos de PureCSS, el framework CSS de Yahoo!, que lo considero muy interesante para los que no son fanáticos del front-end, y desean mejorar el aspecto de las aplicaciones Web.
Botones
Las clases aplicadas a los botones pueden ser utilizadas tanto en las etiquetas <a> como en las etiquetas <button>. En cualquier caso, se han incluido estilos adicionales en manejandodatos_purecss.css según se detallan en la documentación, y que parece que no están incluidos por defecto en PureCSS.
La clase a aplicar es pure-button, a la que se pueden agregar otras clases como pure-button-primary, como pure-warning, pure-error, pure-success y pure-secondary. También se puede incidir en el tamaño de los botones con las clases button-xsmall, button-small, .button-large, .button-xlarge. Aquí puedes ver el resultado aquí:
botones con PureCSS
Formularios
Hay que advertir de que el formulario usado de ejemplo no incluye ninguna funcionalidad, que habría que agregarla mediante Javascript, por ejemplo.
Vamos a crear un formulario con varios controles de entrada y dos botones, al igual que hicimos con TB, con el siguiente aspecto, y que podeis ver aquí:
Formulario inicial con pureCSS
Le asignamos la clase pure-form al formulario, y la cosa cambia (paso 1). Por defecto muestra un formulario con todos los elementos uno seguido del otro en la misma línea, y también cambia el aspecto de la leyenda del formulario:
Formulario con PureCSS
Además, y para mejorar la apariencia, vamos a cambiar la estética de los botones usando la clase pure-button, y para el botón principal usamos la clase pure-button-primary.
Para formularios con mayor complejidad donde sea necesario la la agrupación de varios campos en una misma línea, es necesario modificar la estructura del mismo, al que hay que agregarle la clase pure-form-aligned, y para la separación de las distintas líneas, es necesario la creación de divs con la clase pure-control-group. El resultado del código HTML es este:
<form> <legend>Formulario agrupado y centrado - Paso 2</legend> <div> <label for="nombre">Nombre</label> <input id="nombre" type="text" placeholder="Escriba su nombre ..." > </div> <div> <label for="apellido">Apellido</label> <input id="apellido" type="text" placeholder="Escriba su apellido ..." > </div> <button>Boton 1</button> <button>Boton 2</button> </form>
El aspecto es el siguiente (paso 2):
Formularios con PureCSS
Cambiando totalmente, el formulario puede verse con este otro aspecto (paso 3):
Formulario con PureCSS
Para ello, hay que agregar la clase pure-form-stacked, para ver todos los elementos uno a continuación de otro en distintas líneas.
Espero que les sea de utilidad PureCSS, pues yo hace meses que la estoy incorporando a mis proyectos, principalmente por su facilidad de uso, y al quedar todo exclusivamente en el aspecto visual, y que tan poco me gusta!
Todavía quedan pendiente más entradas sobre PureCSS, donde con unas cuantas clases mejora el aspecto de una web.
Que tengan muy buen día!!