picasso 0.0.3 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. data/.gitignore +1 -0
  2. data/docs/accordions.html +267 -0
  3. data/docs/all.html +934 -56
  4. data/docs/arrows.html +45 -8
  5. data/docs/bubbles.html +49 -10
  6. data/docs/build/manifest.json +19 -2
  7. data/docs/build/md/changelog.md +16 -0
  8. data/docs/build/md/components/accordions.md +97 -0
  9. data/docs/build/md/{arrows.md → components/arrows.md} +10 -2
  10. data/docs/build/md/{bubbles.md → components/bubbles.md} +16 -4
  11. data/docs/build/md/{buttons.md → components/buttons.md} +50 -5
  12. data/docs/build/md/components/components.md +37 -0
  13. data/docs/build/md/components/inputs.md +73 -0
  14. data/docs/build/md/components/list-grids.md +180 -0
  15. data/docs/build/md/components/navs.md +107 -0
  16. data/docs/build/md/components/pagination.md +112 -0
  17. data/docs/build/md/components/popups.md +162 -0
  18. data/docs/build/md/{despegar.md → despegar/despegar.md} +0 -0
  19. data/docs/build/md/intro.md +3 -2
  20. data/docs/build/md/mejoras.md +69 -0
  21. data/docs/build/md/todo.md +11 -1
  22. data/docs/build/md/utils/utils.md +62 -0
  23. data/docs/buttons.html +80 -14
  24. data/docs/changelog.html +74 -2
  25. data/docs/components.html +65 -2
  26. data/docs/config.rb +14 -6
  27. data/docs/css/markdown.css +8 -0
  28. data/docs/css/style.css +1508 -64
  29. data/docs/despegar.html +34 -2
  30. data/docs/ie.html +42 -11
  31. data/docs/img/picasso-buttons.png +0 -0
  32. data/docs/img/picasso-mini-buttons.png +0 -0
  33. data/docs/img/picasso-nav.png +0 -0
  34. data/docs/img/picasso-popup.png +0 -0
  35. data/docs/index.html +37 -4
  36. data/docs/{docs.html → inputs.html} +95 -21
  37. data/docs/intro.html +37 -4
  38. data/docs/js/docs.js +16 -0
  39. data/docs/js/viewer.js +12 -0
  40. data/docs/list-grids.html +341 -0
  41. data/docs/mejoras.html +241 -0
  42. data/docs/navs.html +272 -0
  43. data/docs/pagination.html +277 -0
  44. data/docs/popups.html +328 -0
  45. data/docs/sass/style.scss +113 -0
  46. data/docs/todo.html +49 -3
  47. data/docs/utils.html +68 -3
  48. data/lib/picasso/version.rb +1 -1
  49. data/picasso.gemspec +2 -0
  50. data/stylesheets/picasso/_components.scss +7 -1
  51. data/stylesheets/picasso/_utils.scss +3 -1
  52. data/stylesheets/picasso/components/_accordions.scss +96 -0
  53. data/stylesheets/picasso/components/_arrows.scss +9 -3
  54. data/stylesheets/picasso/components/_bubbles.scss +28 -17
  55. data/stylesheets/picasso/components/_inputs.scss +59 -0
  56. data/stylesheets/picasso/components/_list-grids.scss +118 -0
  57. data/stylesheets/picasso/components/_navs.scss +266 -0
  58. data/stylesheets/picasso/components/_pagination.scss +144 -0
  59. data/stylesheets/picasso/components/_popups.scss +257 -0
  60. data/stylesheets/picasso/components/buttons/_buttons.scss +124 -54
  61. data/stylesheets/picasso/components/buttons/_mini-buttons.scss +87 -19
  62. data/stylesheets/picasso/utils/_ie.scss +36 -0
  63. data/stylesheets/picasso/utils/_sprite.scss +32 -0
  64. metadata +65 -13
  65. data/docs/build/md/components.md +0 -3
  66. data/docs/build/md/docs.md +0 -21
  67. data/docs/build/md/ie.md +0 -32
  68. data/docs/build/md/utils.md +0 -19
@@ -30,20 +30,44 @@ Ideales para situaciones en que se necesita un call-to-action.
30
30
 
31
31
  ### Sass
32
32
 
33
+ Importación:
34
+
33
35
  ```css
34
36
  @import "picasso/components/buttons";
37
+ ```
35
38
 
36
- // Con valores por defecto
39
+ Mixin con los parámetros por defecto:
40
+
41
+ ```css
37
42
  .button{
38
43
  @include button();
39
44
  }
45
+ ```
46
+
47
+ Mixin con parámetros personalizados. Disponibles: ancho, alto, background y color:
40
48
 
41
- // Con todos los parametros: ancho, alto, background y color
49
+ ```css
42
50
  .button{
43
51
  @include button(100px, 30px, red, white);
44
52
  }
45
53
  ```
46
54
 
55
+ ### Fallback para IE
56
+
57
+ Variable y valor por defecto:
58
+
59
+ ```css
60
+ $button-ie-fallback: "sprites" !default;
61
+ ```
62
+
63
+ Estrategias soportadas:
64
+
65
+ * `sprites`
66
+ * `GD`
67
+
68
+
69
+
70
+
47
71
  ## Mini-Buttons
48
72
 
49
73
  Perfectos para acciones simples que influyen en la interfaz.
@@ -78,16 +102,37 @@ Perfectos para acciones simples que influyen en la interfaz.
78
102
 
79
103
  ### Sass
80
104
 
105
+ Importación:
106
+
81
107
  ```css
82
108
  @import "picasso/components/buttons";
109
+ ```
110
+
111
+ Mixin con los parámetros por defecto:
83
112
 
84
- // Con valores por defecto
113
+ ```css
85
114
  .mini-button{
86
115
  @include mini-button();
87
116
  }
117
+ ```
88
118
 
89
- // Con todos los parametros: background y color
119
+ Mixin con parámetros personalizados. Disponibles: background y color:
120
+
121
+ ```css
90
122
  .mini-button{
91
123
  @include button(grey, blue);
92
124
  }
93
- ```
125
+ ```
126
+
127
+ ### Fallback para IE
128
+
129
+ Variable y valor por defecto:
130
+
131
+ ```css
132
+ $mini-button-ie-fallback: "sprites" !default;
133
+ ```
134
+
135
+ Estrategias soportadas:
136
+
137
+ * `sprites`
138
+ * `GD`
@@ -0,0 +1,37 @@
1
+ ----------------
2
+
3
+ # Components
4
+
5
+ Representan a elementos comunes/patrones utilizados a lo largo del sitio. Estan pensandos para ser flexibles y configurables para ser implementados en distintas situaciones.
6
+
7
+ La gran mayor&iacute;a de los componentes hacen uso intensivo de estilos CSS3 y ofrecen estrateg&iacute;as alternativas ([fallback](https://encrypted.google.com/search?hl=en&q=fallback%20definition)) para navegadores que no soportan dichos estilos (Internet Explorer <= 9).
8
+
9
+ Para tener compatibilidad con Internet Explorer, el &uacute;nico requisito es que la p&aacute;gina que carga los estilos generados por Picasso posean la [t&eacute;cnica de clases condicionales en la etiqueta html](http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/):
10
+
11
+ ```html
12
+ <!DOCTYPE html>
13
+ <!--[if IE 7]> <html class="ie7"> <![endif]-->
14
+ <!--[if IE 8]> <html class="ie8"> <![endif]-->
15
+ <!--[if IE 9]> <html class="ie9"> <![endif]-->
16
+ <!--[if gt IE 9]><!--> <html> <!--<![endif]-->
17
+ ```
18
+
19
+ ### Estrategias y estilos de fallback para IE en componentes
20
+
21
+ Para ciertos componentes, Picasso ofrece dos estrategias para aplicar estilos de fallback. Dichas estrateg&iacute;as se setean en variables individuales de cada componente, por ejemplo:
22
+
23
+ ```css
24
+ $<componente>-ie-fallback: "sprites"|"GD"
25
+ ```
26
+
27
+ Los valores admitidos son `sprites` y `GD` (Graceful Degradation).
28
+
29
+ #### Estrateg&iacute;a de sprites
30
+
31
+ Por cada componente, Picasso generar&aacute; dinamicamente un sprite para recrear los estilos de cada elemento y setear&aacute; los estilos para que Internet Explorer utilice el sprite generado.
32
+
33
+ #### Estrateg&iacute;a GD
34
+
35
+ Por cada componente, Picasso setear&aacute; estilos minimos, soportados por Internet Explorer, para que el componente siga siendo usable y funcional.
36
+
37
+ ## Componentes disponibles
@@ -0,0 +1,73 @@
1
+ ## Inputs
2
+
3
+ Estilos inputs de textos y selects.
4
+
5
+ ### Ejemplos
6
+
7
+ #### Ejemplo 1
8
+
9
+ <input type="text" class="text-input-demo-1">
10
+
11
+ <p>
12
+ <select class="select-demo-1">
13
+ <option value="1">1</option>
14
+ <option value="2">2</option>
15
+ <option value="3">3</option>
16
+ </select>
17
+ </p>
18
+
19
+ #### Ejemplo 2
20
+
21
+ <input type="text" class="text-input-demo-2">
22
+
23
+ <p>
24
+ <select class="select-demo-2">
25
+ <option value="1">1</option>
26
+ <option value="2">2</option>
27
+ <option value="3">3</option>
28
+ </select>
29
+ </p>
30
+
31
+ ### HTML
32
+
33
+ **Text inputs**
34
+
35
+ ```html
36
+ <input type="text" class="text-input">
37
+ ```
38
+
39
+ **Selects**
40
+
41
+ ```html
42
+ <select class="select">
43
+ <option value="1">1</option>
44
+ <option value="2">2</option>
45
+ <option value="3">3</option>
46
+ </select>
47
+ ```
48
+
49
+ ### Sass
50
+
51
+ Importaci&oacute;n:
52
+
53
+ ```css
54
+ @import "picasso/components/inputs";
55
+ ```
56
+
57
+ Mixin con los par&aacute;metros por defecto:
58
+
59
+ ```css
60
+ .text-input {
61
+ @include input();
62
+ }
63
+ ```
64
+
65
+ Mixin con par&aacute;metros personalizados. Disponibles: ancho, alto, color del borde, color del borde al hacer foco, radio del borde, color del texto, tamaño de la fuente:
66
+
67
+ ```css
68
+ .text-input {
69
+ @include input(100px, 20px, #DDD, blue, 5px, black, 14px);
70
+ }
71
+ ```
72
+
73
+ > **Nota**: El color del borde debe ser en hexadecimal.
@@ -0,0 +1,180 @@
1
+ ## List Grid
2
+
3
+ Para mostrar datos en una grilla utilizando listas.
4
+
5
+ ### Ejemplos
6
+
7
+ #### Ejemplo 1
8
+
9
+ <p>
10
+ <div class="list-grid-demo-1">
11
+ <ul class="first first-column">
12
+ <li class="first odd"></li>
13
+ <li>30 min</li>
14
+ <li class="odd">60 min</li>
15
+ <li>90 min</li>
16
+ </ul>
17
+ <ul>
18
+ <li class="first odd">Vuelo DL - 110</li>
19
+ <li class="hover-cell">0%</li>
20
+ <li class="odd hover-cell">10%</li>
21
+ <li class="hover-cell">0%</li>
22
+ </ul>
23
+ <ul>
24
+ <li class="first odd">Vuelo DD - 112</li>
25
+ <li class="hover-cell">10%</li>
26
+ <li class="odd hover-cell">10%</li>
27
+ <li class="hover-cell">0%</li>
28
+ </ul>
29
+ <ul>
30
+ <li class="first odd">Vuelo DL - 50</li>
31
+ <li class="hover-cell">30%</li>
32
+ <li class="odd hover-cell">20%</li>
33
+ <li class="hover-cell">5%</li>
34
+ </ul>
35
+ </div>
36
+ </p>
37
+
38
+ #### Ejemplo 2
39
+
40
+ <p>
41
+ <div class="list-grid-demo-2">
42
+ <ul>
43
+ <li class="hover-cell">Vuelo 1 - Sale <b>18:00</b> LLega <b>21:00</b> 1 Escala</li>
44
+ <li class="hover-cell">Vuelo 2 - Sale <b>18:00</b> LLega <b>22:00</b> 2 Escala</li>
45
+ <li class="hover-cell">Vuelo 3 - Sale <b>18:00</b> LLega <b>20:00</b> Directo</li>
46
+ <li class="hover-cell">Vuelo 4 - Sale <b>18:00</b> LLega <b>21:00</b> 1 Escala</li>
47
+ <li class="hover-cell">Vuelo 5 - Sale <b>18:00</b> LLega <b>20:30</b> Directo</li>
48
+ </ul>
49
+ </div>
50
+ </p>
51
+
52
+ #### Ejemplo 3
53
+
54
+ <p>
55
+ <div class="list-grid-demo-3">
56
+ <ul class="first">
57
+ <li class="first"></li>
58
+ <li class="even">30 min</li>
59
+ <li>60 min</li>
60
+ <li class="even">90 min</li>
61
+ </ul>
62
+ <ul>
63
+ <li class="first">Vuelo DL - 110</li>
64
+ <li class="even">0%</li>
65
+ <li>10%</li>
66
+ <li class="even">0%</li>
67
+ </ul>
68
+ </div>
69
+ </p>
70
+
71
+ #### Ejemplo 4
72
+
73
+ <p>
74
+ <div class="list-grid-demo-4">
75
+ <ul class="first">
76
+ <li class="first"></li>
77
+ <li class="even">30 min</li>
78
+ <li>60 min</li>
79
+ <li class="even">90 min</li>
80
+ </ul>
81
+ <ul>
82
+ <li class="first">Vuelo DL - 110</li>
83
+ <li class="hover-cell even">0%</li>
84
+ <li class="hover-cell">10%</li>
85
+ <li class="hover-cell even">0%</li>
86
+ </ul>
87
+ <ul>
88
+ <li class="first">Vuelo DL - 25</li>
89
+ <li class="hover-cell even">10%</li>
90
+ <li></li>
91
+ <li class="hover-cell even">6%</li>
92
+ </ul>
93
+ </div>
94
+ </p>
95
+
96
+ ### HTML
97
+
98
+ ```html
99
+ <div class="list-grid">
100
+ <ul>
101
+ <li></li>
102
+ <li>Lorem</li>
103
+ <li>Ipsum</li>
104
+ <li>Dolorem</li>
105
+ </ul>
106
+ <ul>
107
+ <li>Donec</li>
108
+ <li class="hover-cell">Nullam</li>
109
+ <li class="hover-cell">Morbi</li>
110
+ <li class="hover-cell">Praesent</li>
111
+ </ul>
112
+ </div>
113
+ ```
114
+
115
+ > **Nota**: La clase "hover-cell" es utilizada para indicar cuando una celda reacciona ante el hover.
116
+
117
+ ### Sass
118
+
119
+ ```css
120
+ @import "picasso/components/list-grids";
121
+
122
+ // Con valores por defecto
123
+ .text-input {
124
+ @include list-grid();
125
+ }
126
+
127
+ // Con todos los parametros: cell-width, cell-height, border-color, odd-color, even-color, hover-color
128
+
129
+ .text-input {
130
+ @include list-grid(150px, 40px, #999999, #FFFFFF, #319fda, #ff0000);
131
+ }
132
+
133
+ ```
134
+
135
+ Importaci&oacute;n:
136
+
137
+ ```css
138
+ @import "picasso/components/list-grids";
139
+ ```
140
+
141
+ Mixin con los par&aacute;metros por defecto:
142
+
143
+ ```css
144
+ .list{
145
+ @include list-grid();
146
+ }
147
+ ```
148
+
149
+ Mixin con par&aacute;metros personalizados. Disponibles: ancho de la celda, alto de la celda, color del borde, color para celdas impares, color para celdas pares, color para el estado hover:
150
+
151
+ ```css
152
+ .list{
153
+ @include list-grid(150px, 40px, #999999, #FFFFFF, #319fda, #ff0000);
154
+ }
155
+ ```
156
+
157
+ > **Nota**: El color para el estado hover debe ser en hexadecimal.
158
+
159
+ ### Compatibilidad con IE < 9
160
+
161
+ Para la compatibilidad con Internet Explorer < 9 se deben agregar las siguientes clases al HTML: `even`, `odd`, `first`
162
+
163
+ ### HTML compatible con IE < 9
164
+
165
+ ```html
166
+ <div class="list-grid">
167
+ <ul class="first">
168
+ <li class="first odd"></li>
169
+ <li class="even">30 min</li>
170
+ <li class="odd">60 min</li>
171
+ <li class="even">90 min</li>
172
+ </ul>
173
+ <ul>
174
+ <li class="first odd">Vuelo DL - 110</li>
175
+ <li class="even">0%</li>
176
+ <li class="odd">10%</li>
177
+ <li class="even">0%</li>
178
+ </ul>
179
+ </div>
180
+ ```
@@ -0,0 +1,107 @@
1
+ ## Navs
2
+
3
+ Barras de navegaci&oacute;n.
4
+
5
+ ### Ejemplos
6
+
7
+ #### Ejemplo 1
8
+
9
+ <div class="nav-demo-1">
10
+ <ul>
11
+ <li>
12
+ <a href="#">Hoteles</a>
13
+ </li>
14
+ <li>
15
+ <a href="#">Vuelos</a>
16
+ </li>
17
+ <li>
18
+ <a href="#">Paquetes</a>
19
+ </li>
20
+ <li>
21
+ <a href="#">Cruceros</a>
22
+ </li>
23
+ <li class="last active">
24
+ <a href="#">Autos</a>
25
+ </li>
26
+ </ul>
27
+ </div>
28
+
29
+
30
+ #### Ejemplo 2
31
+
32
+ <div class="nav-demo-2">
33
+ <ul>
34
+ <li>
35
+ <a href="#">Hoteles</a>
36
+ </li>
37
+ <li class="active">
38
+ <a href="#">Vuelos</a>
39
+ </li>
40
+ <li>
41
+ <a href="#">Paquetes</a>
42
+ </li>
43
+ <li>
44
+ <a href="#">Cruceros</a>
45
+ </li>
46
+ <li class="last">
47
+ <a href="#">Autos</a>
48
+ </li>
49
+ </ul>
50
+ </div>
51
+
52
+ ### HTML
53
+
54
+ ```html
55
+ <div class="nav">
56
+ <ul>
57
+ <li>
58
+ <a href="#">Item</a>
59
+ </li>
60
+ <li class="active">
61
+ <a href="#">Item</a>
62
+ </li>
63
+ <li class="last">
64
+ <a href="#">Item</a>
65
+ </li>
66
+ </ul>
67
+ </div>
68
+ ```
69
+
70
+ ### Sass
71
+
72
+ Importaci&oacute;n:
73
+
74
+ ```css
75
+ @import "picasso/components/navs";
76
+ ```
77
+
78
+ Mixin con los par&aacute;metros por defecto:
79
+
80
+ ```css
81
+ .nav{
82
+ @include nav();
83
+ }
84
+ ```
85
+
86
+ Mixin con par&aacute;metros personalizados. Disponibles: ancho, alto, background, borde, sombra y float:
87
+
88
+ ```css
89
+ .nav{
90
+ @include nav(435px, 30px, #1164BF, #083C78, black, right);
91
+ }
92
+ ```
93
+
94
+ ### Fallback para IE
95
+
96
+ Variable y valor por defecto:
97
+
98
+ ```css
99
+ $nav-ie-fallback: "sprites" !default;
100
+ ```
101
+
102
+ Estrategias soportadas:
103
+
104
+ * `sprites`
105
+ * `GD`
106
+
107
+ > **Nota**: Para compatibilidad con versiones anteriores a Internet Explorer 9, se debe agregar la clase `last` al HTML del &uacute;ltimo item de la navegaci&oacute;n.