Skeleton

6-4-2015

Msc. Lawdee Narváez Bello.

Christian Johanny SilvaJorling Stephanie Muñoz

¿Qué es el Skeleton (Skeleto)?Es un marco CSS ligero (o repetitivo) creado por David Gamache . Más concretamente, se trata de dos archivos CSS: los populares normalize.css y el skeleton.css .Este último contiene estilos del marco, que se limitan a alrededor de 400 líneas de código sin comprimir.La parte más importante del esqueleto es su sistema de rejilla. Además, el marco ofrece estilos básicos para los componentes comunes de HTML como botones, listas, tablas y formularios.

Al igual que en los marcos como Bootstrap y Foundation , Esqueleto también utiliza un enfoque de móvil. Sin embargo, como se discute, que no incluye el gran número de componentes que ofrecen esos marcos; sólo contiene algunas reglas CSS fundamentales que ayudan a poner en marcha su proceso de desarrollo.

Skeleton es completamente funcional en todos los navegadores más recientes incluyendo IE9 +. Por último, también se puede optar por el Sass o Less que son extensiones de esqueleto.

Versiones: Últimos vs AnteriorHay muchas diferencias entre la versión actual y la anterior. La siguiente tabla resume las diferencias más importantes:

Características V2.0.2 (versión actual) V1.2 (versión anterior)

Archivos CSS 2 3

Mobile-First Approach? Sí No

Cuadrícula Rejilla de fluido 12-columna 16-columna de cuadrícula fijo

Unidades tipográficas rem px

CARACTERISTICAS

La cuadricula (GRID)

La cuadricula, es una cuadricula de fluido de 12-columnas con un ancho máximo de 960px, que se encoge con el navegador y dispositivo de tamaños pequeños. El ancho máximo se puede cambiar con una sola línea de CSS y todas las columnas cambiarán de tamaño en consecuencia. La sintaxis es simple y hace que la codificación de respuesta sea mucho más fácil.

Código HTML

<! - .container Es envoltorio principal centrada ->

<div clase = "container" >

<! - columnas deben ser el hijo inmediato de un .row ->

<div clase = "row" >

<div clase = "una columna" > Una </ div>

<div clase = "once columnas" > Once </ div>

</ div>

<! - sólo tiene que utilizar un número y clase 'columna' o 'columnas' ->


<div clase = "dos columnas" > dos </ div>

<div clase = "diez columnas" > Diez </ div>

</ div>

<! - hay algunas columnas anchos como taquigrafía así ->


<div clase = "una tercera columna" > 1/3 </ div>

<div clase = "columna de dos tercios" > 2.3 </ div>

</ div>


<div clase = "columna de la mitad" > 02/01 </ div>

<div clase = "columna de la mitad" > 01.02 </ div>

</ div>

</ div>

<- Nota: las columnas se pueden anidar, pero no es recomendable ya que la estructura del esqueleto tiene% definidos, lo que significa que un anidados de cuadrícula variara con forme a la definición de su estructura (que pueden llegar a ser realmente * * pequeño en cierta navegador / tamaños de los dispositivos) ->

Tipografía

Los tipos de letras están todos disponibles con la etiqueta rems, así como los tamaños de fuente y las relaciones espaciales que puede ser clasificada basándose en un solo <html> con la propiedad font-size.

Fuera de la caja, Esqueleto nunca cambia el <html>font-size, pero está ahí en caso de que lo necesite para su proyecto. Todas las medidas son todavía de la base 10, así que, un <h1> con 5.0rem font-size sólo significa 50px.

La base de la tipografía es Raleway(es una elegante familia tipográfica sans-serif) servida por Google, puesta a 15rem (15px) sobre una altura de 1,6 línea (24px). Otros aspectos básicos de tipo como anclas , fuerte, énfasis y subrayado están obviamente incluidos.Los Encabezamientos crean una familia de distintos tamaños, cada uno con específicos espaciado entre letras, line-height y márgenes.

Código HTML



<h1>Heading</h1>

<h2>Heading</h2>

http://getskeleton.com/

http://www.google.com/fonts/specimen/Raleway

<h3>Heading</h3>

<h4>Heading</h4>

<h5>Heading</h5>

<h6>Heading</h6>



<p>The base type is 15px over 1.6 line height (24px)</p>



<strong>Bolded</strong>

<em>Italicized</em>

<a>Colored</a><u>Underlined</u>

Botones

Los Botones vienen en dos tipos básicos en Skeleton. El estándar <button> que es un

elemento normal, mientras que él .button-primario es vibrante y prominente. Los Estilos de

botones se aplican a un número de elementos de formulario adecuados, pero también se

puede conectar de manera arbitraria a las anclas con un .button clase.

Codigo HTML

<! - Botones estándar ->

<a clase = "button" href = "#" > botón Anclaje </a>

<button> elemento Button </ button>

<input tipo = "submit" valor = "submit entrada" >

<input tipo = "button" valor = "entrada botón" >

<! - botones primarios ->

<a clase = "Botón-primaria" href = "#" > botón Anclaje </a>

<botón de clase = "botón-primaria" > elemento Button </ button>

<input clase = "botón-primaria" tipo = "submit" valor = "submit entrada" > <input clase = "botón-primaria" tipo = "button" valor = " entrada botón " >

FormasLos formularios son algo complicados, pero con estos estilos que ofrece skeleton hacen que

sea un poco más fácil. Todas las entradas, selecciones, y los botones están normalizados para

unos cross-browser de altura común a manera entradas, ya que se pueden apilar o colocar

uno junto al otro.

Código HTML

<form>

<div class="row">

<div class="six columns">

<label for="exampleEmailInput">Your email</label>

<input class="u-full-width" type="email" placeholder="[email protected]" id="exampleEmailInput">

</div>

<div class="six columns">

<label for="exampleRecipientInput">Reason for contacting</label>

<select class="u-full-width" id="exampleRecipientInput">

<option value="Option 1">Questions</option>

<option value="Option 2">Admiration</option>

<option value="Option 3">Can I get your number?</option>

</select>

</div>

</div>

<label for="exampleMessage">Message</label>

<textarea class="u-full-width" placeholder="Hi Dave …" id="exampleMessage"></textarea>

<label class="example-send-yourself-copy">

<input type="checkbox">

<span class="label-body">Send a copy to yourself</span>

</label>

<input class="button-primary" type="submit" value="Submit">

</form>





Listas

o Las listas desordenadas tienen

estilos básicos

o Se usan viñetas en estilo de circulo

o Listas anidadas con estilos

llamativos

o Puede anidar cualquier tipo de

lista vinculándolas

o Listas de artículos de la mama san.

(p.ej.)

1. Las listas ordenadas también

tienen estilos básicos

2. Utilizan la lista estilo decimal

o Pueden anidarse de forma

Ordenadas y desordenadas

o Puede anidar cualquier tipo de

lista vinculándolas

3. El Último elemento de la lista sólo

es para la entretener.

Código HTML<Ul>

<li> Artículo 1 </ li>

<li>

Artículo 2

<ul>

<li> El punto 2.1 </ li>

<li> El punto 2.2 </ li>

</ ul>

</ li>

<li> Artículo 3 </ li>

</ ul>

<! - sustituir fácilmente cualquier <ul> o un <ol> para obtener listas de números o sublistas. Esqueleto no soporta listas anidadas superior de 2 niveles ->

Código

El estilo de código es basico- sólo envolver basta con etiquetar cualquier cosa en un <code> y

aparecerá como este .Para los bloques de código, empaquetar un <code> con un <pre> .

Código HTML.

.some clase {

background-color: red;

}

<Pre> <code> clase .some {

background-color: red;

} </ code> </ pre>

<! - Recuerde que cada espacio en blanco y el descanso se conservará en un elemento <pre>, incluyendo la

sangría en el código - ->

Tablas

Debe asegúrese de utilizar adecuadamente la etiqueta table con <thead> y <tbody> cuando se

construye una tabla .

Código HTML.

<table class = "u-full-width" >

<thead>

<tr>

<th> Name </th>

<th> Age </th>

<th> Sex </th>

<th> Location </th>

</tr>

</thead>

<tbody>

<tr>

<td> Dave Gamache </ td>

<td> 26 </ td>

<td> Masculino </ td>

<td> San Francisco </ td>

</ tr>

<tr>

<td> Dwayne Johnson </ td>

<td> 42 </ td>

<td> Masculino </ td>

<td> Hayward </ td>

</ tr>

</ tbody>

</ table>

Consultas Multimedia

Esqueleto utiliza consultas multimedia los cuales crean una lista de ventajas para la

comodidad y visibilidad del estilo del sitio a través de distintos dispositivos.

Las consultas que hace esqueleto es acerca de los dispositivos en los cuales será mostrada

nuestra página, para ello se dirigen a la etiqueta min-width . Mobile-primero consulta como se

construirá la estructura del esqueleto ya que es el método preferible para organizar el

CSS. Esto significa que todos los estilos fuera de una consulta se aplican a todos los

dispositivos, los dispositivos a continuación, los más grandes son objeto de mejora. Esto evita

que los dispositivos pequeños tengan que analizar toneladas de CSS sin usar. Los tamaños de

las consultas son:

o Escritorio HD : 1200px

o Escritorio : 1000px

o Tablet : 750px

o Phablet : 550px

o Móvil : 400px

Código HTML.

/* Mobile first queries */

/* Larger than mobile */

@media (min-width: 400px) {}

/* Larger than phablet */


/* Larger than tablet */


/* Larger than desktop */


/* Larger than Desktop HD */


Utilidades

Esqueleto tiene una serie de pequeñas clases de utilidad que actúan como ayudantes

de fácil uso. A veces es mejor usar una clase de utilidad para crear una clase

completamente nueva sólo para sobresaltar un elemento.

Código HTML.

/ * Clases de Utilidad * /

/ * Hacer elemento ancho * /

. u - completo - anchura {

ancho : 100 %;

caja - dimensionamiento : frontera - caja ; }

/ * Asegúrese de que los elementos no se ejecutan fuera de los contenedores

(ideal para imágenes en columnas) * /

. u - max - completo - anchura {

max - ancho : 100 %;

caja - dimensionamiento : frontera - caja ; }

/ * Float cualquier dirección * /

. u - tire - derecha {

float : derecho ; }

. u - Tire - dejó {

float : izquierda ; }

/ * Borrar un flotador * /

. u - cf {

contenido : "" ;

display : mesa ; claro : ambos ; }

VENTAJAS DE SKELETO

Esqueleto es ligero y sencillo.

Los Estilos sólo elementos HTML prima (con algunas excepciones) y

proporciona una cuadrícula de respuesta.

Alrededor de 400 líneas de CSS unminified y con comentarios

Es un punto de partida, no un marco de interfaz de usuario

No hay que compilar o instalar ... sólo vainilla CSS

DESVENTAJAS DE SKELETO

Importación de Código Innecesario

Limitación por código predefinido

Menor control en la visualización

COMPATIBILIDAD CON EL NAVEGADOR

Chrome última versión

Firefox más reciente

Opera más reciente

Safari último

IE más reciente

LICENCIA

Todas las partes de skeleto son libres de usar y abusar bajo la licencia MIT de

código abierto .

EXTENCIONES

Las siguientes son las extensiones de esqueleto construidos por la

comunidad. Ellos no están soportados oficialmente, pero todos han sido probados

y son compatibles con v2.0.

Esqueleto Less : Esqueleto construido con less para facilitar la sustitución

de la cuadricula, color y consultas multimedia. (Última actualización era

igualar v2.0.1)

Esqueleto en Sass : Esqueleto construido con Sass para facilitar la

sustitución de la cuadricula, color y consulta multimedia. (Última

actualización era igualar v2.0.1)

https://github.com/whatsnewsaes/Skeleton-Sass

https://github.com/whatsnewsaes/Skeleton-less

https://github.com/dhg/Skeleton/blob/master/LICENSE.md

https://github.com/dhg/Skeleton/blob/master/LICENSE.md

Documents

Skeleton