Plugins para Sublime – Gestiona los ToDo con PlainTasks

Sublime text es el editor de texto preferido en Babel Creativa. Podemos sacarle un poquito mas de partido. Existen un montón de plugins cuyo objetivo es hacernos la vida más fácil, colorear código, autocompletar… y también, por ejemplo, tener un listado de ToDo’s que podemos integrar con nuestro workflow para completar el checklist de SEO o accesibilidad.

Para instalarlo sólo tenemos que tener instalado previamente el Package Control, que se encarga de gestionar los plugins. Seguimos dos pasos muy sencillos:

  1. Abrimos la consola de sublime con View > Show console y pegamos el código que podemos encontrar aquí, según nuestra versión de sublime: https://packagecontrol.io/installation#st3
  2. Una vez instalado con pulsar ctrl + shift + P, seleccionamos “install package” y buscamos por el nombre el plugin que queramos instalar.

 

PlainTasks

Lo interesante de PlainTasks es que podemos organizar una lista de ToDo’s interactiva dentro de nuestro propio proyecto en sublime y poder gestionarla desde el mismo programa. Éste vídeo lo explica mejor:

Sublime Plugin: Plain tasks from Smashing Editorial on Vimeo.

Lo único que tenemos que hacer es crear un nuevo archivo con extensión .todo y ya tomará el formato de nuestra nueva lista. Para crear nuevos items es tan sencillo como ctrl + i, los títulos se interpretarán como cualquier línea que acabe en dos puntos (:) – para una guía completa y tutorial para crear y gestionar la lista podemos consultar preferences > package settings > Plaintasks > tutorial

 

Crear un proyecto con IONIC

¿Qué es ionic?

  • Framework open source basado en HTML5, CSS y JS para el desarrollo de aplicaciones híbridas.
  • Está construida con Sass y optimizado con AngularJS.
  • Trabaja bajo Apache Cordova.

¿Por qué usar ionic?

  •  Es sencillo, limpio y funcional.
  •  Está construido para ser rápido gracias a las aceleraciones de transiciones por hardware, la no utilización de jQuery y la mínima manipulación del DOM, además de su arquitectura sólida gracias a AngularJS.
  •  Está basado en los kit de desarrollo de software nativos más populares, por lo que si ya se ha trabajado con aplicaciones nativas, será fácil de entender.
  •  Cuenta con un potente CLI con el que se puede crear, probar, construir o compilar fácilmente las aplicaciones desarrolladas.

Instalar Ionic:

Para poder instalar Ionic necesitamos NPM (node package manager), gestor de paquetes de nodeJS que permite instalar librerías y enlazarlas o descargar programas de js.

INSTALACIÓN DE NODEJS:

  1.  Ir al sitio oficial : https://nodejs.org/en/
  2.  Descargar la versión estable: en este caso V.4.4.4 LTS
  3.  Seguir los pasos del instalador. En el caso de windows, se descarga el instalador, una archivo con extensión msi.

Guía de instalción en iOS:
https://changelog.com/install-node-js-with-homebrew-on-os-x/

Una vez instalado, ejecutaremos en la consola:

Windows:

$ npm i -g cordova ionic

iOs:

$ sudo npm install -g cordova

Con este comando instalaremos Ionic y Apache Cordova, componentes necesarios para comenzar.

Para empezar con la app, ionic ofrece tres esqueletos básicos sobre los que trabajar:

– Blank page: $ionic start myApp blank
– Menú inferior de navegación por tabs: $ionic start myApp tabs
– Página con sidebar menu: $ionic start myApp sidemenu

(myApp -> nombre que tendrá la aplicación. )

 

initialPages

Cuando vamos a ejecutar cualquier comando, tenemos que ir siempre a la carpeta directorio donde queremos que se realice la acción, en este caso nuestra App. Para ir a cualquier carpeta hay que ejecutar en la consola cd + ‘ruta’, por lo que en este caso, para crear la aplicación ejecutaremos dos comandos:

 cd 'ruta carpeta directorio'
 ionic start BBC tabs

Tras finalizar la instalación de nuestra app, podremos ejecutarla para ver el resultado desde la terminal ejecutando:

 cd 'directorio de mi App'

(hay que tener en cuenta que tras la instalación estaremos en la carpeta contenedora del proyecto, por lo tanto, tendremos que entrar dentro de la carpeta myApp, en este caso BBC)

 $ionic serve --lab

(se levantará el navegador con simulación iOS y android) / $ionic serve (levanta el navegador con la aplicación, sin simulación)

firstUp

Para comprobar que todo está correcto, en el directorio de la App, encontraremos una nueva estructura de carpetas:

estructura de carpetas

BEMIT – Agregando funcionalidad a BEM

La nomenclatura BEM (Block, Element, Modifier) ofrece una manera de estructurar nuestro HTML de modo sencillo y claro:
Block (bloque) (Bloque: user)
Element (elemento) (Elemento dentro de bloque: user_ _bio)
Modifier (modificador) (Modificador del elemento: user_ _bio- -hightlighted)

Sólo viendo el código podemos establecer relaciones entre los elementos y estructurar mejor nuestro CSS.

Intentando mejorar la ya de por si útil BEM, Harry Roberts propone incluir el concepto de jerarquías de ITCSS (Inverted Triangle CSS). Las jerarquías ITCSS se aplican de mayor a menor especificidad en el DOM.

Sumaría a BEM + ITCSS = BEMIT.

HTML sin nomenclatura BEM

HTML con nomenclatura BEM

HTML con nomenclatura BEMIT

No se añade ningún elemento nuevo. Sigue existiendo sólo Bloques, Elementos o Modificadores, pero se añaden capas de significado:

c- : para Componentes
Es algo concreto, una parte de UI específica. Cambios en ellos suponen una modificación sólo en ese contexto. Modificarlos es seguro.

.c-modal {}
  .c-modal__title {}
.c-modal--gallery {}

o- : para Objetos
Puede utilizarse en diferentes contextos. Modificarlos puede suponer cambios en muchos sitios, no relacionados.

.o-layout {}
  .o-layout__item {}
.o-layout--fixed {}

u- : para Utilidades (Utilities).
Es una clase dada con un rol específico. No está ligada a ningún componente UI específicamente y por tanto puede ser reutilizada. Usada por librerías y metodologías como SUIT.

.u-clearfix {}

is- / has- : para Estados
El elemento tiene un estilo concreto debido a un estado o condición. Proviene de SMACSS.

.is-close {}
.has-dropdown {}

js- : para JS
Los elementos del DOM tienen una actuación sobre ellos, creada por JavaScript.

.js-modal {}

t- : para Temas
La apariencia del elemento se debe o se ve afectado a que está incorporado dentro de un Tema (theme).

.t-dark{}

s-: para un nuevo contexto (Scope).
Es similar a la usada con t-, pero no restringida a la mera apariencia.

.s-cms-content {}

qa- : para el equipo QA o testing.
Es una clase que se da para recalcar que se está haciendo una acción sobre el HMTL o los elementos del DOM, sin ninguna relación con el CSS.

.qa-error-login {}

_: para Hacks.
Lo ideal es su uso solo de manera temporal.

._c-footer-mobile {}

Enlaces de interés:

BEMIT
http://csswizardry.com/2015/08/bemit-taking-the-bem-naming-convention-a-step-further/

NAMESPACES (con más ejemplos sobre cómo llamar a las clases)
http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/

Flexbox: css3 layout

Flexbox es un nuevo layout de CSS3. Se ha creado para mejorar la alineación, dirección y orden de los elementos incluso cuando tienen un tamaño variable o indefinido. La principal característica del contenedor flex es su capacidad de modificar la anchura y altura de sus hijos para llenar el espacio disponible de la mejor manera posible en cada resolución de pantalla.

El algoritmo de flexbox está basado en direccionalidad a diferencia de block o inline, que están basados en horizontalidad y verticalidad.

Voy a utilizar de referencia el W3C y un artículo de scotch.io

Podemos revisar la compatibilidad con navegadores con CanIUse

 

Lo básico

Modelo flexbox. El layout flex está constituído por un contenedor padre llamado flex container y sus hijos inmediatos, llamados flex items. Podemos ver el resto de elementos en este gráfico:

CSS3-Flexbox-Model

 

Uso

Para preparar un contenedor para que ejerza como flex container tenemos que declarar el display: flex; Automáticamente todos sus hijos se convierten en flex items. Un flexbox item puede ser a su vez un flex container si así lo identificamos, por lo que se pueden anidar infinitamente.

Propiedades del contenedor

flex-direction

Esta propiedad especifica como los flex items se colocan en el flex container, definiendo el eje principal.
valores:

  • row (default)
  • row-reverse
  • column
  • column-reverse
flexbox-flex-direction-row

flex-direction: row;

flexbox-flex-direction-row-reverse

flex-direction: row-reverse;

flexbox-flex-direction-column

flex-direction: column;

flexbox-flex-direction-column-reverse

flex-direction: column-reverse;

flex-wrap

El wrap define si queremos que el contenido se mantenga en una sola linea o si fluya en varias.
valores:

  • wrap
  • nowrap (default)
  • wrap-reverse
flexbox-flex-wrap-nowrap

flex-wrap: nowrap;

flexbox-flex-wrap-wrap

flex-wrap: wrap;

flexbox-flex-wrap-wrap-reverse

flex-wrap: wrap-reverse;

flex-flow

Unifica flex-direction y flex-wrap en una sola propiedad. Toma los mismos valores de estas propiedades por separado. Primero se define el flex-direction y luego el flex-wrap. Se recomienda que se utilice este método mejor que declarar los otros dos por separado.

justify-content

Alinea los flex items a lo largo del eje principal del flex container. Ayuda a distribuir el espacio libre sobrante en los casos en los que los elementos de una linea son fijos o si son flexibles pero han alcanzado su limite máximo.

  • flex-start (default)
  • flex-end
  • center
  • space-between
  • space-around
flexbox-justify-content-flex-start

justify-content: flex-start;

flexbox-justify-content-flex-end

justify-content: flex-end;

flexbox-justify-content-center

justify-content: center;

flexbox-justify-content-space-around

justify-content: space-around;

flexbox-justify-content-space-between

justify-content: space-between;

flex-align

Funciona para alinear elementos de la misma manera en que lo hace justify-content, pero esta vez para el eje secundario.

  • stretch (default)
  • flex-start
  • flex-end
  • flex-container
  • baseline
flexbox-align-items-stretch

align-items: stretch;

flexbox-align-items-flex-start

align-items: flex-start;

flexbox-align-items-flex-end

align-items: flex-end;

flexbox-align-items-center

align-items: center;

flexbox-align-items-baseline

align-items: baseline;

align-content

Alinea las filas interiores del flex-container (no tendrá efecto si solo tenemos una) de manera parecida a como actúa justify-content sobre los flex items.

  • stretch (default)
  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
flexbox-align-content-stretch

align-content: stretch;

flexbox-align-content-space-between

align-content: space-between;

flexbox-align-content-space-around

align-content: space-around;

flexbox-align-content-flex-start

align-content: flex-start;

flexbox-align-content-flex-end

align-content: flex-end;

flexbox-align-content-center

align-content: center;

Propiedades de los items

Order

Define el orden en el que aparecen los flex items. Por ejemplo utilizaremos order: -1; cuando queramos asegurarnos que ese item aparece el primero. Se utilizan numerales, sin unidades. Además, cuando varios items comparten numeral, el orden de aparición será el del html.
Nota sobre accesibilidad. Hay que tener en cuenta que la reordenación solo va a tener efecto a nivel estético, y que por tanto otras maneras de leer nuestro código van a interpretar el orden original del html. Es importante tenerlo en cuenta para que no afecte a la legibilidad de la página y su accesibilidad.

flexbox-order

flex-grow

Define el factor de crecimiento. En concreto cuánto crecerá en relación con el resto de sus hermanos, cuando haya espacio disponible.

flexbox-flex-grow-1

Cuando los numerales coinciden creceran de igual manera.

flexbox-flex-grow-2

El segundo elemento crece tres veces mas con respecto al resto de elementos con el espacio positivo que se va generando en el contenedor.

flex-shrink

Lo opuesto a flex-grow. Cuánto se encojerá en relación con el resto de items cuando el espacio empiece a faltar. No se pueden usar números negativos.  Por defecto todos los elementos se encojeran de manera solidaria, pero si utilizamos el flex-shrink: 0; ese elemento mantendrá su tamaño original.

flexbox-flex-shrink

 

flex-basis

Utiliza los mismos valores que width y height (en función de si estamos en row o en column)  y especifica el tamaño inicial de los flex item, antes de que el espacio libre se distribuya. Al reducir a una variable el “ancho” en función de la orientación de nuestro display, no hace falta cambiarlo si decidimos sustituir columna por fila.

flexbox-flex-basis

 

flex

Sería la propiedad que aglutina flex-grow, flex-shrink y flex-basis, por ese orden.

Además de todas las combinaciones posibles con esos valores, tendríamos los equivalentes a auto y a none, además del valor default:

flex: 0 1 auto; (default)

flex: 1 1 auto; (auto)

flex: 0 0 auto; (none)

align-self

sobreescribe el efecto de align-items para el elemento al que estemos apuntando. Toma sus mismos valores. El “auto” como valor por defecto anula el align-self para que herede el del padre; Si no estuviera definido, su valor sería como el de stretch.

  • stretch
  • auto (default)
  • flex-start
  • flex-end
  • center
  • baseline

flexbox-align-self

 

Info interesante

Elementos colapsados

Con la orden visibility: collapse; se convierte en un flex item colapsado, el elemento sale del flujo, ya no existe. Pero deja un hueco de su presencia. Se recomienda su uso sobre todo cuando se colpase y abra de manera dinámica, para evitar bailes en el renderizado. Si lo que se pretende es ocultar el elemento completamente se recomienda el uso de display: none;

float, clear y vertical-align no tiene ningún efecto.

No resultan en ningún tipo de efecto sobre un elemento flex, no lo saca del flujo ni lo altera de ninguna manera.

 

…Y para ampliar información

Tutoriales

Codrops – La información es muy parecida a la de este artículo, pero además tenemos pequeños playgrounds donde trastear con cada propiedad.

La rana – Una manera divertida de familiarizarnos con las diferentes propiedades de flexbox.

Bugs de flexbox

Flexbugs, comunidad donde se recopilan y resuelven los bugs conocidos de flexbox.

Ejemplos

Solved by flexbox – Ideas de uso y aprovechamiento de flexbox.

 

– Muchas gracias a Sandra por recopilar gran parte de este material.

ITCSS – Primer paso hacia BEMIT

Simplificando mucho y a modo de corta introducción, un par de conceptos útiles para entender este post:
– BEM (Block, Element, Modifier): es una nomenclatura más estructurada del HTML y por tanto, del CSS.
– ITCSS (Inverted Triangle CSS): es una manera de organizar las CSS en función de su especificidad.
– BEMIT es la combinación de la nomenclatura BEM con la jerarquía de ITCSS.

BEM nos suena ¿cierto? No voy a profundizar en ello aquí. Solo diré que partimos de BEM para llegar a  BEMIT y que por el camino, nos conviene entender ITCSS. Pero ¿Qué es ITCSS?

ITCSS – Inverted Triangle CSS (Triángulo invertido CSS)

itcss

Ha sido desarrollado por Harry Roberts, siendo compatible con la nomenclatura BEM (y con casi cualquiera que estés usando a día de hoy en tus proyectos).

En su conferencia “Managing CSS Projects with ITCSS” explicó largo y tendido en que consiste, y os hago un breve resumen a continuación:

ITCSS es una manera de concebir el trabajo con CSS y HTML y organizarlo de una manera más óptima. No es una librería, no es una regla. Utiliza una jerarquía basada en el grado de especificidad del CSS, de menor concreción a mayor, creando un triángulo invertido. Arriba los elementos generales, en la última capa, los concretos, específicos.

ITCSS surge por la necesidad de:
– Desarrollar de una manera sana. Que nos permita escalar fácilmente el proyecto.
– Controlar y ‘domar’ la CSS y su cascada de herencias.
– Utilizar lo antiguo y lo nuevo, con un orden coherente.
– Reducir la redundancia.
– Acabar con las guerras de especificidad.

Ofrece:
– Una arquitectura escalable y limpia
– Es un meta framework: un framework para otros frameworks.
– Es muy simple.
– Es independiente de los preprocesadores. Lo puedes usar trabajando con lo que trabajes.

Si hiciésemos un estudio de Especificidad (‘Specificity Graph’) de la hoja de estilos de un proyecto cualquiera (especialmente si es de gran envergadura) nos encontraríamos algo parecido a la gráfica de la izquierda. Muchos picos asociados a alta concreción en nuestra CSS, seguido inmediatamente de un estilo mucho más general.

picos

Estos picos pueden darse por utilizar ID, !important, selectores anidados… Se salta continuamente de una regla específica, a una regla general, creando picos y valles de especificidad. Lo que provoca que las llamadas en nuestra CSS salten continuamente.

Para seguir una llamada sin saltos, lineal y más lógica, sería necesario agrupar nuestra CSS por especificidad.

llamadasCSS-d

Estos niveles de especificidad, ha llevado a la creación de las capas de ITCSS.

Se parte de 7 capas:

cssit-layers

1.- Settings – Se usa para las variables globales, elementos de configuración (Si usamos pre procesador, si no, podemos saltarnos esta capa)
2.- Tools – Mixins y Funciones (solo si usamos preprocesadores)
3.- Generic – Estilos CSS: reset, box-sizing, normalize.css…
4.- Base – Elementos HTML sin clases, selectores.
5.- Objects – Patrones de diseño, la estructura. Solo si usamos CSS dirigido a objetos (OOCSS)
6.- Components – Carruseles, calendarios… y sets de UI… Aquí metemos nuestros estilos concretos, para una lista concreta de un producto, por ejemplo.
7.- Trumps – Ayudas y lo que usamos para sobreescribir. La capa de los importants, la más específica de todas. Aquí habrá código muy concreto, para partes del DOM muy específicas.

No se trata de llamar de una manera específica a nuestras clases, para eso ya tenemos BEM. Es la manera en que vamos a llamar al archivo .css en función de a qué parte pertenece (y por tanto, que estilos hemos incluido en ella).

Todo el css que incluyamos en nuestro proyecto tiene que formar parte de alguna de estas capas. Nos obliga a pensar a qué pertenece cada línea de código antes de incluirla.

* Las media queries van incluidas en la css del elemento al que estamos dando estilos.

La nomenclatura para la css seguirá la pauta:

Nombre de la capa en la que nos hayamos + nombre de la css concreta:
· base .links.css
· components .carousel.css

El objetivo:
– Afectar al DOM de general a concreto.
– La especificidad aumenta de manera progresiva.
– Nunca se deshace, solo se añade.

No es un universo cerrado. En función de nuestra necesidades podemos añadir capas. Lo importante es seguir el orden de pirámide invertida:
– Escribir CSS en orden de especificidad
– Ser fieles al ‘Gráfico de especificidad’ evitando en la medida de lo posible, los picos.
– El orden en el que creamos las capas tiene que ser lógico. Por ejemplo, para una test AB podemos añadir la capa TEST entre Components y Trumps. O la capa THEME (también entre Components y Trumps).

Algunos documentos de interés:
PDF –  Conferencia – Managing CSS projects with ITCSS (todas las imágenes incluidas en este post, pertenecen a este PDF).