droidcss 1.0.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +15 -0
- data/.gitignore +4 -0
- data/CHANGELOG.MD +2 -0
- data/LICENSE +21 -0
- data/README.md +162 -0
- data/Rakefile +2 -0
- data/droidcss.gemspec +19 -0
- data/lib/droidcss.rb +17 -0
- data/lib/droidcss/engine.rb +4 -0
- data/lib/droidcss/version.rb +3 -0
- data/vendor/assets/stylesheets/droidcss.css +624 -0
- data/vendor/assets/stylesheets/droidcss.scss +2 -0
- data/vendor/assets/stylesheets/droidcss/base.scss +8 -0
- data/vendor/assets/stylesheets/droidcss/mixins.scss +6 -0
- data/vendor/assets/stylesheets/droidcss/mixins/box-sizing.scss +3 -0
- data/vendor/assets/stylesheets/droidcss/mixins/font-face.scss +24 -0
- data/vendor/assets/stylesheets/droidcss/mixins/gradients.scss +38 -0
- data/vendor/assets/stylesheets/droidcss/mixins/prefixer.scss +39 -0
- data/vendor/assets/stylesheets/droidcss/mixins/transforms.scss +11 -0
- data/vendor/assets/stylesheets/droidcss/mixins/transitions.scss +29 -0
- data/vendor/assets/stylesheets/droidcss/partials/defaults.scss +11 -0
- data/vendor/assets/stylesheets/droidcss/partials/grid.scss +114 -0
- data/vendor/assets/stylesheets/droidcss/partials/reset.scss +41 -0
- metadata +79 -0
checksums.yaml
ADDED
@@ -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=
|
data/.gitignore
ADDED
data/CHANGELOG.MD
ADDED
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.
|
data/README.md
ADDED
@@ -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).
|
data/Rakefile
ADDED
data/droidcss.gemspec
ADDED
@@ -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
|
data/lib/droidcss.rb
ADDED
@@ -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,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,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: []
|