stratum 0.1.1 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|
-
}
|