stratum 0.1.1 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +3 -0
- data/.gitmodules +4 -0
- data/LICENSE +21 -0
- data/assets/stylesheets/_stratum.scss +13 -7
- data/assets/stylesheets/css3/_box-sizing.scss +8 -0
- data/assets/stylesheets/forms/_input-placeholder.scss +14 -0
- data/assets/stylesheets/layout/_grid-functions.scss +54 -0
- data/assets/stylesheets/layout/_grid-guides.scss +84 -0
- data/assets/stylesheets/layout/_grid-mixins.scss +96 -0
- data/assets/stylesheets/layout/_grid-semantics.scss +239 -0
- data/assets/stylesheets/layout/_grid.scss +18 -220
- data/assets/stylesheets/layout/_responsive.scss +2 -0
- data/assets/stylesheets/layout/scaffolding.scss +34 -97
- data/assets/stylesheets/utils/_group.scss +19 -0
- data/assets/stylesheets/utils/_vendor-prefix.scss +18 -0
- data/lib/stratum.rb +35 -7
- data/lib/version.rb +1 -1
- data/stratum.gemspec +19 -11
- metadata +35 -7
- data/assets/stylesheets/layout/_functions.scss +0 -60
- data/assets/stylesheets/layout/grid-debug.scss +0 -92
- data/assets/stylesheets/misc/_clearfix.scss +0 -7
- data/assets/stylesheets/misc/_forms.scss +0 -12
data/lib/version.rb
CHANGED
data/stratum.gemspec
CHANGED
@@ -1,13 +1,21 @@
|
|
1
|
+
# -*- encoding: utf-8 -*-
|
2
|
+
|
3
|
+
$:.push File.expand_path("../lib", __FILE__)
|
4
|
+
require "version"
|
5
|
+
|
1
6
|
Gem::Specification.new do |s|
|
2
|
-
s.name
|
3
|
-
s.version
|
4
|
-
s.
|
5
|
-
s.
|
6
|
-
s.
|
7
|
-
s.
|
8
|
-
s.
|
9
|
-
s.
|
10
|
-
s.
|
11
|
-
|
12
|
-
|
7
|
+
s.name = 'stratum'
|
8
|
+
s.version = Stratum::VERSION
|
9
|
+
s.summary = "A structural layer for your SASS"
|
10
|
+
s.description = "Stratum is a collection of SASS mixins and utilities for your web development needs."
|
11
|
+
s.authors = ["Tyom Semonov"]
|
12
|
+
s.email = 'tyom@semonov.com'
|
13
|
+
s.files = `git ls-files | grep -v demo`.split("\n")
|
14
|
+
s.executables << 'stratum'
|
15
|
+
s.homepage = 'http://rubygems.org/gems/stratum'
|
16
|
+
|
17
|
+
s.require_paths = ["lib"]
|
18
|
+
|
19
|
+
s.add_dependency('sass', '>= 3.2.0')
|
20
|
+
s.add_dependency('thor')
|
13
21
|
end
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: stratum
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.2.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,8 +9,30 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2013-01-
|
13
|
-
dependencies:
|
12
|
+
date: 2013-01-26 00:00:00.000000000 Z
|
13
|
+
dependencies:
|
14
|
+
- !ruby/object:Gem::Dependency
|
15
|
+
name: sass
|
16
|
+
requirement: &70244371334840 !ruby/object:Gem::Requirement
|
17
|
+
none: false
|
18
|
+
requirements:
|
19
|
+
- - ! '>='
|
20
|
+
- !ruby/object:Gem::Version
|
21
|
+
version: 3.2.0
|
22
|
+
type: :runtime
|
23
|
+
prerelease: false
|
24
|
+
version_requirements: *70244371334840
|
25
|
+
- !ruby/object:Gem::Dependency
|
26
|
+
name: thor
|
27
|
+
requirement: &70244371334180 !ruby/object:Gem::Requirement
|
28
|
+
none: false
|
29
|
+
requirements:
|
30
|
+
- - ! '>='
|
31
|
+
- !ruby/object:Gem::Version
|
32
|
+
version: '0'
|
33
|
+
type: :runtime
|
34
|
+
prerelease: false
|
35
|
+
version_requirements: *70244371334180
|
14
36
|
description: Stratum is a collection of SASS mixins and utilities for your web development
|
15
37
|
needs.
|
16
38
|
email: tyom@semonov.com
|
@@ -20,14 +42,20 @@ extensions: []
|
|
20
42
|
extra_rdoc_files: []
|
21
43
|
files:
|
22
44
|
- .gitignore
|
45
|
+
- .gitmodules
|
46
|
+
- LICENSE
|
23
47
|
- assets/stylesheets/_stratum.scss
|
24
|
-
- assets/stylesheets/
|
48
|
+
- assets/stylesheets/css3/_box-sizing.scss
|
49
|
+
- assets/stylesheets/forms/_input-placeholder.scss
|
50
|
+
- assets/stylesheets/layout/_grid-functions.scss
|
51
|
+
- assets/stylesheets/layout/_grid-guides.scss
|
52
|
+
- assets/stylesheets/layout/_grid-mixins.scss
|
53
|
+
- assets/stylesheets/layout/_grid-semantics.scss
|
25
54
|
- assets/stylesheets/layout/_grid.scss
|
26
55
|
- assets/stylesheets/layout/_responsive.scss
|
27
|
-
- assets/stylesheets/layout/grid-debug.scss
|
28
56
|
- assets/stylesheets/layout/scaffolding.scss
|
29
|
-
- assets/stylesheets/
|
30
|
-
- assets/stylesheets/
|
57
|
+
- assets/stylesheets/utils/_group.scss
|
58
|
+
- assets/stylesheets/utils/_vendor-prefix.scss
|
31
59
|
- bin/stratum
|
32
60
|
- lib/stratum.rb
|
33
61
|
- lib/version.rb
|
@@ -1,60 +0,0 @@
|
|
1
|
-
// -----------------------------------------------------------------------------
|
2
|
-
// • Functions Tyom Semonov <mail@tyom.net>
|
3
|
-
// -----------------------------------------------------------------------------
|
4
|
-
// » grid-column-span-width($column-span, $column-width, $column-gutter)
|
5
|
-
// calculate merged columns with (including gutter)
|
6
|
-
// $column-span: <integer> - number of columns
|
7
|
-
// $column-width - with of single column
|
8
|
-
// $column-gutter - column gutter
|
9
|
-
//
|
10
|
-
// » grid-single-column-width($grid-width, $total-columns, $gutter)
|
11
|
-
// calculate single column width for given container width and gutter width
|
12
|
-
// $row-width - width of columns container
|
13
|
-
// $total-columns: <integer> - number of total columns
|
14
|
-
// $gutter - column gutter width
|
15
|
-
//
|
16
|
-
// » grid-column-gutter($grid-width, $desired)
|
17
|
-
// calculate gutter width from total grid width and desired approximate gutter width
|
18
|
-
// $grid-width - total grid width
|
19
|
-
// $grid-gutter - desired gutter width (will return closest)
|
20
|
-
//
|
21
|
-
// » number-to-word($number)
|
22
|
-
// return word for requested number
|
23
|
-
// $number <integer> - number to convert
|
24
|
-
// -----------------------------------------------------------------------------
|
25
|
-
|
26
|
-
// $column-span, $column-width, $column-gutter
|
27
|
-
// $container-margin is a multiplier. Set to 0 to exclude gutters from calculation
|
28
|
-
@function grid-column-span-width($column-span, $column-width, $column-gutter) {
|
29
|
-
@return ceil($column-span * $column-width + ($column-span - 1) * $column-gutter);
|
30
|
-
}
|
31
|
-
|
32
|
-
// $grid-width, $total-columns, $gutter
|
33
|
-
@function grid-single-column-width($grid-width, $total-columns, $gutter) {
|
34
|
-
@return ($grid-width - (($total-columns - 1) * $gutter)) / $total-columns;
|
35
|
-
}
|
36
|
-
|
37
|
-
// $grid-width, $desired
|
38
|
-
@function grid-column-gutter($grid-width, $desired) {
|
39
|
-
$gutter: 0px;
|
40
|
-
$column: 1;
|
41
|
-
// Find a round gutter width
|
42
|
-
@while $column > $gutter {
|
43
|
-
$column: grid-single-column-width($grid-width, $grid-total-columns, $gutter);
|
44
|
-
|
45
|
-
@if $column % 1 == 0 {
|
46
|
-
$range-from: $desired - 6;
|
47
|
-
$range-to: $desired + 20;
|
48
|
-
$within-range: $gutter >= $range-from and $gutter <= $range-to;
|
49
|
-
// Find gutter within desired range
|
50
|
-
@if $within-range {
|
51
|
-
@return $gutter;
|
52
|
-
}
|
53
|
-
}
|
54
|
-
$gutter: $gutter + 1;
|
55
|
-
}
|
56
|
-
}
|
57
|
-
|
58
|
-
@function grid-calculate-percentage($width, $grid-width: ($grid-medium + $grid-gutter-medium)) {
|
59
|
-
@return percentage($width / $grid-width);
|
60
|
-
}
|
@@ -1,92 +0,0 @@
|
|
1
|
-
// -----------------------------------------------------------------------------
|
2
|
-
// • Pixel Grid Guides Mixins (Tyom Semonov <mail@tyom.net>)
|
3
|
-
// -----------------------------------------------------------------------------
|
4
|
-
// » grid-show-guides($col-width: $grid-column, $block-size: 9, $color: $grid-guides-color, $opacity: .8, $position: $grid-guides-position)
|
5
|
-
// Renders grid guides
|
6
|
-
// $column-width - width of columns
|
7
|
-
// $block-size - height of module blocks
|
8
|
-
// $color - grid colour (#hex or Sass colour function)
|
9
|
-
// $opacity - grid opacity
|
10
|
-
// $position:back - place grid behind page elements
|
11
|
-
// $position:front - place grid in front of page elements
|
12
|
-
// -----------------------------------------------------------------------------
|
13
|
-
|
14
|
-
// Draws grid guides
|
15
|
-
// $grid-size, $block-size,$color, $opacity, $position
|
16
|
-
@mixin grid-show-guides($grid-size: $grid-medium, $block-size: 9, $color: $grid-guides-color, $opacity: $grid-guides-opacity, $position: $grid-guides-position, $grid-type: pixel) {
|
17
|
-
|
18
|
-
$column-gutter: grid-column-gutter($grid-size, $grid-desired-gutter);
|
19
|
-
$column-width: grid-single-column-width($grid-size, $grid-total-columns, $column-gutter);
|
20
|
-
|
21
|
-
@if $grid-type == flexible {
|
22
|
-
$column-gutter: grid-calculate-percentage($column-gutter);
|
23
|
-
$column-width: grid-calculate-percentage($column-width);
|
24
|
-
}
|
25
|
-
|
26
|
-
$combined-width: $column-width + $column-gutter;
|
27
|
-
$block-height: (($grid-baseline + 1) * $block-size) + $grid-baseline;
|
28
|
-
|
29
|
-
position: relative;
|
30
|
-
|
31
|
-
&:before {
|
32
|
-
content: "";
|
33
|
-
position: absolute;
|
34
|
-
width: 100%;
|
35
|
-
height: 100%;
|
36
|
-
|
37
|
-
@include background(
|
38
|
-
// Baseline (v-rhythm)
|
39
|
-
linear-gradient(transparent $grid-baseline, rgba(white, $opacity) $grid-baseline),
|
40
|
-
// Columns
|
41
|
-
linear-gradient(left, rgba($color, $opacity),
|
42
|
-
rgba($color, $opacity) $column-width,
|
43
|
-
transparent $column-width,
|
44
|
-
transparent $combined-width
|
45
|
-
),
|
46
|
-
// Blocks
|
47
|
-
linear-gradient(transparent ($block-height - $grid-baseline), rgba(white, $opacity / 1.2) $grid-baseline),
|
48
|
-
// Base colour
|
49
|
-
linear-gradient(rgba($color, $opacity), rgba($color, $opacity))
|
50
|
-
);
|
51
|
-
background-size: $combined-width $grid-baseline + 1, // v-rhythm
|
52
|
-
$combined-width 10px, // column
|
53
|
-
$combined-width ($block-height + 1); // block
|
54
|
-
|
55
|
-
@if $grid-type == flexible {
|
56
|
-
// Offset column by half gutter
|
57
|
-
background-position: 0 0, -($column-gutter/4) 0, 0 0;
|
58
|
-
}
|
59
|
-
|
60
|
-
// Grid placement (back by default)
|
61
|
-
@if $position == front {
|
62
|
-
z-index: 999;
|
63
|
-
} @else {
|
64
|
-
z-index: -1;
|
65
|
-
}
|
66
|
-
}
|
67
|
-
}
|
68
|
-
|
69
|
-
// Grid debugging
|
70
|
-
.show-grid {
|
71
|
-
@include grid-show-guides($grid-medium);
|
72
|
-
|
73
|
-
@include large-screen {
|
74
|
-
@include grid-show-guides($grid-large);
|
75
|
-
}
|
76
|
-
&.flexible {
|
77
|
-
@include grid-show-guides($grid-type: flexible);
|
78
|
-
}
|
79
|
-
&.front:before {
|
80
|
-
z-index: auto;
|
81
|
-
}
|
82
|
-
}
|
83
|
-
|
84
|
-
// Show grid on .container if enabled
|
85
|
-
@if $grid-guides {
|
86
|
-
.container {
|
87
|
-
@extend .show-grid;
|
88
|
-
.row:before {
|
89
|
-
display: none;
|
90
|
-
}
|
91
|
-
}
|
92
|
-
}
|