OmbuShop Crea Tu Tienda Online

Artículos con la etiqueta: ‘css’

SASS output styles

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Veremos para qué sirven y qué implican cada una de las opciones de output que provee la tecnología SASS: nested, compact, expanded y compressed.

Como sabemos, SASS es un preprocesador de código CSS; nos permite trabajar con un lenguaje que —si bien es parecido a CSS— agrega funcionalidades que el código de presentación estándar no provee. A la hora de realizar la compilación, SASS tiene cuatro posibilidades en cuanto a la forma en que compila el código CSS final. Si se está utilizando algún pre-procesador con interfaz gráfica de usuario, la elección suele ser sencilla. Caso contrario, se puede especificar desde el archivo config.rb con el parámetro output_style o desde la línea de comandos. Utilizaremos el siguiente código SASS como base:

.button { display: inline-block; padding: .2em .4em; background: #ddd; &:hover { background: #eee; } &:active { background: #bbb; } } .header { background: #6f0; padding: 20px; h1 { font-size: 2em; } } See the Pen wevKl by Lucas Mourelle (@lucasmourelle) on CodePen. 0

A continuación las diferencias entre las cuatro opciones:

:expanded

Tal vez sea la mejor opción para el entorno de desarrollo. El código CSS se encuentra prolijo, limpio y de fácil lectura, para poder revisar y leer el código generado. Como si un humano lo hubiera tipeado.

.button { display: inline-block; padding: .2em .4em; background: #ddd; } .button:hover { background: #eee; } .button:active { background: #bbb; } .header { background: #6f0; padding: 20px; } .header h1 { font-size: 2em; } See the Pen KlGkC by Lucas Mourelle (@lucasmourelle) on CodePen. 0

A esta opción podemos sumarle la posibilidad de incluir los line-comments, comentarios que indicarán a qué línea del archivo SASS corresponde cada selector. No es la mejor opción para producción, aunque tiene su utilidad en desarrollo.

:nested

Para los amantes de las opciones de nesting de SASS, esta opción de output de código permite continuar viendo las relaciones de nesting en el código CSS generado por el pre-procesador. En lo personal, no lo encuentro muy útil, pero sin duda tendrá sus adeptos.

.button { display: inline-block; padding: .2em .4em; background: #ddd; } .button:hover { background: #eee; } .button:active { background: #bbb; } .header { background: #6f0; padding: 20px; } .header h1 { font-size: 2em; } See the Pen esaqz by Lucas Mourelle (@lucasmourelle) on CodePen. 0

Esta opción es muy parecida a la expanded, salvo que mantiene el indentado del nesting de SASS.

:compact

Deja un selector por cada línea de código, ni más ni menos. Se trata de código compacto y liviano, pero todavía con alguna posibilidad de lectura e interpretación por parte de un ser humano.

.button { display: inline-block; padding: .2em .4em; background: #ddd; } .button:hover { background: #eee; } .button:active { background: #bbb; } .header { background: #6f0; padding: 20px; } .header h1 { font-size: 2em; } See the Pen HLyEd by Lucas Mourelle (@lucasmourelle) on CodePen. 0

Un buen balance entre optimización de peso y legibilidad.

:compressed

Por último, la opción comprimida es lo que llamaríamos normalmente código minificado. El código se vuelve incómodo y poco práctico para la lectura, pero el archivo es muy liviano. Desaparecen todos los caracteres de los cuales se puede prescindir.

.button{display:inline-block;padding:.2em .4em;background:#ddd}.button:hover{background:#eee}.button:active{background:#bbb}.header{background:#6f0;padding:20px}.header h1{font-size:2em} See the Pen yamDn by Lucas Mourelle (@lucasmourelle) on CodePen. 0

Esta última, sin dudas, es la idea para el entorno de producción. Tenemos, entonces, cuatro posibilidades para el código CSS compilado por el pre-procesador. Algunas están orientadas al trabajo en desarrollo, y otras para el deploy en producción. Esperamos que sigan aprendiendo desarrollo web front-end y realizando maravillosas tiendas con OmbuShop!

Tu propia grilla con CSS o SASS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Sí, sabemos que hay montones de grillas de CSS y SASS dando vueltas. Pero tal vez quieras hacer tu propia grilla para mantener el control de tu código o simplemente por tus ganas de experimentar.
¡Veremos cómo se hace!

Si las grillas pre-hechas como SusySingularity no son suficientes —o son demasiado—, entonces te ha llegado el momento de comprender cómo puede construirse una grilla a medida y hacerlo por tu cuenta!

A continuación mostramos un ejemplo muy versátil y con pocas líneas de código.

Los elementos fundamentales

Para hacer una grilla simple, sólo necesitamos dos elementos:

  • fila: hará las veces de contenedor para las columnas, le aplicaremos la clase row.
  • columna: lo más importante de una grilla, le aplicaremos la clase column.

La única responsabilidad del elemento row (fila, en inglés) será la de evitar que se mezclen las columnas. Definimos una fila y mantenemos bajo nuestro control qué columnas se ubican en cada nivel. Además, utilizaremos la técnica del before y el after para que el contenedor no colapse.

Por otra parte, indicaremos a las columnas la propiedad float para que estén una al lado de la otra, y padding de ambos lados para preservar las calles.

Tanto las columnas como las filas tendrán box-sizing: border-box; para que el padding esté incluido en el ancho de la columna.

Modificadores para las columnas

Prepararemos columnas con los siguientes anchos: medio (half), tercio (third) y cuarto (quarter). Esto es muy sencillo utilizando porcentajes. También tendremos una clase para una columna que ocupe el ancho completo, lo haremos explícitamente para ser más descriptivos.

Por último, agregaremos dos clases más, que servirán como modificadores para forzar a una columna a ser la última, o la primera de la fila. Para esto utilizaremos la propiedad de CSS llamada clear.

Pantallas pequeñas

Para que las columnas no queden muy angostas en pantallas pequeñas, incluiremos un media query que nos permita la transformación a una única columna.

El código completo, con CSS

Los invitamos a estudiar el código completo con atención, a continuación.


.row, .column {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

.row {
margin-left: auto;
margin-right: auto;
max-width: 1200px; /* opcional */
}
.row:before {
content: ” “;
display: table;
}
.row:after {
content: ” “;
display: table;
clear: both;
}

.column {
position: relative;
min-height: 1px;
padding-left: 10px;
padding-right: 10px;
float: left;
}
.column.half {
width: 50%;
}
.column.third {
width: 33.3333333333%;
}
.column.quarter {
width: 25%;
}
.column.full {
width: 100%;
float: none;
clear: both;
}
.column.force-first {
clear: left;
}
.column.force-last {
clear: right;
}

@media screen and (max-width: 768px) {
.column, .column.half, .column.third, .column.quarter {
width: 100%;
float: none;
clear: both;
}
}

/***************************************/
/* Cosmética, no es parte de la grilla */

body {
color: #444;
font-family: sans-serif;
line-height: 1.2;
padding: 2em;
}
.row {
margin-bottom: 2em;
}
h1 {
font-weight: bold;
padding-bottom: .5em;
background: #ffffdf;
}
p {
background: #ffffdf;
}

See the Pen CSS Simple Grid (spanish) by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Al final del código hay algunos detalles cosméticos agregados, están para facilitar la visualización del resultado final y no son parte necesaria para armar la grilla.

Ver resultado en pantalla completa para ver el correcto funcionamiento responsive de la grilla!

El código completo, con SASS

Para quienes prefieran utilizar SASS (como yo), adjunto aquí una opción posible. Se podría compactar aún más el código utilizando mixins, placeholders y cálculos matemáticos, pero lo mantenemos como sigue para mantener la simpleza.


$gutter: 20px;
$max-width: 1200px;
$breakpoint_1: 768px;

.row, .column {
@include box-sizing(border-box);
}

.row {
margin-left: auto;
margin-right: auto;
max-width: $max-width; /* opcional */
&:before {
content: ” “;
display: table;
}
&:after {
content: ” “;
display: table;
clear: both;
}
}

.column {
position: relative;
min-height: 1px;
padding-left: $gutter/2;
padding-right: $gutter/2;
float: left;
&.half {
width: 50%;
}
&.third {
width: 33.3333333333%;
}
&.quarter {
width: 25%;
}
&.full {
width: 100%;
float: none;
clear: both;
}
&.force-first {
clear: left;
}
&.force-last {
clear: right;
}
}

.column, .column.half, .column.third, .column.quarter {
@media screen and (max-width: $breakpoint_1) {
width: 100%;
float: none;
clear: both;
}
}

/***************************************/
/* Cosmética, no es parte de la grilla */

body {
color: #444;
font-family: sans-serif;
line-height: 1.2;
padding: 2em;
}
.row {
margin-bottom: 2em;
}
h1 {
font-weight: bold;
padding-bottom: .5em;
background: #ffffdf;
}
p {
background: #ffffdf;
}

See the Pen SASS Simple Grid (spanish) by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Ver resultado en pantalla completa para ver el correcto funcionamiento responsive de la grilla!

¡Esperamos que puedan probar esta grilla pronto!

Click the following link for an english, geeky and more complex version of this code.

Diseño web con Sketch app

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

En la era del prototipado iterativo y el diseño web responsive, las aplicaciones de diseño de Adobe ya no satisfacen las necesidades del diseñador web y de interfaces. Sketch, una aplicación independiente, gana terreno!

El nuevo niño mimado es Sketch: una aplicación realizada por una compañía llamada Bohemian Coding conformada por siete personas! Esta aplicación se está ganando el corazón de los diseñadores, a continuación veremos por qué!

Sketch app icon

¿Quiénes lo están utilizando?

En principio, cada vez más diseñadores web y de UI están utilizando Sketch. Se trata de usuarios que solían trabajar con Photoshop, Illustrator o el discontinuado Fireworks. Lo eligen por la facilidad y originalidad de su interfaz, pero sobre todo debido a su alta productividad en el flujo de trabajo Web.

La aplicación fue pensada desde las necesidades de diseñadores de sitios web y UI. Se nota claramente la atención al detalle y la investigación que el equipo de desarrollo ha hecho sobre nuestras necesidades.

Features sobresalientes

Listaremos a continuación algunos de los features que hacen de este soft el favorito de los diseñadores.

Interfaz

Sketch interface

Interfaz Sketch

La gente de Bohemian Coding no pretende hacer una reedición de las interfaces a las que Adobe nos tiene acostumbrados. Efectivamente plantean un paradigma diferente. No tenemos numerosísimos paneles de herramientas, sino tres zonas bien diferenciadas que permiten trabajar de forma cómoda y rápida: herramientas y acciones rápidas en la parte de arriba, layers a la izquierda y propiedades del objeto seleccionado a la derecha.

Acciones que necesitamos en todo momento como enviar un elemento hacia atrás o adelante, no se encuentran en las profundidades de un submenú, sino claramente a la vista, en la barra de herramientas superior junto con el zoom, la opción para agrupar elementos y otras acciones rápidas.

Vectores

vectors

Vectores

Sketch es básicmante un programa de dibujo vectorial. Todas sus herramientas son vectoriales e independientes de la resolución. Habiendo dicho esto, las medidas se manejan en pixels (para ser consecuentes con las unidades de medida utilizadas en CSS) y existe la posibilidad de ver un preview del diseño de manera pixelar.

Texto nativo

El motor de renderizado de texto es nativo, por lo que se verá exactamente igual que como lo veremos luego en el navegador o en la aplicación de Mac OS o iOS. Esto no es un detalle menor: el motor de renderizado de texto de Adobe suele ser muy distinto al generado por el sistema operativo en navegadores y apps, lo que complica las cosas a la hora de decidir familias, variables y cuerpos tipográficos.

Inspector

Sketch inspector

Sketch inspector

El panel de la derecha, llamado Inspector, cambia su contenido de acuerdo al elemento que esté seleccionado. Es una manera inteligente de optimizar el espacio en pantalla. Todas las propiedades de un objeto: relleno, contorno, sombras, estilos y mucho más, se controlan desde aquí. Todo está a la mano del usuario.

Símbolos

El concepto de símbolos, ya conocido por todos, nos permite repetir elementos de forma tal que se comporten como instancias de un único objeto. Al modificar el símbolo, se verán modificadas todas sus instancias.

Recorte de imágenes

En Sketch no es necesario recortar manualmente cada uno de los sectores que luego necesitaremos como imágenes sueltas para nuestro diseño web o de interfaz. El programa hace el trabajo por nosotros! Podemos hacer que exporte automáticamente cualquier objeto o grupo de nuestro documento, incluso con transparencia, pudiendo indicar qué capas deberán estar incluidas en dicha imagen.

Copiar estilos como código CSS

css-attributes

CSS Attributes

Por último, un feature que será bien apreciado por la comunidad web: podemos copiar el estilo de un elemento (colores, degradés, sombras) como código CSS, listo para ser pegado en nuestra hoja de estilos!

¡Esperamos que prueben muy pronto esta maravillosa aplicación!

CSS Atómico con SASS

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

¿Cómo mejorar la organización de código y archivos CSS siguiendo el paradigma orientado a objetos?

Hablamos en posts anteriores acerca de CSS Orientado a Objetos  —una manera de organizar el código CSS— y de pre-procesadores, haciendo especial hincapié en SASS —una tecnología que extiende las posibilidades del CSS estándar—.

Además de una organización del código que entiende a los elementos de diseño como objetos, la posibilidad de fragmentar el código en diferentes archivos nos presenta un nuevo desafío. ¿Con qué criterio hacer esta división? ¿Cómo optimizar los tiempos de mantenimiento a futuro?

Diseño Atómico

En su artículo Atomic Design, Brad Frost nos propone una manera posible de entender el diseño de un sitio web.

La idea se basa en comprender al diseño web como la confección de sistemas de diseño, antes que páginas diseñadas. Brad Frost entiende a cada página web como un conjunto de organismos que interactúan entre sí, a su vez conformados por unidades más pequeñas.

Guiado por esta mirada particular, decide utilizar la metáfora de la química molecular para la organización de organismos, aprovechando la posibilidad de SASS de separar el código en distintos archivos. Plantea 5 carpetas organizadoras:

  1. Átomos
  2. Moléculas
  3. Organismos
  4. Plantillas
  5. Páginas

Inspirado en esta idea, Robin Rendle realiza algunas modificaciones sobre este modelo, continuando la misma lógica.

Robin realiza una división distinta, acorde a su flujo de trabajo y expone la siguiente variación:

  1. Utilidades
  2. Quarks
  3. Átomos
  4. Moléculas

Como verán, la idea es la misma, con algunos cambios de acuerdo a su gusto y mecánica de trabajo.

OmbuShop’s way

También en OmbuShop estuvimos trabajando con una visión orientada a objetos para el manejo de CSS, y comenzamos a utilizar un ordenamiento atómico propio para nuestras hojas de estilo SASS.

Nuestra síntesis incorpora elementos de ambas variaciones, a saber:

  1. Utilidades (utilities)
  2. Quarks
  3. Átomos (atoms)
  4. Moléculas (molecules)
  5. Páginas (pages)
  6. Vendor

¿Qué incluimos en cada una?

A continuación, una breve descripción de qué fragmentos del diseño se corresponden por cada una.

Por lo general, escribimos en inglés lo relacionado con código, por lo que listaré las carpetas in english. Asímismo, incluimos números al comienzo del nombre de cada carpeta, de forma que siempre se mantengan ordenadas de menor a mayor complejidad.

1. utilities

En esta carpeta incluiremos código genérico que será utilizado por los demás archivos. Definición de variables, mixins, el código básico para el body, grillas para el layout, etc.

2. quarks

Aquí estará el código que da estilo a unidades mínimas: cuestiones tipográficas como párrafos, títulos, listas, links, etc.

Por lo general los selectores en este nivel se refieren a etiquetas de HTML de forma genérica.

3. atoms

En este nivel los elementos diseñados empiezan a ganar complejidad.

Se trata de estilar elementos pequeños pero específicos: botones, formularios, elementos tipográficos más complejos, etc.

4. molecules

Las moléculas son elementos de mayor complejidad, conformados por unidades más pequeñas.

Algunos ejemplos pueden ser un cuadro de diálogo, una botonera de navegación o el footer de un sitio.

En este caso, cada archivo podría tener varios elementos (que son los constitutivos de la molécula total. Aquí es imprescindible hacer uso de la capacidad de nesting de SASS, si queremos mantener ese diseño encapsulado sin afectar a terceros.

5. pages

En este nivel se puede incluir código particular que afecta y varía el diseño de una página a otra de un sitio.

Cuando se trata de una modificación transversal, que incluso puede afectar a las moléculas anteriores.

Un cambio de paleta cromática de acuerdo a la sección del sitio, por ejemplo.

6. vendor

Siempre es útil reservar una carpeta con archivos SASS y CSS que sean de terceros. Por ejemplo librerías que han sido descargadas, frameworks, grillas, etc.

Si utilizas bootstrap, por ejemplo, puedes crear una carpeta bootstrap dentro de vendor.

Moraleja

Conviene tener un archivo SASS por fuera de estas carpetas, que se encargue de importar cada uno de los archivos que está en su interior, algo así:


// Vendor
@import "vendor/bootstrap/bootstrap";

// 1-UTILITIES
@import "1-utilities/variables";
@import "1-utilities/basic";
@import "1-utilities/grid";

// 2-QUARKS
@import "2-quarks/typography";
@import "2-quarks/links";
@import "2-quarks/icons";

// 3-ATOMS
@import "3-atoms/buttons";
@import "3-atoms/forms";

// 4-MOLECULES
@import "4-molecules/header";
@import "4-molecules/footer";
@import "4-molecules/floors";
@import "4-molecules/quotes";
@import "4-molecules/popups";

// 5-PAGES
@import "5-pages/contact_page";

See the Pen DEquG by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Dominado el lenguaje CSS para el estilado de sitios web y habiendo comenzado a utilizar pre-procesadores, la preocupación principal de todo frontender profesional actual es cómo organizar el código para que sea future-proof y de fácil mantenimiento.

¡A darle átomos!