picasso 0.2.3 → 0.3.0

data/docs/build/md/components/popups.md

@@ -1,162 +0,0 @@
-## Popups
-
-Estilos para recrear popups.
-
-### Ejemplos
-
-#### Ejemplo 1
-
-<div class="popup-demo-container">
-	<div class="popup-demo-1">
-		<div class="popup-container">
-			<div class="popup-header">
-				<h4>Aeropuerto</h4>
-			</div>
-			<div class="popup-content">
-				<p>Miami</p>
-				<p>Aeropuerto Internacional Miami</p>
-			</div>
-		</div>
-		<span class="popup-close">x</span>
-		<span class="popup-arrow popup-arrow-bottom"></span>
-	</div>
-</div>
-
-<div class="popup-demo-container">
-	<div class="popup-demo-2">
-		<div class="popup-container">
-			<div class="popup-header">
-				<h4>Aeropuerto</h4>
-			</div>
-			<div class="popup-content">
-				<p>Miami</p>
-				<p>Aeropuerto Internacional Miami</p>
-			</div>
-		</div>
-		<span class="popup-close">x</span>
-		<span class="popup-arrow popup-arrow-top"></span>
-	</div>
-</div>
-
-<div class="popup-demo-container">
-	<div class="popup-demo-3">
-		<div class="popup-container">
-			<div class="popup-header">
-				<h4>Aeropuerto</h4>
-			</div>
-			<div class="popup-content">
-				<p>Miami</p>
-				<p>Aeropuerto Internacional Miami</p>
-			</div>
-		</div>
-		<span class="popup-close">x</span>
-		<span class="popup-arrow popup-arrow-left"></span>
-	</div>
-</div>
-
-<div class="popup-demo-container">
-	<div class="popup-demo-4">
-		<div class="popup-container">
-			<div class="popup-header">
-				<h4>Aeropuerto</h4>
-			</div>
-			<div class="popup-content">
-				<p>Miami</p>
-				<p>Aeropuerto Internacional Miami</p>
-			</div>
-		</div>
-		<span class="popup-close">x</span>
-		<span class="popup-arrow popup-arrow-right"></span>
-	</div>
-</div>
-
-#### Ejemplo 2
-
-<div class="popup-demo-container">
-	<div class="popup-demo-5">
-		<div class="popup-container">
-			<div class="popup-header">
-				<h4>Aeropuerto</h4>
-			</div>
-			<div class="popup-content">
-				<p>Miami</p>
-				<p>Aeropuerto Internacional Miami</p>
-			</div>
-		</div>
-		<span class="popup-close">x</span>
-	</div>
-</div>
-
-#### Ejemplo 3
-
-<div class="popup-demo-container">
-	<div class="popup-demo-6">
-		<div class="popup-container">
-			<div class="popup-content">
-				<p>Miami</p>
-				<p>Aeropuerto Internacional Miami</p>
-			</div>
-		</div>
-	</div>
-</div>
-
-### HTML
-
-```html
-<div class="popup">
-	<div class="popup-container">
-		<div class="popup-header">
-			<h4>Aeropuerto</h4>
-		</div>
-		<div class="popup-content">
-			<p>Miami</p>
-			<p>Aeropuerto Internacional Miami</p>
-		</div>
-	</div>
-	<span class="popup-close">x</span>
-	<span class="popup-arrow popup-arrow-right"></span>
-</div>
-```
-Las clases para los 4 tipos de flecha son:
-
-* `popup-arrow-top`
-* `popup-arrow-bottom`
-* `popup-arrow-left`
-* `popup-arrow-right`
-
-### Sass
-
-Importaci&oacute;n:
-
-```css
-@import "picasso/components/popups";
-```
-
-Mixin con los par&aacute;metros por defecto:
-
-```css
-.popup {
-	@include popup();
-}
-```
-
-Mixin con par&aacute;metros personalizados. Disponibles: background, radio del borde, sombra, color del borde, background para el bot&oacute;n cerrar, color para el bot&oacute;n cerrar, background para el t&iacute;tulo, color para el t&iacute;tulo:
-
-```css
-.popup {
-	@include popup(black, 10px, rgba(0, 0, 0, 0.5) 0px 0px 20px, rgba(1, 61, 147, 0.7), blue, white, black, red);
-}
-```
-
-### Fallback para IE
-
-Variable y valor por defecto:
-
-```css
-$popup-ie-fallback: "sprites";
-```
-
-Estrategias soportadas: 
-
-* `sprites`
-* `GD`

data/docs/build/md/despegar/despegar.md

@@ -1,200 +0,0 @@
-----------------
-
-# Despegar
-
-## Variables
-
-### Ejemplos
-
-#### Cuerpos tipograficos
-
-<p class="despegar-size-1-demo">11px - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-size-2-demo">13px - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-size-3-demo">16px - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-size-4-demo">20px - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-size-5-demo">24px - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-size-6-demo">28px - Aliquam tincidunt mauris eu risus.</p>
-
-#### Colores base
-
-<p class="despegar-black-demo">#000 - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-white-demo">#FFF - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-yellow-demo">#FF3 - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-red-demo">#F00 - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-blue-demo">#013D93 - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-gray-1-demo">#222 - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-gray-2-demo">#444 - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-gray-3-demo">#666 - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-gray-4-demo">#888 - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-gray-5-demo">#AAA - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-gray-6-demo">#CCC - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-gray-7-demo">#EEE - Aliquam tincidunt mauris eu risus.</p>
-
-#### Elementos
-
-<p class="despegar-searchbox-bg-demo">#FF3 Background Buscador - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-title-color-demo">#013D93 Color Titulos - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-titlealt-color-demo">#F90 Color Titulos alternativos - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-link-color-demo">#319FDA Color links - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-link-color-hover-demo">#66CCFF Color links (hover) - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-error-bg-demo">#FFE6E6 Color Titulos - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-error-border-demo">#F00 Color borde mensajes de error - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-warning-bg-demo">#FFFFE1 Background mensajes - Aliquam tincidunt mauris eu risus.</p>
-
-<p class="despegar-warning-border-demo">#FC3 Color borde mensajes - Aliquam tincidunt mauris eu risus.</p>
-
-### Sass
-
-```css
-@import "picasso/despegar/variables";
-
-//Size 1
-.despegar-size-1-demo{
-	font-size: $despegar-size-1;
-}
-
-//Size 2
-.despegar-size-2-demo{
-	font-size: $despegar-size-2;
-}
-
-//Size 3
-.despegar-size-3-demo{
-	font-size: $despegar-size-3;
-}
-
-//Size 4
-.despegar-size-4-demo{
-	font-size: $despegar-size-4;
-}
-
-//Size 5
-.despegar-size-5-demo{
-	font-size: $despegar-size-5;
-}
-
-//Size 6
-.despegar-size-6-demo{
-	font-size: $despegar-size-6;
-}
-
-//Black
-.despegar-black-demo{
-	background: $despegar-black;
-}
-
-//White
-.despegar-white-demo{
-	background: $despegar-white;
-}
-
-//Yellow
-.despegar-yellow-demo{
-	background: $despegar-yellow;
-}
-
-//Red
-.despegar-red-demo{
-	background: $despegar-red;
-}
-
-//Blue
-.despegar-blue-demo{
-	background: $despegar-blue;
-}
-
-//Gray 1
-.despegar-gray-1-demo{
-	color: $despegar-gray-1;
-}
-
-//Gray 2
-.despegar-gray-2-demo{
-	color: $despegar-gray-2;
-}
-
-//Gray 3
-.despegar-gray-3-demo{
-	color: $despegar-gray-3;
-}
-
-//Gray 4
-.despegar-gray-4-demo{
-	color: $despegar-gray-4;
-}
-
-//Gray 5
-.despegar-gray-5-demo{
-	color: $despegar-gray-5;
-}
-
-//Gray 6
-.despegar-gray-6-demo{
-	color: $despegar-gray-6;
-}
-
-//Gray 7
-.despegar-gray-7-demo{
-	color: $despegar-gray-7;
-}
-
-//Searchbox
-.despegar-searchbox-bg-demo{
-	background: $despegar-searchbox-bg;
-}
-
-//Title
-.despegar-title-color-demo{
-	color: $despegar-title-color;
-}
-
-//Title Alt
-.despegar-titlealt-color-demo{
-	color: $despegar-titlealt-color;
-}
-
-//Link
-.despegar-link-color-demo{
-	color: $despegar-link-color;
-
-	&:hover{
-		color: $despegar-link-color-hover;
-	}
-
-}
-
-//Error
-.despegar-error-bg-demo{
-	background: $despegar-error-bg;
-	border: 1px solid $despegar-error-border;
-}
-
-//Warning
-.despegar-warning-bg-demo{
-	background: $despegar-warning-bg;
-	border: 1px solid $despegar-warning-border;
-}
-```

data/docs/build/md/intro.md

@@ -1,59 +0,0 @@
-# Introducción
-
-## Repositorio
-
-http://gitorious.despegar.it/picasso/picasso
-
-## Instalación
-
-Ejecutar:
-
-```bash
-$ (sudo) gem install picasso
-```
-
-> Opcional: [Instalación de oily_png](#opcional-instalacioacuten-de-oily-png).
-
-En el `config.rb` agregar:
-
-```bash
-require 'picasso'
-require 'magick'
-gem 'picasso', '~> 0.2.3'
-```
-
-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:
-
-```bash
-@import "picasso";
-```
-
-o sólo lo necesario:
-
-```bash
-@import "picasso/components/buttons";
-@import "picasso/despegar/variables";
-```
-
-## Actualización
-
-```bash
-$ (sudo) gem update picasso
-```
-
-## Opcional: Instalación de oily_png
-
-[oily_png](https://github.com/wvanbergen/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](http://rubyinstaller.org/downloads/). 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
-
-```bash
-$ (sudo) apt-get update
-$ (sudo) apt-get install ruby-oily-png
-```

data/docs/build/md/mejoras.md

@@ -1,69 +0,0 @@
-# Mejoras / Añadidos
-
-## Utilizar el código fuente
-
-* Clonar el repositorio de Picasso:
-
-```bash
-$ git clone git@gitorious.despegar.it:picasso/picasso.git
-```
-
-* Pasarse al branch `development`:
-
-```bash
-$ cd picasso
-$ git checkout --track origin/development
-```
-
-* Verificar que se esta parado en dicho branch:
-
-```bash
-$ 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&oacute; 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&iacute;an funcionar sin problemas.
-
-El n&uacute;cleo de Picasso se encuentra en la carpeta `stylesheets`. All&iacute; mismo existen tres carpetas `components`, `utils` y `despegar` en donde se alojan, de manera modularizada, los mixins y variables de cada secci&oacute;n.
-En caso de agregar alguna funcionalidad nueva, tomar de ejemplo alg&uacute;n componente ya existente para entender su l&oacute;gica interna.
-
-## Subidas en el repositorio
-
-* Una vez realizados los cambios o a&ntilde;adidos, subirlos al repositorio:
-
-```bash
-$ 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&oacute;n pertinente, caso contrario, no se incorporar&aacute;n en Picasso.
-
-
-## Generar la documentaci&oacute;n
-
-* Para generar una nueva versi&oacute;n de la documentaci&oacute;n es necesario tener instalado node.js: http://nodejs.org/#download
-
-* Abrir una terminal e instalar [Beautiful docs](http://beautifuldocs.com/):
-
-```bash
-$ npm install https://github.com/dzignus/beautiful-docs/tarball/master -g
-```
-
-* Crear (o actualizar) los archivos `.md` (`docs/build/md`) con la documentaci&oacute;n pertinente. En caso de agregar un nuevo archivo `.md`, actualizar el `manifest.json`. 
-
-> **Nota**: Cada `.md` es un archivo de texto plano escrito con la sintaxis [markdown](http://daringfireball.net/projects/markdown/basics).
-
-* Pararse sobre la carpeta raiz del proyecto y ejecutar:
-
-```bash
-$ bfdocs --base-url='.' --templates-dir='docs/build/templates/' docs/build/manifest.json docs
-```
-
-* Revisar que la documentaci&oacute;n se haya generado correctamente abriendo el archivo `.html` pertinente.
-