Skip to content

Commit f141571

Browse files
author
MoD
committed
Merge pull request #13 from gvoyer/master
Update Skeleton CSS from 1.1 to 1.2 + minor fix
2 parents 894f24b + 2f90313 commit f141571

File tree

6 files changed

+88
-144
lines changed

6 files changed

+88
-144
lines changed

‎README.md‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -36,12 +36,6 @@ command. This should add:
3636
= require skeleton
3737
```
3838

39-
into `app/assets/stylesheets/application.css`. and:
40-
41-
```ruby
42-
= require tabs
43-
```
44-
45-
into `app/assets/javascripts/application.js`
39+
into `app/assets/stylesheets/application.css`.
4640

4741
That's it, have fun!

‎lib/generators/skeleton/install/install_generator.rb‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,12 @@ def add_assets
2525
app_scss = File.join(::Rails.root, 'app', 'assets', 'stylesheets', 'application.scss')
2626
app_css = File.join(::Rails.root, 'app', 'assets', 'stylesheets', 'application.css')
2727

28-
insert_into_file File.join(::Rails.root, 'app', 'assets', 'javascripts', 'application.js'), "//= require tabs\n", :after => "jquery_ujs\n"
29-
3028
if File.exist?(app_scss)
3129
insert_into_file app_scss, css_inject, :after => "require_self\n"
3230
elsif File.exist?(app_css)
3331
insert_into_file app_css, css_inject, :after => "require_self\n"
3432
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!')
3634
end
3735
end
3836
end

‎vendor/assets/javascripts/tabs.js‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎vendor/assets/stylesheets/base.css‎

Lines changed: 14 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/*
2-
* Skeleton V1.1
2+
* Skeleton V1.2
33
* Copyright 2011, Dave Gamache
44
* www.getskeleton.com
55
* Free to use under the MIT license.
66
* http://www.opensource.org/licenses/mit-license.php
7-
* 8/17/2011
7+
* 6/20/2012
88
*/
99

1010

@@ -18,7 +18,6 @@
1818
#Lists
1919
#Images
2020
#Buttons
21-
#Tabs
2221
#Forms
2322
#Misc */
2423

@@ -64,7 +63,7 @@
6463
================================================== */
6564
h1, h2, h3, h4, h5, h6 {
6665
color: #181818;
67-
font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;
66+
font-family: "Georgia", "Times New Roman", serif;
6867
font-weight: normal; }
6968
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { font-weight: inherit; }
7069
h1 { font-size: 46px; line-height: 50px; margin-bottom: 14px;}
@@ -128,7 +127,7 @@
128127
/* #Buttons
129128
================================================== */
130129

131-
a.button,
130+
.button,
132131
button,
133132
input[type="submit"],
134133
input[type="reset"],
@@ -143,7 +142,6 @@
143142
border: 1px solid #aaa;
144143
border-top: 1px solid #ccc;
145144
border-left: 1px solid #ccc;
146-
padding: 4px 12px;
147145
-moz-border-radius: 3px;
148146
-webkit-border-radius: 3px;
149147
border-radius: 3px;
@@ -155,10 +153,11 @@
155153
text-shadow: 0 1px rgba(255, 255, 255, .75);
156154
cursor: pointer;
157155
margin-bottom: 20px;
158-
line-height: 21px;
156+
line-height: normal;
157+
padding: 8px 10px;
159158
font-family: "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif; }
160159

161-
a.button:hover,
160+
.button:hover,
162161
button:hover,
163162
input[type="submit"]:hover,
164163
input[type="reset"]:hover,
@@ -175,7 +174,7 @@
175174
border-top: 1px solid #aaa;
176175
border-left: 1px solid #aaa; }
177176

178-
a.button:active,
177+
.button:active,
179178
button:active,
180179
input[type="submit"]:active,
181180
input[type="reset"]:active,
@@ -199,77 +198,12 @@
199198
padding-right: 0 !important;
200199
text-align: center; }
201200

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+
}
273207

274208

275209
/* #Forms

‎vendor/assets/stylesheets/layout.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
/*
2-
* Skeleton V1.1
2+
* Skeleton V1.2
33
* Copyright 2011, Dave Gamache
44
* www.getskeleton.com
55
* Free to use under the MIT license.
66
* http://www.opensource.org/licenses/mit-license.php
7-
* 8/17/2011
7+
* 6/20/2012
88
*/
99

1010
/* Table of Content

‎vendor/assets/stylesheets/skeleton.css‎

Lines changed: 70 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
/*
2-
* Skeleton V1.1
2+
* Skeleton V1.2
33
* Copyright 2011, Dave Gamache
44
* www.getskeleton.com
55
* Free to use under the MIT license.
66
* http://www.opensource.org/licenses/mit-license.php
7-
* 8/17/2011
7+
* 6/20/2012
88
*/
99

1010

1111
/* Table of Contents
1212
==================================================
1313
#Base 960 Grid
14+
#Big Screen
1415
#Tablet (Portrait)
1516
#Mobile (Portrait)
1617
#Mobile (Landscape)
@@ -22,15 +23,17 @@
2223
================================================== */
2324

2425
.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; }
2628
.row { margin-bottom: 20px; }
2729

2830
/* Nested Column Classes */
2931
.column.alpha, .columns.alpha { margin-left: 0; }
3032
.column.omega, .columns.omega { margin-right: 0; }
3133

3234
/* Base Grid */
33-
.container .one.column { width: 40px; }
35+
.container .one.column,
36+
.container .one.columns { width: 40px; }
3437
.container .two.columns { width: 100px; }
3538
.container .three.columns { width: 160px; }
3639
.container .four.columns { width: 220px; }
@@ -69,6 +72,59 @@
6972

7073

7174

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+
72128
/* #Tablet (Portrait)
73129
================================================== */
74130

@@ -80,8 +136,10 @@
80136
.container .columns { margin-left: 10px; margin-right: 10px; }
81137
.column.alpha, .columns.alpha { margin-left: 0; margin-right: 10px; }
82138
.column.omega, .columns.omega { margin-right: 0; margin-left: 10px; }
139+
.alpha.omega { margin-left: 0; margin-right: 0; }
83140

84-
.container .one.column { width: 28px; }
141+
.container .one.column,
142+
.container .one.columns { width: 28px; }
85143
.container .two.columns { width: 76px; }
86144
.container .three.columns { width: 124px; }
87145
.container .four.columns { width: 172px; }
@@ -109,7 +167,7 @@
109167
.container .offset-by-five { padding-left: 240px; }
110168
.container .offset-by-six { padding-left: 288px; }
111169
.container .offset-by-seven { padding-left: 336px; }
112-
.container .offset-by-eight { padding-left: 348px; }
170+
.container .offset-by-eight { padding-left: 384px; }
113171
.container .offset-by-nine { padding-left: 432px; }
114172
.container .offset-by-ten { padding-left: 480px; }
115173
.container .offset-by-eleven { padding-left: 528px; }
@@ -127,9 +185,11 @@
127185

128186
@media only screen and (max-width: 767px) {
129187
.container { width: 300px; }
130-
.columns, .column { margin: 0; }
188+
.container .columns,
189+
.container .column { margin: 0; }
131190

132191
.container .one.column,
192+
.container .one.columns,
133193
.container .two.columns,
134194
.container .three.columns,
135195
.container .four.columns,
@@ -175,9 +235,11 @@
175235

176236
@media only screen and (min-width: 480px) and (max-width: 767px) {
177237
.container { width: 420px; }
178-
.columns, .column { margin: 0; }
238+
.container .columns,
239+
.container .column { margin: 0; }
179240

180241
.container .one.column,
242+
.container .one.columns,
181243
.container .two.columns,
182244
.container .three.columns,
183245
.container .four.columns,
@@ -232,5 +294,3 @@
232294
width: 0;
233295
height: 0;
234296
}
235-
236-

0 commit comments

Comments
 (0)