Skeleton es un framework CSS ligero que proporciona una estructura de cuadrícula responsive, tipografía y estilos básicos para botones y formularios para un rápido desarrollo web móvil. Usa una cuadrícula de 16 columnas fija y es compatible con los principales navegadores. Aunque más básico que Bootstrap, Skeleton es una buena opción para proyectos que solo requieren un grid simple.

1. Skeleton
A Beautiful Boilerplate for Responsive,
Mobile-Friendly Development
@Elwinlhq
Elwin Huaman Quispe
@adrian.cepillo
Adrián Cepillo Macías

2. El Grid Contiene la base CSS para
empezar a trabajar en cualquier
proyecto web

3. Descripción General
Responsive Mobile Rapido Estilo Agnostico

4. Características Generales
El Grid
<div class="container">
<div class="row">
<div class="nine columns alpha">
NINE
</div>
<div class="three columns omega">
THREE
</div>
</div>
</div>

5. Características Generales
Tipografia
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<blockquote>
<p>Esto es un estilo de cita, destaca pero
mola</p>
<cite>Dave Gamache,
Creador de Skeleton</cite>
</blockquote>

6. Características Generales
Botones
<div class="four columns">
<a href="#" class="button">
Class button
</a>
<button> button</button>
<a href="#" class="full-width button">
full-width button
</a>
</div>

7. Características Generales
Formulario
<form action="">...
<label for="regularTextarea">...
<input type="text">...
<textarea>...
<select id="idSelect">
<option value="Option 1">...
<input type="checkbox"><span>..
<input type="radio"><span>....
<button type="submit">...
</form>

8. Características más Generales
Base : 960px <div class="container">
Columnas: 16 <div class="four columns">
Columna anidadas <div class="four columns alpha">
Desplazamientos<div class="four columns offset-by-four">
Media queries: Tablets y Mobiles

9. Soporte para Skeleton
● Latest Chrome (Mac/PC)
● Firefox 4.0, 3.6, 3.5, 3.0 (Mac/PC)
● Latest Safari
● IE9, IE8, IE7
● iPhone (Retina)
● Droid (Charge/Original)
● iPad

10. Instalación de Skeleton
Skeleton download
● Download Skeleton 1.2
Estructura de directorios
index.html:
● stylesheets
base.css //Estilo basicos de SKeleton
skeleton.css //Define el Grid de Skeleton
layout.css //specifica una variedad para uso en media queries
● images (folder):
favicon.ico //Standard 16x16 favicon

11. Consideraciones
++ --
Rápido desarrollo: no tiene
mayor distraccion en su uso.
Responsive
Compatibilidad en
navegadores
Curva de aprendizaje: para
usuario principiantes.
Muy basico

12. Skeleton != Bootstrap
Bootstrap Skeleton
Grids Fluid, Fixed Fixed
UI Tools Widgets Limitado
Version 3.2 en Junio, 2014 1.2 en Junio, 2012
CSS LESS, Sass/Scss
Columnas 12 16
Widgets Alerts, Badges, Breadcrumbs, Buttons
Carousel, Accordion, Dropdown,
Forms, Grids, Icons, Labels, Lists,
Navigation, Pagination, Progress bars,
Tables, Tabs, Thumbnails, Tooltips,
Typeahead, Typography...
Buttons, Forms, Grids, Tabs(removed),
Typography

13. Valoracion
0 1 2 3
Reset-Style X
Grid para diseño responsive X
Tipografia Web X
set de iconos o iconfonts X
Estilos para tooltips, buttons, etc. X
Widgets X
Funcionalidad X
Aprendizaje X
07
CSS frameworks. (2014, October 24). In Wikipedia, The Free Encyclopedia. Retrieved 20:09, November 5, 2014, from http://en.
wikipedia.org/w/index.php?title=CSS_frameworks&oldid=630981695

14. Conclusión
Si solo te interesa un buen Grid.
¡Skeleton es tu Framework!