Pure de Yahoo: Módulos CSS adaptativos para usar en nuestros proyectos

pure-css-framework-from-yahoo

La web de Yahoo http://purecss.io/ ofrece módulos CSS que podemos usar independientemente en nuestras aplicaciones Web. Pure CSS está preparado para diferentes navegadores y es RWD (Responsive Web Design)

Demo del artículo

La demo está alojada en Google Drive y compartida como pública, también se incluyen los CSS de la versión de Pure 0.3.0. En la fase de pruebas me he dado cuenta que Google Drive no permite referenciar los CSS alojados remotamente.

purecss_demo

Pinchar sobre la imagen para ver la demo en acción.

Inicio rápido

La forma más sencilla de comenzar es añadir la referencia a la hoja de estilos que contiene todos los módulos, podemos encontrar el enlace a la última versión del “framework” en la cabecera de la web oficial Pure CSS  (en el momento de escribir este post la versión es 0.3.0):

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.3.0/pure-min.css">

También existe la posibilidad de referenciar a cada módulo que necesitemos de forma independiente (si sólo queremos usar los botones o los formularios, etc…). Cada módulo tiene la versión Responsive o Non-Responsive.

Si por ejemplo sólo queremos usar los formularios en nuestra web tenemos dos posibilidades:

Forms (Responsive):

http://yui.yahooapis.com/pure/0.3.0/forms-min.css

Forms (Non-Responsive):

http://yui.yahooapis.com/pure/0.3.0/forms-nr-min.css

Si queremos también podemos descargar todos los ficheros necesarios comprimidos del repositorio en GitHub en formato zip.

También he guardado el paquete completo comprimido en Google Drive como pure-0.3.0.zip.

Módulos y componentes

Pure CSS ofrece la posibilidad de usar los componentes de manera independiente, estan agrupados en función de los tipos de controles:

  • Base: Define el estilo de los títulos, listas, etc…
  • Grid o rejilla (en este blog se hablo del diseño en rejilla Web design: Grid based layout)
  • Formularios
  • Botones
  • Tablas
  • Menús
  • Plantillas pre-diseñadas
Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s