Skeleton, framework CSS

Hola,

Nunca pensé que haría esto pero voy a hablaros de diseño Web. 🙂

Estoy preparando una web corporativa de la que hablaré en algún momento y para ello estoy utilizando Skeleton.

Skeleton es un framework de CSS relativamente simple. Como podéis ver en la web del proyecto es ligero porque tiene muy pocas líneas de código (alrededor de 400) y se descarga muy rápidamente.

Trabajar con él es relativamente sencillo, mucho más simple que otros frameworks que tienen más cosas, como Bootstrap u otros, aunque el concepto de columnas es el mismo.

Como ya expliqué en una entrada anterior el CSS sirve para dar formato al HTML. Este formato tiene muchísimas posibilidades. Skeleton trabaja, entre otras cosas, con un sistema de columnas para ordenar el contenido, botones y formularios con estilos predefinidos y listas y tablas bonitas, todo esto dentro de un único archivo CSS de alrededor de 400 líneas incluyendo, además, soporte para dispositivos de diferente tamaño.

Lo de las columnas es realmente interesante y últimamente casi todos los frameworks de CSS lo tienen porque facilita la disposición de los componentes en la pantalla sin que tengamos que desarrollar nosotros mismos un sistema de plantillas. Además, estas columnas cambian de tamaño dependiendo de la pantalla del dispositivo que se esté utilizando (para esto se utilizan media-queries). Es decir, que si la pantalla fuese demasiado pequeña para mostrarlas con un tamaño aceptable, se reordenarían de forma lógica. Podéis ver esto si cambiáis el tamaño de la web de Skeleton en el apartado de las columnas.

Para definir cuanto espacio ocupa cada parte de la pantalla, es necesario crear un elemento fila (row) y añadirle columnas (columns) dentro, dependiendo de la anchura que queramos. Skeleton (y otros frameworks también) divide la pantalla en 12 columnas, el espacio que queramos ocupar estará relacionado con eso. Si queremos un componente que ocupe media pantalla, querremos que ocupe 6 columnas, si queremos dos tercios, que ocupe 8, etc.

Esto se hace dentro de elementos div, añadiéndoles una clase, tal que así:

<div class="row">
 
  <div class="six columns">
    Esto ocupa 6 de 12 columnas
  </div>
 
 
  <div class="six columns">
    Esto ocupa 6 de 12 columnas
  </div>
 
</div>

Skeleton también dispone de algunas otras clases chulas como contenedores (containers) y otras cosas. Todas se usan de la misma forma en realidad.

Es un poco todo el tema.

No sé mucho más que contaros, todo podéis encontrarlo en la web de Skeleton. Quizás otro día haga una introducción al diseño web, desde mi más completa ignorancia, dando algunas pistas de cómo se seleccionan los elementos y cómo se formatean, pero para eso quizás debería tener algo de código fuente que mostrar (por eso no lo he hecho ahora).

Quería contaros un poco de Skeleton y animaros a usarlo, es muy sencillo de usar si sabéis un poco de CSS y queréis hacer un sitio simple. Además, en internet tenéis montón de información sobre CSS incluso páginas que se dedican exclusivamente a mostrar trucos de CSS. Al final es todo como magia negra y suele haber varias maneras de conseguir lo mismo1.

Cómo último detalle, os animo también a inspeccionar el código fuente de la propia web de Skeleton, porque utiliza también algo de CSS hecho de forma explícita para esa web y JavaScript propio. Se ve muy bien todo y está bien explicado.

Nada, animaos.

Saludos.


  1. Magia negra = diseño. (Me encanta la magia negra) 
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