picasso 0.0.3 → 0.1.0

data/docs/build/md/components/pagination.md

@@ -0,0 +1,112 @@
+## Pagination
+
+Implementación tradicional del paginador.
+
+### Ejemplos
+
+#### Ejemplo 1
+
+<div class="pagination-demo-1">
+	<ul>
+		<li class="prev">
+			<a href="#">Anterior</a>
+		</li>
+		<li>
+			<a href="#">1</a>
+		</li>
+		<li>
+			<a href="#">2</a>
+		</li>
+		<li class="active">
+			<a>3</a>
+		</li>
+		<li>
+			<a href="#">4</a>
+		</li>
+		<li class="disabled">
+			<a href="#">5</a>
+		</li>
+		<li class="dots">
+			<a>...</a>
+		</li>
+		<li>
+			<a href="#">12</a>
+		</li>
+		<li class="next">
+			<a href="#">Siguiente</a>
+		</li>
+	</ul>
+</div>
+
+#### Ejemplo 2
+
+<div class="pagination-demo-2">
+	<ul>
+		<li>
+			<a href="#">1</a>
+		</li>
+		<li>
+			<a href="#">2</a>
+		</li>
+		<li class="active">
+			<a>3</a>
+		</li>
+		<li>
+			<a href="#">4</a>
+		</li>
+		<li>
+			<a href="#">5</a>
+		</li>
+	</ul>
+</div>
+
+### HTML
+
+```html
+<div class="pagination">
+	<ul>
+		<li class="prev">
+			<a href="#">Anterior</a>
+		</li>
+		<li>
+			<a href="#">1</a>
+		</li>
+		<li class="active">
+			<a>2</a>
+		</li>
+		<li class="disabled">
+			<a href="#">3</a>
+		</li>
+		<li class="dots">
+			<a>...</a>
+		</li>
+		<li class="next">
+			<a href="#">Siguiente</a>
+		</li>
+	</ul>
+</div>
+```
+
+### Sass
+
+Importaci&oacute;n:
+
+```css
+@import "picasso/components/pagination";
+```
+
+Mixin con los par&aacute;metros por defecto:
+
+```css
+.pagination{
+	@include pagination();
+}
+```
+
+Mixin con par&aacute;metros personalizados. Disponibles: color para la p&aacute;gina activa, color para las p&aacute;ginas no activas, background para las p&aacute;ginas no activas, color del borde para los items, radio del borde para los items, color para el estado hover, background para el estado hover:
+
+```css
+.pagination{
+	@include pagination(black, blue, white, red, 10px, yellow, green);
+}
+```

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

@@ -0,0 +1,162 @@
+## 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" !default;
+```
+
+Estrategias soportadas: 
+
+* `sprites`
+* `GD`

data/docs/build/md/intro.md

@@ -12,11 +12,12 @@ Ejecutar:
 $ (sudo) gem install picasso
 ```
 
-En el config.rb agregar:
+En el `config.rb` agregar:
 
 ```bash
 require 'picasso'
-gem 'picasso', '~> 0.0.3'
+require 'magick'
+gem 'picasso', '~> 0.1.0'
 ```
 
 Modificar el número de versión a medida que se quiere usar nuevas versiones del framework. 

data/docs/build/md/mejoras.md

@@ -0,0 +1,69 @@
+# 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.
+

data/docs/build/md/todo.md

@@ -1,3 +1,13 @@
 # Todo
 
-...
+## 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 y obtener el path de imágenes especificado en el config.rb.

data/docs/build/md/utils/utils.md

@@ -0,0 +1,62 @@
+-------------------
+
+# Utils
+
+## Clearfix
+
+Basado en http://nicolasgallagher.com/micro-clearfix-hack/.
+
+### Sass
+
+```css
+@import "picasso/utils/clearfix";
+
+//Clearfix
+.container{
+	@include clearfix;
+}
+
+```
+
+## IE
+
+### After / Before
+
+Soporte de `:after` y `:before` para Internet Explorer 7. 
+
+Basado en http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7/
+
+#### Sass
+
+```css
+@import "picasso/utils/ie";
+
+.my-element {
+	@include after;
+	@include before;
+
+	//Para IE quedan disponibles las clases .after y .before
+	//para aplicar los mismos estilos como si fueran pseudoselectores
+	.ie7 & {
+		.after{
+		}
+
+		.before{
+		}
+	}
+}
+
+```
+
+## Sprite
+
+Inserta dinámicamente imágenes de un componente específico dentro de un sprite y devuelve la posición vertical en donde se insertó.
+
+### Sass
+
+```css
+@import "picasso/utils/sprite";
+
+$initial-position: insert-in-sprite($sprite-created, $sprite-name, $sprite, $sprite-width, $sprite-height);
+
+```

data/docs/buttons.html

@@ -52,6 +52,8 @@
                             
                                 <ol>
                                     
+                                        <li><a href="./changelog.html#010">0.1.0</a></li>
+                                    
                                         <li><a href="./changelog.html#003">0.0.3</a></li>
                                     
                                         <li><a href="./changelog.html#002">0.0.2</a></li>
@@ -67,15 +69,29 @@
                             
                                 <ol>
                                     
+                                        <li><a href="./todo.html#componentes">Componentes</a></li>
+                                    
+                                        <li><a href="./todo.html#utilidades">Utilidades</a></li>
+                                    
+                                        <li><a href="./todo.html#otros">Otros</a></li>
+                                    
                                 </ol>
                             
                         </li>
                     
                         <li>
-                            <a href="./docs.html#generar-la-documentacioacuten">Generar la documentaci&amp;oacute;n</a>
+                            <a href="./mejoras.html#mejoras-antildeadidos">Mejoras / A&amp;ntilde;adidos</a>
                             
                                 <ol>
                                     
+                                        <li><a href="./mejoras.html#utilizar-el-coacutedigo-fuente">Utilizar el c&amp;oacute;digo fuente</a></li>
+                                    
+                                        <li><a href="./mejoras.html#pruebas-locales-de-nuevos-antildeadidos-cambios">Pruebas locales de nuevos a&amp;ntilde;adidos/cambios:</a></li>
+                                    
+                                        <li><a href="./mejoras.html#subidas-en-el-repositorio">Subidas en el repositorio</a></li>
+                                    
+                                        <li><a href="./mejoras.html#generar-la-documentacioacuten">Generar la documentaci&amp;oacute;n</a></li>
+                                    
                                 </ol>
                             
                         </li>
@@ -85,15 +101,27 @@
                             
                                 <ol>
                                     
+                                        <li><a href="./components.html#componentes-disponibles">Componentes disponibles</a></li>
+                                    
                                         <li><a href="./buttons.html#buttons">Buttons</a></li>
                                     
                                         <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
                                     
+                                        <li><a href="./inputs.html#inputs">Inputs</a></li>
+                                    
+                                        <li><a href="./navs.html#navs">Navs</a></li>
+                                    
+                                        <li><a href="./list-grids.html#list-grid">List Grid</a></li>
+                                    
                                         <li><a href="./arrows.html#arrows">Arrows</a></li>
                                     
+                                        <li><a href="./pagination.html#pagination">Pagination</a></li>
+                                    
                                         <li><a href="./bubbles.html#bubbles">Bubbles</a></li>
                                     
-                                        <li><a href="./ie.html#internet-explorer">Internet Explorer</a></li>
+                                        <li><a href="./popups.html#popups">Popups</a></li>
+                                    
+                                        <li><a href="./accordions.html#accordions">Accordions</a></li>
                                     
                                 </ol>
                             
@@ -106,6 +134,10 @@
                                     
                                         <li><a href="./utils.html#clearfix">Clearfix</a></li>
                                     
+                                        <li><a href="./utils.html#ie">IE</a></li>
+                                    
+                                        <li><a href="./utils.html#sprite">Sprite</a></li>
+                                    
                                 </ol>
                             
                         </li>
@@ -160,17 +192,34 @@
     &lt;span&gt;Comprar&lt;/span&gt;
 &lt;/a&gt;</code></pre>
 <a name="sass"></a><a name="sass"></a><h3>Sass</h3>
-<pre><code class="lang-css">@import &quot;picasso/components/buttons&quot;;
+<p>Importaci&oacute;n:
+
+</p>
+<pre><code class="lang-css">@import &quot;picasso/components/buttons&quot;;</code></pre>
+<p>Mixin con los par&aacute;metros por defecto:
 
-// Con valores por defecto
-.button{
+</p>
+<pre><code class="lang-css">.button{
     @include button();
-}
+}</code></pre>
+<p>Mixin con par&aacute;metros personalizados. Disponibles: ancho, alto, background y color:
 
-// Con todos los parametros: ancho, alto, background y color
-.button{
+</p>
+<pre><code class="lang-css">.button{
     @include button(100px, 30px, red, white);
 }</code></pre>
+<a name="fallback-para-ie"></a><a name="fallback-para-ie"></a><h3>Fallback para IE</h3>
+<p>Variable y valor por defecto:
+
+</p>
+<pre><code class="lang-css">$button-ie-fallback: &quot;sprites&quot; !default;</code></pre>
+<p>Estrategias soportadas: 
+
+</p>
+<ul>
+<li><code>sprites</code></li>
+<li><code>GD</code></li>
+</ul>
 <a name="mini-buttons"></a><h2>Mini-Buttons</h2>
 <p>Perfectos para acciones simples que influyen en la interfaz.
 
@@ -203,17 +252,34 @@
     &lt;span&gt;Comprar&lt;/span&gt;
 &lt;/a&gt;</code></pre>
 <h3>Sass</h3>
-<pre><code class="lang-css">@import &quot;picasso/components/buttons&quot;;
+<p>Importaci&oacute;n:
 
-// Con valores por defecto
-.mini-button{
+</p>
+<pre><code class="lang-css">@import &quot;picasso/components/buttons&quot;;</code></pre>
+<p>Mixin con los par&aacute;metros por defecto:
+
+</p>
+<pre><code class="lang-css">.mini-button{
     @include mini-button();
-}
+}</code></pre>
+<p>Mixin con par&aacute;metros personalizados. Disponibles: background y color:
 
-// Con todos los parametros: background y color
-.mini-button{
+</p>
+<pre><code class="lang-css">.mini-button{
     @include button(grey, blue);
 }</code></pre>
+<h3>Fallback para IE</h3>
+<p>Variable y valor por defecto:
+
+</p>
+<pre><code class="lang-css">$mini-button-ie-fallback: &quot;sprites&quot; !default;</code></pre>
+<p>Estrategias soportadas: 
+
+</p>
+<ul>
+<li><code>sprites</code></li>
+<li><code>GD</code></li>
+</ul>
 
 </article>