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 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`. and:
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
@@ -1,5 +1,5 @@
1
1
  module Skeleton
2
2
  module Rails
3
- VERSION = "0.0.2"
3
+ VERSION = "0.1.0"
4
4
  end
5
5
  end
@@ -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 = ["Vlad Shvedov"]
9
- s.email = ["vshvedov@heliostech.hk"]
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.1
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
- * 8/17/2011
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", Helvetica, Arial, sans-serif;
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
- a.button,
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: 21px;
156
+ line-height: normal;
157
+ padding: 8px 10px;
159
158
  font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
160
159
 
161
- a.button:hover,
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
- a.button:active,
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
- /* #Tabs (activate in tabs.js)
204
- ================================================== */
205
- ul.tabs {
206
- display: block;
207
- margin: 0 0 20px 0;
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,10 +1,10 @@
1
1
  /*
2
- * Skeleton V1.1
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
- * 8/17/2011
7
+ * 6/20/2012
8
8
  */
9
9
 
10
10
  /* Table of Content
@@ -1,16 +1,17 @@
1
1
  /*
2
- * Skeleton V1.1
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
- * 8/17/2011
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, .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
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 { width: 40px; }
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 { width: 28px; }
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: 348px; }
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, .column { margin: 0; }
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, .column { margin: 0; }
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.2
4
+ version: 0.1.0
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
8
- - Vlad Shvedov
8
+ - Helios Technologies
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2012-01-26 00:00:00.000000000 Z
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
- - vshvedov@heliostech.hk
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.11
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
- });