picasso 0.0.2 → 0.0.3

Sign up to get free protection for your applications and to get access to all the features.
data/docs/all.html CHANGED
@@ -1,10 +1,13 @@
1
- <!doctype html>
2
- <html>
1
+ <!DOCTYPE html>
2
+ <!--[if IE 7]> <html class="ie7"> <![endif]-->
3
+ <!--[if IE 8]> <html class="ie8"> <![endif]-->
4
+ <!--[if IE 9]> <html class="ie9"> <![endif]-->
5
+ <!--[if gt IE 9]><!--> <html> <!--<![endif]-->
3
6
 
4
7
  <head>
5
8
  <meta charset="utf-8">
6
9
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7
- <title>Picasso Docs</title>
10
+ <title>Picasso. Framework CSS/Sass.</title>
8
11
 
9
12
  <link type="text/css" rel="stylesheet" href="./css/markdown.css">
10
13
  <link type="text/css" rel="stylesheet" href="./css/github.css">
@@ -14,12 +17,197 @@
14
17
  <body>
15
18
 
16
19
 
20
+ <header>
21
+ <h1>Picasso. Framework CSS/Sass.</h1>
22
+ </header>
23
+
24
+
25
+
26
+
27
+ <hr>
28
+
29
+ <h2>Contenidos</h2>
30
+
31
+ <aside>
32
+ <nav>
33
+ <ol>
34
+
35
+ <li>
36
+ <a href="./intro.html#introduccioacuten">Introducci&amp;oacute;n</a>
37
+
38
+ <ol>
39
+
40
+ <li><a href="./intro.html#repositorio">Repositorio</a></li>
41
+
42
+ <li><a href="./intro.html#instalacioacuten">Instalaci&amp;oacute;n</a></li>
43
+
44
+ <li><a href="./intro.html#actualizacioacuten">Actualizaci&amp;oacute;n</a></li>
45
+
46
+ </ol>
47
+
48
+ </li>
49
+
50
+ <li>
51
+ <a href="./changelog.html#changelog">Changelog</a>
52
+
53
+ <ol>
54
+
55
+ <li><a href="./changelog.html#003">0.0.3</a></li>
56
+
57
+ <li><a href="./changelog.html#002">0.0.2</a></li>
58
+
59
+ <li><a href="./changelog.html#001">0.0.1</a></li>
60
+
61
+ </ol>
62
+
63
+ </li>
64
+
65
+ <li>
66
+ <a href="./todo.html#todo">Todo</a>
67
+
68
+ <ol>
69
+
70
+ </ol>
71
+
72
+ </li>
73
+
74
+ <li>
75
+ <a href="./docs.html#generar-la-documentacioacuten">Generar la documentaci&amp;oacute;n</a>
76
+
77
+ <ol>
78
+
79
+ </ol>
80
+
81
+ </li>
82
+
83
+ <li>
84
+ <a href="./components.html#components">Components</a>
85
+
86
+ <ol>
87
+
88
+ <li><a href="./buttons.html#buttons">Buttons</a></li>
89
+
90
+ <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
91
+
92
+ <li><a href="./arrows.html#arrows">Arrows</a></li>
93
+
94
+ <li><a href="./bubbles.html#bubbles">Bubbles</a></li>
95
+
96
+ <li><a href="./ie.html#internet-explorer">Internet Explorer</a></li>
97
+
98
+ </ol>
99
+
100
+ </li>
101
+
102
+ <li>
103
+ <a href="./utils.html#utils">Utils</a>
104
+
105
+ <ol>
106
+
107
+ <li><a href="./utils.html#clearfix">Clearfix</a></li>
108
+
109
+ </ol>
110
+
111
+ </li>
112
+
113
+ <li>
114
+ <a href="./despegar.html#despegar">Despegar</a>
115
+
116
+ <ol>
117
+
118
+ <li><a href="./despegar.html#variables">Variables</a></li>
119
+
120
+ </ol>
121
+
122
+ </li>
123
+
124
+ </ol>
125
+ </nav>
126
+ </aside>
127
+
128
+
129
+
130
+ <hr>
131
+
132
+ <div id='content'><a name="introduccioacuten"></a><h1>Introducci&oacute;n</h1>
133
+ <a name="repositorio"></a><h2>Repositorio</h2>
134
+ <p><a href="http://gitorious.despegar.it/picasso/picasso">http://gitorious.despegar.it/picasso/picasso</a>
135
+
136
+ </p>
137
+ <a name="instalacioacuten"></a><h2>Instalaci&oacute;n</h2>
138
+ <p>Ejecutar:
17
139
 
18
- <div id='content'><a name="picasso-framework-css-sass"></a><h1>Picasso. Framework CSS/Sass.</h1>
140
+ </p>
141
+ <pre><code class="lang-bash">$ (sudo) gem install picasso</code></pre>
142
+ <p>En el config.rb agregar:
19
143
 
144
+ </p>
145
+ <pre><code class="lang-bash">require &#39;picasso&#39;
146
+ gem &#39;picasso&#39;, &#39;~&gt; 0.0.3&#39;</code></pre>
147
+ <p>Modificar el n&uacute;mero de versi&oacute;n a medida que se quiere usar nuevas versiones del framework.
148
+
149
+ </p>
150
+ <p>Finalmente, en el archivo Sass importar el framework completo:
151
+
152
+ </p>
153
+ <pre><code class="lang-bash">@import &quot;picasso&quot;;</code></pre>
154
+ <p>o s&oacute;lo lo necesario:
155
+
156
+ </p>
157
+ <pre><code class="lang-bash">@import &quot;picasso/components/buttons&quot;;
158
+ @import &quot;picasso/despegar/variables&quot;;</code></pre>
159
+ <a name="actualizacioacuten"></a><h2>Actualizaci&oacute;n</h2>
160
+ <pre><code class="lang-bash">$ (sudo) gem update picasso</code></pre>
161
+
162
+ <a name="changelog"></a><h1>Changelog</h1>
163
+ <a name="003"></a><h2>0.0.3</h2>
164
+ <ul>
165
+ <li>Agregados estilos de fallback para Internet Explorer.</li>
166
+ <li>Soporte para CSS3 Pie (de manera predeterminado apagado).</li>
167
+ <li>Agregada la documentaci&oacute;n sobre la generaci&oacute;n de docs.</li>
168
+ </ul>
169
+ <a name="002"></a><h2>0.0.2</h2>
170
+ <ul>
171
+ <li>Modularizaci&oacute;n del componente.</li>
172
+ <li>Agregados: buttons, mini-buttons, bubbles y arrows.</li>
173
+ <li>Creaci&oacute;n de la documentaci&oacute;n.</li>
174
+ </ul>
175
+ <a name="001"></a><h2>0.0.1</h2>
176
+ <ul>
177
+ <li>Versi&oacute;n inicial.</li>
178
+ <li>Agregadas las variables de la marca Despegar y clearfix.</li>
179
+ </ul>
180
+
181
+ <a name="todo"></a><h1>Todo</h1>
182
+ <p>...</p>
183
+
184
+ <a name="generar-la-documentacioacuten"></a><h1>Generar la documentaci&oacute;n</h1>
185
+ <ul>
186
+ <li><p>Para generar una nueva versi&oacute;n de la documentaci&oacute;n es necesario tener instalado node.js: <a href="http://nodejs.org/#download">http://nodejs.org/#download</a></p>
187
+ </li>
188
+ <li><p>Abrir una terminal e instalar <a href="http://beautifuldocs.com/">Beautiful docs</a>:</p>
189
+ </li>
190
+ </ul>
191
+ <pre><code class="lang-bash">$ npm install beautiful-docs -g</code></pre>
192
+ <ul>
193
+ <li><p>Crear (o actualizar) los archivos <code>.md</code> (<code>docs/build/md</code>) con la documentaci&oacute;n pertinente. En caso de agregar un nuevo archivo <code>.md</code>, actualizar el <code>manifest.json</code>. </p>
194
+ <pre><code> Nota: Cada `.md` es un archivo de texto plano escrito con la sintaxis [markdown](http://daringfireball.net/projects/markdown/basics).</code></pre>
195
+ </li>
196
+ <li><p>Pararse sobre la carpeta raiz del proyecto y ejecutar:</p>
197
+ </li>
198
+ </ul>
199
+ <pre><code class="lang-bash">bfdocs --base-url=&#39;.&#39; --templates-dir=&#39;docs/build/templates/&#39; docs/build/manifest.json docs</code></pre>
200
+ <ul>
201
+ <li>Revisar que la documentaci&oacute;n se haya generado correctamente abriendo el archivo <code>.html</code> pertinente.</li>
202
+ </ul>
203
+
204
+ <hr>
20
205
  <a name="components"></a><h1>Components</h1>
21
206
 
22
207
  <a name="buttons"></a><h2>Buttons</h2>
208
+ <p>Ideales para situaciones en que se necesita un call-to-action.
209
+
210
+ </p>
23
211
  <a name="ejemplos"></a><a name="ejemplos"></a><h3>Ejemplos</h3>
24
212
  <p><a class="button-demo-1" href="#">
25
213
  <span>Comprar</span>
@@ -37,7 +225,7 @@
37
225
 
38
226
  </p>
39
227
  <p><a class="button-demo-4" href="#">
40
- <span>Un texto demasiado largo para este botón</span>
228
+ <span>Un texto demasiado largo para este bot&oacute;n</span>
41
229
  </a>
42
230
 
43
231
  </p>
@@ -58,6 +246,9 @@
58
246
  @include button(100px, 30px, red, white);
59
247
  }</code></pre>
60
248
  <a name="mini-buttons"></a><h2>Mini-Buttons</h2>
249
+ <p>Perfectos para acciones simples que influyen en la interfaz.
250
+
251
+ </p>
61
252
  <h3>Ejemplos</h3>
62
253
  <p><a class="mini-button-demo-1" href="#">
63
254
  <span>Limpiar</span>
@@ -99,9 +290,12 @@
99
290
  }</code></pre>
100
291
 
101
292
  <a name="arrows"></a><h2>Arrows</h2>
293
+ <p>Excelentes para avisos importantes.
294
+
295
+ </p>
102
296
  <a name="ejemplos"></a><h3>Ejemplos</h3>
103
297
  <p><em class="arrow-demo-1">
104
- Información
298
+ Informaci&oacute;n
105
299
  </em>
106
300
 
107
301
  </p>
@@ -138,6 +332,9 @@
138
332
  }</code></pre>
139
333
 
140
334
  <a name="bubbles"></a><h2>Bubbles</h2>
335
+ <p>Ideales para mostrar comentarios de clientes.
336
+
337
+ </p>
141
338
  <a name="ejemplos"></a><h3>Ejemplos</h3>
142
339
  <div class="bubble-demo-1">
143
340
  <blockquote>
@@ -172,6 +369,32 @@
172
369
  @include bubble(200px, blue, white, true);
173
370
  }</code></pre>
174
371
 
372
+ <a name="internet-explorer"></a><h2>Internet Explorer</h2>
373
+ <p>La gran mayor&iacute;a de los componentes hacen uso intensivo de estilos CSS3 no soportados por versiones de Internet Explorer iguales o menores a 9. De manera predeterminada los componentes tienen estilos de fallback para tener compatibilidad con dicho navegador, el &uacute;nico requisito es que la p&aacute;gina que carga los estilos generados por Picasso posean la <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">t&eacute;cnica de clases condicionales en la etiqueta html</a>:
374
+
375
+ </p>
376
+ <pre><code class="lang-html">&lt;!DOCTYPE html&gt;
377
+ &lt;!--[if IE 7]&gt; &lt;html class=&quot;ie7&quot;&gt; &lt;![endif]--&gt;
378
+ &lt;!--[if IE 8]&gt; &lt;html class=&quot;ie8&quot;&gt; &lt;![endif]--&gt;
379
+ &lt;!--[if IE 9]&gt; &lt;html class=&quot;ie9&quot;&gt; &lt;![endif]--&gt;
380
+ &lt;!--[if gt IE 9]&gt;&lt;!--&gt; &lt;html&gt; &lt;!--&lt;![endif]--&gt;</code></pre>
381
+ <a name="css3-pie"></a><h3>CSS3 Pie</h3>
382
+ <p>Picasso adem&aacute;s ofrece soporte para <a href="http://css3pie.com/">CSS3 Pie</a>. Su soporte esta apagado de forma predeterminada. Para habilitarlo, en el archivo Sass que hace uso de los mixins, agregar la siguiente variable:
383
+
384
+ </p>
385
+ <pre><code class="lang-css">$experimental-support-for-pie: true;</code></pre>
386
+ <pre><code>Notas:
387
+ - Tambi&amp;eacute;n es requisito que la p&amp;aacute;gina posea la t&amp;eacute;cnica de clases condicionales en la etiqueta html.
388
+ - Cuando el soporte de CSS3 Pie esta activado, los estilos de fallback no son cargados.</code></pre>
389
+ <p>Un punto importante a tener en cuenta es la definici&oacute; de la variable <code>$pie-behavior</code> con la ruta del archivo <code>.htc</code>:
390
+
391
+ </p>
392
+ <pre><code class="lang-css">$pie-behavior stylesheet-url(&quot;PIE.htc&quot;)</code></pre>
393
+ <p>Para otras opciones relacionadas, consultar la documentaci&oacute;n pertinente de Compass: <a href="http://compass-style.org/reference/compass/css3/pie/">http://compass-style.org/reference/compass/css3/pie/</a>
394
+
395
+ </p>
396
+
397
+ <hr>
175
398
  <a name="utils"></a><h1>Utils</h1>
176
399
  <a name="clearfix"></a><h2>Clearfix</h2>
177
400
  <p>Basado en <a href="http://nicolasgallagher.com/micro-clearfix-hack/">http://nicolasgallagher.com/micro-clearfix-hack/</a>.
@@ -185,6 +408,7 @@
185
408
  @include clearfix;
186
409
  }</code></pre>
187
410
 
411
+ <hr>
188
412
  <a name="despegar"></a><h1>Despegar</h1>
189
413
  <a name="variables"></a><h2>Variables</h2>
190
414
  <a name="ejemplos"></a><h3>Ejemplos</h3>
@@ -378,11 +602,9 @@
378
602
  </div>
379
603
 
380
604
  <footer>
381
- <a href="./all.html">Everything on a single page</a>
382
-
383
605
  </footer>
384
606
 
385
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
607
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
386
608
  <script src="./js/docs.js"></script>
387
609
  <script src="./js/rainbow-custom.min.js"></script>
388
610
 
data/docs/arrows.html CHANGED
@@ -1,10 +1,13 @@
1
- <!doctype html>
2
- <html>
1
+ <!DOCTYPE html>
2
+ <!--[if IE 7]> <html class="ie7"> <![endif]-->
3
+ <!--[if IE 8]> <html class="ie8"> <![endif]-->
4
+ <!--[if IE 9]> <html class="ie9"> <![endif]-->
5
+ <!--[if gt IE 9]><!--> <html> <!--<![endif]-->
3
6
 
4
7
  <head>
5
8
  <meta charset="utf-8">
6
9
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7
- <title>Picasso Docs</title>
10
+ <title>Picasso. Framework CSS/Sass.</title>
8
11
 
9
12
  <link type="text/css" rel="stylesheet" href="./css/markdown.css">
10
13
  <link type="text/css" rel="stylesheet" href="./css/github.css">
@@ -14,70 +17,126 @@
14
17
  <body>
15
18
 
16
19
 
20
+ <header>
21
+ <h1>Picasso. Framework CSS/Sass.</h1>
22
+ </header>
23
+
24
+
25
+
26
+
27
+ <hr>
28
+
29
+ <h2>Contenidos</h2>
30
+
31
+ <aside>
32
+ <nav>
33
+ <ol>
34
+
35
+ <li>
36
+ <a href="./intro.html#introduccioacuten">Introducci&amp;oacute;n</a>
37
+
38
+ <ol>
39
+
40
+ <li><a href="./intro.html#repositorio">Repositorio</a></li>
41
+
42
+ <li><a href="./intro.html#instalacioacuten">Instalaci&amp;oacute;n</a></li>
43
+
44
+ <li><a href="./intro.html#actualizacioacuten">Actualizaci&amp;oacute;n</a></li>
45
+
46
+ </ol>
47
+
48
+ </li>
49
+
50
+ <li>
51
+ <a href="./changelog.html#changelog">Changelog</a>
52
+
53
+ <ol>
54
+
55
+ <li><a href="./changelog.html#003">0.0.3</a></li>
56
+
57
+ <li><a href="./changelog.html#002">0.0.2</a></li>
58
+
59
+ <li><a href="./changelog.html#001">0.0.1</a></li>
60
+
61
+ </ol>
62
+
63
+ </li>
64
+
65
+ <li>
66
+ <a href="./todo.html#todo">Todo</a>
67
+
68
+ <ol>
69
+
70
+ </ol>
71
+
72
+ </li>
73
+
74
+ <li>
75
+ <a href="./docs.html#generar-la-documentacioacuten">Generar la documentaci&amp;oacute;n</a>
76
+
77
+ <ol>
78
+
79
+ </ol>
80
+
81
+ </li>
82
+
83
+ <li>
84
+ <a href="./components.html#components">Components</a>
85
+
86
+ <ol>
87
+
88
+ <li><a href="./buttons.html#buttons">Buttons</a></li>
89
+
90
+ <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
91
+
92
+ <li><a href="./arrows.html#arrows">Arrows</a></li>
93
+
94
+ <li><a href="./bubbles.html#bubbles">Bubbles</a></li>
95
+
96
+ <li><a href="./ie.html#internet-explorer">Internet Explorer</a></li>
97
+
98
+ </ol>
99
+
100
+ </li>
101
+
102
+ <li>
103
+ <a href="./utils.html#utils">Utils</a>
104
+
105
+ <ol>
106
+
107
+ <li><a href="./utils.html#clearfix">Clearfix</a></li>
108
+
109
+ </ol>
110
+
111
+ </li>
112
+
113
+ <li>
114
+ <a href="./despegar.html#despegar">Despegar</a>
115
+
116
+ <ol>
117
+
118
+ <li><a href="./despegar.html#variables">Variables</a></li>
119
+
120
+ </ol>
121
+
122
+ </li>
123
+
124
+ </ol>
125
+ </nav>
126
+ </aside>
17
127
 
18
128
 
19
- <aside>
20
- <nav>
21
- <ol>
22
-
23
- <li>
24
- <a href="./intro.html#picasso-framework-css-sass">Picasso. Framework CSS/Sass.</a>
25
-
26
- <ol>
27
-
28
- </ol>
29
-
30
- </li>
31
-
32
- <li>
33
- <a href="./components.html#components">Components</a>
34
-
35
- <ol>
36
-
37
- <li><a href="./buttons.html#buttons">Buttons</a></li>
38
-
39
- <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
40
-
41
- <li><a href="./arrows.html#arrows">Arrows</a></li>
42
-
43
- <li><a href="./bubbles.html#bubbles">Bubbles</a></li>
44
-
45
- </ol>
46
-
47
- </li>
48
-
49
- <li>
50
- <a href="./utils.html#utils">Utils</a>
51
-
52
- <ol>
53
-
54
- <li><a href="./utils.html#clearfix">Clearfix</a></li>
55
-
56
- </ol>
57
-
58
- </li>
59
-
60
- <li>
61
- <a href="./despegar.html#despegar">Despegar</a>
62
-
63
- <ol>
64
-
65
- <li><a href="./despegar.html#variables">Variables</a></li>
66
-
67
- </ol>
68
-
69
- </li>
70
-
71
- </ol>
72
- </nav>
73
- </aside>
74
-
75
-
76
- <article>
129
+
130
+ <hr>
131
+
132
+ <article>
77
133
  <a name="arrows"></a><h2>Arrows</h2>
134
+ <p>Excelentes para avisos importantes.
135
+
136
+ </p>
78
137
  <a name="ejemplos"></a><h3>Ejemplos</h3>
79
138
  <p><em class="arrow-demo-1">
80
- Información
139
+ Informaci&oacute;n
81
140
  </em>
82
141
 
83
142
  </p>
@@ -117,11 +176,9 @@
117
176
 
118
177
 
119
178
  <footer>
120
- <a href="./all.html">Everything on a single page</a>
121
-
122
179
  </footer>
123
180
 
124
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
181
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
125
182
  <script src="./js/docs.js"></script>
126
183
  <script src="./js/rainbow-custom.min.js"></script>
127
184