Crear una vCard con Sass y Compass

Diseño Web

Teniendo que crear un diseño de una web para mi hermana me he puesto a buscar ideas por la web (un gran defecto que tengo porque miro y miro y miro y al final pierdo un huevo de tiempo en hacerlo lo mejor posible pero bueno)

La verdad que al final los favores dan más problemas que otra cosa que a mi me gusta la programación jaja pero bueno nunca viene mal aprender cosas nuevas así que me he propuesto aprender un poco de estos lenguajes raros para hacer css :D

Aquí aprovecharé para mostrar un tutorial que he encontrado por ahí de como crear una vCard para nuestra página web que he visto por el blog de hongkiat

Para no perder tiempo escribiendo (más bien copiando cosas de otros sitios) sobre sass y compass os dejaré un par de enlaces de referencia:

Presentación de Sass y Compass

Curso de Sass y Compass

Sass para aplicar en proyectos CSS y HTML5

Sass

Compass

 

Yo creo con los tres primeros enlaces queda más que comprendido lo que es esto de Sass y Compass. Los otros dos son enlaces de sus páginas en inglés.

 

Como bien pone en el artículo original la planificación en todo proyecto (no solo en sass) es primordial (algo que por cierto yo no suelo hacer y luego la acabo liando a ver cuando aprendo …)

Lo que primero debemos hacer es un wireframe de lo que queremos, en este caso será algo así:

vCard Wireframe

 

 

En este enlace podéis ver 10 herramientas gratuitas para realizar wireframes online.

A simple vista podemos ver que tenemos secciones claramente identificadas.

  • Una sección con los datos personales y una foto
  • Una sección de iconos sociales

 

Preparando el Entorno

Lo primero que tenemos que hacer es tener instalado sass y compass para comprobar que realmente lo tenemos instalado podemos escribir en el terminal sass -v y compass -v.

Para instalarlo podéis verlo en los enlaces anteriormente mencionados pero creo recordar que por lo menos en el mac con poner simplemente

gem install sass
gem install compass

es más que suficiente.

Necesitaremos tambien iconos sociales para colocar en la tarjeta y podremos descargarlos de Social Media Icons y un tipo de letra para los iconos que preceden a los detalles en la biografía de ModernPictograms

Finalmente dentro del directorio de nuestro proyecto inicializamos compass con

compass init

para crear los directorios de trabajo y el archivo config.rb

y con

compass watch

haremos que los css se generen al vuelo cada vez que modifiquemos los archivos sass.

Esqueleto HTML

Muy sencillo y no creo que haya nada necesario de mencionar. Bueno solamente el nombre de las clases usada para la lista de iconos sociales, que se llamará así por un motivo que veremos más adelante. Sólo decir que la carpeta donde se guardarán estos iconos se llamará “social” y el nombre de los iconos será el que va después del guión.

 Configuración de Compass

En el fichero config.rb pondremos

Lo que hará que nuestros ficheros css tengan un estilo expandido (el normal fácilmente leíble), que la ruta de los recursos sea relativa y que no haya comentarios en el css final.

Importando archivos

Como usaremos compass deberemos importarlo

Y como preferencia personal del autor del artículo, resetea los estilos para evitar el renderizado propio de cada navegador y así poder tener más control de nuestro css y que se vea lo más parecido posible en cada navegador (ya, el considerar el ie como navegador entra dentro de las opiniones personales de cada persona :D Lo que está claro es que sigue habiendo mucha gente que no sabe mucho de informática y lo sigue usando)

Podriamos usar un módulo del compass para ello con

aunque el autor prefiere usar Normalize que tiene un formato para Sass/Scss y se puede descargar desde aquí y guardandolo en la carpeta sass de nuestro proyecto para posteriormente importarlo (Recordamos que lo guardamos con _ delante “_normalize.scss” porque todos los archivos con el guión bajo delante no se convierten a css)

Variables

Crearemos unas pocas variables para almacenar valores que posteriormente podríamos cambiar de forma rápida y sencilla y modificar así un poco el diseño de la tarjeta de visita.

Las dos primeras serán para definir el color base:

Las otras dos serán el ancho de la tarjeta y el digamos ancho que daremos a unas columnas de separación que usa el autor. Lo usará en temas de padding y margin y relacionados.

Columnas vCard

Para incluir un pequeño borde a la imagen de la foto usamos un helper de compass que nos ayuda a detectar el ancho de la foto

Selector Inheritance

Literalmente es herencia de selectores, no es más que definiremos unos estilos que vamos a repetir más adelante y para no repetir código (aunque en este caso es de solo una linea) los colocaremos los primeros y luego los heredamos mediante la directiva @extends.

Estilos

Ya tenemos todo configurado por lo que empezaremos con los estilos en sí.

Configuramos el ancho y el color de fondo del documento

vCard

Configuramos el estilo del contenedor vCard

Entendiendo lo minimo de sass como yo, me doy cuenta lo claro y conciso que está  el código escrito en sass (bueno realmente en scss)

Para el ancho usamos la variable $width que hemos definido anteriormente. Para el color de fondo usaremos una variación que el color de fondo del documento y para el border la variable $dark que también es una variación del color base. Para más información de como trabajar con el color podemos leer la documentación.

También usamos un mixin de compass para darle bordes redondeados a la capa. Lo que en css se traducirá en las lineas necesarias para tal menester en css3 y para cada navegador.  (ya nos podemos olvidar de los -moz- -webkit- -o- -ms-…)

Biografia

Para la primera sección usamos:

 

El ancho de la columna de los detalles de la biografía será fácil indicarlo sin tener que hacer cálculo numérico. Una simple fórmula y listo:

$width – (($space * 3) + $img);

Y al no tener valores absolutos esto se modificará automaticamente cuando modifiquemos las variables que creamos anteriormente.

vCard Design

 

Social

El código será

Para los iconos usaremos la técnica de los sprite. Que es tener una imagen con las imágenes que vayamos a usar. Y cargar la imagen por estilo usando esta imagen como fondo y moviéndola con background-position.

Con compass esto es fácil.

Metemos las imágenes en un directorio llamado social (lás imagenes se llamarán igual que los estilos que indicamos en la lista sin el prefijo “social-” es decir, facebook, google, twitter y dribbble,  e incluimos la línea:

Esto nos creara un sprite con las 4 imágenes (siempre y cuando tengan extensión .png las cuatro imágenes)

Para crear cuatro estilos llamados {nombrecarpeta}-{nombrearchivo} por eso usamos las clases social-facebook, social-twitter…

Y wala ya tenemos nuestra tarjeta de visita.

vCard

Ficheros del proyecto

 

 

Fuente: Sass Tutorial: Building An Online VCard With Sass & Compass

Deja un comentario

  • (will not be published)


+ 2 = 10