iugu-ux 0.6.5 → 0.6.6
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +192 -0
- data/lib/iugu-ux/version.rb +1 -1
- data/vendor/assets/stylesheets/iugu-ux/sprite-mixins.sass +4 -3
- metadata +5 -4
data/README.md
ADDED
@@ -0,0 +1,192 @@
|
|
1
|
+
# Iugu UX Bundle
|
2
|
+
|
3
|
+
Um pacote de bibliotecas e códigos de apoio (glue code) para facilitar o desenvolvimento de aplicações web.
|
4
|
+
|
5
|
+
### Vendor / Javascripts ( vendor.js )
|
6
|
+
|
7
|
+
- backbone.js
|
8
|
+
- gmaps.js (experimental)
|
9
|
+
- iscroll.js (experimental)
|
10
|
+
- jquery.base64.js
|
11
|
+
- jquery.checkboxes.js
|
12
|
+
- jquery.cookie.js
|
13
|
+
- jquery.ui.js
|
14
|
+
- jquery.ui.touch-punch.js (routeia toques para cliques)
|
15
|
+
- jquery.web-storage.js
|
16
|
+
- underscore.js
|
17
|
+
|
18
|
+
### Iugu-UX / JS ( iugu-ux.js )
|
19
|
+
|
20
|
+
Porquê?
|
21
|
+
|
22
|
+
- Detecta as capacidades de cada navegador e adiciona na tag **html** como classe CSS
|
23
|
+
- .no-js ou .js para suporte à Javascript
|
24
|
+
- .not-ready ou .ready para detectar load de carregamentos básicos
|
25
|
+
- .desktop ou .mobile para tipo de dispositivos
|
26
|
+
- .nome\_SISTEMA para o tipo de navegador
|
27
|
+
- .android ou .ios para o tipo de sistema operacional do dispositivo mobile
|
28
|
+
- .deprecated\_android para sistemas operacionais androids < 3
|
29
|
+
- .os\_SISTEMA para o tipo de sistema operacional
|
30
|
+
- .mediaquery para detectar suportes à modelos adaptativos
|
31
|
+
- .mq-mp => Mobile Portrait
|
32
|
+
- .mq-ml => Mobile Landscape
|
33
|
+
- .mq-tb => Tablets
|
34
|
+
- .mq-ls => Large Screens
|
35
|
+
- .mq-sm => Small Screens
|
36
|
+
- Algumas bibliotecas do Twitter Bootstrap (Experimental) e Google Prettify
|
37
|
+
- Suporte à I18N via arquivos JSON
|
38
|
+
- Organização e inclusão automática de models, delegadores, controladores, apresentadores e funcionalidades
|
39
|
+
- Suporte à playback de Som (Experimental)
|
40
|
+
|
41
|
+
#### Helpers
|
42
|
+
|
43
|
+
detectLanguage: Tenta detectar o idioma do navegador
|
44
|
+
|
45
|
+
getMousePos(evento): Descobre a coordenada do clique ou do touch
|
46
|
+
|
47
|
+
debug( mensagem ): Adiciona uma linha ao console de depuração do navegador
|
48
|
+
|
49
|
+
String.capitalize: Extende a função string para suportar maiúscula na primeira letra
|
50
|
+
|
51
|
+
### Iugu-UX / CSS ( iugu-ux.css )
|
52
|
+
|
53
|
+
Porquê?
|
54
|
+
|
55
|
+
- Helpers: Funções e Mixins em SASS
|
56
|
+
- Gerador Automático de Sprite/Atlas ( Detecção Automática de Retina e Não Retina )
|
57
|
+
- Variáveis
|
58
|
+
- Componentes
|
59
|
+
- Gerador de Código para MediaQuery
|
60
|
+
- Reset / Padronizador HTML
|
61
|
+
- Tipografia
|
62
|
+
- Utilitários
|
63
|
+
|
64
|
+
#### Referência SASS Iugu-UX
|
65
|
+
|
66
|
+
**Core**
|
67
|
+
|
68
|
+
Incluir arquivo "iugu-ux/core"
|
69
|
+
|
70
|
+
- Compass/CSS3 Background Size
|
71
|
+
- Compass/CSS3 Images
|
72
|
+
- Compass/Utilities/Sprites
|
73
|
+
- Compass/CSS3
|
74
|
+
- Mixins
|
75
|
+
- Mixins Adaptativos
|
76
|
+
- Sprites Padrões Iugu
|
77
|
+
|
78
|
+
**Filtros/Seletores Adaptativos**
|
79
|
+
|
80
|
+
Exemplo de uso dos mixins
|
81
|
+
```sass
|
82
|
+
@include for-hd()
|
83
|
+
body
|
84
|
+
background: #FF0000
|
85
|
+
```
|
86
|
+
|
87
|
+
for-hd: Tela de alta definição
|
88
|
+
for-ios-hd: Retina
|
89
|
+
for-no-js: Sem suporte à Javascript
|
90
|
+
for-screen: Tela
|
91
|
+
for-print: Impressão
|
92
|
+
for-mobile-portrait: Dipositivos Portateis ( Retrato )
|
93
|
+
for-mobile-landscape: Dispositivos Portateis ( Paisagem )
|
94
|
+
for-tables: Tablets (768 ateh 1024)
|
95
|
+
for-large-screens: Qualquer tela com resolução maior que 1024
|
96
|
+
for-small-screens: Qualquer tela com resolução menor que 768
|
97
|
+
|
98
|
+
**Filtros/Seletores**
|
99
|
+
|
100
|
+
- box-mode: Ativar Border-Box
|
101
|
+
- block( $n ): Largura de $n X tamanho de bloco (Variável)
|
102
|
+
- text-overflow: Melhora a quebra de texto ( Experimental )
|
103
|
+
- prefix( $variable, $value ): Ativa prefixos de compatibilidade
|
104
|
+
- transition( $transition ): Transições de Navegadores
|
105
|
+
- user-select( $select ): Compatibilidade de Seleção de Usuário
|
106
|
+
|
107
|
+
**Reset**
|
108
|
+
|
109
|
+
- .auto-clear: Ou clear Fix Iugu
|
110
|
+
- .clear
|
111
|
+
|
112
|
+
**Outros Utilitários em Reset (Beta/Troca de Arquivo)**
|
113
|
+
|
114
|
+
- .responsive: Width: 100% (Experimental)
|
115
|
+
- .only-{android,ios,mobile,desktop}: Seleção criteriosa
|
116
|
+
|
117
|
+
**Sprites**
|
118
|
+
|
119
|
+
- build-sprites( $name, $images, $size{ retina, normal } ): Gera automaticamente atlas de sprites, ideal para transformar todas as imagens da aplicação em um único mapa. Leva em consideração e se adapta a telas de alta definição (Retina Display)
|
120
|
+
|
121
|
+
```sass
|
122
|
+
@import "iugu-ux/core"
|
123
|
+
|
124
|
+
$iux-default: sprite-map("iux-default/*.png", $layout: smart, $spacing: 0px, $cleanup: true, $sprite-dimensions: true)
|
125
|
+
@include build-sprites("iux-default", $iux-default, normal)
|
126
|
+
|
127
|
+
@include for-hd()
|
128
|
+
$iux-default-hd: sprite-map("iux-default-hd/*.png", $layout: smart, $spacing: 0px, $cleanup: true, $sprite-dimensions: true)
|
129
|
+
@include build-sprites("iux-default", $iux-default-hd, retina)
|
130
|
+
```
|
131
|
+
|
132
|
+
**Utilitários**
|
133
|
+
|
134
|
+
- .no-bottom-margin
|
135
|
+
- .element-spacing
|
136
|
+
- .b{1..128}: Bloco
|
137
|
+
- .icon-
|
138
|
+
|
139
|
+
**Variáveis**
|
140
|
+
|
141
|
+
```sass
|
142
|
+
$sansFontFamily: Helvetica, Arial, sans-serif
|
143
|
+
|
144
|
+
$baseElementSpacing: 20px
|
145
|
+
$baseFontSize: 14px
|
146
|
+
$baseFontFamily: $sansFontFamily
|
147
|
+
$baseLineHeight: 14px
|
148
|
+
$baseLineSpacing: 6px
|
149
|
+
$baseBlockSize: 20px
|
150
|
+
$baseLineColor: #DDD
|
151
|
+
$baseLineShadowColor: #BBB
|
152
|
+
|
153
|
+
$lineAlternateBackgroundColor: #EFEFEF
|
154
|
+
$lineHighlightBackgroundColor: #E7E7E7
|
155
|
+
|
156
|
+
$gridSpacing: $baseElementSpacing
|
157
|
+
|
158
|
+
$textColor: #333333
|
159
|
+
|
160
|
+
$bodyBackgroundColor: #FFFFFF
|
161
|
+
$applicationBackgroundColor: #F0F0F0
|
162
|
+
|
163
|
+
$headingFontWeight: bold
|
164
|
+
$headingFontColor: #000000
|
165
|
+
|
166
|
+
$white: #FFFFFF
|
167
|
+
$gray: #999999
|
168
|
+
$red: #b94a48
|
169
|
+
$yellow: #f89406
|
170
|
+
$green: #468847
|
171
|
+
$blue: #3a87ad
|
172
|
+
|
173
|
+
$redText: #b94a48
|
174
|
+
$redBackground: #f2dede
|
175
|
+
$redBorder: darken(adjust-hue($redBackground, -10), 3%)
|
176
|
+
|
177
|
+
$yellowText: #c09853
|
178
|
+
$yellowBackground: #fcf8e3
|
179
|
+
$yellowBorder: darken(adjust-hue($yellowBackground, -10), 3%)
|
180
|
+
|
181
|
+
$greenText: #468847
|
182
|
+
$greenBackground: #dff0d8
|
183
|
+
$greenBorder: darken(adjust-hue($greenBackground, -10), 3%)
|
184
|
+
|
185
|
+
$blueText: #3a87ad
|
186
|
+
$blueBackground: #d9edf7
|
187
|
+
$blueBorder: darken(adjust-hue($blueBackground, -10), 3%)
|
188
|
+
```
|
189
|
+
|
190
|
+
### Aplicação (Web-App)
|
191
|
+
|
192
|
+
|
data/lib/iugu-ux/version.rb
CHANGED
@@ -14,14 +14,15 @@
|
|
14
14
|
$tmp-width: image-width(sprite-file($images, $sprite-name))
|
15
15
|
@if $tmp-width > $width
|
16
16
|
$width: $tmp-width
|
17
|
+
$background-width: $width
|
17
18
|
|
18
19
|
.#{$name}-sprite-map
|
19
|
-
@include build-sprite-css( $images, $size, $width )
|
20
|
+
@include build-sprite-css( $images, $size, $background-width )
|
20
21
|
|
21
22
|
@each $sprite-name in $sprite-names
|
22
23
|
$full-sprite-name: "#{$name}-#{$sprite-name}"
|
23
24
|
.#{$full-sprite-name}-no-dimensions
|
24
|
-
@include build-sprite-css( $images, $size, $width )
|
25
|
+
@include build-sprite-css( $images, $size, $background-width )
|
25
26
|
@include sprite($images, $sprite-name)
|
26
27
|
|
27
28
|
$spt_pos: sprite-position($images, $sprite-name)
|
@@ -46,7 +47,7 @@
|
|
46
47
|
top: -($height/2)
|
47
48
|
|
48
49
|
.#{$full-sprite-name}
|
49
|
-
@include build-sprite-css( $images, $size, $width )
|
50
|
+
@include build-sprite-css( $images, $size, $background-width )
|
50
51
|
//@include sprite-background-position($images, $sprite-name)
|
51
52
|
background-position: $xpos $ypos
|
52
53
|
width: $width
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: iugu-ux
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.6.
|
4
|
+
version: 0.6.6
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2012-10-
|
12
|
+
date: 2012-10-23 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: coffee-script
|
@@ -178,6 +178,7 @@ executables: []
|
|
178
178
|
extensions: []
|
179
179
|
extra_rdoc_files: []
|
180
180
|
files:
|
181
|
+
- README.md
|
181
182
|
- Rakefile
|
182
183
|
- lib/iugu-ux.rb
|
183
184
|
- lib/iugu-ux/railtie.rb
|
@@ -354,7 +355,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
354
355
|
version: '0'
|
355
356
|
segments:
|
356
357
|
- 0
|
357
|
-
hash:
|
358
|
+
hash: 535050363371913312
|
358
359
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
359
360
|
none: false
|
360
361
|
requirements:
|
@@ -363,7 +364,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
363
364
|
version: '0'
|
364
365
|
segments:
|
365
366
|
- 0
|
366
|
-
hash:
|
367
|
+
hash: 535050363371913312
|
367
368
|
requirements: []
|
368
369
|
rubyforge_project: iugu-ux
|
369
370
|
rubygems_version: 1.8.24
|