droidcss 1.0.11 → 1.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.MD +8 -3
- data/README.md +21 -23
- data/lib/droidcss/version.rb +1 -1
- data/vendor/assets/stylesheets/droidcss/base.scss +3 -0
- data/vendor/assets/stylesheets/droidcss/partials/grid.scss +37 -56
- data/vendor/assets/stylesheets/droidcss/partials/setup.scss +17 -0
- data/vendor/assets/stylesheets/droidcss.css +29 -0
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f6691301ddcd3c543ffd37cd40533c5076dd6be5
|
4
|
+
data.tar.gz: b680585e507b7b8da657368873ce3d99b770e7a2
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c9123e1ae0d24d1170b62ecb12a46865578408aa7ee68d2841252dc5493f1cd5fce05f8fd1f9a2e9ba5c1f62fa8c890b56f8e709795ad8a299e4b0f1055e870b
|
7
|
+
data.tar.gz: de307f6c41f4da3827797cc24e188bd7b21e0756800d3d569a5517f1beac1b5b7450c6e68e2ca59c9f9f76b43d1af4805d45776eeb78e53565f7ce122a001560
|
data/CHANGELOG.MD
CHANGED
@@ -1,8 +1,13 @@
|
|
1
|
+
### 1.1 (13 December 2013)
|
2
|
+
* Breaking changes! All the variables names have been changed!
|
3
|
+
* Improved perfomance with calculations
|
4
|
+
* Moved grid settings to the separate file
|
5
|
+
|
1
6
|
### 1.0.11 (09 December 2013)
|
2
|
-
|
7
|
+
* Edited .row selector
|
3
8
|
|
4
9
|
### 1.0.10 (08 December 2013)
|
5
|
-
|
10
|
+
* Edited assets-pipeline url
|
6
11
|
|
7
12
|
### 1.0.9 (30 November 2013)
|
8
13
|
+ Added .row & fixed grid cells height
|
@@ -29,4 +34,4 @@
|
|
29
34
|
+ Added licence info
|
30
35
|
|
31
36
|
### 1.0.0 (06 September 2013)
|
32
|
-
|
37
|
+
* Initial release
|
data/README.md
CHANGED
@@ -1,4 +1,4 @@
|
|
1
|
-
# DroidCSS
|
1
|
+
# DroidCSS [![Roadchange](http://roadchange.com/droidlabs/droidcss/badge.png)](http://roadchange.com/droidlabs/droidcss)
|
2
2
|
|
3
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
4
|
|
@@ -74,41 +74,35 @@ Include path to font files with trailing slash (default is '/assets/fonts/').
|
|
74
74
|
|
75
75
|
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:
|
76
76
|
|
77
|
-
$
|
78
|
-
$
|
79
|
-
$
|
80
|
-
$
|
77
|
+
$mediaMobileMax: breakpoint for mobile devices (default is '767px')
|
78
|
+
$mediaTabletMin: breakpoint for tablet minimum width (default is '768px')
|
79
|
+
$mediaTabletMax: breakpoint for tablet maximum width (default is '1024px')
|
80
|
+
$mediaDesktopMin: breakpoint for desktop (default is '1025px')
|
81
81
|
|
82
82
|
Media queries example:
|
83
83
|
|
84
|
-
$
|
85
|
-
$
|
86
|
-
$
|
87
|
-
$
|
84
|
+
$mediaMobileMax: 767px;
|
85
|
+
$mediaTabletMin: 768px;
|
86
|
+
$mediaTabletMax: 1024px;
|
87
|
+
$mediaDesktopMin: 1025px;
|
88
88
|
|
89
|
-
####
|
89
|
+
#### gridWidth
|
90
90
|
|
91
91
|
Default site width. For 960.gs it's 960px
|
92
92
|
|
93
|
-
$
|
93
|
+
$gridWidth: 960px;
|
94
94
|
|
95
|
-
####
|
95
|
+
#### columnsCount
|
96
96
|
|
97
|
-
Select
|
97
|
+
Select how many columns in the layout you would like to have (2 types of columns are supported with 960.gs by default: 12 and 16). The default value is '12' columns.
|
98
98
|
|
99
|
-
$
|
99
|
+
$columnsCount: 12;
|
100
100
|
|
101
|
-
####
|
101
|
+
#### gutterWidth
|
102
102
|
|
103
103
|
Spacing between the columns (default is '1.04166666666%' which is 10px in 960.gs).
|
104
104
|
|
105
|
-
$
|
106
|
-
|
107
|
-
#### column-width
|
108
|
-
|
109
|
-
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.
|
110
|
-
|
111
|
-
$column-width: 6;
|
105
|
+
$gutterWidth: 1.04166666666%;
|
112
106
|
|
113
107
|
## Available mixins:
|
114
108
|
|
@@ -232,6 +226,10 @@ CSS output result:
|
|
232
226
|
:-ms-input-placeholder { color: #ccc; font-style:italic; } // Internet Explorer 10+
|
233
227
|
::-webkit-input-placeholder { color: #ccc; font-style:italic; } // Safari and Chrome
|
234
228
|
|
229
|
+
Please note. This function can be used only within selector! Example:
|
230
|
+
|
231
|
+
input { @include placeholder(#ccc, italic); }
|
232
|
+
|
235
233
|
## Default classes
|
236
234
|
|
237
235
|
Default classes available in *partials/defaults.scss*:
|
@@ -257,4 +255,4 @@ Feel free to contact us regarding DroidCSS via [twitter](http://twitter.com/droi
|
|
257
255
|
## Thanks for using DroidCSS
|
258
256
|
|
259
257
|
Cheers,
|
260
|
-
[DroidLabs](http://droidlabs.pro).
|
258
|
+
[DroidLabs](http://droidlabs.pro).
|
data/lib/droidcss/version.rb
CHANGED
@@ -1,24 +1,5 @@
|
|
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
1
|
.grid-container {
|
21
|
-
max-width: $
|
2
|
+
max-width: $gridWidth;
|
22
3
|
margin-left: auto;
|
23
4
|
margin-right: auto;
|
24
5
|
clear: both;
|
@@ -36,14 +17,14 @@ $column-width: 6 !default; // Column width
|
|
36
17
|
}
|
37
18
|
|
38
19
|
.row {
|
39
|
-
|
40
|
-
|
20
|
+
#{$gutterType}-right: -$gutterWidth;
|
21
|
+
#{$gutterType}-left: -$gutterWidth;
|
41
22
|
@include clearfix;
|
42
23
|
}
|
43
24
|
|
44
25
|
%grid-settings {
|
45
|
-
|
46
|
-
|
26
|
+
#{$gutterType}-left: $gutterWidth;
|
27
|
+
#{$gutterType}-right: $gutterWidth;
|
47
28
|
float: left;
|
48
29
|
min-height: 1px;
|
49
30
|
@include box-sizing(border-box);
|
@@ -53,7 +34,7 @@ $column-width: 6 !default; // Column width
|
|
53
34
|
position: relative;
|
54
35
|
}
|
55
36
|
|
56
|
-
@for $i from 1 through $
|
37
|
+
@for $i from 1 through $columnsCount {
|
57
38
|
$num: $i;
|
58
39
|
.grid-#{$num} {
|
59
40
|
@extend %grid-settings;
|
@@ -63,20 +44,20 @@ $column-width: 6 !default; // Column width
|
|
63
44
|
}
|
64
45
|
}
|
65
46
|
|
66
|
-
@for $i from 1 through $
|
47
|
+
@for $i from 1 through $columnsCount {
|
67
48
|
$num: $i;
|
68
|
-
$
|
69
|
-
$
|
70
|
-
.grid-#{$num} { width: $
|
71
|
-
.prefix-#{$num} {
|
72
|
-
.suffix-#{$num} {
|
73
|
-
.push-#{$num} { left: $
|
74
|
-
.pull-#{$num} { left: -$
|
49
|
+
$contentWidth: 100% * ($num/$columnsCount) - 2 * $gutterWidth;
|
50
|
+
$contentWidthOffset: 100% * ($num/$columnsCount) + $gutterWidth;
|
51
|
+
.grid-#{$num} { width: $contentWidth; }
|
52
|
+
.prefix-#{$num} { #{$gutterType}-left: $contentWidthOffset; }
|
53
|
+
.suffix-#{$num} { #{$gutterType}-right: $contentWidthOffset; }
|
54
|
+
.push-#{$num} { left: $contentWidthOffset; }
|
55
|
+
.pull-#{$num} { left: -$contentWidthOffset; }
|
75
56
|
}
|
76
57
|
|
77
58
|
/* DESKTOP SUPPORT */
|
78
59
|
|
79
|
-
@media screen and (min-width: $
|
60
|
+
@media screen and (min-width: $mediaDesktopMin) {
|
80
61
|
.hide-on-desktop, .only-tablet, .only-mobile {
|
81
62
|
display: none !important;
|
82
63
|
}
|
@@ -84,49 +65,49 @@ $column-width: 6 !default; // Column width
|
|
84
65
|
|
85
66
|
/* TABLET SUPPORT */
|
86
67
|
|
87
|
-
@media screen and (min-width: $
|
68
|
+
@media screen and (min-width: $mediaTabletMin) and (max-width: $mediaTabletMax) {
|
88
69
|
|
89
70
|
.grid-container {
|
90
71
|
max-width: 100%;
|
91
|
-
|
92
|
-
|
72
|
+
#{$gutterTypeTablet}-left: $gutterWidth;
|
73
|
+
#{$gutterTypeTablet}-right: $gutterWidth;
|
93
74
|
}
|
94
75
|
.hide-on-tablet, .only-desktop, .only-mobile {
|
95
76
|
display: none !important;
|
96
77
|
}
|
97
78
|
|
98
|
-
@for $i from 1 through $
|
79
|
+
@for $i from 1 through $columnsCount {
|
99
80
|
$num: $i;
|
100
|
-
$
|
101
|
-
$
|
102
|
-
.grid-tablet-#{$num} { width: $
|
103
|
-
.prefix-tablet-#{$num} {
|
104
|
-
.suffix-tablet-#{$num} {
|
105
|
-
.push-tablet-#{$num} { left: $
|
106
|
-
.pull-tablet-#{$num} { left: -$
|
81
|
+
$contentWidth: 100% * ($num/$columnsCount) - 2 * $gutterWidth;
|
82
|
+
$contentWidthOffset: 100% * ($num/$columnsCount) + $gutterWidth;
|
83
|
+
.grid-tablet-#{$num} { width: $contentWidth; }
|
84
|
+
.prefix-tablet-#{$num} { #{$gutterTypeTabletOffset}-left: $contentWidthOffset; }
|
85
|
+
.suffix-tablet-#{$num} { #{$gutterTypeTabletOffset}-right: $contentWidthOffset; }
|
86
|
+
.push-tablet-#{$num} { left: $contentWidthOffset; }
|
87
|
+
.pull-tablet-#{$num} { left: -$contentWidthOffset; }
|
107
88
|
}
|
108
89
|
}
|
109
90
|
|
110
91
|
/* MOBILE SUPPORT */
|
111
92
|
|
112
|
-
@media screen and (max-width: $
|
93
|
+
@media screen and (max-width: $mediaMobileMax) {
|
113
94
|
.grid-container {
|
114
95
|
max-width: 100%;
|
115
|
-
|
116
|
-
|
96
|
+
#{$gutterTypeMobile}-left: $gutterWidth;
|
97
|
+
#{$gutterTypeMobile}-right: $gutterWidth;
|
117
98
|
}
|
118
99
|
.hide-on-mobile, .only-desktop, .only-tablet {
|
119
100
|
display: none !important;
|
120
101
|
}
|
121
102
|
|
122
|
-
@for $i from 1 through $
|
103
|
+
@for $i from 1 through $columnsCount {
|
123
104
|
$num: $i;
|
124
|
-
$
|
125
|
-
$
|
126
|
-
.grid-mobile-#{$num} { width: $
|
127
|
-
.prefix-mobile-#{$num} {
|
128
|
-
.suffix-mobile-#{$num} {
|
129
|
-
.push-mobile-#{$num} { left: $
|
130
|
-
.pull-mobile-#{$num} { left: -$
|
105
|
+
$contentWidth: 100% * ($num/$columnsCount) - 2 * $gutterWidth;
|
106
|
+
$contentWidthOffset: 100% * ($num/$columnsCount) + $gutterWidth;
|
107
|
+
.grid-mobile-#{$num} { width: $contentWidth; }
|
108
|
+
.prefix-mobile-#{$num} { #{$gutterTypeMobileOffset}-left: $contentWidthOffset; }
|
109
|
+
.suffix-mobile-#{$num} { #{$gutterTypeMobileOffset}-right: $contentWidthOffset; }
|
110
|
+
.push-mobile-#{$num} { left: $contentWidthOffset; }
|
111
|
+
.pull-mobile-#{$num} { left: -$contentWidthOffset; }
|
131
112
|
}
|
132
113
|
}
|
@@ -0,0 +1,17 @@
|
|
1
|
+
// Responsive vars
|
2
|
+
$mediaMobileMax: 767px !default;
|
3
|
+
$mediaTabletMin: 768px !default;
|
4
|
+
$mediaTabletMax: 1024px !default;
|
5
|
+
$mediaDesktopMin: 1025px !default;
|
6
|
+
|
7
|
+
// Grids settings
|
8
|
+
$gridWidth: 960px !default;
|
9
|
+
$columnsCount: 12 !default;
|
10
|
+
|
11
|
+
// Gutters
|
12
|
+
$gutterWidth: 1.04166666666% !default;
|
13
|
+
$gutterType: margin !default;
|
14
|
+
$gutterTypeTablet: padding !default;
|
15
|
+
$gutterTypeTabletOffset: margin !default;
|
16
|
+
$gutterTypeMobile: padding !default;
|
17
|
+
$gutterTypeMobileOffset: margin !default;
|
@@ -185,6 +185,24 @@ nav ul li {
|
|
185
185
|
padding: 0;
|
186
186
|
}
|
187
187
|
|
188
|
+
::selection {
|
189
|
+
text-shadow: none;
|
190
|
+
color: #333;
|
191
|
+
background: #FF9;
|
192
|
+
}
|
193
|
+
|
194
|
+
::-moz-selection {
|
195
|
+
text-shadow: none;
|
196
|
+
color: #333;
|
197
|
+
background: #FF9;
|
198
|
+
}
|
199
|
+
|
200
|
+
::-webkit-selection {
|
201
|
+
text-shadow: none;
|
202
|
+
color: #333;
|
203
|
+
background: #FF9;
|
204
|
+
}
|
205
|
+
|
188
206
|
.hide, .hidden {
|
189
207
|
display: none;
|
190
208
|
}
|
@@ -243,10 +261,21 @@ nav ul li {
|
|
243
261
|
clear: both;
|
244
262
|
}
|
245
263
|
|
264
|
+
.row {
|
265
|
+
margin-right: -1.04167%;
|
266
|
+
margin-left: -1.04167%;
|
267
|
+
}
|
268
|
+
.row:after {
|
269
|
+
content: '';
|
270
|
+
display: table;
|
271
|
+
clear: both;
|
272
|
+
}
|
273
|
+
|
246
274
|
.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
275
|
margin-left: 1.04167%;
|
248
276
|
margin-right: 1.04167%;
|
249
277
|
float: left;
|
278
|
+
min-height: 1px;
|
250
279
|
-webkit-box-sizing: border-box;
|
251
280
|
-moz-box-sizing: border-box;
|
252
281
|
box-sizing: border-box;
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: droidcss
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: '1.1'
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Ilya Gorenburg
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2013-12-
|
11
|
+
date: 2013-12-12 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|
@@ -57,6 +57,7 @@ files:
|
|
57
57
|
- vendor/assets/stylesheets/droidcss/partials/defaults.scss
|
58
58
|
- vendor/assets/stylesheets/droidcss/partials/grid.scss
|
59
59
|
- vendor/assets/stylesheets/droidcss/partials/reset.scss
|
60
|
+
- vendor/assets/stylesheets/droidcss/partials/setup.scss
|
60
61
|
homepage: https://github.com/droidlabs/droidcss
|
61
62
|
licenses:
|
62
63
|
- MIT
|