epyce 0.8.2 → 0.8.3
Sign up to get free protection for your applications and to get access to all the features.
- 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: []
|