Skeleton

FACULTATIVA I
Skeleton CSS
Msc. Lawdee Narvez Bello.
Christian Johanny Silva

Jorling Stephanie Muoz
UNAN-MANAGUA
Qu es el Skeleton (Skeleto)?
Es un marco CSS ligero (o repetitivo) creado por David Gamache . Ms
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
lneas de cdigo sin comprimir.
La parte ms importante del esqueleto es su sistema de rejilla. Adems,
el marco ofrece estilos bsicos para los componentes comunes de HTML
como botones, listas, tablas y formularios.
Al igual que en los marcos como Bootstrap y Foundation , Esqueleto
tambin utiliza un enfoque de mvil. Sin embargo, como se discute, que
no incluye el gran nmero de componentes que ofrecen esos
marcos; slo contiene algunas reglas CSS fundamentales que ayudan a
poner en marcha su proceso de desarrollo.
Skeleton es completamente funcional en todos los navegadores ms
recientes incluyendo IE9 +. Por ltimo, tambin se puede optar por el
Sass o Less que son extensiones de esqueleto.
Versiones: ltimos vs Anterior

Hay muchas diferencias entre la versin actual y la anterior. La siguiente
tabla resume las diferencias ms importantes:
Caractersticas
V2.0.2 (versin
actual)
V1.2 (versin anterior)
Archivos CSS
Mobile-First
Approach?
No
Cuadrcula
Rejilla de fluido 12-columna
16-columna de cuadrcula fijo
Unidades tipogrficas
rem
px
CARACTERISTICAS
La cuadricula (GRID)
La cuadricula, es una cuadricula de fluido de 12-columnas con
un ancho mximo de 960px, que se encoge con el navegador
y dispositivo de tamaos pequeos. El ancho mximo se
puede cambiar con una sola lnea de CSS y todas las
columnas cambiarn de tamao en consecuencia. La sintaxis
es simple y hace que la codificacin de respuesta sea mucho
ms fcil.
Cdigo 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>
<! - slo tiene que utilizar un nmero y clase 'columna' o 'columnas' ->
<div clase = "dos columnas" > dos </ div>
<div clase = "diez columnas" > Diez </ div>
</ div>
<! - hay algunas columnas anchos como taquigrafa 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 cuadrcula variara con forme a la
definicin de su estructura (que pueden llegar a ser realmente * * pequeo en cierta navegador /
tamaos de los dispositivos) ->
Tipografa
Los tipos de letras estn todos disponibles con la etiqueta rems , as como
los tamaos de fuente y las relaciones espaciales que puede ser clasificada
basndose 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 todava
de la base 10, as que, un <h1> con 5.0rem font-size slo significa 50px .
La base de la tipografa es Raleway(es una elegante familia tipogrfica sansserif) servida por Google, puesta a 15rem (15px) sobre una altura de 1,6
lnea (24px). Otros aspectos bsicos de tipo como
anclas , fuerte, nfasis y subrayado estn obviamente incluidos.
Los Encabezamientos crean una familia de

distintos tamaos, cada uno con especficos
espaciado entre letras , line-height y mrgenes .
Cdigo HTML

<h1>Heading</h1>
<h2>Heading</h2>
<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 bsicos en Skeleton. El estndar <button>
que es un elemento normal, mientras que l .button-primario es vibrante y
prominente. Los Estilos de botones se aplican a un nmero de elementos
de formulario adecuados, pero tambin se puede conectar de manera
arbitraria a las anclas con un .button clase.
Codigo HTML
<! - Botones estndar ->
<a clase = "button" href = "#" > botn Anclaje </a>

<button> elemento Button </ button>
<input tipo = "submit" valor = "submit entrada" >
<input tipo = "button" valor = "entrada botn" >
<! - botones primarios ->
<a clase = "Botn-primaria" href = "#" > botn Anclaje </a>
<botn de clase = "botn-primaria" > elemento Button </ button>
<input clase = "botn-primaria" tipo = "submit" valor = "submit entrada" >
<input clase = "botn-primaria" tipo = "button" valor = " entrada botn " >
Formas
Los formularios son algo complicados, pero con estos estilos que ofrece
skeleton hacen que sea un poco ms fcil. Todas las entradas, selecciones,
y los botones estn normalizados para unos cross-browser de altura comn
a manera entradas, ya que se pueden apilar o colocar uno junto al otro.
Cdigo HTML

<form>
<div class="row">
<div class="six columns">
<label for="exampleEmailInput">Your email</label>
<input class="u-full-width" type="email" placeholder="test@mailbox.com"
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 bsicos
o Se usan vietas en estilo de
circulo
o
Listas anidadas con

estilos llamativos
Puede anidar cualquier
1. Las listas ordenadas

tambin tienen estilos
bsicos
2. Utilizan la lista estilo
decimal
o
Pueden anidarse de
forma Ordenadas y
tipo de lista vinculndolas
desordenadas
o Listas de artculos de la
mama san. (p.ej.)
Puede anidar cualquier

tipo de lista vinculndolas
3. El ltimo elemento de la
lista slo es para la
entretener.
Cdigo HTML
<Ul>
<li> Artculo 1 </ li>
<li>
Artculo 2
<ul>
<li> El punto 2.1 </ li>
<li> El punto 2.2 </ li>
</ ul>
</ li>
<li> Artculo 3 </ li>
</ ul>
<! - sustituir fcilmente cualquier <ul> o un <ol> para obtener listas de nmeros o sublistas.
Esqueleto no soporta listas anidadas superior de 2 niveles ->
Cdigo
El estilo de cdigo es basico- slo envolver basta con etiquetar cualquier
cosa en un <code> y aparecer como este .Para los bloques de cdigo,
empaquetar un <code> con un <pre> .
Cdigo 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 sangra en el cdigo - ->
Tablas
Debe asegrese de utilizar adecuadamente la etiqueta table
con <thead> y <tbody> cuando se construye una tabla .
Cdigo 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 travs de
distintos dispositivos.
Las consultas que hace esqueleto es acerca de los dispositivos en los cuales
ser mostrada nuestra pgina, para ello se dirigen a la etiqueta minwidth . Mobile-primero consulta como se construir la estructura del
esqueleto ya que es el mtodo preferible para organizar el CSS. Esto

significa que todos los estilos fuera de una consulta se aplican a todos los
dispositivos, los dispositivos a continuacin, los ms grandes son objeto de
mejora. Esto evita que los dispositivos pequeos tengan que analizar
toneladas de CSS sin usar. Los tamaos de las consultas son:
o Escritorio HD : 1200px
o Escritorio : 1000px
o Tablet : 750px
o Phablet : 550px
o Mvil : 400px
Cdigo 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 pequeas clases de utilidad que actan como ayudantes
de fcil uso. A veces es mejor usar una clase de utilidad para crear una clase
completamente nueva slo para sobresaltar un elemento.
Cdigo HTML.
/ * Clases de Utilidad * /
/ * Hacer elemento ancho * /
. u - completo - anchura {
ancho : 100 %;
caja - dimensionamiento : frontera - caja ; }
/ * Asegrese de que los elementos no se ejecutan fuera de los contenedores (ideal para
imgenes en columnas) * /
. u - max - completo - anchura {
max - ancho : 100 %;
caja - dimensionamiento : frontera - caja ; }
/ * Float cualquier direccin * /
. 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 slo elementos HTML prima (con algunas excepciones) y

proporciona una cuadrcula de respuesta.
Alrededor de 400 lneas de CSS unminified y con comentarios
Es un punto de partida, no un marco de interfaz de usuario
No hay que compilar o instalar ... slo vainilla CSS
DESVENTAJAS DE SKELETO
Importacin de Cdigo Innecesario
Limitacin por cdigo predefinido
Menor control en la visualizacin
COMPATIBILIDAD CON EL NAVEGADOR
Chrome ltima versin
Firefox ms reciente
Opera ms reciente
Safari ltimo
IE ms reciente
LICENCIA
Todas las partes de skeleto son libres de usar y abusar bajo la licencia MIT de
cdigo abierto .
EXTENCIONES
Las siguientes son las extensiones de esqueleto construidos por la
comunidad. Ellos no estn soportados oficialmente, pero todos han sido probados
y son compatibles con v2.0.
Esqueleto Less : Esqueleto construido con less para facilitar la sustitucin

de la cuadricula, color y consultas multimedia. (ltima actualizacin era
igualar v2.0.1)
Esqueleto en Sass : Esqueleto construido con Sass para facilitar la

sustitucin de la cuadricula, color y consulta multimedia. (ltima
actualizacin era igualar v2.0.1)

Skeleton

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Skeleton

Diunggah oleh

Hak Cipta:

Format Tersedia

FACULTATIVA I

Christian Johanny Silva

Versiones: ltimos vs Anterior

V1.2 (versin anterior)

Rejilla de fluido 12-columna

16-columna de cuadrcula fijo

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

Fuera de la caja, Esqueleto nunca cambia el <html> font-size, pero est ah

Los Encabezamientos crean una familia de

<a clase = "button" href = "#" > botn Anclaje </a>

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

Listas anidadas con

Puede anidar cualquier

1. Las listas ordenadas

tipo de lista vinculndolas

Puede anidar cualquier

Esqueleto utiliza consultas multimedia los cuales crean una lista de

esqueleto ya que es el mtodo preferible para organizar el CSS. Esto

/* Larger than Desktop HD */

Esqueleto es ligero y sencillo.

Los Estilos slo elementos HTML prima (con algunas excepciones) y

Alrededor de 400 lneas de CSS unminified y con comentarios

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

No hay que compilar o instalar ... slo vainilla CSS

Importacin de Cdigo Innecesario

Limitacin por cdigo predefinido

Menor control en la visualizacin

COMPATIBILIDAD CON EL NAVEGADOR

Chrome ltima versin

Esqueleto Less : Esqueleto construido con less para facilitar la sustitucin

Esqueleto en Sass : Esqueleto construido con Sass para facilitar la

Anda mungkin juga menyukai