• CSS, arquitectura y proyectos complejos

    Este post es mi intento de recopilar, y tener a la mano, referencias y algunas notas sobre arquitectura de CSS/Sass y buenas prácticas, tips & tricks en proyectos complejos.

    A considerar

    Beware of Selector Nesting in Sass

    Videos

  • Sprites en Sass & Compass

    Buen articulo para iniciar a trabajar con Sprites en Sass & Compass Spriting with Sass and Compass

  • Git, alias

    Pasos simples para usar alias en los comandos de git, por ejemplo, en lugar de escribir git status, podemos solo hacer gst:

    1. abrir ~/.gitconfig
    2. agregar las lineas de alias, formato [shortcut]=[original command]

    Mis alias por ejemplo son:

    
    [alias]
            st = status
            pl = pull
            co = checkout
            br = branch
            ps = push
            mdev = merge develop
            ci = commit -m
    
    
  • Grunt

    Oh wow! Esa fue mi reacción la primera vez que vi como funcionaba Drupal theme Sonambulo.

    La parte de "Task Runner" se refiere simplemente a automatización de tareas, y por tareas me refiero a procesos como: concatenar archivos, minificar JavaScript o CSS, optimizar imagenes o usar un lint en nuestro JavaScript. Cada una de estas tareas es manejada por un plugin de Grunt.

    Como usar Grunt

    La documentación es bastante completa y nos guía desde como instalarlo hasta como usar los plugins.

    • Instalar Node.js y nmp (Node.js package manager)
    • Instalar Grunt CLI globalmente con npm install -g grunt-cli (puede ser que necesitemos sudo)
    • Dos archivos son requeridos en nuestro proyecto, package.json & Gruntfile.js. Los cuales incluimos en el root del proyecto, o en root de nuestro theme, si estamos trabajando con Drupal.

    Una vez que tenemos lo básico, podemos instalar plugins. Lo más sencillo es corriendo desde la terminal:

    $ npm install [plugin] --save-dev

    Donde [plugin] es el nombre del plugin que queremos instalar, el argumento --save-dev le dice a npm que instale localmente (solo para el proyecto en cuestión), y que agregue la referencia al plugin en la sección de devDependencies del archivo package.json Opciones y como configurar cada plugin se detalla en la documentación.

    Despues de configurar las tareas, podemos correr Grunt, con:

    $ grunt

    Esto correra las tareas que tengamos en default; si tenemos un alias, que el nombre sea build y que corra tareas para cuando estamos listos para ir a produccion, podemos hacer

    $ grunt build

    Más información

    Algunos recursos a parte de la documentación,

    DrupalCon Austin 2014: Getting started with Grunt.