skeleton_sass 0.0.1
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.
- checksums.yaml +7 -0
- data/.gitignore +14 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +129 -0
- data/Rakefile +2 -0
- data/lib/skeleton_sass.rb +9 -0
- data/lib/skeleton_sass/version.rb +3 -0
- data/skeleton_sass.gemspec +23 -0
- data/vendor/assets/stylesheets/skeleton.scss +432 -0
- metadata +81 -0
checksums.yaml
ADDED
@@ -0,0 +1,7 @@
|
|
1
|
+
---
|
2
|
+
SHA1:
|
3
|
+
metadata.gz: 74c022eee31d320213df999668c175e0d6105483
|
4
|
+
data.tar.gz: 4fc6493515b1ae5c0a52ea9dba2170b5dad130ae
|
5
|
+
SHA512:
|
6
|
+
metadata.gz: 44a03ec53c78c2a618688eab4341e5926aa4d9d8a0a8806f854ad44631c313bb61aa9116238607dee0555be548a807a84880ef0d294296f92607722696fea127
|
7
|
+
data.tar.gz: 1cbe150592ba6062d4ad979e1fb8560c07abff0b6dcc44b314d2ec5dc555b98251819df51e0a41f290b5e96b7c8853989d9a46f97d530b359f6e8860d53cbced
|
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2014 Krishn Ramesh
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,129 @@
|
|
1
|
+
# SkeletonSass
|
2
|
+
|
3
|
+
This gem packages a Sass version of the lightweight [Skeleton CSS boilerplate](http://getskeleton.com/) for your Rails app. The gem is currently on v0.0.1 and uses Skeleton v2.0.1; I’ll do my best to keep it up to date with newer Skeleton versions.
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add this line to your application's Gemfile:
|
8
|
+
|
9
|
+
```ruby
|
10
|
+
gem 'skeleton_sass'
|
11
|
+
```
|
12
|
+
|
13
|
+
And then switch to your terminal and execute:
|
14
|
+
|
15
|
+
$ bundle install
|
16
|
+
|
17
|
+
## Usage
|
18
|
+
To use skeleton_sass, simply head on over to `application.css` and rename it to `application.css.scss` so it can handle Sass properly. Then at the bottom of the file, add:
|
19
|
+
|
20
|
+
@import 'skeleton';
|
21
|
+
|
22
|
+
An alternative is to include `*= skeleton` in the comments of the manifest file, however this method will _not_ let you change the default variables or let you have access to the variables in your other css/scss files.
|
23
|
+
|
24
|
+
## Changing Default Variables
|
25
|
+
The nice thing about the Sass version of Skeleton is that you can change any of the default variables by overriding them. Here's a list of all the variables along with their default values:
|
26
|
+
|
27
|
+
```css
|
28
|
+
|
29
|
+
/* Default Variables
|
30
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
31
|
+
|
32
|
+
// Colors
|
33
|
+
$primary-color: #33C3F0;
|
34
|
+
$secondary-color: #bbbbbb;
|
35
|
+
$border-color: #bbbbbb;
|
36
|
+
$link-color: #1EAEDB;
|
37
|
+
$font-color: #222222;
|
38
|
+
$light-gray: #e1e1e1;
|
39
|
+
$dark-gray: #333333;
|
40
|
+
|
41
|
+
// Grid Variables
|
42
|
+
$container-width: 960px;
|
43
|
+
$total-columns: 12;
|
44
|
+
$column-width: 100 / $total-columns; // calculates individual column width based off of # of columns
|
45
|
+
$column-margin: 3.666666666666%; // space between columns
|
46
|
+
$column-padding: 4px 8px; // space inside columns
|
47
|
+
$row-space:2rem; // Margin-bottom for .row
|
48
|
+
|
49
|
+
// Breakpoints
|
50
|
+
$larger-than-mobile: 400px;
|
51
|
+
$larger-than-phablet: 550px;
|
52
|
+
$larger-than-tablet: 750px;
|
53
|
+
$larger-than-desktop: 1000px;
|
54
|
+
$larger-than-desktophd: 1200px;
|
55
|
+
|
56
|
+
// Typography
|
57
|
+
$font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
58
|
+
|
59
|
+
// Misc
|
60
|
+
$global-radius:4px;
|
61
|
+
|
62
|
+
```
|
63
|
+
|
64
|
+
To override any of the defaults, simply assign the variables **before** the import statement, like so:
|
65
|
+
|
66
|
+
```css
|
67
|
+
// app/assets/stylesheets/application.css.scss
|
68
|
+
|
69
|
+
$primary-color: orange;
|
70
|
+
$font-family: "Comic Sans MS", cursive, sans-serif;
|
71
|
+
// ... more overrides ...
|
72
|
+
|
73
|
+
@import 'skeleton';
|
74
|
+
|
75
|
+
```
|
76
|
+
|
77
|
+
That's all there is to it!
|
78
|
+
|
79
|
+
## Setting up the Application Layout
|
80
|
+
|
81
|
+
Skeleton uses [Raleway](http://www.google.com/fonts/specimen/Raleway) as its default font. Raleway is a Google web font, so you'll need to manually include it in your layout file.
|
82
|
+
Skeleton is also fully responsive, but to render properly on mobile devices, it requires the meta viewport tag.
|
83
|
+
|
84
|
+
Below is a handy snippet of boilerplate HTML code for you to place in the `<head>` section of `application.html.erb`:
|
85
|
+
|
86
|
+
```html
|
87
|
+
|
88
|
+
<!-- Basic Page Needs
|
89
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
90
|
+
<meta charset="utf-8">
|
91
|
+
<title>Your page title here :)</title>
|
92
|
+
<meta name="description" content="">
|
93
|
+
<meta name="author" content="">
|
94
|
+
|
95
|
+
<!-- Mobile Specific Metas
|
96
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
97
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
98
|
+
|
99
|
+
<!-- Font
|
100
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
101
|
+
<link href='//fonts.googleapis.com/css?family=Raleway:400,300,600' rel='stylesheet' type='text/css'>
|
102
|
+
|
103
|
+
<!-- Social Media Metas
|
104
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
105
|
+
<!-- Open Graph data -->
|
106
|
+
<meta property="og:title" content="Title Here" />
|
107
|
+
<meta property="og:type" content="article" />
|
108
|
+
<meta property="og:url" content="http://www.example.com/" />
|
109
|
+
<meta property="og:image" content="http://example.com/image.jpg" />
|
110
|
+
<meta property="og:description" content="Description Here" />
|
111
|
+
|
112
|
+
<!-- Favicon
|
113
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
|
114
|
+
<link rel="icon" type="image/png" href="images/favicon.png" />
|
115
|
+
|
116
|
+
```
|
117
|
+
|
118
|
+
## Contributing
|
119
|
+
|
120
|
+
1. Fork it ( https://github.com/krishnr/skeleton_sass/fork )
|
121
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
122
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
123
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
124
|
+
5. Create a new Pull Request
|
125
|
+
|
126
|
+
Hit me up with PRs. I love me some PRs ♥.
|
127
|
+
|
128
|
+
## Acknowledgements
|
129
|
+
[Skeleton](https://github.com/dhg/Skeleton/) was created by [Dave Gamache](https://twitter.com/dhg) for a better web. The [Skeleton Sass file](https://github.com/whatsnewsaes/Skeleton-Sass) was written by [Seth Coelen](https://github.com/whatsnewsaes).
|
data/Rakefile
ADDED
@@ -0,0 +1,23 @@
|
|
1
|
+
# coding: utf-8
|
2
|
+
lib = File.expand_path('../lib', __FILE__)
|
3
|
+
$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
|
4
|
+
require 'skeleton_sass/version'
|
5
|
+
|
6
|
+
Gem::Specification.new do |spec|
|
7
|
+
spec.name = "skeleton_sass"
|
8
|
+
spec.version = SkeletonSass::VERSION
|
9
|
+
spec.authors = ["Krishn Ramesh"]
|
10
|
+
spec.email = ["krishnr@gmail.com"]
|
11
|
+
spec.summary = %q{Packages a SASS version of the Skeleton CSS framework}
|
12
|
+
spec.description = %q{}
|
13
|
+
spec.homepage = "https://github.com/krishnr/skeleton_sass"
|
14
|
+
spec.license = "MIT"
|
15
|
+
|
16
|
+
spec.files = `git ls-files -z`.split("\x0")
|
17
|
+
spec.executables = spec.files.grep(%r{^bin/}) { |f| File.basename(f) }
|
18
|
+
spec.test_files = spec.files.grep(%r{^(test|spec|features)/})
|
19
|
+
spec.require_paths = ["lib"]
|
20
|
+
|
21
|
+
spec.add_development_dependency "bundler", "~> 1.7"
|
22
|
+
spec.add_development_dependency "rake", "~> 10.0"
|
23
|
+
end
|
@@ -0,0 +1,432 @@
|
|
1
|
+
/*
|
2
|
+
* Skeleton V2.0
|
3
|
+
* Copyright 2014, Dave Gamache
|
4
|
+
* www.getskeleton.com
|
5
|
+
* Free to use under the MIT license.
|
6
|
+
* http://www.opensource.org/licenses/mit-license.php
|
7
|
+
* 12/9/2014
|
8
|
+
* Sass Version by Seth Coelen https://github.com/whatsnewsaes
|
9
|
+
*/
|
10
|
+
|
11
|
+
|
12
|
+
/* Table of contents
|
13
|
+
––––––––––––––––––––––––––––––––––––––––––––––––––
|
14
|
+
- Variables
|
15
|
+
- Grid
|
16
|
+
- Base Styles
|
17
|
+
- Typography
|
18
|
+
- Links
|
19
|
+
- Buttons
|
20
|
+
- Forms
|
21
|
+
- Lists
|
22
|
+
- Code
|
23
|
+
- Tables
|
24
|
+
- Spacing
|
25
|
+
- Utilities
|
26
|
+
- Clearing
|
27
|
+
- Media Queries
|
28
|
+
*/
|
29
|
+
|
30
|
+
|
31
|
+
/* Variables
|
32
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
33
|
+
|
34
|
+
// Colors
|
35
|
+
$primary-color: #33C3F0 !default;
|
36
|
+
$secondary-color: #bbbbbb !default;
|
37
|
+
$border-color: #bbbbbb !default;
|
38
|
+
$link-color: #1EAEDB !default;
|
39
|
+
$font-color: #222222 !default;
|
40
|
+
$light-gray: #e1e1e1 !default;
|
41
|
+
$dark-gray: #333333 !default;
|
42
|
+
|
43
|
+
// Grid Variables
|
44
|
+
$container-width: 960px !default;
|
45
|
+
$total-columns: 12 !default;
|
46
|
+
$column-width: 100 / $total-columns !default; // calculates individual column width based off of # of columns
|
47
|
+
$column-margin: 3.666666666666% !default; // space between columns
|
48
|
+
$column-padding: 4px 8px !default; // space inside columns
|
49
|
+
$row-space: 2rem !default; // Margin-bottom for .row
|
50
|
+
|
51
|
+
|
52
|
+
// Breakpoints
|
53
|
+
$larger-than-mobile: 400px !default;
|
54
|
+
$larger-than-phablet: 550px !default;
|
55
|
+
$larger-than-tablet: 750px !default;
|
56
|
+
$larger-than-desktop: 1000px !default;
|
57
|
+
$larger-than-desktophd: 1200px !default;
|
58
|
+
|
59
|
+
// Typography
|
60
|
+
$font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif !default;
|
61
|
+
|
62
|
+
// Misc
|
63
|
+
$global-radius: 4px !default;
|
64
|
+
|
65
|
+
|
66
|
+
/* Grid
|
67
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
68
|
+
|
69
|
+
.container {
|
70
|
+
position: relative;
|
71
|
+
width: 80%;
|
72
|
+
max-width: $container-width;
|
73
|
+
margin: 0 auto;
|
74
|
+
padding: 0;
|
75
|
+
}
|
76
|
+
.container .column,
|
77
|
+
.container .columns {
|
78
|
+
float: left;
|
79
|
+
width: 100%;
|
80
|
+
box-sizing: border-box; }
|
81
|
+
.row {
|
82
|
+
margin-bottom: $row-space; }
|
83
|
+
.row .column:first-child,
|
84
|
+
.row .columns:first-child {
|
85
|
+
margin-left: 0; }
|
86
|
+
|
87
|
+
/* For devices larger than 550px */
|
88
|
+
@media (min-width: 550px) {
|
89
|
+
.container .column,
|
90
|
+
.container .columns {
|
91
|
+
margin-left: $column-margin;
|
92
|
+
padding: $column-padding;
|
93
|
+
}
|
94
|
+
|
95
|
+
.container .one.column,
|
96
|
+
.container .one.columns { width: $column-width * 1 - ($column-margin); }
|
97
|
+
.container .two.columns { width: $column-width * 2 - ($column-margin); }
|
98
|
+
.container .three.columns { width: $column-width * 3 - ($column-margin); }
|
99
|
+
.container .four.columns { width: $column-width * 4 - ($column-margin); }
|
100
|
+
.container .five.columns { width: $column-width * 5 - ($column-margin); }
|
101
|
+
.container .six.columns { width: $column-width * 6 - ($column-margin); }
|
102
|
+
.container .seven.columns { width: $column-width * 7 - ($column-margin); }
|
103
|
+
.container .eight.columns { width: $column-width * 8 - ($column-margin); }
|
104
|
+
.container .nine.columns { width: $column-width * 9 - ($column-margin); }
|
105
|
+
.container .ten.columns { width: $column-width * 10 - ($column-margin); }
|
106
|
+
.container .eleven.columns { width: $column-width * 11 - ($column-margin); }
|
107
|
+
.container .twelve.columns { width: 100%; margin-left: 0; }
|
108
|
+
|
109
|
+
.container .one-third.column { width: $column-width * 4 - ($column-margin ); }
|
110
|
+
.container .two-thirds.column { width: $column-width * 8 - ($column-margin ); }
|
111
|
+
|
112
|
+
.container .one-half.column { width: $column-width * 6 - ($column-margin ); }
|
113
|
+
|
114
|
+
/* Offsets */
|
115
|
+
.container .offset-by-one.column,
|
116
|
+
.container .offset-by-one.columns { margin-left: $column-width * 1 - ($column-margin); }
|
117
|
+
.container .offset-by-two.column { margin-left: $column-width * 2 - ($column-margin); }
|
118
|
+
.container .offset-by-three.column { margin-left: $column-width * 3 - ($column-margin); }
|
119
|
+
.container .offset-by-four.column { margin-left: $column-width * 4 - ($column-margin); }
|
120
|
+
.container .offset-by-five.column { margin-left: $column-width * 5 - ($column-margin); }
|
121
|
+
.container .offset-by-six.column { margin-left: $column-width * 6 - ($column-margin); }
|
122
|
+
.container .offset-by-seven.column { margin-left: $column-width * 7 - ($column-margin); }
|
123
|
+
.container .offset-by-eight.column { margin-left: $column-width * 8 - ($column-margin); }
|
124
|
+
.container .offset-by-nine.column { margin-left: $column-width * 9 - ($column-margin); }
|
125
|
+
.container .offset-by-ten.column { margin-left: $column-width * 10 - ($column-margin); }
|
126
|
+
.container .offset-by-eleven.column { margin-left: $column-width * 11 - ($column-margin); }
|
127
|
+
|
128
|
+
.container .offset-by-one-third.column { margin-left: $column-width * 4 - ($column-margin); }
|
129
|
+
.container .offset-by-two-thirds.column { margin-left: $column-width * 8 - ($column-margin); }
|
130
|
+
|
131
|
+
.container .offset-by-one-half.column { margin-left: $column-width * 1 - ($column-margin); }
|
132
|
+
|
133
|
+
}
|
134
|
+
|
135
|
+
|
136
|
+
/* Base Styles
|
137
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
138
|
+
/* NOTE
|
139
|
+
html is set to 62.5% so that all the REM measurements throughout Skeleton
|
140
|
+
are based on 10px sizing. So basically 1.5rem = 15px :) */
|
141
|
+
html { font-size: 62.5%; }
|
142
|
+
|
143
|
+
body {
|
144
|
+
font-size: 1.5em; /* currently ems cause chrome bug misinterpreting rems on body element */
|
145
|
+
line-height: 1.6;
|
146
|
+
font-weight: 400;
|
147
|
+
font-family: $font-family;
|
148
|
+
color: $font-color;
|
149
|
+
}
|
150
|
+
|
151
|
+
|
152
|
+
/* Typography
|
153
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
154
|
+
h1, h2, h3, h4, h5, h6 {
|
155
|
+
font-weight: 300;
|
156
|
+
margin-top: 0;
|
157
|
+
margin-bottom: 2rem; }
|
158
|
+
h1 { font-size: 4.0rem; line-height: 1.2; letter-spacing: -.1rem;}
|
159
|
+
h2 { font-size: 3.6rem; line-height: 1.25; letter-spacing: -.1rem; }
|
160
|
+
h3 { font-size: 3.0rem; line-height: 1.3; letter-spacing: -.1rem; }
|
161
|
+
h4 { font-size: 2.4rem; line-height: 1.35; letter-spacing: -.08rem; }
|
162
|
+
h5 { font-size: 1.8rem; line-height: 1.5; letter-spacing: -.05rem; }
|
163
|
+
h6 { font-size: 1.5rem; line-height: 1.6; letter-spacing: 0; }
|
164
|
+
|
165
|
+
/* Larger than phablet */
|
166
|
+
@media (min-width: $larger-than-phablet) {
|
167
|
+
h1 { font-size: 5.0rem; }
|
168
|
+
h2 { font-size: 4.2rem; }
|
169
|
+
h3 { font-size: 3.6rem; }
|
170
|
+
h4 { font-size: 3.0rem; }
|
171
|
+
h5 { font-size: 2.4rem; }
|
172
|
+
h6 { font-size: 1.5rem; }
|
173
|
+
}
|
174
|
+
|
175
|
+
p {
|
176
|
+
margin-top: 0; }
|
177
|
+
|
178
|
+
|
179
|
+
/* Links
|
180
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
181
|
+
a {
|
182
|
+
color: $link-color; }
|
183
|
+
a:hover {
|
184
|
+
color: darken($link-color, 5%); }
|
185
|
+
|
186
|
+
|
187
|
+
/* Buttons
|
188
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
189
|
+
.button,
|
190
|
+
button,
|
191
|
+
input[type="submit"],
|
192
|
+
input[type="reset"],
|
193
|
+
input[type="button"] {
|
194
|
+
display: inline-block;
|
195
|
+
background-color: transparent;
|
196
|
+
border-radius: $global-radius;
|
197
|
+
color: $secondary-color;
|
198
|
+
text-align: center;
|
199
|
+
font-size: 11px;
|
200
|
+
font-weight: 600;
|
201
|
+
text-decoration: none;
|
202
|
+
cursor: pointer;
|
203
|
+
border: 1px solid $secondary-color;
|
204
|
+
height: 38px;
|
205
|
+
line-height: 38px;
|
206
|
+
padding: 0 30px;
|
207
|
+
letter-spacing: .1rem;
|
208
|
+
text-transform: uppercase;
|
209
|
+
white-space: nowrap;
|
210
|
+
box-sizing: border-box; }
|
211
|
+
.button:hover,
|
212
|
+
button:hover,
|
213
|
+
input[type="submit"]:hover,
|
214
|
+
input[type="reset"]:hover,
|
215
|
+
input[type="button"]:hover,
|
216
|
+
.button:focus,
|
217
|
+
button:focus,
|
218
|
+
input[type="submit"]:focus,
|
219
|
+
input[type="reset"]:focus,
|
220
|
+
input[type="button"]:focus {
|
221
|
+
border-color: darken($secondary-color, 10%);
|
222
|
+
color: darken($secondary-color, 10%);
|
223
|
+
outline: 0; }
|
224
|
+
.button.button-primary,
|
225
|
+
button.button-primary,
|
226
|
+
input[type="submit"].button-primary,
|
227
|
+
input[type="reset"].button-primary,
|
228
|
+
input[type="button"].button-primary {
|
229
|
+
color: #FFF;
|
230
|
+
border-color: $primary-color;
|
231
|
+
background-color: $primary-color; }
|
232
|
+
.button.button-primary:hover,
|
233
|
+
button.button-primary:hover,
|
234
|
+
input[type="submit"].button-primary:hover,
|
235
|
+
input[type="reset"].button-primary:hover,
|
236
|
+
input[type="button"].button-primary:hover,
|
237
|
+
.button.button-primary:focus,
|
238
|
+
button.button-primary:focus,
|
239
|
+
input[type="submit"].button-primary:focus,
|
240
|
+
input[type="reset"].button-primary:focus,
|
241
|
+
input[type="button"].button-primary:focus {
|
242
|
+
background-color: darken($primary-color, 10%);
|
243
|
+
border-color: darken($primary-color, 10%);
|
244
|
+
color: #FFF; }
|
245
|
+
|
246
|
+
|
247
|
+
/* Forms
|
248
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
249
|
+
input[type="email"],
|
250
|
+
input[type="search"],
|
251
|
+
input[type="text"],
|
252
|
+
input[type="password"],
|
253
|
+
textarea,
|
254
|
+
select {
|
255
|
+
border: 1px solid $border-color;
|
256
|
+
height: 36px;
|
257
|
+
padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
|
258
|
+
border-radius: $global-radius;
|
259
|
+
box-shadow: none;
|
260
|
+
background: #fff; }
|
261
|
+
/* Removes awkard default styles on some inputs */
|
262
|
+
input[type="email"],
|
263
|
+
input[type="search"],
|
264
|
+
input[type="text"],
|
265
|
+
textarea {
|
266
|
+
-webkit-appearance: none;
|
267
|
+
-moz-appearance: none;
|
268
|
+
appearance: none;
|
269
|
+
}
|
270
|
+
textarea {
|
271
|
+
min-height: 65px;
|
272
|
+
padding-top: 6px;
|
273
|
+
padding-bottom: 6px; }
|
274
|
+
input[type="email"]:focus,
|
275
|
+
input[type="search"]:focus,
|
276
|
+
input[type="text"]:focus,
|
277
|
+
input[type="password"]:focus,
|
278
|
+
textarea:focus,
|
279
|
+
select:focus {
|
280
|
+
border: 1px solid $primary-color;
|
281
|
+
outline: 0; }
|
282
|
+
label,
|
283
|
+
legend {
|
284
|
+
display: block;
|
285
|
+
font-weight: 600;
|
286
|
+
margin-bottom: .5rem; }
|
287
|
+
fieldset {
|
288
|
+
border-width: 0;
|
289
|
+
padding: 0; }
|
290
|
+
input[type="checkbox"],
|
291
|
+
input[type="radio"] {
|
292
|
+
display: inline; }
|
293
|
+
label > .label-body {
|
294
|
+
display: inline-block;
|
295
|
+
font-weight: normal;
|
296
|
+
margin-left: .5rem; }
|
297
|
+
|
298
|
+
|
299
|
+
/* Lists
|
300
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
301
|
+
ul {
|
302
|
+
list-style: circle inside; }
|
303
|
+
ol {
|
304
|
+
list-style: decimal inside; }
|
305
|
+
ol, ul {
|
306
|
+
margin-top: 0;
|
307
|
+
padding-left: 0; }
|
308
|
+
ul ul,
|
309
|
+
ul ol,
|
310
|
+
ol ol,
|
311
|
+
ol ul {
|
312
|
+
margin: 1.5rem 0 1.5rem 3rem;
|
313
|
+
font-size: 90%; }
|
314
|
+
li {
|
315
|
+
margin-bottom: 1rem; }
|
316
|
+
|
317
|
+
|
318
|
+
/* Code
|
319
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
320
|
+
code {
|
321
|
+
padding: .2rem .5rem;
|
322
|
+
margin: 0 .2rem;
|
323
|
+
font-size: 90%;
|
324
|
+
background: lighten($light-gray, 7%);
|
325
|
+
border: 1px solid $light-gray;
|
326
|
+
border-radius: $global-radius;
|
327
|
+
white-space: nowrap; }
|
328
|
+
pre > code {
|
329
|
+
display: block;
|
330
|
+
padding: 1rem 1.5rem;
|
331
|
+
white-space: pre; }
|
332
|
+
|
333
|
+
|
334
|
+
/* Tables
|
335
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
336
|
+
th,
|
337
|
+
td {
|
338
|
+
padding: 12px 15px;
|
339
|
+
text-align: left;
|
340
|
+
border-bottom: 1px solid $light-gray; }
|
341
|
+
th:first-child,
|
342
|
+
td:first-child {
|
343
|
+
padding-left: 0; }
|
344
|
+
th:last-child,
|
345
|
+
td:last-child {
|
346
|
+
padding-right: 0; }
|
347
|
+
|
348
|
+
|
349
|
+
/* Spacing
|
350
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
351
|
+
button,
|
352
|
+
.button {
|
353
|
+
margin-bottom: 1rem; }
|
354
|
+
input,
|
355
|
+
textarea,
|
356
|
+
select,
|
357
|
+
fieldset {
|
358
|
+
margin-bottom: 1.5rem; }
|
359
|
+
pre,
|
360
|
+
blockquote,
|
361
|
+
form,
|
362
|
+
dl,
|
363
|
+
figure,
|
364
|
+
table,
|
365
|
+
p,
|
366
|
+
ul,
|
367
|
+
ol,
|
368
|
+
form {
|
369
|
+
margin-bottom: 2.5rem; }
|
370
|
+
p {
|
371
|
+
margin-top: 0; }
|
372
|
+
|
373
|
+
|
374
|
+
|
375
|
+
/* Utilities
|
376
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
377
|
+
.u-full-width {
|
378
|
+
width: 100%;
|
379
|
+
box-sizing: border-box; }
|
380
|
+
.u-max-full-width {
|
381
|
+
max-width: 100%;
|
382
|
+
box-sizing: border-box; }
|
383
|
+
.u-pull-right {
|
384
|
+
float: right; }
|
385
|
+
.u-pull-left {
|
386
|
+
float: left; }
|
387
|
+
|
388
|
+
|
389
|
+
/* Misc
|
390
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
391
|
+
hr {
|
392
|
+
margin-top: 3rem;
|
393
|
+
margin-bottom: 3.5rem;
|
394
|
+
border-width: 0;
|
395
|
+
border-top: 1px solid $light-gray;
|
396
|
+
}
|
397
|
+
|
398
|
+
/* Clearing
|
399
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
400
|
+
|
401
|
+
/* Self Clearing Goodness */
|
402
|
+
.container:after,
|
403
|
+
.row:after,
|
404
|
+
.u-cf {
|
405
|
+
content: "";
|
406
|
+
display: table;
|
407
|
+
clear: both; }
|
408
|
+
|
409
|
+
|
410
|
+
/* Media Queries
|
411
|
+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
412
|
+
/*
|
413
|
+
Note: The best way to structure the use of media queries is to create the queries
|
414
|
+
near the relevant code. For example, if you wanted to change the styles for buttons
|
415
|
+
on small devices, paste the mobile query code up in the buttons secion and style it
|
416
|
+
there.
|
417
|
+
*/
|
418
|
+
|
419
|
+
/* Larger than mobile */
|
420
|
+
@media (min-width: $larger-than-mobile) {}
|
421
|
+
|
422
|
+
/* Larger than phablet (also point when grid becomes active) */
|
423
|
+
@media (min-width: $larger-than-phablet) {}
|
424
|
+
|
425
|
+
/* Larger than tablet */
|
426
|
+
@media (min-width: $larger-than-tablet) {}
|
427
|
+
|
428
|
+
/* Larger than desktop */
|
429
|
+
@media (min-width: $larger-than-desktop) {}
|
430
|
+
|
431
|
+
/* Larger than Desktop HD */
|
432
|
+
@media (min-width: $larger-than-desktophd) {}
|
metadata
ADDED
@@ -0,0 +1,81 @@
|
|
1
|
+
--- !ruby/object:Gem::Specification
|
2
|
+
name: skeleton_sass
|
3
|
+
version: !ruby/object:Gem::Version
|
4
|
+
version: 0.0.1
|
5
|
+
platform: ruby
|
6
|
+
authors:
|
7
|
+
- Krishn Ramesh
|
8
|
+
autorequire:
|
9
|
+
bindir: bin
|
10
|
+
cert_chain: []
|
11
|
+
date: 2014-12-29 00:00:00.000000000 Z
|
12
|
+
dependencies:
|
13
|
+
- !ruby/object:Gem::Dependency
|
14
|
+
name: bundler
|
15
|
+
requirement: !ruby/object:Gem::Requirement
|
16
|
+
requirements:
|
17
|
+
- - "~>"
|
18
|
+
- !ruby/object:Gem::Version
|
19
|
+
version: '1.7'
|
20
|
+
type: :development
|
21
|
+
prerelease: false
|
22
|
+
version_requirements: !ruby/object:Gem::Requirement
|
23
|
+
requirements:
|
24
|
+
- - "~>"
|
25
|
+
- !ruby/object:Gem::Version
|
26
|
+
version: '1.7'
|
27
|
+
- !ruby/object:Gem::Dependency
|
28
|
+
name: rake
|
29
|
+
requirement: !ruby/object:Gem::Requirement
|
30
|
+
requirements:
|
31
|
+
- - "~>"
|
32
|
+
- !ruby/object:Gem::Version
|
33
|
+
version: '10.0'
|
34
|
+
type: :development
|
35
|
+
prerelease: false
|
36
|
+
version_requirements: !ruby/object:Gem::Requirement
|
37
|
+
requirements:
|
38
|
+
- - "~>"
|
39
|
+
- !ruby/object:Gem::Version
|
40
|
+
version: '10.0'
|
41
|
+
description: ''
|
42
|
+
email:
|
43
|
+
- krishnr@gmail.com
|
44
|
+
executables: []
|
45
|
+
extensions: []
|
46
|
+
extra_rdoc_files: []
|
47
|
+
files:
|
48
|
+
- ".gitignore"
|
49
|
+
- Gemfile
|
50
|
+
- LICENSE.txt
|
51
|
+
- README.md
|
52
|
+
- Rakefile
|
53
|
+
- lib/skeleton_sass.rb
|
54
|
+
- lib/skeleton_sass/version.rb
|
55
|
+
- skeleton_sass.gemspec
|
56
|
+
- vendor/assets/stylesheets/skeleton.scss
|
57
|
+
homepage: https://github.com/krishnr/skeleton_sass
|
58
|
+
licenses:
|
59
|
+
- MIT
|
60
|
+
metadata: {}
|
61
|
+
post_install_message:
|
62
|
+
rdoc_options: []
|
63
|
+
require_paths:
|
64
|
+
- lib
|
65
|
+
required_ruby_version: !ruby/object:Gem::Requirement
|
66
|
+
requirements:
|
67
|
+
- - ">="
|
68
|
+
- !ruby/object:Gem::Version
|
69
|
+
version: '0'
|
70
|
+
required_rubygems_version: !ruby/object:Gem::Requirement
|
71
|
+
requirements:
|
72
|
+
- - ">="
|
73
|
+
- !ruby/object:Gem::Version
|
74
|
+
version: '0'
|
75
|
+
requirements: []
|
76
|
+
rubyforge_project:
|
77
|
+
rubygems_version: 2.2.2
|
78
|
+
signing_key:
|
79
|
+
specification_version: 4
|
80
|
+
summary: Packages a SASS version of the Skeleton CSS framework
|
81
|
+
test_files: []
|