skeleton-rails 0.0.2 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- data/README.md +1 -9
- data/lib/generators/skeleton/install/install_generator.rb +1 -3
- data/lib/skeleton-rails/version.rb +1 -1
- data/skeleton-rails.gemspec +2 -2
- data/vendor/assets/stylesheets/base.css +14 -80
- data/vendor/assets/stylesheets/layout.css +2 -2
- data/vendor/assets/stylesheets/skeleton.css +70 -10
- metadata +5 -6
- data/vendor/assets/javascripts/tabs.js +0 -42
data/README.md
CHANGED
@@ -1,7 +1,5 @@
|
|
1
1
|
# skeleton-rails
|
2
2
|
|
3
|
-
![Skeleton](http://i.minus.com/iH51VXxPPD1jJ.png)
|
4
|
-
|
5
3
|
[Skeleton](http://getskeleton.com) is a Beautiful Boilerplate for Responsive, Mobile-Friendly Development, a CSS framework.
|
6
4
|
|
7
5
|
Currently Skeleton supports:
|
@@ -36,12 +34,6 @@ command. This should add:
|
|
36
34
|
= require skeleton
|
37
35
|
```
|
38
36
|
|
39
|
-
into `app/assets/stylesheets/application.css`.
|
40
|
-
|
41
|
-
```ruby
|
42
|
-
= require tabs
|
43
|
-
```
|
44
|
-
|
45
|
-
into `app/assets/javascripts/application.js`
|
37
|
+
into `app/assets/stylesheets/application.css`.
|
46
38
|
|
47
39
|
That's it, have fun!
|
@@ -25,14 +25,12 @@ else
|
|
25
25
|
app_scss = File.join(::Rails.root, 'app', 'assets', 'stylesheets', 'application.scss')
|
26
26
|
app_css = File.join(::Rails.root, 'app', 'assets', 'stylesheets', 'application.css')
|
27
27
|
|
28
|
-
insert_into_file File.join(::Rails.root, 'app', 'assets', 'javascripts', 'application.js'), "//= require tabs\n", :after => "jquery_ujs\n"
|
29
|
-
|
30
28
|
if File.exist?(app_scss)
|
31
29
|
insert_into_file app_scss, css_inject, :after => "require_self\n"
|
32
30
|
elsif File.exist?(app_css)
|
33
31
|
insert_into_file app_css, css_inject, :after => "require_self\n"
|
34
32
|
else
|
35
|
-
say_status('Nor application.css/application.scss could not be found!')
|
33
|
+
say_status('','Nor application.css/application.scss could not be found!')
|
36
34
|
end
|
37
35
|
end
|
38
36
|
end
|
data/skeleton-rails.gemspec
CHANGED
@@ -5,8 +5,8 @@ require "skeleton-rails/version"
|
|
5
5
|
Gem::Specification.new do |s|
|
6
6
|
s.name = "skeleton-rails"
|
7
7
|
s.version = Skeleton::Rails::VERSION
|
8
|
-
s.authors = ["
|
9
|
-
s.email = ["
|
8
|
+
s.authors = ["Helios Technologies"]
|
9
|
+
s.email = ["support@heliostech.fr"]
|
10
10
|
s.homepage = "https://github.com/helios-technologies/skeleton-rails"
|
11
11
|
s.summary = %q{Skeleton CSS for Rails}
|
12
12
|
s.description = %q{A gem, which injects Skeleton CSS framework functionality into Ruby on Rails application}
|
@@ -1,10 +1,10 @@
|
|
1
1
|
/*
|
2
|
-
* Skeleton V1.
|
2
|
+
* Skeleton V1.2
|
3
3
|
* Copyright 2011, Dave Gamache
|
4
4
|
* www.getskeleton.com
|
5
5
|
* Free to use under the MIT license.
|
6
6
|
* http://www.opensource.org/licenses/mit-license.php
|
7
|
-
*
|
7
|
+
* 6/20/2012
|
8
8
|
*/
|
9
9
|
|
10
10
|
|
@@ -18,7 +18,6 @@
|
|
18
18
|
#Lists
|
19
19
|
#Images
|
20
20
|
#Buttons
|
21
|
-
#Tabs
|
22
21
|
#Forms
|
23
22
|
#Misc */
|
24
23
|
|
@@ -64,7 +63,7 @@
|
|
64
63
|
================================================== */
|
65
64
|
h1, h2, h3, h4, h5, h6 {
|
66
65
|
color: #181818;
|
67
|
-
font-family: "Georgia", "Times New Roman",
|
66
|
+
font-family: "Georgia", "Times New Roman", serif;
|
68
67
|
font-weight: normal; }
|
69
68
|
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
|
70
69
|
h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
|
@@ -128,7 +127,7 @@
|
|
128
127
|
/* #Buttons
|
129
128
|
================================================== */
|
130
129
|
|
131
|
-
|
130
|
+
.button,
|
132
131
|
button,
|
133
132
|
input[type="submit"],
|
134
133
|
input[type="reset"],
|
@@ -143,7 +142,6 @@
|
|
143
142
|
border: 1px solid #aaa;
|
144
143
|
border-top: 1px solid #ccc;
|
145
144
|
border-left: 1px solid #ccc;
|
146
|
-
padding: 4px 12px;
|
147
145
|
-moz-border-radius: 3px;
|
148
146
|
-webkit-border-radius: 3px;
|
149
147
|
border-radius: 3px;
|
@@ -155,10 +153,11 @@
|
|
155
153
|
text-shadow: 0 1px rgba(255, 255, 255, .75);
|
156
154
|
cursor: pointer;
|
157
155
|
margin-bottom: 20px;
|
158
|
-
line-height:
|
156
|
+
line-height: normal;
|
157
|
+
padding: 8px 10px;
|
159
158
|
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
|
160
159
|
|
161
|
-
|
160
|
+
.button:hover,
|
162
161
|
button:hover,
|
163
162
|
input[type="submit"]:hover,
|
164
163
|
input[type="reset"]:hover,
|
@@ -175,7 +174,7 @@
|
|
175
174
|
border-top: 1px solid #aaa;
|
176
175
|
border-left: 1px solid #aaa; }
|
177
176
|
|
178
|
-
|
177
|
+
.button:active,
|
179
178
|
button:active,
|
180
179
|
input[type="submit"]:active,
|
181
180
|
input[type="reset"]:active,
|
@@ -199,77 +198,12 @@
|
|
199
198
|
padding-right: 0 !important;
|
200
199
|
text-align: center; }
|
201
200
|
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
206
|
-
|
207
|
-
|
208
|
-
padding: 0;
|
209
|
-
border-bottom: solid 1px #ddd; }
|
210
|
-
ul.tabs li {
|
211
|
-
display: block;
|
212
|
-
width: auto;
|
213
|
-
height: 30px;
|
214
|
-
padding: 0;
|
215
|
-
float: left;
|
216
|
-
margin-bottom: 0; }
|
217
|
-
ul.tabs li a {
|
218
|
-
display: block;
|
219
|
-
text-decoration: none;
|
220
|
-
width: auto;
|
221
|
-
height: 29px;
|
222
|
-
padding: 0px 20px;
|
223
|
-
line-height: 30px;
|
224
|
-
border: solid 1px #ddd;
|
225
|
-
border-width: 1px 1px 0 0;
|
226
|
-
margin: 0;
|
227
|
-
background: #f5f5f5;
|
228
|
-
font-size: 13px; }
|
229
|
-
ul.tabs li a.active {
|
230
|
-
background: #fff;
|
231
|
-
height: 30px;
|
232
|
-
position: relative;
|
233
|
-
top: -4px;
|
234
|
-
padding-top: 4px;
|
235
|
-
border-left-width: 1px;
|
236
|
-
margin: 0 0 0 -1px;
|
237
|
-
color: #111;
|
238
|
-
-moz-border-radius-topleft: 2px;
|
239
|
-
-webkit-border-top-left-radius: 2px;
|
240
|
-
border-top-left-radius: 2px;
|
241
|
-
-moz-border-radius-topright: 2px;
|
242
|
-
-webkit-border-top-right-radius: 2px;
|
243
|
-
border-top-right-radius: 2px; }
|
244
|
-
ul.tabs li:first-child a.active {
|
245
|
-
margin-left: 0; }
|
246
|
-
ul.tabs li:first-child a {
|
247
|
-
border-width: 1px 1px 0 1px;
|
248
|
-
-moz-border-radius-topleft: 2px;
|
249
|
-
-webkit-border-top-left-radius: 2px;
|
250
|
-
border-top-left-radius: 2px; }
|
251
|
-
ul.tabs li:last-child a {
|
252
|
-
-moz-border-radius-topright: 2px;
|
253
|
-
-webkit-border-top-right-radius: 2px;
|
254
|
-
border-top-right-radius: 2px; }
|
255
|
-
|
256
|
-
ul.tabs-content { margin: 0; display: block; }
|
257
|
-
ul.tabs-content > li { display:none; }
|
258
|
-
ul.tabs-content > li.active { display: block; }
|
259
|
-
|
260
|
-
/* Clearfixing tabs for beautiful stacking */
|
261
|
-
ul.tabs:before,
|
262
|
-
ul.tabs:after {
|
263
|
-
content: '\0020';
|
264
|
-
display: block;
|
265
|
-
overflow: hidden;
|
266
|
-
visibility: hidden;
|
267
|
-
width: 0;
|
268
|
-
height: 0; }
|
269
|
-
ul.tabs:after {
|
270
|
-
clear: both; }
|
271
|
-
ul.tabs {
|
272
|
-
zoom: 1; }
|
201
|
+
/* Fix for odd Mozilla border & padding issues */
|
202
|
+
button::-moz-focus-inner,
|
203
|
+
input::-moz-focus-inner {
|
204
|
+
border: 0;
|
205
|
+
padding: 0;
|
206
|
+
}
|
273
207
|
|
274
208
|
|
275
209
|
/* #Forms
|
@@ -1,16 +1,17 @@
|
|
1
1
|
/*
|
2
|
-
* Skeleton V1.
|
2
|
+
* Skeleton V1.2
|
3
3
|
* Copyright 2011, Dave Gamache
|
4
4
|
* www.getskeleton.com
|
5
5
|
* Free to use under the MIT license.
|
6
6
|
* http://www.opensource.org/licenses/mit-license.php
|
7
|
-
*
|
7
|
+
* 6/20/2012
|
8
8
|
*/
|
9
9
|
|
10
10
|
|
11
11
|
/* Table of Contents
|
12
12
|
==================================================
|
13
13
|
#Base 960 Grid
|
14
|
+
#Big Screen
|
14
15
|
#Tablet (Portrait)
|
15
16
|
#Mobile (Portrait)
|
16
17
|
#Mobile (Landscape)
|
@@ -22,7 +23,8 @@
|
|
22
23
|
================================================== */
|
23
24
|
|
24
25
|
.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
|
25
|
-
.column,
|
26
|
+
.container .column,
|
27
|
+
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
|
26
28
|
.row { margin-bottom: 20px; }
|
27
29
|
|
28
30
|
/* Nested Column Classes */
|
@@ -30,7 +32,8 @@
|
|
30
32
|
.column.omega, .columns.omega { margin-right: 0; }
|
31
33
|
|
32
34
|
/* Base Grid */
|
33
|
-
.container .one.column
|
35
|
+
.container .one.column,
|
36
|
+
.container .one.columns { width: 40px; }
|
34
37
|
.container .two.columns { width: 100px; }
|
35
38
|
.container .three.columns { width: 160px; }
|
36
39
|
.container .four.columns { width: 220px; }
|
@@ -69,6 +72,59 @@
|
|
69
72
|
|
70
73
|
|
71
74
|
|
75
|
+
/* #Big Screen
|
76
|
+
================================================== */
|
77
|
+
|
78
|
+
/* Note: Design for a width of 1344px */
|
79
|
+
|
80
|
+
@media only screen and (min-width: 1344px) {
|
81
|
+
.container { width: 1344px; }
|
82
|
+
.container .column,
|
83
|
+
.container .columns { margin-left: 12px; margin-right: 12px; }
|
84
|
+
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 12px; }
|
85
|
+
.column.omega, .columns.omega { margin-right: 0; margin-left: 12px; }
|
86
|
+
.alpha.omega { margin-left: 0; margin-right: 0; }
|
87
|
+
|
88
|
+
.container .one.column,
|
89
|
+
.container .one.columns { width: 60px; }
|
90
|
+
.container .two.columns { width: 144px; }
|
91
|
+
.container .three.columns { width: 228px; }
|
92
|
+
.container .four.columns { width: 312px; }
|
93
|
+
.container .five.columns { width: 396px; }
|
94
|
+
.container .six.columns { width: 480px; }
|
95
|
+
.container .seven.columns { width: 564px; }
|
96
|
+
.container .eight.columns { width: 648px; }
|
97
|
+
.container .nine.columns { width: 732px; }
|
98
|
+
.container .ten.columns { width: 816px; }
|
99
|
+
.container .eleven.columns { width: 900px; }
|
100
|
+
.container .twelve.columns { width: 984px; }
|
101
|
+
.container .thirteen.columns { width: 1068px; }
|
102
|
+
.container .fourteen.columns { width: 1152px; }
|
103
|
+
.container .fifteen.columns { width: 1236px; }
|
104
|
+
.container .sixteen.columns { width: 1320px; }
|
105
|
+
|
106
|
+
.container .one-third.column { width: 424px; }
|
107
|
+
.container .two-thirds.column { width: 872px; }
|
108
|
+
|
109
|
+
/* Offsets */
|
110
|
+
.container .offset-by-one { padding-left: 84px; }
|
111
|
+
.container .offset-by-two { padding-left: 168px; }
|
112
|
+
.container .offset-by-three { padding-left: 252px; }
|
113
|
+
.container .offset-by-four { padding-left: 336px; }
|
114
|
+
.container .offset-by-five { padding-left: 420px; }
|
115
|
+
.container .offset-by-six { padding-left: 504px; }
|
116
|
+
.container .offset-by-seven { padding-left: 588px; }
|
117
|
+
.container .offset-by-eight { padding-left: 672px; }
|
118
|
+
.container .offset-by-nine { padding-left: 756px; }
|
119
|
+
.container .offset-by-ten { padding-left: 840px; }
|
120
|
+
.container .offset-by-eleven { padding-left: 924px; }
|
121
|
+
.container .offset-by-twelve { padding-left: 1008px; }
|
122
|
+
.container .offset-by-thirteen { padding-left: 1092px; }
|
123
|
+
.container .offset-by-fourteen { padding-left: 1176px; }
|
124
|
+
.container .offset-by-fifteen { padding-left: 1260px; }
|
125
|
+
}
|
126
|
+
|
127
|
+
|
72
128
|
/* #Tablet (Portrait)
|
73
129
|
================================================== */
|
74
130
|
|
@@ -80,8 +136,10 @@
|
|
80
136
|
.container .columns { margin-left: 10px; margin-right: 10px; }
|
81
137
|
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
|
82
138
|
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
|
139
|
+
.alpha.omega { margin-left: 0; margin-right: 0; }
|
83
140
|
|
84
|
-
.container .one.column
|
141
|
+
.container .one.column,
|
142
|
+
.container .one.columns { width: 28px; }
|
85
143
|
.container .two.columns { width: 76px; }
|
86
144
|
.container .three.columns { width: 124px; }
|
87
145
|
.container .four.columns { width: 172px; }
|
@@ -109,7 +167,7 @@
|
|
109
167
|
.container .offset-by-five { padding-left: 240px; }
|
110
168
|
.container .offset-by-six { padding-left: 288px; }
|
111
169
|
.container .offset-by-seven { padding-left: 336px; }
|
112
|
-
.container .offset-by-eight { padding-left:
|
170
|
+
.container .offset-by-eight { padding-left: 384px; }
|
113
171
|
.container .offset-by-nine { padding-left: 432px; }
|
114
172
|
.container .offset-by-ten { padding-left: 480px; }
|
115
173
|
.container .offset-by-eleven { padding-left: 528px; }
|
@@ -127,9 +185,11 @@
|
|
127
185
|
|
128
186
|
@media only screen and (max-width: 767px) {
|
129
187
|
.container { width: 300px; }
|
130
|
-
.columns,
|
188
|
+
.container .columns,
|
189
|
+
.container .column { margin: 0; }
|
131
190
|
|
132
191
|
.container .one.column,
|
192
|
+
.container .one.columns,
|
133
193
|
.container .two.columns,
|
134
194
|
.container .three.columns,
|
135
195
|
.container .four.columns,
|
@@ -175,9 +235,11 @@
|
|
175
235
|
|
176
236
|
@media only screen and (min-width: 480px) and (max-width: 767px) {
|
177
237
|
.container { width: 420px; }
|
178
|
-
.columns,
|
238
|
+
.container .columns,
|
239
|
+
.container .column { margin: 0; }
|
179
240
|
|
180
241
|
.container .one.column,
|
242
|
+
.container .one.columns,
|
181
243
|
.container .two.columns,
|
182
244
|
.container .three.columns,
|
183
245
|
.container .four.columns,
|
@@ -232,5 +294,3 @@
|
|
232
294
|
width: 0;
|
233
295
|
height: 0;
|
234
296
|
}
|
235
|
-
|
236
|
-
|
metadata
CHANGED
@@ -1,20 +1,20 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: skeleton-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0
|
4
|
+
version: 0.1.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
8
|
-
-
|
8
|
+
- Helios Technologies
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date:
|
12
|
+
date: 2013-04-12 00:00:00.000000000 Z
|
13
13
|
dependencies: []
|
14
14
|
description: A gem, which injects Skeleton CSS framework functionality into Ruby on
|
15
15
|
Rails application
|
16
16
|
email:
|
17
|
-
-
|
17
|
+
- support@heliostech.fr
|
18
18
|
executables: []
|
19
19
|
extensions: []
|
20
20
|
extra_rdoc_files: []
|
@@ -28,7 +28,6 @@ files:
|
|
28
28
|
- lib/skeleton-rails/rails/engine.rb
|
29
29
|
- lib/skeleton-rails/version.rb
|
30
30
|
- skeleton-rails.gemspec
|
31
|
-
- vendor/assets/javascripts/tabs.js
|
32
31
|
- vendor/assets/stylesheets/base.css
|
33
32
|
- vendor/assets/stylesheets/layout.css
|
34
33
|
- vendor/assets/stylesheets/skeleton.css
|
@@ -52,7 +51,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
52
51
|
version: '0'
|
53
52
|
requirements: []
|
54
53
|
rubyforge_project: skeleton-rails
|
55
|
-
rubygems_version: 1.8.
|
54
|
+
rubygems_version: 1.8.23
|
56
55
|
signing_key:
|
57
56
|
specification_version: 3
|
58
57
|
summary: Skeleton CSS for Rails
|
@@ -1,42 +0,0 @@
|
|
1
|
-
/*
|
2
|
-
* Skeleton V1.1
|
3
|
-
* Copyright 2011, Dave Gamache
|
4
|
-
* www.getskeleton.com
|
5
|
-
* Free to use under the MIT license.
|
6
|
-
* http://www.opensource.org/licenses/mit-license.php
|
7
|
-
* 8/17/2011
|
8
|
-
*/
|
9
|
-
|
10
|
-
|
11
|
-
$(document).ready(function() {
|
12
|
-
|
13
|
-
/* Tabs Activiation
|
14
|
-
================================================== */
|
15
|
-
|
16
|
-
var tabs = $('ul.tabs');
|
17
|
-
|
18
|
-
tabs.each(function(i) {
|
19
|
-
|
20
|
-
//Get all tabs
|
21
|
-
var tab = $(this).find('> li > a');
|
22
|
-
tab.click(function(e) {
|
23
|
-
|
24
|
-
//Get Location of tab's content
|
25
|
-
var contentLocation = $(this).attr('href');
|
26
|
-
|
27
|
-
//Let go if not a hashed one
|
28
|
-
if(contentLocation.charAt(0)=="#") {
|
29
|
-
|
30
|
-
e.preventDefault();
|
31
|
-
|
32
|
-
//Make Tab Active
|
33
|
-
tab.removeClass('active');
|
34
|
-
$(this).addClass('active');
|
35
|
-
|
36
|
-
//Show Tab Content & add active class
|
37
|
-
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
|
38
|
-
|
39
|
-
}
|
40
|
-
});
|
41
|
-
});
|
42
|
-
});
|