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 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
@@ -0,0 +1,14 @@
1
+ /.bundle/
2
+ /.yardoc
3
+ /Gemfile.lock
4
+ /_yardoc/
5
+ /coverage/
6
+ /doc/
7
+ /pkg/
8
+ /spec/reports/
9
+ /tmp/
10
+ *.bundle
11
+ *.so
12
+ *.o
13
+ *.a
14
+ mkmf.log
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in skeleton_sass.gemspec
4
+ gemspec
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 &hearts;.
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,2 @@
1
+ require "bundler/gem_tasks"
2
+
@@ -0,0 +1,9 @@
1
+ require "skeleton_sass/version"
2
+
3
+ module SkeletonSass
4
+ module Rails
5
+ class Engine < ::Rails::Engine
6
+ # The engine gets rails to add app, lib, vendor folders to load path of the larger application
7
+ end
8
+ end
9
+ end
@@ -0,0 +1,3 @@
1
+ module SkeletonSass
2
+ VERSION = "0.0.1"
3
+ end
@@ -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: []