GetSkeleton – Un kit para desarrollar páginas web responsivas

Skeleton es una pequeña colección de archivos CSS que facilitan el desarrollo de páginas web responsivas, es decir, páginas web con un diseño que se adaptan perfectamente a cualquier tamaño de una pantalla, ya sean computadoras de escritorio, laptops, tablets o smartphones.

Dentro de las características más importantes de Skeleton, destaca el uso del 960 Grid System (960.gs) a 16 columnas, ya que hereda los nombres de las clases, la simplicidad de la sintaxis y las mejores prácticas de CSS para la visualización perfecta en los navegadores actuales. Esto facilita considerablemente el desarrollo del diseño y la maquetación del sitio en un ambiente totalmente responsivo.

<!-- Contenedor principal de 960px-->
<div class="container">
   <!-- Número de columnas a crear (one, two, .... sixteen) -->
   <div class="sixteen columns">
      <h1>Título de ejemplo</h1>
   </div>
   <!-- Número de columnas a crear (one, two, .... sixteen) -->
   <div class="sixteen columns">
      <!-- Clase alpha para indicar que es el primer div -->
      <div class="four columns alpha">...</div>
      <div class="four columns">...</div>
      <!-- Clase omega para indicar que es el último div -->
      <div class="eight columns omega">...</div>
   </div>
</div>

Además, por defecto añade una serie de estilos bastante atractivos y funcionales, que aplica a todos los formularios y los botones dentro de la página, así como una estructura jerárquica visual a todos los títulos. Siempre permitiendo la modificación o creación de nuestros propios estilos.

Otro punto importante, es el uso de los media queries. Este tipo de consultas, le permiten a los desarrolladores definir estilos específicos para cada resolución de pantalla, abriendo las posibilidades de agregar o quitar ciertos elementos de nuestra página web a partir del tamaño del navegador o del dispositivo del usuario.

/* #Media Queries
================================================== */
/* Menor al estándar de 960 */
@media only screen and (max-width: 959px) {}
/* Tablets */
@media only screen and (min-width: 768px) and (max-width: 959px) {}
/* Smartphones */
@media only screen and (max-width: 767px) {}
/* Smartphones en horizontal */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Smartphone en vertical */
@media only screen and (max-width: 479px) {}

Para finalizar el post, dejamos a su disposición los enlaces de descarga directa:

Share Button