ZURB-foundation 2.1.5.2 → 2.2
Sign up to get free protection for your applications and to get access to all the features.
- data/README.mkdn +35 -3
- data/lib/ZURB-foundation.rb +2 -2
- data/stylesheets/zurb/_buttons.sass +91 -59
- data/stylesheets/zurb/_forms.sass +62 -30
- data/stylesheets/zurb/_globals.sass +23 -35
- data/stylesheets/zurb/_grid.sass +18 -3
- data/stylesheets/zurb/_mobile.sass +66 -48
- data/stylesheets/zurb/_orbit.sass +16 -33
- data/stylesheets/zurb/_reveal.sass +20 -15
- data/stylesheets/zurb/_typography.sass +7 -13
- data/stylesheets/zurb/_ui.sass +149 -113
- data/stylesheets/zurb/shared/_colors.sass +1 -1
- data/stylesheets/zurb/shared/_mixins.sass +4 -4
- data/templates/project/MIT-LICENSE.txt +1 -1
- data/templates/project/humans.txt +1 -1
- data/templates/project/index.html +35 -23
- data/templates/project/javascripts/app.js +20 -2
- data/templates/project/javascripts/jquery.customforms.js +18 -4
- data/templates/project/javascripts/jquery.orbit-1.4.0.js +9 -3
- data/templates/project/javascripts/jquery.reveal.js +63 -37
- data/templates/project/javascripts/jquery.tooltips.js +126 -76
- data/templates/project/javascripts/modernizr.foundation.js +3 -3
- data/templates/project/manifest.rb +1 -1
- data/templates/project/sass/_settings.sass +15 -12
- data/templates/project/sass/app.sass +14 -7
- data/templates/project/sass/foundation.sass +17 -0
- data/templates/project/sass/ie.sass +15 -1
- metadata +5 -5
- data/templates/project/javascripts/forms.jquery.js +0 -58
data/README.mkdn
CHANGED
|
@@ -18,7 +18,7 @@ In Terminal:
|
|
|
18
18
|
* `git clone git://github.com/zurb/foundation-sass.git`
|
|
19
19
|
* `cd foundation-sass`
|
|
20
20
|
* `sudo gem build ZURB-foundation.gemspec`
|
|
21
|
-
* `sudo gem install ZURB-foundation-2.
|
|
21
|
+
* `sudo gem install ZURB-foundation-2.2.gem`
|
|
22
22
|
|
|
23
23
|
To create your first project
|
|
24
24
|
----------------------------
|
|
@@ -35,6 +35,10 @@ To Add ZURB-foundation to an existing project
|
|
|
35
35
|
* `cd path/to/your-project`
|
|
36
36
|
* run: `compass install ZURB-foundation`
|
|
37
37
|
|
|
38
|
+
Custom Settings
|
|
39
|
+
---------------------------------------------
|
|
40
|
+
Work with your own custom settings by adjusting the _settings.sass file in a new project!
|
|
41
|
+
|
|
38
42
|
|
|
39
43
|
Welcome to Foundation
|
|
40
44
|
=====================
|
|
@@ -43,10 +47,22 @@ Foundation is a rock-solid, responsive framework for rapidly prototyping and ite
|
|
|
43
47
|
|
|
44
48
|
Homepage: http://foundation.zurb.com
|
|
45
49
|
Documentation: http://foundation.zurb.com/docs
|
|
46
|
-
Download: http://foundation.zurb.com/files/foundation-download-2.
|
|
50
|
+
Download: http://foundation.zurb.com/files/foundation-download-2.2.zip
|
|
47
51
|
|
|
48
52
|
Foundation is MIT-licensed and absolutely free to use. Foundation wouldn't be possible without the support of the entire ZURB team, our friends and colleagues who gave feedback, and some luminaries who did some heavy lifting that we took advantage of (thanks guys).
|
|
49
53
|
|
|
54
|
+
Repo Contents
|
|
55
|
+
=============
|
|
56
|
+
|
|
57
|
+
* README
|
|
58
|
+
* IMAGES - Base images for Orbit and some standard elements
|
|
59
|
+
* INCLUDES - Header and footer (currently PHP)
|
|
60
|
+
* index.php
|
|
61
|
+
* JAVASCRIPTS - jQuery, app.js placeholder, placeholder
|
|
62
|
+
* MARKETING - the entire marketing site (foundation.zurb.com)
|
|
63
|
+
* robots.txt - Boilerplate robots file
|
|
64
|
+
* STYLESHEETS - the Foundation stylesheets
|
|
65
|
+
|
|
50
66
|
ZURB
|
|
51
67
|
====
|
|
52
68
|
|
|
@@ -62,7 +78,15 @@ Many thanks to all the people working on Foundation either to improve the base c
|
|
|
62
78
|
WordPress
|
|
63
79
|
|
|
64
80
|
* [Starter Theme](https://github.com/drewsymo/Foundation) by Drew Morris
|
|
65
|
-
* [
|
|
81
|
+
* [Reverie](http://themefortress.com/reverie/) by Zhen
|
|
82
|
+
|
|
83
|
+
Drupal
|
|
84
|
+
|
|
85
|
+
* [Drupal Theme](https://github.com/drewkennelly/foundation7) by Drew Kennelly
|
|
86
|
+
|
|
87
|
+
MODX
|
|
88
|
+
|
|
89
|
+
* [MODX Version](http://designfromwithin.com/blog/2012/02/07/foundation-modx/) by Menno Pietersen
|
|
66
90
|
|
|
67
91
|
.NET
|
|
68
92
|
|
|
@@ -78,6 +102,14 @@ Editors
|
|
|
78
102
|
|
|
79
103
|
* [Textmate/Sublime Text2 Bundle](https://github.com/liamr/Zurb-Foundation-Textmate-Bundle) by Liam R, @liamr
|
|
80
104
|
|
|
105
|
+
PSD Templates
|
|
106
|
+
|
|
107
|
+
* [Desktop, Tablet and Phone Grid Templates](http://foundation.zurb.com/files/foundation-psd-templates.zip ) by Bruce Abel at Portfolio Creative Services Group
|
|
108
|
+
|
|
109
|
+
Grid Generator
|
|
110
|
+
|
|
111
|
+
* [Experimental Grid Generator](http://www.gridlover.net/foundation/) courtesy of [Ville Vanninen](http://foolproof.me)
|
|
112
|
+
|
|
81
113
|
MIT Open Source License
|
|
82
114
|
=======================
|
|
83
115
|
|
data/lib/ZURB-foundation.rb
CHANGED
|
@@ -3,71 +3,44 @@
|
|
|
3
3
|
|
|
4
4
|
.button
|
|
5
5
|
background: $default-color
|
|
6
|
-
border: none
|
|
7
|
-
color: $white
|
|
8
|
-
cursor: pointer
|
|
9
6
|
display: inline-block
|
|
7
|
+
text-align: center
|
|
8
|
+
padding: 9px 34px 11px
|
|
9
|
+
color: $white
|
|
10
|
+
text-decoration: none
|
|
10
11
|
font-weight: bold
|
|
11
|
-
font-
|
|
12
|
+
+font-size(13)
|
|
12
13
|
line-height: 1
|
|
13
|
-
|
|
14
|
+
font-family: $helvetica-font-stack
|
|
14
15
|
position: relative
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
16
|
+
cursor: pointer
|
|
17
|
+
border: none
|
|
18
|
+
outline: none
|
|
19
|
+
margin: 0
|
|
20
|
+
|
|
21
|
+
// Don't use native buttons on iOS
|
|
22
|
+
input[type=submit].button, button.button
|
|
23
|
+
-webkit-appearance: none
|
|
24
|
+
|
|
25
|
+
// Hide inner focus effect in Firefox
|
|
26
|
+
button::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="file"] > input[type="button"]::-moz-focus-inner
|
|
27
|
+
border: none
|
|
28
|
+
|
|
29
|
+
// Nice button
|
|
30
|
+
.button
|
|
19
31
|
&.nice
|
|
20
32
|
background-color: $default-color
|
|
21
|
-
+background-image(linear-gradient(rgba(
|
|
22
|
-
+box-shadow(inset rgba(
|
|
23
|
-
text-shadow: rgba(
|
|
33
|
+
+background-image(linear-gradient(rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 50%, rgba(0,0,0,0) 51%, rgba(0,0,0,0) 100%))
|
|
34
|
+
+box-shadow(inset rgba(255,255,255,0.5) 0 1px 0)
|
|
35
|
+
text-shadow: rgba(0,0,0,0.28) 0 -1px 1px
|
|
24
36
|
border: 1px solid darken($default-color, 7%)
|
|
25
37
|
+transition-property(background-color)
|
|
26
38
|
+transition-duration($button-transition-duration)
|
|
27
39
|
+transition-timing-function(ease-in-out)
|
|
28
|
-
|
|
29
|
-
// Nice button borders
|
|
30
|
-
&.red
|
|
31
|
-
border: solid 1px darken($red, 7%)
|
|
32
|
-
&.blue
|
|
33
|
-
border: solid 1px darken($blue, 7%)
|
|
34
|
-
&.white
|
|
35
|
-
border: solid 1px darken($white, 20%)
|
|
36
|
-
text-shadow: none !important
|
|
37
|
-
&.black
|
|
38
|
-
border: solid 1px darken($black, 7%)
|
|
39
|
-
|
|
40
|
-
// Button colors and hover states
|
|
41
|
-
// Base hover state
|
|
42
|
-
&:hover, &:focus
|
|
43
|
-
background-color: darken($default-color, 5%)
|
|
44
|
-
color: #fff
|
|
45
|
-
&.red
|
|
46
|
-
background-color: $red
|
|
47
|
-
&:hover, &:focus
|
|
48
|
-
background-color: darken($red, 5%)
|
|
49
|
-
&.blue
|
|
50
|
-
background-color: $blue
|
|
51
|
-
&:hover, &:focus
|
|
52
|
-
background-color: darken($blue, 5%)
|
|
53
|
-
&.white
|
|
54
|
-
background-color: darken($white, 15%)
|
|
55
|
-
color: #333
|
|
56
|
-
&:hover, &:focus
|
|
57
|
-
background-color: darken($white, 30%)
|
|
58
|
-
color: #333
|
|
59
|
-
&.black
|
|
60
|
-
background-color: $black
|
|
61
|
-
&:hover, &:focus
|
|
62
|
-
background-color: darken($black, 5%)
|
|
63
|
-
|
|
64
|
-
// Button shapes
|
|
65
40
|
&.radius
|
|
66
41
|
+border-radius(3px)
|
|
67
42
|
&.round
|
|
68
|
-
+border-radius(
|
|
69
|
-
|
|
70
|
-
// Button layout
|
|
43
|
+
+border-radius(3px)
|
|
71
44
|
&.full-width
|
|
72
45
|
width: 100%
|
|
73
46
|
padding-left: 0 !important
|
|
@@ -77,7 +50,11 @@
|
|
|
77
50
|
text-align: left
|
|
78
51
|
text-indent: 12px
|
|
79
52
|
|
|
80
|
-
//
|
|
53
|
+
// Sizes
|
|
54
|
+
&.tiny
|
|
55
|
+
+font-size(10)
|
|
56
|
+
padding: 6px 14px 8px
|
|
57
|
+
width: auto
|
|
81
58
|
&.small
|
|
82
59
|
+font-size(11)
|
|
83
60
|
padding: 8px 20px 10px
|
|
@@ -89,14 +66,69 @@
|
|
|
89
66
|
+font-size(18)
|
|
90
67
|
padding: 11px 48px 13px
|
|
91
68
|
width: auto
|
|
92
|
-
|
|
69
|
+
|
|
70
|
+
// Colors
|
|
71
|
+
&.blue
|
|
72
|
+
background-color: $blue
|
|
73
|
+
&.red
|
|
74
|
+
background-color: $red
|
|
75
|
+
&.white
|
|
76
|
+
background-color: darken($white, 6%)
|
|
77
|
+
color: #333
|
|
78
|
+
&.black
|
|
79
|
+
background-color: lighten($black, 10%)
|
|
80
|
+
&.green
|
|
81
|
+
background-color: $green
|
|
82
|
+
|
|
83
|
+
// Nice Colors
|
|
84
|
+
&.nice
|
|
85
|
+
&.blue
|
|
86
|
+
border: 1px solid darken($blue, 7%)
|
|
87
|
+
&.red
|
|
88
|
+
border: 1px solid darken($red, 7%)
|
|
89
|
+
&.white
|
|
90
|
+
border: 1px solid darken($white, 17%)
|
|
91
|
+
text-shadow: none !important
|
|
92
|
+
&.black
|
|
93
|
+
border: 1px solid lighten($black, 10%)
|
|
94
|
+
&.green
|
|
95
|
+
border: 1px solid darken($green, 7%)
|
|
96
|
+
|
|
97
|
+
// Hovers
|
|
98
|
+
&:hover, &:focus
|
|
99
|
+
background-color: darken($default-color, 6%)
|
|
100
|
+
color: $white
|
|
101
|
+
&.blue:hover, &.blue:focus
|
|
102
|
+
background-color: darken($blue, 6%)
|
|
103
|
+
&.red:hover, &.red:focus
|
|
104
|
+
background-color: darken($red, 6%)
|
|
105
|
+
&.white:hover, &.white:focus
|
|
106
|
+
background-color: darken($white, 13%)
|
|
107
|
+
color: #333
|
|
108
|
+
&.black:hover, &.black:focus
|
|
109
|
+
background-color: $black
|
|
110
|
+
&.green:hover, &.green:focus
|
|
111
|
+
background-color: darken($green, 6%)
|
|
112
|
+
|
|
113
|
+
// Active State for .nice.buttons
|
|
114
|
+
&.nice:active
|
|
115
|
+
+box-shadow(0 1px 0 rgba(0,0,0,0.15))
|
|
116
|
+
|
|
93
117
|
// Button disabled states
|
|
94
118
|
&.disabled, &[disabled]
|
|
95
119
|
opacity: 0.6
|
|
96
120
|
cursor: default
|
|
97
121
|
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
122
|
+
// Correct FF button padding
|
|
123
|
+
@-moz-document url-prefix("http://")
|
|
124
|
+
input[type=submit].button::-moz-focus-inner, button.button::-moz-focus-inner
|
|
125
|
+
border: 0
|
|
126
|
+
padding: 0
|
|
127
|
+
input[type=submit].tiny.button
|
|
128
|
+
padding: 5px 14px 7px
|
|
129
|
+
input[type=submit].small.button
|
|
130
|
+
padding: 7px 20px 8px
|
|
131
|
+
input[type=submit].medium.button
|
|
132
|
+
padding: 8px 34px 9px
|
|
133
|
+
input[type=submit].large.button
|
|
134
|
+
padding: 9px 48px 20px
|
|
@@ -47,11 +47,9 @@ input, textarea
|
|
|
47
47
|
// Text input and textarea sizes
|
|
48
48
|
//-----------------------------------------
|
|
49
49
|
|
|
50
|
-
input
|
|
51
|
-
&.input-text
|
|
52
|
-
width: 254px
|
|
53
|
-
textarea
|
|
50
|
+
input.input-text, textarea
|
|
54
51
|
width: 254px
|
|
52
|
+
+box-sizing(border-box)
|
|
55
53
|
input, textarea
|
|
56
54
|
&.small
|
|
57
55
|
width: 134px
|
|
@@ -59,6 +57,8 @@ input, textarea
|
|
|
59
57
|
width: 254px
|
|
60
58
|
&.large
|
|
61
59
|
width: 434px
|
|
60
|
+
&.expand
|
|
61
|
+
width: 100%
|
|
62
62
|
|
|
63
63
|
// Fieldsets
|
|
64
64
|
//-----------------------------------------
|
|
@@ -90,20 +90,33 @@ form
|
|
|
90
90
|
display: block
|
|
91
91
|
margin-bottom: 9px
|
|
92
92
|
+font-size(11)
|
|
93
|
-
color:
|
|
94
|
-
width:
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
.
|
|
98
|
-
width:
|
|
99
|
-
.
|
|
100
|
-
width:
|
|
93
|
+
color: #c00000
|
|
94
|
+
width: 254px
|
|
95
|
+
+box-sizing(border-box)
|
|
96
|
+
|
|
97
|
+
.small+small.error
|
|
98
|
+
width: 134px
|
|
99
|
+
.medium+small.error
|
|
100
|
+
width: 254px
|
|
101
|
+
.large+small.error
|
|
102
|
+
width: 434px
|
|
103
|
+
.expand+small.error
|
|
104
|
+
width: 100%
|
|
105
|
+
|
|
106
|
+
.small.oversize+small.error
|
|
107
|
+
width: 144px
|
|
108
|
+
.medium.oversize+small.error
|
|
109
|
+
width: 264px
|
|
110
|
+
.large.oversize+small.error
|
|
111
|
+
width: 444px
|
|
112
|
+
.expand.oversize+small.error
|
|
113
|
+
width: 100%
|
|
101
114
|
|
|
102
115
|
// Nicer Forms
|
|
103
116
|
//-----------------------------------------
|
|
104
117
|
|
|
105
118
|
form.nice
|
|
106
|
-
input.input-text, textarea
|
|
119
|
+
div.form-field input, input.input-text, textarea
|
|
107
120
|
border: solid 1px #bbb
|
|
108
121
|
+border-radius(2px)
|
|
109
122
|
+font-size(13)
|
|
@@ -114,9 +127,14 @@ form.nice
|
|
|
114
127
|
background-color: #f9f9f9
|
|
115
128
|
fieldset
|
|
116
129
|
+border-radius(3px)
|
|
117
|
-
.form-field input[disabled], input.input-text[disabled], textarea[disabled]
|
|
130
|
+
div.form-field input[disabled], input.input-text[disabled], textarea[disabled]
|
|
118
131
|
background: #ddd
|
|
119
|
-
|
|
132
|
+
div.form-field input[type=radio], div.form-field input[type=checkbox]
|
|
133
|
+
display: inline
|
|
134
|
+
width: auto
|
|
135
|
+
margin-bottom: 0
|
|
136
|
+
|
|
137
|
+
div.form-field.error small, small.error
|
|
120
138
|
padding: 6px 4px
|
|
121
139
|
border: solid 0 #c00000
|
|
122
140
|
border-width: 0 1px 1px 1px
|
|
@@ -127,13 +145,22 @@ form.nice
|
|
|
127
145
|
font-weight: bold
|
|
128
146
|
+border-bottom-left-radius(2px)
|
|
129
147
|
+border-bottom-right-radius(2px)
|
|
130
|
-
|
|
148
|
+
|
|
149
|
+
div.form-field.error .small+small, .small+small.error
|
|
131
150
|
width: 132px
|
|
132
|
-
.medium
|
|
151
|
+
div.form-field.error .medium+small, .medium+small.error
|
|
133
152
|
width: 252px
|
|
134
|
-
.large
|
|
153
|
+
div.form-field.error .large+small, .large+small.error
|
|
135
154
|
width: 432px
|
|
136
155
|
|
|
156
|
+
div.form-field.error .small.oversize+small, .small.oversize+small.error
|
|
157
|
+
width: 136px
|
|
158
|
+
div.form-field.error .medium.oversize+small, .medium.oversize+small.error
|
|
159
|
+
width: 256px
|
|
160
|
+
div.form-field.error .large.oversize+small, .large.oversize+small.error
|
|
161
|
+
width: 436px
|
|
162
|
+
|
|
163
|
+
|
|
137
164
|
// Custom Forms
|
|
138
165
|
//-------------------------------------------------
|
|
139
166
|
|
|
@@ -156,23 +183,26 @@ form.custom
|
|
|
156
183
|
div.custom
|
|
157
184
|
&.dropdown
|
|
158
185
|
position: relative
|
|
159
|
-
display:
|
|
186
|
+
display: block
|
|
160
187
|
width: auto
|
|
161
188
|
height: 28px
|
|
162
189
|
margin-bottom: 9px
|
|
190
|
+
margin-top: 2px
|
|
163
191
|
a.current
|
|
164
192
|
display: block
|
|
165
193
|
width: auto
|
|
166
194
|
line-height: 26px
|
|
195
|
+
min-height: 26px
|
|
167
196
|
padding: 0 38px 0 6px
|
|
168
197
|
border: solid 1px #ddd
|
|
169
198
|
color: #141414
|
|
199
|
+
background-color: #fff
|
|
170
200
|
a.selector
|
|
171
201
|
position: absolute
|
|
172
202
|
width: 26px
|
|
173
203
|
height: 26px
|
|
174
204
|
display: block
|
|
175
|
-
background: image-url('misc/custom-form-sprites.png') -14px
|
|
205
|
+
background: image-url('misc/custom-form-sprites.png') -14px 1px no-repeat
|
|
176
206
|
right: 0
|
|
177
207
|
top: 0
|
|
178
208
|
border: solid 1px #ddd
|
|
@@ -183,35 +213,37 @@ form.custom
|
|
|
183
213
|
margin: 0
|
|
184
214
|
left: 0
|
|
185
215
|
top: 27px
|
|
186
|
-
margin: 0
|
|
187
216
|
padding: 0
|
|
188
|
-
background:
|
|
217
|
+
background: #fff
|
|
218
|
+
background: rgba(255,255,255,0.95)
|
|
189
219
|
border: solid 1px #ddd
|
|
190
|
-
z-index: 10
|
|
191
220
|
&.show
|
|
192
221
|
display: block
|
|
193
222
|
li
|
|
194
223
|
cursor: pointer
|
|
195
224
|
padding: 3px 38px 3px 6px
|
|
225
|
+
min-height: 18px
|
|
196
226
|
margin: 0
|
|
197
227
|
white-space: nowrap
|
|
198
228
|
&.selected
|
|
199
229
|
background: image-url('misc/custom-form-sprites.png') right -52px no-repeat
|
|
200
230
|
&:hover
|
|
201
|
-
background: image-url('misc/custom-form-sprites.png') $
|
|
231
|
+
background: image-url('misc/custom-form-sprites.png') $default-color right -78px no-repeat
|
|
202
232
|
&:hover
|
|
203
|
-
background-color: $
|
|
233
|
+
background-color: $default-color
|
|
204
234
|
color: #fff
|
|
205
|
-
&:hover
|
|
206
|
-
|
|
207
|
-
background-position: -14px -26px
|
|
235
|
+
&:hover a.selector, &.open a.selector
|
|
236
|
+
background-position: -14px -26px
|
|
208
237
|
&.open
|
|
209
238
|
ul
|
|
210
239
|
display: block
|
|
211
|
-
|
|
212
|
-
|
|
240
|
+
z-index: 10
|
|
241
|
+
|
|
242
|
+
// Custom input, disabled
|
|
213
243
|
.custom.disabled
|
|
214
244
|
background-color: #ddd
|
|
245
|
+
|
|
246
|
+
|
|
215
247
|
// Nicer Customer Forms
|
|
216
248
|
&.nice
|
|
217
249
|
span.custom.checkbox
|