OmbuShop Crea Tu Tienda Online

Artículos para el mes: julio, 2014

Atomic CSS en el BAFrontend Meetup

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

Lucas Mourelle —nuestro líder de diseño en OmbuShop & OmbuLabs— y Alejandro Vizio —director creativo de Aerolab— hablaron en la tercera edición de Buenos Aires Front-end Meetup.

Aquí les dejamos el video de ambas charlas. Arrancan en el minuto 11:40. Una es muy técnica: cómo generar código CSS fácil de mantener con OOCSS, Sass y Atomic CSS; la otra sobre Onboarding & Storytelling.

(Empieza en el minuto 11:40)

 

A continuación dejamos las slides de la charla sobre Atomic 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!

Convenciones para los atributos Class

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

¿Por qué buscar una convención para el nombramiento de clases? Llegar a un acuerdo para la creación de nombres de clase facilitará el trabajo en equipo y la lectura del código. Veremos algunos ejemplos de convenciones existentes.

En el universo de la programación tenemos algunas pocas convenciones en cuanto al nombre que aplicamos a constantes, variables, modelos, instancias y métodos. Si bien no es técnicamente necesario seguirlas, ayudan mucho a los artesanos del código fuente.

El tiempo demostró que vale la pena dejar de lado caprichos o gustos individuales y consensuar, entre todos, una opción estándar. De esta forma, podemos identificar si un objeto es una variable o una constante con sólo ver su nombres.

Ahora bien, ¿cuál es la situación actual en el universo front-end? ¿Qué pasa con las clases en los elementos del HTML y sus respectivos selectores desde CSS? No parece haber muchos profesionales siguiendo un único estándar extendido, pero las convenciones existen. Veamos…

Un camino intuitivo: método modular

Como sabemos, es conveniente evitar la creación de selectores largos en el archivo CSS, por lo que explicitar en el nombre de la clase la relación de parentezco puede ser una buena idea. Usaremos, entonces, las clases de forma inteligente, evitando usar selectores con descendencia siempre que se pueda.

Una posibilidad puede ser explicitar al parent y luego el child, encadenados por un guión. Explicitar los conjuntos de elementos con el patrón plural, singular, los modificadores como adjetivos luego del elemento (también separados por guión) y los estados de forma similar.

No estamos siendo técnicamente descriptivos de las relaciones entre elementos, pero el código es muy amigable para ser leído por humanos. Ejemplificamos aquí los casos con código:


/* Convención modular para clases de CSS */

/* Descendencia: */
.parent { }
.parent-child { }
/* e.g. */
.modal { }
.modal-header { }

/* Grupos de objetos: plural > singular */
.objects { }
.object { }

/* Modificadores: se aplican dos clases al mismo elemento */
.object.big { }
.object.small { }

/* Estado de objetos: se aplican con el verbo “is”, en inglés */
.object.is-open { }
.object.is-closed { }

/*
Basado en artículo:
http://thesassway.com/advanced/modular-css-naming-conventions
*/

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

Más información sobre el método modular en este artículo.

Un camino más complejo y descriptivo: BEM

BEM significa Block-Element-Modifier, e implica el uso de un formato específico y muy técnico para las clases de los objetos. Su formato unívoco le indica al desarrollador si se trata de un bloque (que contendrá elementos en su interior), un elemento o un modificador de algún elemento. Para separar bloques de sus respectivos elementos se utiliza la combinación de dos guiones bajos, y para indicar la existencia de un modificador se recurre a dos guiones medios.

Tanto el código HTML como los selectores de CSS se complejizan, pero tenemos ahora la seguridad de estar utilizando una forma unívoca de nombrar a los elementos en sus distintas situaciones.

Veremos cómo es esto, con casos reales:


/* Convención BEM para clases de CSS */

/* Blocks */
.block { }

/* Elements */
.block__element { }

/* Modifiers */
.block__element–modifier { }

/* Algunos ejemplos */
.modal { }
.modal__header { }
.modal__header–error { }
.modal__content { }
.modal__buttons__button–default { }
.modal–alert__content { }

/*
Basado en artículo:
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
*/

See the Pen Convención BEM para clases de CSS by Lucas Mourelle (@lucasmourelle) on CodePen.
0

Más información sobre BEM aquí.

Algunas de las críticas más fuertes a BEM es que genera un paisaje poco convencional en el código HTML y CSS, algo que puede dificultar un poco su lectura.

¡A probar y seguir experimentando en tu próxima tienda online!

 

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.

Desarrollo web al día

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

Los cambios en los estándares y las técnicas que utilizamos diariamente diseñadores y desarrolladores web frontend ocurren de forma vertiginosa. ¿Cómo estar al día con tanta información?

Además de relacionarse con colegas del ámbito local y seguir a referentes internacionales en twitter, una buena opción es visitar semanalmente los sitios de noticias de nuestro campo de acción, aquí algunas recomendaciones:

  • Open Web Platform Daily Digest
    Contenido sobre los estándares de la W3C: HTML, CSS, JavaScript, APIs y navegadores.
  • Web Design Weekly
    Gran fuente de excelentes artículos sobre diseño y desarrollo web front-end.
  • CSS Weekly
    Artículos y tutoriales sobre CSS, unas de nuestras tecnologías favoritas.
  • HTML5 Weekly
    Novedades relacionadas con el living standard HTML5.
  • Mozilla Hacks Weekly Articles
    Artículos y hacks en una gran web fundada por nuestros amigos de Mozilla.
  • Status Code
    Un newsletter semanal para programadores y desarrolladores.
  • Responsive Design Newsletter
    Artículos, links y tutoriales sobre diseño web responsive (RWD).
  • The Modern Web Observer
    ¿Quieres recibir novedades en tu casilla de email? Aquí la mejor opción.
  • Daily Nerd
    El nombre lo dice todo, links para nerds, diariamente.
  • JavaScript Weekly
    Otro email newsletter con novedades, esta vez sobre JavaScript específicamente.

Esperamos que aprovechen estos links y continúen aprendiendo y experimentando para la creación de más y mejores tiendas de eCommerce!