Layout
Layouts
Un layout define la estructura básica de la interfaz de usuario en una aplicación.
“Es el esqueleto general de la página”
Layouts
¿Cómo se empieza?
Hacer un diagrama del layout en papel, lo más completo posible y con sus medidas (wireframe).
Un vez que se tiene una idea clara del diseño que se desea lograr, comenzar a escribir código para ajustarlo al diseño.
Layouts en formato Digital
Figma, Photoshop
Box Model
Box Model - Introducción
El concepto de “Box Model” dice que cada elemento �en una página se representa mediante una caja rectangular (contenedor).
Box Model - Developer Tools (add on)
Marcado de elemento de bloque
Box Model
CSS utiliza el modelo de cajas / bloques que consta de 4 partes:
Box Model - CONTENT
ALTO (height) y ANCHO (width) de un elemento.
Box Model - PADDING
Usado para generar espaciado o margen INTERIOR transparente dentro de un elemento.
Box Model - BORDER
Se utiliza para bordear con una línea alrededor del elemento.
Box Model - MARGIN
PUEDE USARSE PARA SEPARAR BLOQUES
Usado para generar margen EXTERIOR transparente fuera de un elemento.
Box Model
h1 {
width: 800px;
height: 350px;
margin: 50px;
padding: 20px;
border: 10px dashed red;
background-color: lightblue;
}
<h1>Bloque Box Model</h1>
Box Model
h1 {
width: 600px;
height: 250px;
background-color: lightblue;
padding-top: 5px;
padding-bottom: 20px;
padding-left: 100px;
padding-right: 0;
border: 4px;
border-style: solid;
border-color: pink;
margin-left: 50px;
margin-right:15px;
margin-top:5px;
}
Y si usamos tamaños de propiedades irregulares?
margin-top
margin-bottom
margin-left
margin-right
<h1>Bloque Box Model</h1>
padding-top
padding-bottom
padding-left
padding-right
Box Model - Calculando el Tamaño
Para calcular el alto total y ancho total del element hacemos:
Ancho:
width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
600px + 20px + 20px + 4px + 4px + 50px + 50px = 748
Height:
height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom
250px + 20px + 20px + 4px + 4px + 50px + 50px = 398
Live: http://codepen.io/ignaciojonas/pen/bpLwQJ
h1 {
width: 600px;
height: 250px;
background-color: lightblue;
padding: 20px;
border: 4px;
border-style: solid;
border-color: pink;
margin: 50px;
}
Live: http://codepen.io/webUnicen/pen/yMRawg
Box Model - Border
También se pueden definir bordes irregulares
<ul>
<li>Ancho 600px</li>
<li>Alto 250px</li>
<li>Padding 20px</li>
<li>Bordes irregulares</li>
</ul>
Tipos de bordes
inset
dashed
double
groove
hidden
dotted
https://developer.mozilla.org/en-US/docs/Web/CSS/border-style#Values
ul {
width: 200px;
height: 80px;
background-color: lightblue;
padding: 20px;
border-top: 10px solid blue;
border-right: 3px dashed red;
border-bottom: 30px dotted black;
border-left: 15px groove pink;
}
none
outset
ridge
solid
inherit
Height & Width: Datos extras
Contenedores
Contenedores
<div> & <span>
Div & Span
DIV
SPAN
CodePen.io: Probémoslo en vivo
Cada vez que veas este ícono o un link a codepen.io tenés el código que hacemos en clase para probarlo y modificarlo vos.
Trabajar en clase con el código básico. Agregar y probar variantes del ejemplo, cambiar valores numéricos para ver qué efecto tienen
CodePen.io: Probémoslo en vivo
CodePen es una comunidad en línea para probar y mostrar fragmentos de código HTML, CSS y JavaScript.
Bloque <div> ... </div>
<p>Ejemplo de listas sin orden (unordered list)</p>
<ul>
<li>Cafe</li>
<li>Te</li>
<li>Coca Cola</li>
</ul>
<div class="bloque1">
<p>Ejemplo de lista ordenada (ordered list)</p>
<ol>
<li>Fernet</li>
<li>Vino</li>
</ol>
</div>
<p>Parrafo que sigue al div</p>
Bloque <span> ... </span>
<p>Ejemplo de span con clase <span class="inline1">inline 1</span></p>�<p>Ejemplo de span con clase <span class="inline2">inline 2</span></p>�<p>Ejemplo de span con clase <span class="inline1">inline 1 y inline 2 <span class="inline2">anidadas</span> </span> </p>
.inline1
{
font-style: italic;
font-weight: bold;
}
.inline2
{
color: red;
}
Flujo de renderizado
Pregunta
¿Pero cómo hacemos si queremos posicionar elementos de una manera más avanzada?
Layout - Un bosquejo
¿Cómo queremos que se vea?
EXPECTATIVA
REALIDAD
Posicionamiento - Bloques flujo normal sin posicionamiento
¿Qué pasó?
Block vs Inline
CSS puede definir la manera en la que los elementos de una página “encajan” uno con otros.
�Según su propiedad “display”:
Las cajas block por defecto se apilan una encima de otra.
Las cajas inline no mueven los elementos alrededor de ellas.
Este es un simple párrafo de ejemplo.
Este es otro simple párrafo de ejemplo.
BLOCK BOX
INLINE BOX
Tipos de Cajas - Block vs Inline
element-1 {display: block}
element-2 {display: block}
element-3 {display: block}
element-4 {display: block}
<h1>...<h5>, <p>, <div> ....
element-1 { display: inline}
<a>, <span>, <strong>, <img> ...
element-2 { display: inline}
element-3 { display: inline}
BLOCK
INLINE
Controlar el flujo de renderizado
Podemos controlar el flujo de renderizado con diferentes propiedades.
display:
float/clear
Uno de los mecanismos más eficientes para construir layouts.
Flexbox
Flex
Le da al contenedor la capacidad de alterar las dimensiones y orden de sus items para manejar mejor el espacio disponible.
.container {
display: flex;
}
otorga más control de cómo se distribuyen los hijos
Propiedades del eje principal
Flex diferencia dos ejes:
Todo lo que hacemos con flexbox está referido a estos dos ejes.
flex-direction:
Layouts usando flex
Creemos el layout de ejemplo usando flexbox.
.izquierda {
width: 400px;
background-color: #333333;
color: white;
}
.derecha {
width: 200px;
background-color: #16a085;
color: white;
}
.container {
display: flex;
}
es un div invisible
Flexbox - Alineación
La propiedad justify-content define la alineación de los componentes a lo largo del eje principal.
Ayuda a distribuir el espacio libre entre los items.
Flex
La propiedad flex-wrap especifica si los elementos flexibles deben ajustarse o no al contenedor.
Tanto flex-direction como flex-wrap se pueden concatenar en una sola propiedad llamada: flex-flow
flex-flow: row wrap;
Default Value (por defecto) : nowrap
Flexbox - Alineación
La propiedad align-items define la alineación de los componentes a lo largo del eje perpendicular.
Es como la versión justify-content para el eje perpendicular.
Layouts usando flex
.encabezado {
height: 150px;
background-color: #CCCCCC;
}
.contenedor {
display: flex;
justify-content: space-between;
}
.izquierda {
width: 200px;
background-color: #333333;
color: white;
}
.centro {
width: 200px;
background-color: #99cc33;
color: white;
}
.derecha {
width: 200px;
background-color: #666666;
color: white;
}
.pie {
background-color: #00CCFF;
}
Layouts usando flex
Ejemplo con muchos “centro”:
Cambiar la propiedad flex-wrap: wrap | nowrap
Probar achicar la ventana y ver como se “bajan” las cosas
Default Value (por defecto) : nowrap
Botonera
Hagamos una botonera para nuestro sitio
Podemos usar una lista:
<ul class=”navigation”>
<li>Home</li>
<li>Productos</li>
<li>Nosotros</li>
<li>Contacto</li>
</ul>
¿Cómo hacemos para que se vea como una botonera?
Flexbox - Items
Propiedades para cada elemento interior
order: Posición de cada uno.
flex-grow: cuánto crecerá en relación con el resto.
flex-shrink: cuánto se encogerá en relación con el resto.
flex-basis: especifica la longitud inicial de un elemento.
align-self: Similar a align-item pero para un elemento particular
Unidades de Medida
Unidades de medida
CSS divide las unidades de medida en dos grupos
ABSOLUTAS: pixeles (px) (pt - mm - cm)
Están completamente definidas, ya que su valor no depende de otro valor de referencia.
RELATIVAS: porcentaje (%) (em - rem - vw - vh)
No están completamente definidas, ya que su valor siempre es dependiente respecto a otro valor de referencia padre.
Pixeles [px] vs Porcentuales [%]
<div>
<h1>div A en 40%</h1>
<div class="chico">
<h1>div B en 50%, hijo de A</h1>
</div>
<div class="fijo1">
<h1>div C en 300px, hijo de A </h1>
</div>
</div>
<div class="chico">
<h1>div C en 50% </h1>
</div>
<div class="fijo2">
<h1>div D en 500px </h1>
</div>
div {
width: 40%;
background-color: orange;
}
.chico {
width: 50%;
background-color: red;
}
.fijo1 {
width: 300px;
background-color: green;
}
.fijo2 {
width: 500px;
background-color: green;
}
Ejercicio
Modificar el ejemplo para que la página quede con un modelo como el siguiente
Ejercicio - Cuál opción es posible? Y la correcta?
Position
Posicionamiento
static | absolute | relative | fixed | sticky
La propiedad position sirve para posicionar un elemento dentro de la página.
Posicionando Elementos
La propiedad “position” que posee diferentes valores.
Posicionando Elementos - Relative + Absolute
El posicionamiento de <ul> es respecto de su padre <div>
Posicionando Elementos - Absolute
Comentamos “position: relative” del div.
No tiene efecto top: 50px.
El posicionamiento de <ul> ahora es desde el root element, no de <div>
Posicionando Elementos
sticky, ahora <ul> no está dentro de <div> ( ya no son anidados), sino que siempre se va a ver en la misma posición de la pantalla
Live: https://codepen.io/webUnicen/pen/jJQBWW
Posicionando Elementos
absolute , ahora <ul> no está dentro de <div> ( ya no son anidados)
Live: http://codepen.io/webUnicen/pen/EWJMqL
<div> es relative, tiene efecto top: 50px.
<ul> también es respecto del root element (<body>)
Ejercicio
Realizar una página que contenga:
del navegador.
Referencias
HTML & CSS - Design and Build Websites.
JON DUCKETT
CSS - the missing manual.
DAVID SAWYER MCFARLAND
AHORA LES TOCA PRACTICAR :D
Extras
Exceso de Contenido
overflow: controla lo que sucede cuando el contenido excede a las dimensiones del bloque.
Las opciones son: auto, hidden, scroll, visible, inherit
Live: http://codepen.io/webUnicen/pen/GWLebK
Ejercicio
Encimando elementos
z-index : Cuando se superponen dos o más elementos se puede decidir cual queda por encima o por debajo.
Sirve para establecer el orden de los fondos con fotos, transparencias, texto, etc. Se pueden entender como capas
Encimando elementos
Las opciones son auto, number, inherit
Ejemplo:
en este caso box3 tiene prioridad al frente, luego box2 y por último box1 al fondo.
http://codepen.io/webUnicen/pen/ZeZdBO
.box1 {
z-index: -1;
}
.box2 {
z-index: 1;
}
.box3 {
z-index: 2;
}
Herramientas
Box Model - Herramientas Chrome
Marcado con la herramienta de desarrollo de Chrome. Menú > Más Herramientas >Herramientas de desarrollador
( Ctrl + Mayusc. + I )
Box Model - Herramientas, Firebug