picasso 0.0.2 → 0.0.3
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.
- data/docs/all.html +231 -9
- data/docs/arrows.html +122 -65
- data/docs/bubbles.html +121 -64
- data/docs/build/manifest.json +2 -2
- data/docs/build/md/arrows.md +3 -1
- data/docs/build/md/bubbles.md +2 -0
- data/docs/build/md/buttons.md +5 -1
- data/docs/build/md/changelog.md +18 -0
- data/docs/build/md/components.md +2 -0
- data/docs/build/md/despegar.md +2 -0
- data/docs/build/md/docs.md +21 -0
- data/docs/build/md/ie.md +32 -0
- data/docs/build/md/intro.md +42 -1
- data/docs/build/md/todo.md +3 -0
- data/docs/build/md/utils.md +2 -0
- data/docs/build/templates/layout.html +36 -8
- data/docs/build/templates/page.html +0 -21
- data/docs/buttons.html +125 -65
- data/docs/changelog.html +164 -0
- data/docs/components.html +120 -65
- data/docs/css/markdown.css +1 -1
- data/docs/css/style.css +24 -0
- data/docs/despegar.html +120 -65
- data/docs/docs.html +165 -0
- data/docs/ie.html +170 -0
- data/docs/index.html +147 -65
- data/docs/intro.html +147 -65
- data/docs/todo.html +148 -0
- data/docs/utils.html +120 -65
- data/lib/picasso/version.rb +1 -1
- data/picasso.gemspec +12 -11
- data/stylesheets/picasso/components/buttons/_buttons.scss +16 -1
- data/stylesheets/picasso/components/buttons/_mini-buttons.scss +16 -1
- data/templates/project/manifest.rb +11 -0
- metadata +19 -4
data/docs/bubbles.html
CHANGED
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
<!
|
|
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
|
|
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,67 +17,123 @@
|
|
|
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&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&oacute;n</a></li>
|
|
43
|
+
|
|
44
|
+
<li><a href="./intro.html#actualizacioacuten">Actualizaci&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&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
|
-
|
|
20
|
-
|
|
21
|
-
|
|
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="bubbles"></a><h2>Bubbles</h2>
|
|
134
|
+
<p>Ideales para mostrar comentarios de clientes.
|
|
135
|
+
|
|
136
|
+
</p>
|
|
78
137
|
<a name="ejemplos"></a><h3>Ejemplos</h3>
|
|
79
138
|
<div class="bubble-demo-1">
|
|
80
139
|
<blockquote>
|
|
@@ -113,11 +172,9 @@
|
|
|
113
172
|
|
|
114
173
|
|
|
115
174
|
<footer>
|
|
116
|
-
<a href="./all.html">Everything on a single page</a>
|
|
117
|
-
|
|
118
175
|
</footer>
|
|
119
176
|
|
|
120
|
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.
|
|
177
|
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
121
178
|
<script src="./js/docs.js"></script>
|
|
122
179
|
<script src="./js/rainbow-custom.min.js"></script>
|
|
123
180
|
|
data/docs/build/manifest.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
{
|
|
2
|
-
"title": "Picasso
|
|
3
|
-
"files": ["md/intro.md", "md/components.md", "md/buttons.md", "md/arrows.md", "md/bubbles.md", "md/utils.md", "md/despegar.md"]
|
|
2
|
+
"title": "Picasso. Framework CSS/Sass.",
|
|
3
|
+
"files": ["md/intro.md", "md/changelog.md", "md/todo.md", "md/docs.md","md/components.md", "md/buttons.md", "md/arrows.md", "md/bubbles.md", "md/ie.md" ,"md/utils.md", "md/despegar.md"]
|
|
4
4
|
}
|
data/docs/build/md/arrows.md
CHANGED
data/docs/build/md/bubbles.md
CHANGED
data/docs/build/md/buttons.md
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
## Buttons
|
|
2
2
|
|
|
3
|
+
Ideales para situaciones en que se necesita un call-to-action.
|
|
4
|
+
|
|
3
5
|
### Ejemplos
|
|
4
6
|
|
|
5
7
|
<a class="button-demo-1" href="#">
|
|
@@ -15,7 +17,7 @@
|
|
|
15
17
|
</a>
|
|
16
18
|
|
|
17
19
|
<a class="button-demo-4" href="#">
|
|
18
|
-
<span>Un texto demasiado largo para este
|
|
20
|
+
<span>Un texto demasiado largo para este botón</span>
|
|
19
21
|
</a>
|
|
20
22
|
|
|
21
23
|
### HTML
|
|
@@ -44,6 +46,8 @@
|
|
|
44
46
|
|
|
45
47
|
## Mini-Buttons
|
|
46
48
|
|
|
49
|
+
Perfectos para acciones simples que influyen en la interfaz.
|
|
50
|
+
|
|
47
51
|
### Ejemplos
|
|
48
52
|
|
|
49
53
|
<a class="mini-button-demo-1" href="#">
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## 0.0.3
|
|
4
|
+
|
|
5
|
+
* Agregados estilos de fallback para Internet Explorer.
|
|
6
|
+
* Soporte para CSS3 Pie (de manera predeterminado apagado).
|
|
7
|
+
* Agregada la documentación sobre la generación de docs.
|
|
8
|
+
|
|
9
|
+
## 0.0.2
|
|
10
|
+
|
|
11
|
+
* Modularización del componente.
|
|
12
|
+
* Agregados: buttons, mini-buttons, bubbles y arrows.
|
|
13
|
+
* Creación de la documentación.
|
|
14
|
+
|
|
15
|
+
## 0.0.1
|
|
16
|
+
|
|
17
|
+
* Versión inicial.
|
|
18
|
+
* Agregadas las variables de la marca Despegar y clearfix.
|
data/docs/build/md/components.md
CHANGED
data/docs/build/md/despegar.md
CHANGED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
# Generar la documentación
|
|
2
|
+
|
|
3
|
+
* Para generar una nueva versión de la documentación es necesario tener instalado node.js: http://nodejs.org/#download
|
|
4
|
+
|
|
5
|
+
* Abrir una terminal e instalar [Beautiful docs](http://beautifuldocs.com/):
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
$ npm install beautiful-docs -g
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
* Crear (o actualizar) los archivos `.md` (`docs/build/md`) con la documentación pertinente. En caso de agregar un nuevo archivo `.md`, actualizar el `manifest.json`.
|
|
12
|
+
|
|
13
|
+
Nota: Cada `.md` es un archivo de texto plano escrito con la sintaxis [markdown](http://daringfireball.net/projects/markdown/basics).
|
|
14
|
+
|
|
15
|
+
* Pararse sobre la carpeta raiz del proyecto y ejecutar:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
bfdocs --base-url='.' --templates-dir='docs/build/templates/' docs/build/manifest.json docs
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
* Revisar que la documentación se haya generado correctamente abriendo el archivo `.html` pertinente.
|
data/docs/build/md/ie.md
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
## Internet Explorer
|
|
2
|
+
|
|
3
|
+
La gran mayorí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 único requisito es que la página que carga los estilos generados por Picasso posean la [técnica de clases condicionales en la etiqueta html](http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/):
|
|
4
|
+
|
|
5
|
+
```html
|
|
6
|
+
<!DOCTYPE html>
|
|
7
|
+
<!--[if IE 7]> <html class="ie7"> <![endif]-->
|
|
8
|
+
<!--[if IE 8]> <html class="ie8"> <![endif]-->
|
|
9
|
+
<!--[if IE 9]> <html class="ie9"> <![endif]-->
|
|
10
|
+
<!--[if gt IE 9]><!--> <html> <!--<![endif]-->
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
### CSS3 Pie
|
|
14
|
+
|
|
15
|
+
Picasso además ofrece soporte para [CSS3 Pie](http://css3pie.com/). Su soporte esta apagado de forma predeterminada. Para habilitarlo, en el archivo Sass que hace uso de los mixins, agregar la siguiente variable:
|
|
16
|
+
|
|
17
|
+
```css
|
|
18
|
+
$experimental-support-for-pie: true;
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Notas:
|
|
22
|
+
- También es requisito que la página posea la técnica de clases condicionales en la etiqueta html.
|
|
23
|
+
- Cuando el soporte de CSS3 Pie esta activado, los estilos de fallback no son cargados.
|
|
24
|
+
|
|
25
|
+
Un punto importante a tener en cuenta es la definició de la variable `$pie-behavior` con la ruta del archivo `.htc`:
|
|
26
|
+
|
|
27
|
+
```css
|
|
28
|
+
$pie-behavior stylesheet-url("PIE.htc")
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
Para otras opciones relacionadas, consultar la documentación pertinente de Compass: http://compass-style.org/reference/compass/css3/pie/
|
|
32
|
+
|
data/docs/build/md/intro.md
CHANGED
|
@@ -1 +1,42 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Introducción
|
|
2
|
+
|
|
3
|
+
## Repositorio
|
|
4
|
+
|
|
5
|
+
http://gitorious.despegar.it/picasso/picasso
|
|
6
|
+
|
|
7
|
+
## Instalación
|
|
8
|
+
|
|
9
|
+
Ejecutar:
|
|
10
|
+
|
|
11
|
+
```bash
|
|
12
|
+
$ (sudo) gem install picasso
|
|
13
|
+
```
|
|
14
|
+
|
|
15
|
+
En el config.rb agregar:
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
require 'picasso'
|
|
19
|
+
gem 'picasso', '~> 0.0.3'
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
Modificar el número de versión a medida que se quiere usar nuevas versiones del framework.
|
|
23
|
+
|
|
24
|
+
Finalmente, en el archivo Sass importar el framework completo:
|
|
25
|
+
|
|
26
|
+
```bash
|
|
27
|
+
@import "picasso";
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
o sólo lo necesario:
|
|
31
|
+
|
|
32
|
+
```bash
|
|
33
|
+
@import "picasso/components/buttons";
|
|
34
|
+
@import "picasso/despegar/variables";
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
## Actualización
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
$ (sudo) gem update picasso
|
|
41
|
+
```
|
|
42
|
+
|
data/docs/build/md/utils.md
CHANGED
|
@@ -1,5 +1,8 @@
|
|
|
1
|
-
<!
|
|
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">
|
|
@@ -17,20 +20,45 @@
|
|
|
17
20
|
|
|
18
21
|
<% if not @noHeader: %>
|
|
19
22
|
<header>
|
|
20
|
-
<h1
|
|
23
|
+
<h1><%= @manifest.title %></h1>
|
|
21
24
|
</header>
|
|
22
25
|
<% end %>
|
|
23
26
|
|
|
27
|
+
<% if not @noToc: %>
|
|
28
|
+
|
|
29
|
+
<hr>
|
|
30
|
+
|
|
31
|
+
<h2>Contenidos</h2>
|
|
32
|
+
|
|
33
|
+
<aside>
|
|
34
|
+
<nav>
|
|
35
|
+
<ol>
|
|
36
|
+
<% for entry in @manifest.tableOfContent: %>
|
|
37
|
+
<li>
|
|
38
|
+
<a href="<%= @baseUrl %><%- entry.slug %>.html#<%= entry.anchor %>"><%= entry.title %></a>
|
|
39
|
+
<% if entry.childs: %>
|
|
40
|
+
<ol>
|
|
41
|
+
<% for child in entry.childs: %>
|
|
42
|
+
<li><a href="<%= @baseUrl %><%- child.slug %>.html#<%= child.anchor %>"><%= child.title %></a></li>
|
|
43
|
+
<% end %>
|
|
44
|
+
</ol>
|
|
45
|
+
<% end %>
|
|
46
|
+
</li>
|
|
47
|
+
<% end %>
|
|
48
|
+
</ol>
|
|
49
|
+
</nav>
|
|
50
|
+
</aside>
|
|
51
|
+
|
|
52
|
+
<% end %>
|
|
53
|
+
|
|
54
|
+
<hr>
|
|
55
|
+
|
|
24
56
|
<%- @content %>
|
|
25
57
|
|
|
26
58
|
<footer>
|
|
27
|
-
<a href="<%= @baseUrl %>all.html">Everything on a single page</a>
|
|
28
|
-
<% if @manifest.options.github: %>
|
|
29
|
-
- <a href="https://github.com/<%= @manifest.options.github %>" id="fork-me-on-github">Fork me on Github</a>
|
|
30
|
-
<% end %>
|
|
31
59
|
</footer>
|
|
32
60
|
|
|
33
|
-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.
|
|
61
|
+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
|
|
34
62
|
<script src="<%= @baseUrl %>js/docs.js"></script>
|
|
35
63
|
<script src="<%= @baseUrl %>js/rainbow-custom.min.js"></script>
|
|
36
64
|
|