Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.


Apoya la comunidad con $1 USD, queremos mejorar y compartir más conocimiento.

Maquetando con SASS y HTML5. Parte 2


  Publicado hace |  Etiquetas: , , , , ,

Mixins

Los mixins no son más que una sección de código que permiten reutilizar estilos las veces necesarias, con la finalidad de no repetir un mismo código.

Cómo se crea un mixin?

Los mixins se crean con la necesidad de no tener que repetir más código en nuestro archivo logrando así ahorrar tiempo y trabajo en la creación de los estilos CSS para el diseño de la aplicación. En este ejemplo podrán ver una manera sencilla de declarar un mixin:

Así se verá nuestro código sin el uso de mixins, ahora si pueden observar se darán cuenta que repetimos las mismas propiedades en ambos casos a excepción del ancho ( la propiedad width ) en cada selector.

.button-small {
 width: 120px;
 border-radius: 3px 3px;
 color: #ffffff;
 background: #1d1d1d;
 height: 60px;
 }
 .button-large {
 width: 260px;
 border-radius: 3px 3px;
 color: #ffffff;
 background: #1d1d1d;
 height: 60px;
 }

<strong>Con el uso de mixins</strong> esta sería la forma correcta de realizar el código en SASS:
@mixin button(){
 border-radius: 3px 3px;
 color: #ffffff;
 background: #1d1d1d;
 height: 60px;
 }
 .button-small {
 @include button();
 width: 120px;
 }
 .button-large {
 @include button();
 width: 260px;
 }

NOTA IMPORTANTE: La directiva mixin @include seguido del nombre permite mandar a llamar una sección de código mixin.

Después de haber entendido y estudiado la función y utilidad de los mixins, es hora de mostrarlos ya añadidos a nuestro archivo “style.scss”.

Captura de pantalla de 2014-01-29 11_47_04

Captura de pantalla de 2014-01-29 11_47_26

Como puedes observar, estos mixins únicamente permiten agregar código de los estilos CSS3 más comúnes, esto parece no ser muy útil al principio, pero es muy importante para los proyectos grandes en donde las aplicaciones diseñadas con estos estilos pretenden ser 100% compatibles y adaptables en casi todos los navegadores ( véase en los post de responsive design). En lugar de escribir todos y cada uno de los prefijos que hay para cada navegador únicamente mandamos los parámetros al mixin seleccionado con nuestros valores o propiedades y automáticamente se agregarán los prefijos para así lograr la perfecta visualización de la aplicación en cualquier navegador deseado.

NOTA IMPORTANTE: Actualmente ya existen librerías que ya hacen este trabajo por ti, incluso gemas para Rails que permiten hacer uso de SASS con los mixins de CSS3 ya incluidos, un ejemplo sería el de la librería Bourbon que se puede encontrar en la siguiente página: http://bourbon.io/.

Nesting (anidamiento)

Hasta este punto ya hemos visto todo el código necesario para los próximos estilos que faltan por agregar. Sin embargo, aún falta un último punto por estudiar y es el de “Anidamiento”. Ahora es momento de echar un vistazo a la imagen donde se ubica el código de nuestro navbar, para aquellos que ya han trabajado mucho con CSS se les hará un poco raro que se encuentren “selectores dentro de otros selectores”, bien aquí va la explicación: En SASS es posible realizar algo conocido como anidamiento que es la posibilidad de incorporar una estructura de código dentro de otra y que en la mayor parte de las ocasiones es requerido utilizar una sangría para poder separar y distinguir estos bloques de código (los que han practicado con lenguajes de programación como C/C++ o JAVA, entienden el concepto, pero para quienes no específico), esto quiere decir que podemos agregar un bloque de código dentro de otro, por ejemplo, si quisiéramos añadir ciertas propiedades a un elemento que se encuentra dentro de otro en nuestro documento HTML entonces haríamos lo siguiente:

.elemento-padre {
// Código del padre. . .
.elemento-hijo {
// Código del hijo
}
}

Esto sin duda al ser procesado por SASS quedaría de esta forma:

.elemento-padre{
// Código del padre
}

.elemento-padre .elemento-hijo {

// Código del hijo
}

En un caso en particular podría ser cuando deseamos añadir código a la pseudo-clase :hover de un botón, por ejemplo:

button {
background-color: gray;
color: white;
&:hover {
background-color: blue;
}
}
Lo cual en CSS quedaría de la siguiente forma:
button {
background-color: gray;
color: white;
}
button:hover {
background-color: blue;
} 

NOTA IMPORTANTE: El carácter “&” permite hacer referencia al padre, por lo que al hacer uso de él dentro de un selector estaremos agregando código a la pseudo-clase de dicho elemento. Perfecto, luego de esta amplia explicación estarán gustosos por saber que ya han aprendido lo más elemental de SASS. Lo único que nos queda es finalizar con la maquetación de nuestro proyecto.

DISEÑO DEL NAVBAR

Captura de pantalla de 2014-01-29 13_25_23

Hasta el momento con el código anteriormente agregado tenemos ya completado el diseño de nuestro menú de navegación o barra de navegación (navbar).

DISEÑO DEL HEADER

Para el diseño de la etiqueta header sólo es necesario agregar una etiqueta div con el id welcome, de esta manera:

</pre>
<header>
<div id="welcome"></div>
</header>
<pre>

Aquí el código de los estilos:

#welcome {
width: $page_width;
display: block;
margin: auto;
height: 256px;
background-image: url("images/html5facil_logo.png"); // PARA ESTE PROYECTO YO
 // UTILICÉ EL LOGO DE HTML5FACIL
 // COMO FONDO
background-color: $gray_dark;
background-size: 80% 160%;
background-position: center center;
background-repeat: no-repeat;

}

IMPORTANTE: La imagen utilizada para el fondo la he ubicado dentro de una carpeta nombrada “images”. El diseño final tendría que quedar más o menos así:

Captura de pantalla de 2014-01-29 18_42_01

Diseño del section, article y aside

En esta parte de nuestro proyecto se preguntarán por qué unimos el diseño del section con el article y el aside, bien la explicación es sencilla, tomando en cuenta que la Estructura Semántica de HTML5 es nuestra base, tenemos que saber que al diseñar de un forma cada uno de estos elementos dependerá mucho de como se verá el otro, por ejemplo, si hacemos un section más pequeño a su tamaño acostumbrado el margen que habrá entre el article y el aside deberá cambiar ya que si no se realiza esto el diseño se estropeará por completo, es por eso que es necesario saber las medidas exactas con las cuales estaremos trabajando para cada uno de estos elementos. Código HTML:

</pre>
<section>
<div class="content"><article><hgroup>
<h1>Maquetando con SASS y HTML5</h1>
</hgroup>
<div class="date">Ultima modificación: 10/01/2014</div>
<img alt="" src="images/sass_logo.png" />
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus iaculis erat a ultrices pharetra. Nullam bibendum, felis a faucibus pellentesque, est sapien feugiat est, ac bibendum justo massa ac enim. Maecenas lectus felis, elementum et arcu sit amet, bibendum sollicitudin mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ligula mauris, vulputate sed neque vitae, suscipit venenatis diam. Sed molestie lorem sed mi rhoncus malesuada. Etiam hendrerit nisl et eros ultrices pharetra. Vestibulum non ante blandit, pulvinar augue sagittis, pulvinar magna. Aliquam bibendum quis libero eu sollicitudin. Pellentesque eget tincidunt enim, id tincidunt turpis. Nullam vitae urna et elit semper sagittis at sit amet metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus iaculis erat a ultrices pharetra. Nullam bibendum, felis a faucibus pellentesque, est sapien feugiat est, ac bibendum justo massa ac enim. Maecenas lectus felis, elementum et arcu sit amet, bibendum sollicitudin mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum ligula mauris, vulputate sed neque vitae, suscipit venenatis diam. Sed molestie lorem sed mi rhoncus malesuada. Etiam hendrerit nisl et eros ultrices pharetra. Vestibulum non ante blandit, pulvinar augue sagittis, pulvinar magna. Aliquam bibendum quis libero eu sollicitudin. Pellentesque eget tincidunt enim, id tincidunt turpis. Nullam vitae urna et elit semper sagittis at sit amet metus. </article>
<div class="comments-form"><form action="#" method="post">
Nombre: <input type="text" name="nombre" />*
Email: <input type="text" name="correo" />*
Comentario:
<textarea class="input" id="comentario" name="comentario"></textarea> <input type="submit" name="submit" value="Enviar" /></form></div>
<div class="clear-50px"></div>
</div>
<aside>
<div class="item-aside"><hgroup>
<h3>Aside</h3>
</hgroup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus iaculis erat a ultrices pharetra. Nullam bibendum, felis a faucibus pellentesque, est sapien feugiat est, ac bibendum justo massa ac enim. Maecenas lectus felis, elementum et arcu sit amet, bibendum sollicitudin mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div>
<div class="item-aside"><hgroup>
<h3>Aside</h3>
</hgroup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus iaculis erat a ultrices pharetra. Nullam bibendum, felis a faucibus pellentesque, est sapien feugiat est, ac bibendum justo massa ac enim. Maecenas lectus felis, elementum et arcu sit amet, bibendum sollicitudin mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div>
<div class="item-aside"><hgroup>
<h3>Aside</h3>
</hgroup>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus iaculis erat a ultrices pharetra. Nullam bibendum, felis a faucibus pellentesque, est sapien feugiat est, ac bibendum justo massa ac enim. Maecenas lectus felis, elementum et arcu sit amet, bibendum sollicitudin mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus.</div>
</aside></section>
<pre>

Código SASS:

.content {
width: 62%;
min-height: 256px;
vertical-align: top;
float: left;
margin-left: 0;
clear: both;
display: block;
article {
width: 96%;
padding: 1em 0;
margin: auto;
display: block;
hgroup h1, h2, h3 {
text-align: center;
margin: .5em 0;
padding: .25em 0;
background-color: $gray_dark;
@include border-radius(1.5em 0 1.5em 0);
@include linear-gradient(top, $gray_alternative, $gray_dark, darken($gray_dark,
5%));
color: $main-color;

font-style: italic;
font-size: 1.5em;
}
.date {
display: block;
margin-right: auto;
width: 52%;
padding: 2px 8px;
text-align: center;
background-color: $gray_dark;
@include border-radius(1.5em 0 1.5em 0);
@include linear-gradient(top, $gray_alternative, $gray_dark, darken($gray_dark,
5%));
color: $gray_light;
font-size: .85em;
font-style: italic;
}
img {
width: 144px;
max-width: 144px;
height: 120px;
max-height: 120px;
display: block;
border: 1px solid $gray_light;
@include border-radius(2px 2px);
padding: 5px 5px;
float: right;
}
p {
margin-top: 26px;
margin-bottom: 10px;
word-wrap: break-word;
}
}

.comments-form {
width: 92%;
display: block;
margin: auto;
min-height: 120px;
border: 1px solid $gray_light;
@include border-radius(2px 2px);
padding: 1em 1em;

input[type="text"],
input[type="email"]{
width: 66%;
height: 1.75em;
display: inline-block;
*float: left;
*display: block;
@include border-radius(1.5em 0 1.5em 0);
border: 1px solid $gray_light;
}
textarea{
width: 96%;
height: 122px;
@include border-radius(1.5em 0 1.5em 0);
border: 1px solid $gray_light;
}
.input {
margin-bottom: 1.25em;
}
input[type="submit"]{
@include border-radius(1.5em 0 1.5em 0);
border: 1px solid $gray_light;
padding: 4px 22px;
font-size: 1em;
color: $main-color;
background-color: inherit;
&:hover{

cursor: pointer;
@include transition(all .8s);
background-color: $white;
}
}
}
}

Luego de agregar este código en nuestro archivo “style.scss” falta una cosa muy importante que debemos poner en la parte de arriba y es lo siguiente:

section, header, footer {
width: $page_width;
position: relative;
display: block;
}

Básicamente este bloque de código lo que hará es agregar propiedades a los 3 elementos de la estructura semántica de HTML5 más similares en su diseño, con un ancho del 100% y un display en  estilo de bloque; estos elementos lograrán darle mejor forma a nuestra maqueta.

DISEÑO DEL FOOTER

Y por último pero no menos importante el elemento footer que es el pie de página de nuestro documento de HTML5. Código HTML:

</pre>
<footer>
<div class="copyright">
 Copyright © 2014 | Creado por: Michael Serrato - Correo electrónico: <a href="mailto:mikebsg01@gmail.com">mikebsg01@gmail.com</a> - Twitter: @mikebsg01 - Comunidades: <a title="El sitio web de la comunidad." href="http://www.html5facil.com/">HTML5 Facil</a> y <a title="Stream en vivo todos los Miércoles!" href="http://www.ninjacode.tv">Ninja Code Tv</a></div>
</footer>

IMPORTANTE: Esta parte del código fuente deberá colocarse justo después de la etiqueta section.

Código SASS:

footer {
min-height: 92px;
padding: 1em 1em;
vertical-align: bottom;
display: block;
width: 100%;
position: relative;
clear: both;
background-color: $gray_dark;
color: $gray_light;
margin-bottom: 0;
bottom: 0;
.copyright{
width: 96%;
margin-top: 22px;
margin-left: auto;
margin-right: auto;
margin-bottom: 22px;
text-align: center;
}
}

Diseño Final

Una vez concretados todos y cada uno de los elementos que conforman el diseño de este proyecto nos debería quedar así:

Captura de pantalla de 2014-01-29 19_37_42

Captura de pantalla de 2014-01-29 19_37_54

Si haz llegado hasta esta sección ¡Felicitaciones!, haz concretado la guía de maquetación con SASS y HTML5. El proyecto completo con todos los archivos puedes descargarlos en mi github personal.

Autor: Michael Serrato

comments powered by Disqus