Picasso. Framework CSS/Sass.

Framework CSS/Sass.

http://gitorious.despegar.it/picasso/picasso

Instalación

Ejecutar:

$ (sudo) gem install picasso

Opcional: Instalación de oily_png.

En el config.rb agregar:

require 'picasso'
gem 'picasso', '~> 0.6.3'

Para versiones anteriores a 0.6.3, también se debe agregar como dependencia en el config.rb:

require 'magick'

Modificar el número de versión a medida que se quiere usar nuevas versiones del framework.

Finalmente, en el archivo Sass importar el framework completo:

@import "picasso";

o sólo lo necesario:

@import "picasso/components/buttons";
@import "picasso/despegar/variables";

Actualización

$ (sudo) gem update picasso

Opcional: Instalación de oily_png (versiones menores a 0.5.0)

oily_png es una gema que permite acelerar la creación de imágenes dinámicas. Se recomienda su instalación en caso de utilizar Picasso para la creación de sprites.

Windows

Bajar el paquete Development Kit. Extraer dicho paquete en una ruta conocida (por ejemplo C:\DevKit). Abrir una consola, ir a la ruta en donde se pusieron los archivos del Development Kit y ejecutar ruby dk.rb init y luego ruby dk.rb install.

Linux

$ (sudo) apt-get update
$ (sudo) apt-get install ruby-oily-png

Changelog

0.6.3

  • Bug fix en grillas: Al combinar diferentes columnas con offset, los estilos no predominaban por sobre el resto.

0.6.2

  • El alto por default para el componente input ahora es auto.
  • Se setea el margen izquierdo de las columnas en cada clase particular col-<size> para poder pisar las propiedades cuando un elemento posee la clase first-<size>.

0.6.1

  • Se agregan clases push0-<size>/pull0-<size> para poder resetear el posicionamiento relativo en las grillas.

0.6.0

  • Mejoras en las grillas: Se agregan clases para el manejo de columnas antes diferentes resoluciones (-small, -medium, -large), posibilidad de posicionar columnas de manera relativa, centrado de columnas y ocultación.

0.5.2

  • Refactor del componente input() utilizando un nuevo diseño.

0.5.1

  • Se quitan estilos repetidos en los botones 3D;
  • Se elimina max-width para las imagenes y min-height en las grillas.

0.5.0 (!backward compatibility)

  • Se normalizan las variables de colores de Despegar;
  • Se eliminan los botones del tipo mini y glosy (se recomienda el uso de los del tipo 3d);
  • Se deprecan los componentes tooltips y popups. Se recomienda el uso de http://ux.despegar.it/docs/common/modules/overlay.html;
  • Se quita la dependencia de magick para la generación de sprites dinámicos.

0.4.2

  • Se agregan nuevas opciones de customización de las grillas;
  • Se quita soporte de IE6 en clearfix();
  • Se agregan nuevos colores en despegar/variables.

0.4.1

0.4.0 (!backward compatibility)

  • Se agregan nuevos colores y tamaños para la marca Despegar;

0.3.7

  • Se agrega el componente clusters;
  • Mixins para el manejo de los titulos;

0.3.6

  • Severos cambios en el componente popup para mejorar su apariencia en IE;

0.3.5

  • Refactor componente arrow para utilizar em;
  • Agregado nuevo parámetro en el componente pagination: disabled-color;

0.3.4

  • Se quita soporte para IE7 de las flechas indicadoras en el componente accordion;
  • Actualización de la documentación para que use StyleDocco 0.5.0;

0.3.3

  • Se utiliza image-url en lugar de generated-image-url para la URL de los sprites;

0.3.2

  • El indicador del tooltip se posiciona en la mitad del componente;
  • Fix posición del indicador del tooltip en Chrome/Safari;

0.3.1

  • Refactor de componente tooltip;
  • Refactor de componente accordion;

0.3.0 (!backward compatibility)

  • Nueva utilidad: Grillas;
  • Nuevo componente: mini-tooltips;
  • Nuevo sistema para documentar (styledocco);

0.2.3

  • Fix estado estado disabled para IE;

0.2.2

  • Se agrega estado disabled para los botones 3D;

0.2.1

  • Fix sombras, gradientes y bordes de botones y nav de IE9;

0.2.0 (!backward compatibility)

  • Fix degradados de botones en Chrome;
  • Separación de botones por tipo;
  • Nuevos botones 3D;
  • Se quita a oily_png como dependencia;

0.1.0

  • Agregados nuevos componentes:
  • - Popups
  • - Pagination
  • - Navs
  • - List Grids
  • - Inputs
  • - Accordions
  • Agregadas nuevas utilidades:
  • - Sprite: insert-in-sprite()
  • - IE: after() / before()
  • Nuevo fallback para IE: Generación dinámica de sprites para componentes a través de compass-magick.
  • Se elimina el soporte para CSS3 Pie, siendo reemplazado por fallback de sprites.
  • Reorganización interna de la documentación.

0.0.3

  • Agregados estilos de fallback para Internet Explorer.
  • Soporte para CSS3 Pie (de manera predeterminado apagado).
  • Agregada la documentación sobre la generación de docs.

0.0.2

  • Modularización del componente.
  • Agregados: buttons, mini-buttons, bubbles y arrows.
  • Creación de la documentación.

0.0.1

  • Versión inicial.
  • Agregadas las variables de la marca Despegar y clearfix.

Todo

General

  • Utilizar em para el tamaño tipográfico de los componentes.

Componentes

  • Tabs;
  • Tooltips;
  • Breadcrumbs;

Utilidades

  • Grillas responsivas;
  • Tipografias con pictogramas comunes;

Otros

  • Creación de sprites: Implementar API para poder detectar si un archivo ya existe.
  • Mejoras en la documentación especificando variables por defecto de cada componente y mejor descripción de sus parámetros.

Mejoras / Añadidos

Utilizar el código fuente

  • Clonar el repositorio de Picasso:
$ git clone [email protected]:picasso/picasso.git
  • Pasarse al branch development:
$ cd picasso
$ git checkout --track origin/development
  • Verificar que se esta parado en dicho branch:
$ git branch

Pruebas locales de nuevos añadidos/cambios:

  • En la carpeta del proyecto donde se encuentra el archivo config.rb, crear una carpeta extensions.
  • En dicha lugar copiar la carpeta picasso tal cual se la clonó del repositorio, de manera tal que quede extensiones\picasso\<archivos de picasso>.
  • En caso que el proyecto este configurado para usar Picasso, comentar dichas lineas en el config.rb.
  • Compass de manera predeterminada detecta las extensiones que sean guardadas en la carpeta extensions, por lo tanto, las directivas @import "picasso"; deberían funcionar sin problemas.

El núcleo de Picasso se encuentra en la carpeta stylesheets. Allí mismo existen tres carpetas components, utils y despegar en donde se alojan, de manera modularizada, los mixins y variables de cada sección. En caso de agregar alguna funcionalidad nueva, tomar de ejemplo algún componente ya existente para entender su lógica interna.

Subidas en el repositorio

  • Una vez realizados los cambios o añadidos, subirlos al repositorio:
$ git status
$ git add <archivos a subir>;
$ git commit -m "<un mensaje descriptivo del commit>"
$ git push

Nota: Toda mejora o cambio debe tener su documentación pertinente, caso contrario, no se incorporarán en Picasso.

Generar la documentación

Dentro de la carpeta stylesheets, existen archivos .scss que componen a Picasso. Cada archivo posee la documentación pertinente que se utiliza para generar el documento final. La anotación de la documentación utiliza la sintaxis markdown.

  • Para generar los archivos HTML que componen la documentación es necesario tener instalado node.js: http://nodejs.org/#download

  • Luego abrir una terminal y pararse sobre la carpeta raiz del proyecto (picasso). Ejecutar:

$ npm install
  • Luego ejecutar:
$ compass compile docs/ && ./node_modules/.bin/styledocco -s docs/resources/ --preprocessor "sass --compass" --include docs/css/picasso-demos.css stylesheets/
  • Revisar que la documentación se haya generado correctamente abriendo el archivo docs/index.html.