droidcss 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,15 @@
1
+ ---
2
+ !binary "U0hBMQ==":
3
+ metadata.gz: !binary |-
4
+ ZTkyY2UyZjMxOTAxODdiNTU2MjE5YTQ3ZDU0YTU5YmFlM2Q1OTY5OA==
5
+ data.tar.gz: !binary |-
6
+ ODgzOTg1NTdlY2YzMjUwYjI5N2FlMjlkOGE0MmVkNWE2OWFmYzJkMA==
7
+ !binary "U0hBNTEy":
8
+ metadata.gz: !binary |-
9
+ NDU2YmZmMTZmZmU4NDNkYmMyOWI5NTlkNDI5ZDYwNjAxYmUxYjQ5MTFjYzkz
10
+ ZmI1MThkMDQ5NzRhMDE3OGFiMWY0OGJiODUzNTNkZmFmMzYyODMyODU4N2Y0
11
+ ODNiYzcwOTQyOGUyODNmN2QxODFiZGU4OTYyZGE4ODE2ZWMwMTM=
12
+ data.tar.gz: !binary |-
13
+ M2Q5YTJkZGM3NmEyMTVmNmU1YzUzMjY4YWQ5NDAxN2RmODlhN2Q5M2Y1Yzlm
14
+ MTBmMDFiN2U0NmZkOWViMGYwM2EwYzRiYmYxMjlkZWQ1ZWYyZGJjMGQ2ZGYz
15
+ YzNlZTBmZGQyOGJkY2MxOWM0ODIzMTU0MmQ4NDU5Njc3MDYzNjY=
@@ -0,0 +1,4 @@
1
+ .DS_Store
2
+ pkg/*
3
+ tmp
4
+ .bundle
@@ -0,0 +1,2 @@
1
+ ### 1.0.0 (06 September 2013)
2
+ - Initial release
data/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ The MIT License
2
+
3
+ Copyright (c) 2010 Andre Arko
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in
13
+ all copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21
+ THE SOFTWARE.
@@ -0,0 +1,162 @@
1
+ # DroidCSS
2
+
3
+ Small responsive framework with grids and couple mixins. We've took the most used mixins from [Bourbon](https://github.com/thoughtbot/bourbon) and added [960px Grids](https://github.com/nathansmith/960-grid-system/) to it. Very light, powerful and fast CSS Grid framework for you to use.
4
+
5
+ ## [Grid Demo](http://droidlabs.github.io/droidcss/)
6
+
7
+ ## What's under the hood?
8
+
9
+ * CSS Reset
10
+ * CSS3 Mixins
11
+ * Compiled CSS file (from SCSS)
12
+
13
+ ## How to use with SCSS
14
+
15
+ On Mac it's easy to use it with:
16
+
17
+ * [SASS/SCSS Gem](http://sass-lang.com/download.html)
18
+ * [CodeKit](http://incident57.com/codekit/)
19
+ * [Hammer](http://www.hammerformac.com/)
20
+ * [LiveReload](http://www.livereload.com/)
21
+
22
+ ## Variables
23
+
24
+ All the variables can be found in partials/setup.scss file
25
+
26
+ #### asset-pipeline
27
+
28
+ Set to true if you use it in your project (default to false). If don't use it or don't know what is it about, leave it as is.
29
+
30
+ $asset-pipeline: false;
31
+
32
+ #### fonts-path
33
+
34
+ Include path to font files with trailing slash (default is '/assets/fonts/').
35
+
36
+ $fonts-path: '/assets/fonts/';
37
+
38
+ #### media queries
39
+
40
+ Breakpoints for mobile devices, tablets and desktop. To disable of the support of responsive layouts, just remove responsive.scss from style.scss. Here is explanation of the variables:
41
+
42
+ $media-mobile-max: breakpoint for mobile devices (default is '767px')
43
+ $media-tablet-min: breakpoint for tablet minimum width (default is '768px')
44
+ $media-tablet-max: breakpoint for tablet maximum width (default is '1024px')
45
+ $media-desktop-min: breakpoint for desktop (default is '1025px')
46
+
47
+ Media queries example:
48
+
49
+ $media-mobile-max: 767px;
50
+ $media-tablet-min: 768px;
51
+ $media-tablet-max: 1024px;
52
+ $media-desktop-min: 1025px;
53
+
54
+ #### grid-width
55
+
56
+ Default site width. For 960.gs it's 960px
57
+
58
+ $grid-width: 960px;
59
+
60
+ #### columns-count
61
+
62
+ Select 12 or 16 columns for layout (2 types of columns are supported with 960.gs). The default value is '12' columns.
63
+
64
+ $columns-count: 12;
65
+
66
+ #### gutter-width
67
+
68
+ Spacing between the columns (default is '1.04166666666%' which is 10px in 960.gs).
69
+
70
+ $gutter-width: 1.04166666666%;
71
+
72
+ #### column-width
73
+
74
+ Column width (default is 6). Don't mess with it. In 12 columns layout it's 60px (which is 6), in 16 columns layout it will be 40px (which is 4). Mixin will change it automaticly, just set column with to 12 or 16.
75
+
76
+ $column-width: 6;
77
+
78
+ ## Available mixins:
79
+
80
+ #### Box sizing:
81
+
82
+ Usage:
83
+
84
+ @include box-sizing(border-box);
85
+
86
+ CSS output result:
87
+
88
+ -webkit-box-sizing: border-box;
89
+ -moz-box-sizing: border-box;
90
+ box-sizing: border-box;
91
+
92
+ #### Font-face:
93
+
94
+ Usage:
95
+
96
+ @include font-face('MuseoSans', 'museosans-regular');
97
+ @include font-face('MuseoSans', 'museosans-bold-italic', '700', 'italic');
98
+
99
+ CSS output result:
100
+
101
+ @font-face {
102
+ font-family: "MuseoSans";
103
+ font-weight: 400;
104
+ font-style: normal;
105
+ src: url("/assets/fonts/museosans-regular.eot");
106
+ src: url("/assets/fonts/museosans-regular.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/museosans-regular.woff") format("woff"), url("/assets/fonts/museosans-regular.ttf") format("truetype"), url("/assets/fonts/museosans-regular.svg#MuseoSans") format("svg");
107
+ }
108
+
109
+ @font-face {
110
+ font-family: "MuseoSans";
111
+ font-weight: "700";
112
+ font-style: "italic";
113
+ src: url("/assets/fonts/museosans-bold-italic.eot");
114
+ src: url("/assets/fonts/museosans-bold-italic.eot?#iefix") format("embedded-opentype"), url("/assets/fonts/museosans-bold-italic.woff") format("woff"), url("/assets/fonts/museosans-bold-italic.ttf") format("truetype"), url("/assets/fonts/museosans-bold-italic.svg#MuseoSans") format("svg");
115
+ }
116
+
117
+ #### Gradients:
118
+
119
+ Usage:
120
+
121
+ @include linear-gradient(#ff0000, #cc0000);
122
+
123
+ CSS output result:
124
+
125
+ background-color: white;
126
+ background-image: -webkit-linear-gradient(white, black);
127
+ background-image: linear-gradient(white, black);
128
+
129
+ #### Transitions:
130
+
131
+ Usage:
132
+
133
+ @include transition((opacity) (.2s) (linear));
134
+
135
+ CSS output result:
136
+
137
+ -webkit-transition: opacity 0.2s linear;
138
+ -moz-transition: opacity 0.2s linear;
139
+ transition: opacity 0.2s linear;
140
+
141
+ ## Default classes
142
+
143
+ Default classes available in *partials/defaults.scss*:
144
+
145
+ * .hide, .hidden - hide block
146
+ * .fleft, .fright - float blocks left or right
147
+ * .text-left, .text-center, .text-right - align text left, centered or right
148
+ * .clear - clearing blocks
149
+ * .clearfix - clearfix for blocks
150
+
151
+ ## License
152
+
153
+ Licenced under MIT: <http://opensource.org/licenses/MIT>.
154
+
155
+ ## Got questions?
156
+
157
+ Feel free to contact us regarding DroidCSS via [twitter](http://twitter.com/droidlabs) or [email](mailto:ilya@droidlabs.pro).
158
+
159
+ ## Thanks for using DroidCSS
160
+
161
+ Cheers,
162
+ [DroidLabs](http://droidlabs.pro).
@@ -0,0 +1,2 @@
1
+ require 'bundler'
2
+ Bundler::GemHelper.install_tasks
@@ -0,0 +1,19 @@
1
+ # -*- encoding: utf-8 -*-
2
+ require File.expand_path('../lib/droidcss/version', __FILE__)
3
+
4
+ Gem::Specification.new do |s|
5
+ s.name = "droidcss"
6
+ s.version = DroidCss::VERSION
7
+ s.platform = Gem::Platform::RUBY
8
+ s.authors = ["Ilya Gorenburg"]
9
+ s.email = ["ilya@droidlabs.pro"]
10
+ s.homepage = "https://github.com/droidlabs/droidcss"
11
+ s.summary = "Small responsive framework"
12
+ s.description = "Small responsive framework "
13
+
14
+ s.add_dependency('sass', '>= 3.2.0')
15
+
16
+ s.files = `git ls-files`.split("\n")
17
+ s.executables = `git ls-files -- bin/*`.split("\n").map { |f| File.basename(f) }
18
+ s.require_path = 'lib'
19
+ end
@@ -0,0 +1,17 @@
1
+ # CodeKit needs relative paths
2
+ dir = File.dirname(__FILE__)
3
+ $LOAD_PATH.unshift dir unless $LOAD_PATH.include?(dir)
4
+
5
+ unless defined?(Sass)
6
+ require 'sass'
7
+ end
8
+
9
+ module DroidCss
10
+ if defined?(Rails) && defined?(Rails::Engine)
11
+ class Engine < ::Rails::Engine
12
+ require 'droidcss/engine'
13
+ end
14
+ else
15
+ Sass.load_paths << File.expand_path("../../vendor/assets/stylesheets", __FILE__)
16
+ end
17
+ end
@@ -0,0 +1,4 @@
1
+ module DroidCss
2
+ class Engine < Rails::Engine
3
+ end
4
+ end
@@ -0,0 +1,3 @@
1
+ module DroidCss
2
+ VERSION = "1.0.0"
3
+ end
@@ -0,0 +1,624 @@
1
+ article, aside, details, figcaption, figure, footer, header, hgroup, main, nav, section, summary {
2
+ display: block;
3
+ }
4
+
5
+ audio, canvas, video {
6
+ display: inline-block;
7
+ }
8
+
9
+ audio:not([controls]) {
10
+ display: none;
11
+ height: 0;
12
+ }
13
+
14
+ [hidden], template {
15
+ display: none;
16
+ }
17
+
18
+ html {
19
+ -ms-text-size-adjust: 100%;
20
+ -webkit-text-size-adjust: 100%;
21
+ font-family: sans-serif;
22
+ }
23
+
24
+ a {
25
+ background: transparent;
26
+ }
27
+
28
+ a, input, textarea {
29
+ outline: 0;
30
+ }
31
+
32
+ h1, h2, h3, h4, h5, h6 {
33
+ font-size: 100%;
34
+ margin: 0;
35
+ }
36
+
37
+ abbr[title] {
38
+ border-bottom: 1px dotted;
39
+ }
40
+
41
+ b, strong {
42
+ font-weight: 700;
43
+ }
44
+
45
+ em, i {
46
+ font-style: italic;
47
+ }
48
+
49
+ hr {
50
+ -moz-box-sizing: content-box;
51
+ box-sizing: content-box;
52
+ height: 0;
53
+ }
54
+
55
+ mark {
56
+ background: #ff0;
57
+ color: #000;
58
+ }
59
+
60
+ code, kbd, pre, samp {
61
+ font-family: monospace, serif;
62
+ font-size: 1em;
63
+ }
64
+
65
+ pre {
66
+ white-space: pre-wrap;
67
+ }
68
+
69
+ q {
70
+ quotes: \201C \201D \2018 \2019;
71
+ }
72
+
73
+ small {
74
+ font-size: 80%;
75
+ }
76
+
77
+ sub, sup {
78
+ font-size: 75%;
79
+ line-height: 0;
80
+ position: relative;
81
+ vertical-align: baseline;
82
+ }
83
+
84
+ sup {
85
+ top: -.5em;
86
+ }
87
+
88
+ sub {
89
+ bottom: -.25em;
90
+ }
91
+
92
+ img {
93
+ border: 0;
94
+ }
95
+
96
+ svg:not(:root) {
97
+ overflow: hidden;
98
+ }
99
+
100
+ fieldset {
101
+ border: 1px solid silver;
102
+ margin: 0 2px;
103
+ padding: .35em .625em .75em;
104
+ }
105
+
106
+ button, input, select, textarea {
107
+ font-family: inherit;
108
+ font-size: 100%;
109
+ margin: 0;
110
+ }
111
+
112
+ button, input {
113
+ line-height: normal;
114
+ }
115
+
116
+ button, select {
117
+ text-transform: none;
118
+ }
119
+
120
+ button, html input[type=button],
121
+ input[type=reset], input[type=submit] {
122
+ -webkit-appearance: button;
123
+ cursor: pointer;
124
+ }
125
+
126
+ button[disabled], html input[disabled] {
127
+ cursor: default;
128
+ }
129
+
130
+ input[type=checkbox], input[type=radio] {
131
+ box-sizing: border-box;
132
+ padding: 0;
133
+ }
134
+
135
+ input[type=search] {
136
+ -moz-box-sizing: content-box;
137
+ -webkit-appearance: textfield;
138
+ -webkit-box-sizing: content-box;
139
+ box-sizing: content-box;
140
+ }
141
+
142
+ input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
143
+ -webkit-appearance: none;
144
+ }
145
+
146
+ textarea {
147
+ overflow: auto;
148
+ vertical-align: top;
149
+ }
150
+
151
+ table {
152
+ border-collapse: collapse;
153
+ border-spacing: 0;
154
+ }
155
+
156
+ body, figure {
157
+ margin: 0;
158
+ }
159
+
160
+ legend, button::-moz-focus-inner, input::-moz-focus-inner {
161
+ border: 0;
162
+ padding: 0;
163
+ }
164
+
165
+ body {
166
+ cursor: default;
167
+ }
168
+
169
+ input, textarea {
170
+ cursor: text;
171
+ }
172
+
173
+ a, label, select, button, input[type=button], input[type=submit], input[type=checkbox], input[type=radio], input[type=file] {
174
+ cursor: pointer;
175
+ }
176
+
177
+ nav ul {
178
+ list-style: none;
179
+ margin: 0;
180
+ padding: 0;
181
+ }
182
+
183
+ nav ul li {
184
+ margin: 0;
185
+ padding: 0;
186
+ }
187
+
188
+ .hide, .hidden {
189
+ display: none;
190
+ }
191
+
192
+ .fleft {
193
+ float: left;
194
+ }
195
+
196
+ .fright {
197
+ float: right;
198
+ }
199
+
200
+ .text-left {
201
+ text-align: left;
202
+ }
203
+
204
+ .text-center {
205
+ text-align: center;
206
+ }
207
+
208
+ .text-right {
209
+ text-align: right;
210
+ }
211
+
212
+ .clear {
213
+ clear: both;
214
+ width: 100%;
215
+ height: 1px;
216
+ overflow: hidden;
217
+ }
218
+
219
+ .clearfix:after, .clearfix:before {
220
+ content: " ";
221
+ display: table;
222
+ }
223
+
224
+ .clearfix:after {
225
+ clear: both;
226
+ }
227
+
228
+ .grid-container {
229
+ max-width: 960px;
230
+ margin-left: auto;
231
+ margin-right: auto;
232
+ clear: both;
233
+ }
234
+ .grid-container:before, .grid-container:after {
235
+ content: ".";
236
+ display: block;
237
+ overflow: hidden;
238
+ visibility: hidden;
239
+ font-size: 0;
240
+ line-height: 0;
241
+ width: 0;
242
+ height: 0;
243
+ clear: both;
244
+ }
245
+
246
+ .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
247
+ margin-left: 1.04167%;
248
+ margin-right: 1.04167%;
249
+ float: left;
250
+ -webkit-box-sizing: border-box;
251
+ -moz-box-sizing: border-box;
252
+ box-sizing: border-box;
253
+ }
254
+
255
+ .push-1, .pull-1, .push-2, .pull-2, .push-3, .pull-3, .push-4, .pull-4, .push-5, .pull-5, .push-6, .pull-6, .push-7, .pull-7, .push-8, .pull-8, .push-9, .pull-9, .push-10, .pull-10, .push-11, .pull-11, .push-12, .pull-12 {
256
+ position: relative;
257
+ }
258
+
259
+ .grid-1 {
260
+ width: 6.25%;
261
+ }
262
+
263
+ .prefix-1 {
264
+ margin-left: 6.25%;
265
+ }
266
+
267
+ .suffix-1 {
268
+ margin-right: 6.25%;
269
+ }
270
+
271
+ .push-1 {
272
+ left: 6.25%;
273
+ }
274
+
275
+ .pull-1 {
276
+ left: -6.25%;
277
+ }
278
+
279
+ .grid-2 {
280
+ width: 14.58333%;
281
+ }
282
+
283
+ .prefix-2 {
284
+ margin-left: 14.58333%;
285
+ }
286
+
287
+ .suffix-2 {
288
+ margin-right: 14.58333%;
289
+ }
290
+
291
+ .push-2 {
292
+ left: 14.58333%;
293
+ }
294
+
295
+ .pull-2 {
296
+ left: -14.58333%;
297
+ }
298
+
299
+ .grid-3 {
300
+ width: 22.91667%;
301
+ }
302
+
303
+ .prefix-3 {
304
+ margin-left: 22.91667%;
305
+ }
306
+
307
+ .suffix-3 {
308
+ margin-right: 22.91667%;
309
+ }
310
+
311
+ .push-3 {
312
+ left: 22.91667%;
313
+ }
314
+
315
+ .pull-3 {
316
+ left: -22.91667%;
317
+ }
318
+
319
+ .grid-4 {
320
+ width: 31.25%;
321
+ }
322
+
323
+ .prefix-4 {
324
+ margin-left: 31.25%;
325
+ }
326
+
327
+ .suffix-4 {
328
+ margin-right: 31.25%;
329
+ }
330
+
331
+ .push-4 {
332
+ left: 31.25%;
333
+ }
334
+
335
+ .pull-4 {
336
+ left: -31.25%;
337
+ }
338
+
339
+ .grid-5 {
340
+ width: 39.58333%;
341
+ }
342
+
343
+ .prefix-5 {
344
+ margin-left: 39.58333%;
345
+ }
346
+
347
+ .suffix-5 {
348
+ margin-right: 39.58333%;
349
+ }
350
+
351
+ .push-5 {
352
+ left: 39.58333%;
353
+ }
354
+
355
+ .pull-5 {
356
+ left: -39.58333%;
357
+ }
358
+
359
+ .grid-6 {
360
+ width: 47.91667%;
361
+ }
362
+
363
+ .prefix-6 {
364
+ margin-left: 47.91667%;
365
+ }
366
+
367
+ .suffix-6 {
368
+ margin-right: 47.91667%;
369
+ }
370
+
371
+ .push-6 {
372
+ left: 47.91667%;
373
+ }
374
+
375
+ .pull-6 {
376
+ left: -47.91667%;
377
+ }
378
+
379
+ .grid-7 {
380
+ width: 56.25%;
381
+ }
382
+
383
+ .prefix-7 {
384
+ margin-left: 56.25%;
385
+ }
386
+
387
+ .suffix-7 {
388
+ margin-right: 56.25%;
389
+ }
390
+
391
+ .push-7 {
392
+ left: 56.25%;
393
+ }
394
+
395
+ .pull-7 {
396
+ left: -56.25%;
397
+ }
398
+
399
+ .grid-8 {
400
+ width: 64.58333%;
401
+ }
402
+
403
+ .prefix-8 {
404
+ margin-left: 64.58333%;
405
+ }
406
+
407
+ .suffix-8 {
408
+ margin-right: 64.58333%;
409
+ }
410
+
411
+ .push-8 {
412
+ left: 64.58333%;
413
+ }
414
+
415
+ .pull-8 {
416
+ left: -64.58333%;
417
+ }
418
+
419
+ .grid-9 {
420
+ width: 72.91667%;
421
+ }
422
+
423
+ .prefix-9 {
424
+ margin-left: 72.91667%;
425
+ }
426
+
427
+ .suffix-9 {
428
+ margin-right: 72.91667%;
429
+ }
430
+
431
+ .push-9 {
432
+ left: 72.91667%;
433
+ }
434
+
435
+ .pull-9 {
436
+ left: -72.91667%;
437
+ }
438
+
439
+ .grid-10 {
440
+ width: 81.25%;
441
+ }
442
+
443
+ .prefix-10 {
444
+ margin-left: 81.25%;
445
+ }
446
+
447
+ .suffix-10 {
448
+ margin-right: 81.25%;
449
+ }
450
+
451
+ .push-10 {
452
+ left: 81.25%;
453
+ }
454
+
455
+ .pull-10 {
456
+ left: -81.25%;
457
+ }
458
+
459
+ .grid-11 {
460
+ width: 89.58333%;
461
+ }
462
+
463
+ .prefix-11 {
464
+ margin-left: 89.58333%;
465
+ }
466
+
467
+ .suffix-11 {
468
+ margin-right: 89.58333%;
469
+ }
470
+
471
+ .push-11 {
472
+ left: 89.58333%;
473
+ }
474
+
475
+ .pull-11 {
476
+ left: -89.58333%;
477
+ }
478
+
479
+ .grid-12 {
480
+ width: 97.91667%;
481
+ }
482
+
483
+ .prefix-12 {
484
+ margin-left: 97.91667%;
485
+ }
486
+
487
+ .suffix-12 {
488
+ margin-right: 97.91667%;
489
+ }
490
+
491
+ .push-12 {
492
+ left: 97.91667%;
493
+ }
494
+
495
+ .pull-12 {
496
+ left: -97.91667%;
497
+ }
498
+
499
+ /* DESKTOP SUPPORT */
500
+ @media screen and (min-width: 1025px) {
501
+ .hide-on-desktop {
502
+ display: none !important;
503
+ }
504
+ }
505
+ /* TABLET SUPPORT */
506
+ @media screen and (min-width: 768px) and (max-width: 1024px) {
507
+ .grid-container {
508
+ max-width: 100%;
509
+ padding-left: 1.04167%;
510
+ padding-right: 1.04167%;
511
+ }
512
+
513
+ .hide-on-tablet, .only-desktop, .only-mobile {
514
+ display: none !important;
515
+ }
516
+
517
+ .grid-tablet-1 {
518
+ width: 6.25%;
519
+ }
520
+
521
+ .grid-tablet-2 {
522
+ width: 14.58333%;
523
+ }
524
+
525
+ .grid-tablet-3 {
526
+ width: 22.91667%;
527
+ }
528
+
529
+ .grid-tablet-4 {
530
+ width: 31.25%;
531
+ }
532
+
533
+ .grid-tablet-5 {
534
+ width: 39.58333%;
535
+ }
536
+
537
+ .grid-tablet-6 {
538
+ width: 47.91667%;
539
+ }
540
+
541
+ .grid-tablet-7 {
542
+ width: 56.25%;
543
+ }
544
+
545
+ .grid-tablet-8 {
546
+ width: 64.58333%;
547
+ }
548
+
549
+ .grid-tablet-9 {
550
+ width: 72.91667%;
551
+ }
552
+
553
+ .grid-tablet-10 {
554
+ width: 81.25%;
555
+ }
556
+
557
+ .grid-tablet-11 {
558
+ width: 89.58333%;
559
+ }
560
+
561
+ .grid-tablet-12 {
562
+ width: 97.91667%;
563
+ }
564
+ }
565
+ /* MOBILE SUPPORT */
566
+ @media screen and (max-width: 767px) {
567
+ .grid-container {
568
+ max-width: 100%;
569
+ padding-left: 1.04167%;
570
+ padding-right: 1.04167%;
571
+ }
572
+
573
+ .hide-on-mobile, .only-desktop, .only-tablet {
574
+ display: none !important;
575
+ }
576
+
577
+ .grid-mobile-1 {
578
+ width: 6.25%;
579
+ }
580
+
581
+ .grid-mobile-2 {
582
+ width: 14.58333%;
583
+ }
584
+
585
+ .grid-mobile-3 {
586
+ width: 22.91667%;
587
+ }
588
+
589
+ .grid-mobile-4 {
590
+ width: 31.25%;
591
+ }
592
+
593
+ .grid-mobile-5 {
594
+ width: 39.58333%;
595
+ }
596
+
597
+ .grid-mobile-6 {
598
+ width: 47.91667%;
599
+ }
600
+
601
+ .grid-mobile-7 {
602
+ width: 56.25%;
603
+ }
604
+
605
+ .grid-mobile-8 {
606
+ width: 64.58333%;
607
+ }
608
+
609
+ .grid-mobile-9 {
610
+ width: 72.91667%;
611
+ }
612
+
613
+ .grid-mobile-10 {
614
+ width: 81.25%;
615
+ }
616
+
617
+ .grid-mobile-11 {
618
+ width: 89.58333%;
619
+ }
620
+
621
+ .grid-mobile-12 {
622
+ width: 97.91667%;
623
+ }
624
+ }
@@ -0,0 +1,2 @@
1
+ @import 'droidcss/mixins';
2
+ @import 'droidcss/base';
@@ -0,0 +1,8 @@
1
+ // Adding reset
2
+ @import 'droidcss/partials/reset';
3
+
4
+ // Adding default styles
5
+ @import 'droidcss/partials/defaults';
6
+
7
+ // Adding grid
8
+ @import 'droidcss/partials/grid';
@@ -0,0 +1,6 @@
1
+ @import 'droidcss/mixins/prefixer';
2
+ @import 'droidcss/mixins/gradients';
3
+ @import 'droidcss/mixins/transitions';
4
+ @import 'droidcss/mixins/box-sizing';
5
+ @import 'droidcss/mixins/font-face';
6
+ @import 'droidcss/mixins/transforms';
@@ -0,0 +1,3 @@
1
+ @mixin box-sizing ($box) {
2
+ @include prefixer(box-sizing, $box, webkit moz spec);
3
+ }
@@ -0,0 +1,24 @@
1
+ // Paths
2
+ $asset-pipeline: false !default; // if don't use it or don't know what is it about, leave it as is
3
+ $fonts-path: '/assets/fonts/' !default; // with trailing slash, please. Otherwise the fonts won't load
4
+
5
+ @mixin font-face( $font-family, $file-name, $weight: 400, $style: normal ) {
6
+ @font-face {
7
+ font-family: $font-family;
8
+ font-weight: #{$weight};
9
+ font-style: #{$style};
10
+ @if $asset-pipeline == true {
11
+ src: font-url('#{$fonts-path}#{$file-name}.eot');
12
+ src: font-url('#{$fonts-path}#{$file-name}.eot?#iefix') format('embedded-opentype'),
13
+ font-url('#{$fonts-path}#{$file-name}.woff') format('woff'),
14
+ font-url('#{$fonts-path}#{$file-name}.ttf') format('truetype'),
15
+ font-url('#{$fonts-path}#{$file-name}.svg##{$font-family}') format('svg');
16
+ } @else {
17
+ src: url('#{$fonts-path}#{$file-name}.eot');
18
+ src: url('#{$fonts-path}#{$file-name}.eot?#iefix') format('embedded-opentype'),
19
+ url('#{$fonts-path}#{$file-name}.woff') format('woff'),
20
+ url('#{$fonts-path}#{$file-name}.ttf') format('truetype'),
21
+ url('#{$fonts-path}#{$file-name}.svg##{$font-family}') format('svg');
22
+ }
23
+ }
24
+ }
@@ -0,0 +1,38 @@
1
+ @mixin linear-gradient($pos, $G1, $G2: null,
2
+ $G3: null, $G4: null,
3
+ $G5: null, $G6: null,
4
+ $G7: null, $G8: null,
5
+ $G9: null, $G10: null,
6
+ $fallback: null) {
7
+ // Detect what type of value exists in $pos
8
+ $pos-type: type-of(nth($pos, 1));
9
+ $pos-spec: null;
10
+ $pos-degree: null;
11
+
12
+ // If $pos is missing from mixin, reassign vars and add default position
13
+ @if ($pos-type == color) or (nth($pos, 1) == "transparent") {
14
+ $G10: $G9; $G9: $G8; $G8: $G7; $G7: $G6; $G6: $G5;
15
+ $G5: $G4; $G4: $G3; $G3: $G2; $G2: $G1; $G1: $pos;
16
+ $pos: null;
17
+ }
18
+
19
+ @if $pos {
20
+ $positions: _linear-positions-parser($pos);
21
+ $pos-degree: nth($positions, 1);
22
+ $pos-spec: nth($positions, 2);
23
+ }
24
+
25
+ $full: $G1, $G2, $G3, $G4, $G5, $G6, $G7, $G8, $G9, $G10;
26
+
27
+ // Set $G1 as the default fallback color
28
+ $fallback-color: nth($G1, 1);
29
+
30
+ // If $fallback is a color use that color as the fallback color
31
+ @if (type-of($fallback) == color) or ($fallback == "transparent") {
32
+ $fallback-color: $fallback;
33
+ }
34
+
35
+ background-color: $fallback-color;
36
+ background-image: -webkit-linear-gradient($pos-degree $full); // Safari 5.1+, Chrome
37
+ background-image: unquote("linear-gradient(#{$pos-spec}#{$full})");
38
+ }
@@ -0,0 +1,39 @@
1
+ // Used for transitions
2
+ $prefix-for-webkit: true !default;
3
+ $prefix-for-mozilla: true !default;
4
+ $prefix-for-microsoft: true !default;
5
+ $prefix-for-opera: true !default;
6
+ $prefix-for-spec: true !default; // required for keyframe mixin
7
+
8
+ @mixin prefixer ($property, $value, $prefixes) {
9
+ @each $prefix in $prefixes {
10
+ @if $prefix == webkit {
11
+ @if $prefix-for-webkit {
12
+ -webkit-#{$property}: $value;
13
+ }
14
+ }
15
+ @else if $prefix == moz {
16
+ @if $prefix-for-mozilla {
17
+ -moz-#{$property}: $value;
18
+ }
19
+ }
20
+ @else if $prefix == ms {
21
+ @if $prefix-for-microsoft {
22
+ -ms-#{$property}: $value;
23
+ }
24
+ }
25
+ @else if $prefix == o {
26
+ @if $prefix-for-opera {
27
+ -o-#{$property}: $value;
28
+ }
29
+ }
30
+ @else if $prefix == spec {
31
+ @if $prefix-for-spec {
32
+ #{$property}: $value;
33
+ }
34
+ }
35
+ @else {
36
+ @warn "Unrecognized prefix: #{$prefix}";
37
+ }
38
+ }
39
+ }
@@ -0,0 +1,11 @@
1
+ @mixin transform($property: none) {
2
+ @include prefixer(transform, $property, webkit moz ms o spec);
3
+ }
4
+
5
+ @mixin transform-origin($axes: 50%) {
6
+ @include prefixer(transform-origin, $axes, webkit moz ms o spec);
7
+ }
8
+
9
+ @mixin transform-style ($style: flat) {
10
+ @include prefixer(transform-style, $style, webkit moz ms o spec);
11
+ }
@@ -0,0 +1,29 @@
1
+ @mixin transition ($properties...) {
2
+ @if length($properties) >= 1 {
3
+ @include prefixer(transition, $properties, webkit moz spec);
4
+ }
5
+
6
+ @else {
7
+ $properties: all 0.15s ease-out 0s;
8
+ @include prefixer(transition, $properties, webkit moz spec);
9
+ }
10
+ }
11
+
12
+ @mixin transition-property ($properties...) {
13
+ -webkit-transition-property: transition-property-names($properties, 'webkit');
14
+ -moz-transition-property: transition-property-names($properties, 'moz');
15
+ transition-property: transition-property-names($properties, false);
16
+ }
17
+
18
+ @mixin transition-duration ($times...) {
19
+ @include prefixer(transition-duration, $times, webkit moz spec);
20
+ }
21
+
22
+ @mixin transition-timing-function ($motions...) {
23
+ // ease | linear | ease-in | ease-out | ease-in-out | cubic-bezier()
24
+ @include prefixer(transition-timing-function, $motions, webkit moz spec);
25
+ }
26
+
27
+ @mixin transition-delay ($times...) {
28
+ @include prefixer(transition-delay, $times, webkit moz spec);
29
+ }
@@ -0,0 +1,11 @@
1
+ .hide, .hidden { display: none; }
2
+
3
+ .fleft { float: left; }
4
+ .fright { float: right; }
5
+ .text-left { text-align: left; }
6
+ .text-center { text-align: center; }
7
+ .text-right { text-align: right; }
8
+
9
+ .clear { clear: both; width: 100%; height: 1px; overflow: hidden; }
10
+ .clearfix:after, .clearfix:before { content: " "; display: table; }
11
+ .clearfix:after { clear: both; }
@@ -0,0 +1,114 @@
1
+ // Responsive vars
2
+ $media-mobile-max: 767px !default;
3
+ $media-tablet-min: 768px !default;
4
+ $media-tablet-max: 1024px !default;
5
+ $media-desktop-min: 1025px !default;
6
+
7
+ // Grid width
8
+ $grid-width: 960px !default;
9
+ $columns-count: 12 !default; // 12 or 16 columns
10
+ $gutter-width: 1.04166666666% !default;
11
+ $column-width: 6 !default; // Column width
12
+
13
+ // Getting number of columns and setting it's width
14
+ @if $columns-count == 12 {
15
+ $column-width: 6;
16
+ } @else {
17
+ $column-width: 4;
18
+ }
19
+
20
+ .grid-container {
21
+ max-width: $grid-width;
22
+ margin-left: auto;
23
+ margin-right: auto;
24
+ clear: both;
25
+ &:before, &:after {
26
+ content: ".";
27
+ display: block;
28
+ overflow: hidden;
29
+ visibility: hidden;
30
+ font-size: 0;
31
+ line-height: 0;
32
+ width: 0;
33
+ height: 0;
34
+ clear: both;
35
+ }
36
+ }
37
+
38
+ %grid-settings {
39
+ margin-left: $gutter-width;
40
+ margin-right: $gutter-width;
41
+ float: left;
42
+ @include box-sizing(border-box);
43
+ }
44
+
45
+ %position-relative {
46
+ position: relative;
47
+ }
48
+
49
+ @for $i from 1 through $columns-count {
50
+ $num: $i;
51
+ .grid-#{$num} {
52
+ @extend %grid-settings;
53
+ }
54
+ .push-#{$num}, .pull-#{$num} {
55
+ @extend %position-relative;
56
+ }
57
+ }
58
+
59
+ @for $i from 1 through $columns-count {
60
+ $num: $i;
61
+ $content-width: $num * $gutter-width * $column-width + ($num - 1) * 2 * $gutter-width; // (column number * gutter width * (column width in px + current step - 1) * 2 * gutter width)
62
+ .grid-#{$num} { width: $content-width; }
63
+ .prefix-#{$num} { margin-left: $content-width; }
64
+ .suffix-#{$num} { margin-right: $content-width; }
65
+ .push-#{$num} { left: $content-width; }
66
+ .pull-#{$num} { left: -$content-width; }
67
+ }
68
+
69
+ /* DESKTOP SUPPORT */
70
+
71
+ @media screen and (min-width: $media-desktop-min) {
72
+ .hide-on-desktop {
73
+ display: none !important;
74
+ }
75
+ }
76
+
77
+ /* TABLET SUPPORT */
78
+
79
+ @media screen and (min-width: $media-tablet-min) and (max-width: $media-tablet-max) {
80
+
81
+ .grid-container {
82
+ max-width: 100%;
83
+ padding-left: $gutter-width;
84
+ padding-right: $gutter-width;
85
+ }
86
+ .hide-on-tablet, .only-desktop, .only-mobile {
87
+ display: none !important;
88
+ }
89
+
90
+ @for $i from 1 through $columns-count {
91
+ $num: $i;
92
+ $content-width: $num * $gutter-width * $column-width + ($num - 1) * 2 * $gutter-width; // (column number * gutter width * (column width in px + current step - 1) * 2 * gutter width)
93
+ .grid-tablet-#{$num} { width: $content-width; }
94
+ }
95
+ }
96
+
97
+ /* MOBILE SUPPORT */
98
+
99
+ @media screen and (max-width: $media-mobile-max) {
100
+ .grid-container {
101
+ max-width: 100%;
102
+ padding-left: $gutter-width;
103
+ padding-right: $gutter-width;
104
+ }
105
+ .hide-on-mobile, .only-desktop, .only-tablet {
106
+ display: none !important;
107
+ }
108
+
109
+ @for $i from 1 through $columns-count {
110
+ $num: $i;
111
+ $content-width: $num * $gutter-width * $column-width + ($num - 1) * 2 * $gutter-width; // (column number * gutter width * (column width in px + current step - 1) * 2 * gutter width)
112
+ .grid-mobile-#{$num} { width: $content-width; }
113
+ }
114
+ }
@@ -0,0 +1,41 @@
1
+ article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}
2
+ audio,canvas,video{display:inline-block}
3
+ audio:not([controls]){display:none;height:0}
4
+ [hidden],template{display:none}
5
+ html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:sans-serif}
6
+ a{background:transparent}
7
+ a,input,textarea{outline:0}
8
+ h1,h2,h3,h4,h5,h6{font-size:100%;margin:0}
9
+ abbr[title]{border-bottom:1px dotted}
10
+ b,strong{font-weight:700}
11
+ em,i{font-style:italic}
12
+ hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}
13
+ mark{background:#ff0;color:#000}
14
+ code,kbd,pre,samp{font-family:monospace, serif;font-size:1em}
15
+ pre{white-space:pre-wrap}
16
+ q{quotes:\201C \201D \2018 \2019}
17
+ small{font-size:80%}
18
+ sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
19
+ sup{top:-.5em}
20
+ sub{bottom:-.25em}
21
+ img{border:0}
22
+ svg:not(:root){overflow:hidden}
23
+ fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
24
+ button,input,select,textarea{font-family:inherit;font-size:100%;margin:0}
25
+ button,input{line-height:normal}
26
+ button,select{text-transform:none}
27
+ button,html input[type=button],/* 1 */
28
+ input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}
29
+ button[disabled],html input[disabled]{cursor:default}
30
+ input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
31
+ input[type=search]{-moz-box-sizing:content-box;-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box}
32
+ input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
33
+ textarea{overflow:auto;vertical-align:top}
34
+ table{border-collapse:collapse;border-spacing:0}
35
+ body,figure{margin:0}
36
+ legend,button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
37
+ body{cursor:default}
38
+ input,textarea{cursor:text}
39
+ a,label,select,button,input[type=button],input[type=submit],input[type=checkbox],input[type=radio],input[type=file]{cursor:pointer}
40
+ nav ul{list-style:none;margin:0;padding:0}
41
+ nav ul li{margin:0;padding:0}
metadata ADDED
@@ -0,0 +1,79 @@
1
+ --- !ruby/object:Gem::Specification
2
+ name: droidcss
3
+ version: !ruby/object:Gem::Version
4
+ version: 1.0.0
5
+ platform: ruby
6
+ authors:
7
+ - Ilya Gorenburg
8
+ autorequire:
9
+ bindir: bin
10
+ cert_chain: []
11
+ date: 2013-09-07 00:00:00.000000000 Z
12
+ dependencies:
13
+ - !ruby/object:Gem::Dependency
14
+ name: sass
15
+ requirement: !ruby/object:Gem::Requirement
16
+ requirements:
17
+ - - ! '>='
18
+ - !ruby/object:Gem::Version
19
+ version: 3.2.0
20
+ type: :runtime
21
+ prerelease: false
22
+ version_requirements: !ruby/object:Gem::Requirement
23
+ requirements:
24
+ - - ! '>='
25
+ - !ruby/object:Gem::Version
26
+ version: 3.2.0
27
+ description: ! 'Small responsive framework '
28
+ email:
29
+ - ilya@droidlabs.pro
30
+ executables: []
31
+ extensions: []
32
+ extra_rdoc_files: []
33
+ files:
34
+ - .gitignore
35
+ - CHANGELOG.MD
36
+ - LICENSE
37
+ - README.md
38
+ - Rakefile
39
+ - droidcss.gemspec
40
+ - lib/droidcss.rb
41
+ - lib/droidcss/engine.rb
42
+ - lib/droidcss/version.rb
43
+ - vendor/assets/stylesheets/droidcss.css
44
+ - vendor/assets/stylesheets/droidcss.scss
45
+ - vendor/assets/stylesheets/droidcss/base.scss
46
+ - vendor/assets/stylesheets/droidcss/mixins.scss
47
+ - vendor/assets/stylesheets/droidcss/mixins/box-sizing.scss
48
+ - vendor/assets/stylesheets/droidcss/mixins/font-face.scss
49
+ - vendor/assets/stylesheets/droidcss/mixins/gradients.scss
50
+ - vendor/assets/stylesheets/droidcss/mixins/prefixer.scss
51
+ - vendor/assets/stylesheets/droidcss/mixins/transforms.scss
52
+ - vendor/assets/stylesheets/droidcss/mixins/transitions.scss
53
+ - vendor/assets/stylesheets/droidcss/partials/defaults.scss
54
+ - vendor/assets/stylesheets/droidcss/partials/grid.scss
55
+ - vendor/assets/stylesheets/droidcss/partials/reset.scss
56
+ homepage: https://github.com/droidlabs/droidcss
57
+ licenses: []
58
+ metadata: {}
59
+ post_install_message:
60
+ rdoc_options: []
61
+ require_paths:
62
+ - lib
63
+ required_ruby_version: !ruby/object:Gem::Requirement
64
+ requirements:
65
+ - - ! '>='
66
+ - !ruby/object:Gem::Version
67
+ version: '0'
68
+ required_rubygems_version: !ruby/object:Gem::Requirement
69
+ requirements:
70
+ - - ! '>='
71
+ - !ruby/object:Gem::Version
72
+ version: '0'
73
+ requirements: []
74
+ rubyforge_project:
75
+ rubygems_version: 2.0.5
76
+ signing_key:
77
+ specification_version: 4
78
+ summary: Small responsive framework
79
+ test_files: []