epyce 0.8.2 → 0.8.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/README.md +26 -5
- data/VERSION +1 -1
- data/lib/epyce/version.rb +2 -2
- data/lib/generators/epyce/template/app/assets/javascripts/epyce-libs-debug.js.coffee +5 -5
- data/lib/generators/epyce/template/app/assets/javascripts/epyce-libs.js.coffee +5 -5
- data/lib/generators/epyce/template/app/assets/stylesheets/epyce.css.sass +8 -2
- data/vendor/assets/stylesheets/skeleton/skeleton.sass +287 -0
- metadata +7 -6
data/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
Epyce
|
|
2
2
|
=====
|
|
3
3
|
|
|
4
|
-
HTML Epyce is a a rails layout including
|
|
4
|
+
HTML Epyce is a a rails layout including configurable Skeleton, HTML5S and knockout.js
|
|
5
5
|
|
|
6
6
|
* skeleton (http://www.getskeleton.com/)
|
|
7
7
|
support png background for old IE
|
|
@@ -21,13 +21,15 @@ Provided libs are :
|
|
|
21
21
|
* Underscore.js (http://documentcloud.github.com/underscore)
|
|
22
22
|
provides a lot of the functional programming
|
|
23
23
|
|
|
24
|
+
|
|
25
|
+
For update Infos, follow [http://twitter.com/epyce](@epyce) on twitter
|
|
26
|
+
|
|
24
27
|
Rails Installation
|
|
25
28
|
==================
|
|
26
29
|
|
|
27
30
|
First, make sure the following gems are in your Gemfile
|
|
28
31
|
|
|
29
|
-
gem "epyce", "~> 0.
|
|
30
|
-
gem "haml"
|
|
32
|
+
gem "epyce", "~> 0.8.3"
|
|
31
33
|
|
|
32
34
|
Then run the following
|
|
33
35
|
|
|
@@ -57,8 +59,8 @@ Then run the following
|
|
|
57
59
|
|
|
58
60
|
app/assets/stylesheets/epyce.css.sass
|
|
59
61
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
+
Changes in assets pipeline default behavior
|
|
63
|
+
===========================================
|
|
62
64
|
Epyce change the default asset pipeline behavior included in `application.html.erb` and do not include `application.js` or `application.css`.
|
|
63
65
|
|
|
64
66
|
The layout `application.html.haml` include thiner grained assets (see `epyce.js.coffee` and `epyce.css.sass`) :
|
|
@@ -86,6 +88,25 @@ You can **customize** what css are loaded by editing
|
|
|
86
88
|
|
|
87
89
|
app/assets/javascripts/epyce.css.sass
|
|
88
90
|
|
|
91
|
+
Configure Skeleton big screens width
|
|
92
|
+
====================================
|
|
93
|
+
You can use **Skeleton** with dynamic behavior on big screen by changing values in `app/assets/stylesheets/epyce.css.sass`
|
|
94
|
+
|
|
95
|
+
$skeleton_global_width: 960px
|
|
96
|
+
$skeleton_column_margin_left: 10px
|
|
97
|
+
$skeleton_column_margin_right: 10px
|
|
98
|
+
$skeleton_row_margin_bottom: 20px
|
|
99
|
+
|
|
100
|
+
Due to bug [https://github.com/nex3/sass/issues/46](#46) in sass I have fixed skeleton to 960px when screen width goes below 1200px.
|
|
101
|
+
This mean for example you set `$skeleton_global_width: 1350px`, skeleton will use autoresponsive width like this :
|
|
102
|
+
|
|
103
|
+
| screen width | skeleton effective width |
|
|
104
|
+
| 1400 | 1350 |
|
|
105
|
+
| 1300 | 1350 |
|
|
106
|
+
| 1200 | 1350 |
|
|
107
|
+
| 1199 | 960 |
|
|
108
|
+
| 950 | 768 |
|
|
109
|
+
|
|
89
110
|
|
|
90
111
|
Todo
|
|
91
112
|
====
|
data/VERSION
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
0.8.
|
|
1
|
+
0.8.3
|
data/lib/epyce/version.rb
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# remove the '=' for sign to disable some libs
|
|
2
2
|
|
|
3
|
-
#= require dd_belatedpng.min.js
|
|
4
|
-
#= require head.js
|
|
5
|
-
#= require knockout.debug.js
|
|
6
|
-
#= require respond.min.js
|
|
7
|
-
#= require underscore.js
|
|
3
|
+
#= require epyce-libs-debug/dd_belatedpng.min.js
|
|
4
|
+
#= require epyce-libs-debug/head.js
|
|
5
|
+
#= require epyce-libs-debug/knockout.debug.js
|
|
6
|
+
#= require epyce-libs-debug/respond.min.js
|
|
7
|
+
#= require epyce-libs-debug/underscore.js
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# remove the '=' for sign to disable some libs
|
|
2
2
|
|
|
3
|
-
#= require dd_belatedpng.min.js
|
|
4
|
-
#= require head.min.js
|
|
5
|
-
#= require knockout.js
|
|
6
|
-
#= require respond.min.js
|
|
7
|
-
#= require underscore-min.js
|
|
3
|
+
#= require epyce-libs/dd_belatedpng.min.js
|
|
4
|
+
#= require epyce-libs/head.min.js
|
|
5
|
+
#= require epyce-libs/knockout.js
|
|
6
|
+
#= require epyce-libs/respond.min.js
|
|
7
|
+
#= require epyce-libs/underscore-min.js
|
|
@@ -7,7 +7,13 @@
|
|
|
7
7
|
//= require epyce/mobile.css
|
|
8
8
|
//## Skeleton
|
|
9
9
|
//= require skeleton/base.css
|
|
10
|
-
//=
|
|
11
|
-
|
|
10
|
+
//= require_self
|
|
11
|
+
// require skeleton/layout.css
|
|
12
12
|
//##
|
|
13
13
|
//= require_tree ./application
|
|
14
|
+
|
|
15
|
+
$skeleton_global_width: 960px
|
|
16
|
+
$skeleton_column_margin_left: 10px
|
|
17
|
+
$skeleton_column_margin_right: 10px
|
|
18
|
+
$skeleton_row_margin_bottom: 20px
|
|
19
|
+
@import skeleton/skeleton.sass
|
|
@@ -0,0 +1,287 @@
|
|
|
1
|
+
// Skeleton V1.0.3
|
|
2
|
+
// Copyright 2011, Dave Gamache
|
|
3
|
+
// www.getskeleton.com
|
|
4
|
+
// Free to use under the MIT license.
|
|
5
|
+
// http://www.opensource.org/licenses/mit-license.php
|
|
6
|
+
// 7/17/2011
|
|
7
|
+
|
|
8
|
+
// Table of Contents
|
|
9
|
+
//==================================================
|
|
10
|
+
// #Base 960 Grid
|
|
11
|
+
// #Tablet (Portrait)
|
|
12
|
+
// #Mobile (Portrait)
|
|
13
|
+
// #Mobile (Landscape)
|
|
14
|
+
// #Clearing
|
|
15
|
+
|
|
16
|
+
// #Base Grid
|
|
17
|
+
//==================================================
|
|
18
|
+
|
|
19
|
+
$gwidth: $skeleton_global_width
|
|
20
|
+
|
|
21
|
+
.container
|
|
22
|
+
position: relative
|
|
23
|
+
width: $gwidth
|
|
24
|
+
margin: 0 auto
|
|
25
|
+
padding: 0
|
|
26
|
+
|
|
27
|
+
.column, .columns
|
|
28
|
+
float: left
|
|
29
|
+
display: inline
|
|
30
|
+
margin-left: $skeleton_column_margin_left
|
|
31
|
+
margin-right: $skeleton_column_margin_right
|
|
32
|
+
|
|
33
|
+
.row
|
|
34
|
+
margin-bottom: $skeleton_row_margin_bottom
|
|
35
|
+
|
|
36
|
+
// Nested Column Classes
|
|
37
|
+
|
|
38
|
+
.column.alpha, .columns.alpha
|
|
39
|
+
margin-left: 0
|
|
40
|
+
|
|
41
|
+
.column.omega, .columns.omega
|
|
42
|
+
margin-right: 0
|
|
43
|
+
|
|
44
|
+
// Base Grid
|
|
45
|
+
|
|
46
|
+
.container
|
|
47
|
+
$i: 1
|
|
48
|
+
.one.column
|
|
49
|
+
width: ( $gwidth / 16 ) * $i - $skeleton_column_margin_left - $skeleton_column_margin_right
|
|
50
|
+
.offset-by-one
|
|
51
|
+
padding-left: ( $gwidth / 16 ) * $i
|
|
52
|
+
@each $n in two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen
|
|
53
|
+
$i: $i + 1
|
|
54
|
+
.#{$n}.columns
|
|
55
|
+
width: ( $gwidth / 16 ) * $i - $skeleton_column_margin_left - $skeleton_column_margin_right
|
|
56
|
+
.offset-by-#{$n}
|
|
57
|
+
padding-left: ( $gwidth / 16 ) * $i
|
|
58
|
+
|
|
59
|
+
.one-third.column
|
|
60
|
+
width: $gwidth / 3
|
|
61
|
+
.two-thirds.column
|
|
62
|
+
width: ( $gwidth / 3 ) *2
|
|
63
|
+
|
|
64
|
+
&:after
|
|
65
|
+
content: "\0020"
|
|
66
|
+
display: block
|
|
67
|
+
height: 0
|
|
68
|
+
clear: both
|
|
69
|
+
visibility: hidden
|
|
70
|
+
|
|
71
|
+
// The grid in 960px
|
|
72
|
+
@if $skeleton_global_width > 1199
|
|
73
|
+
@media only screen
|
|
74
|
+
@media (min-width: 960px)
|
|
75
|
+
@media (max-width: 1199px)
|
|
76
|
+
$gwidth: 960px
|
|
77
|
+
|
|
78
|
+
.container
|
|
79
|
+
position: relative
|
|
80
|
+
width: $gwidth
|
|
81
|
+
margin: 0 auto
|
|
82
|
+
padding: 0
|
|
83
|
+
|
|
84
|
+
.column, .columns
|
|
85
|
+
float: left
|
|
86
|
+
display: inline
|
|
87
|
+
margin-left: $skeleton_column_margin_left
|
|
88
|
+
margin-right: $skeleton_column_margin_right
|
|
89
|
+
|
|
90
|
+
.row
|
|
91
|
+
margin-bottom: $skeleton_row_margin_bottom
|
|
92
|
+
|
|
93
|
+
// Nested Column Classes
|
|
94
|
+
|
|
95
|
+
.column.alpha, .columns.alpha
|
|
96
|
+
margin-left: 0
|
|
97
|
+
|
|
98
|
+
.column.omega, .columns.omega
|
|
99
|
+
margin-right: 0
|
|
100
|
+
|
|
101
|
+
.container
|
|
102
|
+
$i: 1
|
|
103
|
+
.one.column
|
|
104
|
+
width: ( $gwidth / 16 ) * $i - $skeleton_column_margin_left - $skeleton_column_margin_right
|
|
105
|
+
.offset-by-one
|
|
106
|
+
padding-left: ( $gwidth / 16 ) * $i
|
|
107
|
+
@each $n in two, three, four, five, six, seven, eight, nine, ten, eleven, twelve, thirteen, fourteen, fifteen, sixteen
|
|
108
|
+
$i: $i + 1
|
|
109
|
+
.#{$n}.columns
|
|
110
|
+
width: ( $gwidth / 16 ) * $i - $skeleton_column_margin_left - $skeleton_column_margin_right
|
|
111
|
+
.offset-by-#{$n}
|
|
112
|
+
padding-left: ( $gwidth / 16 ) * $i
|
|
113
|
+
|
|
114
|
+
.one-third.column
|
|
115
|
+
width: $gwidth / 3
|
|
116
|
+
.two-thirds.column
|
|
117
|
+
width: ( $gwidth / 3 ) *2
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
// Offsets
|
|
121
|
+
|
|
122
|
+
// #Tablet (Portrait)
|
|
123
|
+
//==================================================
|
|
124
|
+
|
|
125
|
+
// Note: Design for a width of 768px
|
|
126
|
+
|
|
127
|
+
@media only screen and (min-width: 768px) and (max-width: 959px)
|
|
128
|
+
.container
|
|
129
|
+
width: 768px
|
|
130
|
+
.column, .columns
|
|
131
|
+
margin-left: 10px
|
|
132
|
+
margin-right: 10px
|
|
133
|
+
.column.alpha, .columns.alpha
|
|
134
|
+
margin-left: 0
|
|
135
|
+
margin-right: 10px
|
|
136
|
+
.column.omega, .columns.omega
|
|
137
|
+
margin-right: 0
|
|
138
|
+
margin-left: 10px
|
|
139
|
+
.container
|
|
140
|
+
.one.column
|
|
141
|
+
width: 28px
|
|
142
|
+
.two.columns
|
|
143
|
+
width: 76px
|
|
144
|
+
.three.columns
|
|
145
|
+
width: 124px
|
|
146
|
+
.four.columns
|
|
147
|
+
width: 172px
|
|
148
|
+
.five.columns
|
|
149
|
+
width: 220px
|
|
150
|
+
.six.columns
|
|
151
|
+
width: 268px
|
|
152
|
+
.seven.columns
|
|
153
|
+
width: 316px
|
|
154
|
+
.eight.columns
|
|
155
|
+
width: 364px
|
|
156
|
+
.nine.columns
|
|
157
|
+
width: 412px
|
|
158
|
+
.ten.columns
|
|
159
|
+
width: 460px
|
|
160
|
+
.eleven.columns
|
|
161
|
+
width: 508px
|
|
162
|
+
.twelve.columns
|
|
163
|
+
width: 556px
|
|
164
|
+
.thirteen.columns
|
|
165
|
+
width: 604px
|
|
166
|
+
.fourteen.columns
|
|
167
|
+
width: 652px
|
|
168
|
+
.fifteen.columns
|
|
169
|
+
width: 700px
|
|
170
|
+
.sixteen.columns
|
|
171
|
+
width: 748px
|
|
172
|
+
.one-third.column
|
|
173
|
+
width: 236px
|
|
174
|
+
.two-thirds.column
|
|
175
|
+
width: 492px
|
|
176
|
+
.offset-by-one
|
|
177
|
+
padding-left: 48px
|
|
178
|
+
.offset-by-two
|
|
179
|
+
padding-left: 96px
|
|
180
|
+
.offset-by-three
|
|
181
|
+
padding-left: 144px
|
|
182
|
+
.offset-by-four
|
|
183
|
+
padding-left: 192px
|
|
184
|
+
.offset-by-five
|
|
185
|
+
padding-left: 288px
|
|
186
|
+
.offset-by-six
|
|
187
|
+
padding-left: 336px
|
|
188
|
+
.offset-by-seven
|
|
189
|
+
padding-left: 348px
|
|
190
|
+
.offset-by-eight
|
|
191
|
+
padding-left: 432px
|
|
192
|
+
.offset-by-nine
|
|
193
|
+
padding-left: 480px
|
|
194
|
+
.offset-by-ten
|
|
195
|
+
padding-left: 528px
|
|
196
|
+
.offset-by-eleven
|
|
197
|
+
padding-left: 576px
|
|
198
|
+
.offset-by-twelve
|
|
199
|
+
padding-left: 624px
|
|
200
|
+
.offset-by-thirteen
|
|
201
|
+
padding-left: 672px
|
|
202
|
+
.offset-by-fourteen
|
|
203
|
+
padding-left: 720px
|
|
204
|
+
.offset-by-fifteen
|
|
205
|
+
padding-left: 900px
|
|
206
|
+
// Offsets
|
|
207
|
+
|
|
208
|
+
// #Mobile (Portrait)
|
|
209
|
+
//==================================================
|
|
210
|
+
|
|
211
|
+
// Note: Design for a width of 320px
|
|
212
|
+
|
|
213
|
+
@media only screen and (max-width: 767px)
|
|
214
|
+
.container
|
|
215
|
+
width: 300px
|
|
216
|
+
.columns, .column
|
|
217
|
+
margin: 0
|
|
218
|
+
.container
|
|
219
|
+
.one.column, .two.columns, .three.columns, .four.columns, .five.columns, .six.columns, .seven.columns, .eight.columns, .nine.columns, .ten.columns, .eleven.columns, .twelve.columns, .thirteen.columns, .fourteen.columns, .fifteen.columns, .sixteen.columns, .one-third.column, .two-thirds.column
|
|
220
|
+
width: 300px
|
|
221
|
+
.offset-by-one, .offset-by-two, .offset-by-three, .offset-by-four, .offset-by-five, .offset-by-six, .offset-by-seven, .offset-by-eight, .offset-by-nine, .offset-by-ten, .offset-by-eleven, .offset-by-twelve, .offset-by-thirteen, .offset-by-fourteen, .offset-by-fifteen
|
|
222
|
+
padding-left: 0
|
|
223
|
+
// Offsets
|
|
224
|
+
|
|
225
|
+
// #Mobile (Landscape)
|
|
226
|
+
//==================================================
|
|
227
|
+
|
|
228
|
+
// Note: Design for a width of 480px
|
|
229
|
+
|
|
230
|
+
@media only screen and (min-width: 480px) and (max-width: 767px)
|
|
231
|
+
.container
|
|
232
|
+
width: 420px
|
|
233
|
+
.columns, .column
|
|
234
|
+
margin: 0
|
|
235
|
+
.container
|
|
236
|
+
.one.column, .two.columns, .three.columns, .four.columns, .five.columns, .six.columns, .seven.columns, .eight.columns, .nine.columns, .ten.columns, .eleven.columns, .twelve.columns, .thirteen.columns, .fourteen.columns, .fifteen.columns, .sixteen.columns, .one-third.column, .two-thirds.column
|
|
237
|
+
width: 420px
|
|
238
|
+
|
|
239
|
+
// #Clearing
|
|
240
|
+
//==================================================
|
|
241
|
+
|
|
242
|
+
// Self Clearing Goodness
|
|
243
|
+
|
|
244
|
+
// Use clearfix class on parent to clear nested columns,
|
|
245
|
+
//or wrap each row of columns in a <div class="row">
|
|
246
|
+
|
|
247
|
+
.clearfix
|
|
248
|
+
&:before, &:after
|
|
249
|
+
content: '\0020'
|
|
250
|
+
display: block
|
|
251
|
+
overflow: hidden
|
|
252
|
+
visibility: hidden
|
|
253
|
+
width: 0
|
|
254
|
+
height: 0
|
|
255
|
+
|
|
256
|
+
.row
|
|
257
|
+
&:before
|
|
258
|
+
content: '\0020'
|
|
259
|
+
display: block
|
|
260
|
+
overflow: hidden
|
|
261
|
+
visibility: hidden
|
|
262
|
+
width: 0
|
|
263
|
+
height: 0
|
|
264
|
+
&:after
|
|
265
|
+
content: '\0020'
|
|
266
|
+
display: block
|
|
267
|
+
overflow: hidden
|
|
268
|
+
visibility: hidden
|
|
269
|
+
width: 0
|
|
270
|
+
height: 0
|
|
271
|
+
clear: both
|
|
272
|
+
|
|
273
|
+
.clearfix:after
|
|
274
|
+
clear: both
|
|
275
|
+
|
|
276
|
+
.row, .clearfix
|
|
277
|
+
zoom: 1
|
|
278
|
+
|
|
279
|
+
// You can also use a <br class="clear" /> to clear columns
|
|
280
|
+
|
|
281
|
+
.clear
|
|
282
|
+
clear: both
|
|
283
|
+
display: block
|
|
284
|
+
overflow: hidden
|
|
285
|
+
visibility: hidden
|
|
286
|
+
width: 0
|
|
287
|
+
height: 0
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: epyce
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.8.
|
|
4
|
+
version: 0.8.3
|
|
5
5
|
prerelease:
|
|
6
6
|
platform: ruby
|
|
7
7
|
authors:
|
|
@@ -9,12 +9,12 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2011-
|
|
12
|
+
date: 2011-08-03 00:00:00.000000000 +02:00
|
|
13
13
|
default_executable:
|
|
14
14
|
dependencies:
|
|
15
15
|
- !ruby/object:Gem::Dependency
|
|
16
16
|
name: railties
|
|
17
|
-
requirement: &
|
|
17
|
+
requirement: &70333605142680 !ruby/object:Gem::Requirement
|
|
18
18
|
none: false
|
|
19
19
|
requirements:
|
|
20
20
|
- - ~>
|
|
@@ -22,10 +22,10 @@ dependencies:
|
|
|
22
22
|
version: 3.1.0.rc1
|
|
23
23
|
type: :runtime
|
|
24
24
|
prerelease: false
|
|
25
|
-
version_requirements: *
|
|
25
|
+
version_requirements: *70333605142680
|
|
26
26
|
- !ruby/object:Gem::Dependency
|
|
27
27
|
name: haml
|
|
28
|
-
requirement: &
|
|
28
|
+
requirement: &70333605142220 !ruby/object:Gem::Requirement
|
|
29
29
|
none: false
|
|
30
30
|
requirements:
|
|
31
31
|
- - ! '>='
|
|
@@ -33,7 +33,7 @@ dependencies:
|
|
|
33
33
|
version: '0'
|
|
34
34
|
type: :runtime
|
|
35
35
|
prerelease: false
|
|
36
|
-
version_requirements: *
|
|
36
|
+
version_requirements: *70333605142220
|
|
37
37
|
description: define a new layout and change asset manager defaults to get advantage
|
|
38
38
|
of skeleton (http://www.getskeleton.com/),Damian Le Nouaille HTML5S (https://github.com/damln/Html5S)
|
|
39
39
|
and knockout (http://knockoutjs.com)
|
|
@@ -85,6 +85,7 @@ files:
|
|
|
85
85
|
- vendor/assets/stylesheets/skeleton/base.css
|
|
86
86
|
- vendor/assets/stylesheets/skeleton/layout.css
|
|
87
87
|
- vendor/assets/stylesheets/skeleton/skeleton.css
|
|
88
|
+
- vendor/assets/stylesheets/skeleton/skeleton.sass
|
|
88
89
|
has_rdoc: true
|
|
89
90
|
homepage: http://github.com/yarmand/epyce
|
|
90
91
|
licenses: []
|