grid-coordinates 1.1.9 → 1.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/lib/grid-coordinates.rb +2 -2
- data/stylesheets/_grid-coordinates.scss +23 -0
- data/stylesheets/partials/_grid-coordinates-mixin.scss +55 -0
- data/stylesheets/partials/_grid-coordinates-mixins.scss +70 -0
- data/stylesheets/partials/_grid-functions.scss +9 -0
- metadata +9 -6
- data/stylesheets/_grid-coordinates.sass +0 -114
data/lib/grid-coordinates.rb
CHANGED
@@ -0,0 +1,23 @@
|
|
1
|
+
// Compass requirements
|
2
|
+
@import "compass/utilities";
|
3
|
+
@import "compass/css3";
|
4
|
+
|
5
|
+
// Grid Coordinates configuration
|
6
|
+
$grid-columns: 12 !default;
|
7
|
+
$grid-width: 60px !default;
|
8
|
+
$grid-gutter-width: 20px !default;
|
9
|
+
|
10
|
+
// Clearfix prefix string
|
11
|
+
// Helps to avoid conflicts with other .clearfix's
|
12
|
+
$clearfix-prefix: "" !default;
|
13
|
+
|
14
|
+
// Support for deprecated clearfix options
|
15
|
+
$support-legacy-grid-clearfix: false !default;
|
16
|
+
|
17
|
+
// Modules
|
18
|
+
@import "modules/bulletproof-clearfix";
|
19
|
+
|
20
|
+
// Partials
|
21
|
+
@import "partials/grid-functions";
|
22
|
+
@import "partials/grid-coordinates-mixin";
|
23
|
+
@import "partials/grid-coordinates-mixins";
|
@@ -0,0 +1,55 @@
|
|
1
|
+
@mixin grid-coordinates {
|
2
|
+
|
3
|
+
// Main clearfix class to use to @extend elements that require cleafix
|
4
|
+
.#{$clearfix-prefix}clearfix { @include bulletproof-clearfix; }
|
5
|
+
|
6
|
+
// In place to support legacy clearfix options
|
7
|
+
// Should be deprecated at some point in the future
|
8
|
+
@if $support-legacy-grid-clearfix {
|
9
|
+
.grid-clearfix,
|
10
|
+
.grid-pie-clearfix {
|
11
|
+
@extend .#{$clearfix-prefix}clearfix;
|
12
|
+
}
|
13
|
+
}
|
14
|
+
|
15
|
+
// All generated grid elements that require clearfix
|
16
|
+
.grid-container,
|
17
|
+
.nested-grid-container,
|
18
|
+
.grid-block,
|
19
|
+
.grid-full {
|
20
|
+
@extend .#{$clearfix-prefix}clearfix;
|
21
|
+
}
|
22
|
+
|
23
|
+
// Core grid classes and mixin consumption
|
24
|
+
.grid-container {
|
25
|
+
@include grid-container-base;
|
26
|
+
}
|
27
|
+
.nested-grid-container {
|
28
|
+
@include nested-grid-container-base;
|
29
|
+
}
|
30
|
+
.grid-block {
|
31
|
+
@include grid-block-base;
|
32
|
+
}
|
33
|
+
.grid-full {
|
34
|
+
@include grid-base($grid-columns); @extend .grid-block;
|
35
|
+
}
|
36
|
+
|
37
|
+
// Loops to enumerate the classes
|
38
|
+
// Yep, this saves us tons of typing (if this were CSS)
|
39
|
+
@for $i from 1 through $grid-columns {
|
40
|
+
.grid-#{$i} { @include grid-base($i); @extend .grid-block; }
|
41
|
+
}
|
42
|
+
@for $i from 1 to $grid-columns {
|
43
|
+
.grid-prefix-#{$i} { @include grid-prefix($i); }
|
44
|
+
}
|
45
|
+
@for $i from 1 to $grid-columns {
|
46
|
+
.grid-suffix-#{$i} { @include grid-suffix($i); }
|
47
|
+
}
|
48
|
+
@for $i from 1 to $grid-columns {
|
49
|
+
.grid-push-#{$i} { @include grid-push($i); }
|
50
|
+
}
|
51
|
+
@for $i from 1 to $grid-columns {
|
52
|
+
.grid-pull-#{$i} { @include grid-pull($i); }
|
53
|
+
}
|
54
|
+
|
55
|
+
}
|
@@ -0,0 +1,70 @@
|
|
1
|
+
// Grid Container
|
2
|
+
@mixin grid-container {
|
3
|
+
@include bulletproof-clearfix;
|
4
|
+
@include grid-container-base;
|
5
|
+
}
|
6
|
+
|
7
|
+
@mixin grid-container-base {
|
8
|
+
margin-right: auto;
|
9
|
+
margin-left: auto;
|
10
|
+
width: grid-width($grid-columns);
|
11
|
+
}
|
12
|
+
|
13
|
+
// Nested Container
|
14
|
+
@mixin nested-grid-container {
|
15
|
+
@include bulletproof-clearfix;
|
16
|
+
@include nested-grid-container-base;
|
17
|
+
}
|
18
|
+
|
19
|
+
@mixin nested-grid-container-base {
|
20
|
+
display: inline-block;
|
21
|
+
margin-left: -(grid-margin());
|
22
|
+
margin-right: -(grid-margin());
|
23
|
+
width: auto;
|
24
|
+
}
|
25
|
+
|
26
|
+
// Grid
|
27
|
+
@mixin grid($grid-columns) {
|
28
|
+
@include grid-base($grid-columns);
|
29
|
+
@include grid-block;
|
30
|
+
}
|
31
|
+
|
32
|
+
@mixin grid-full {
|
33
|
+
@include grid($grid-columns);
|
34
|
+
}
|
35
|
+
|
36
|
+
@mixin grid-base($grid-columns) {
|
37
|
+
@include grid-width($grid-columns);
|
38
|
+
}
|
39
|
+
|
40
|
+
// Grid Block
|
41
|
+
@mixin grid-block {
|
42
|
+
@include bulletproof-clearfix;
|
43
|
+
@include grid-block-base;
|
44
|
+
}
|
45
|
+
|
46
|
+
@mixin grid-block-base {
|
47
|
+
@include box-sizing(border-box);
|
48
|
+
@include float-left;
|
49
|
+
position: relative;
|
50
|
+
margin-right: grid-margin();
|
51
|
+
margin-left: grid-margin();
|
52
|
+
}
|
53
|
+
|
54
|
+
// Grid logic
|
55
|
+
@mixin grid-width($grid-columns) {
|
56
|
+
@if $grid-columns == 1 { width: $grid-width; }
|
57
|
+
@else { width: grid-width($grid-columns) - $grid-gutter-width; }
|
58
|
+
}
|
59
|
+
@mixin grid-prefix($grid-columns) {
|
60
|
+
margin-left: grid-width($grid-columns) + $grid-gutter-width / 2;
|
61
|
+
}
|
62
|
+
@mixin grid-suffix($grid-columns) {
|
63
|
+
margin-right: grid-width($grid-columns) + $grid-gutter-width / 2;
|
64
|
+
}
|
65
|
+
@mixin grid-push($grid-columns) {
|
66
|
+
left: grid-width($grid-columns);
|
67
|
+
}
|
68
|
+
@mixin grid-pull($grid-columns) {
|
69
|
+
left: -(grid-width($grid-columns));
|
70
|
+
}
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: grid-coordinates
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.
|
4
|
+
version: 1.2.0
|
5
5
|
prerelease:
|
6
6
|
platform: ruby
|
7
7
|
authors:
|
@@ -9,11 +9,11 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2011-10-
|
12
|
+
date: 2011-10-25 00:00:00.000000000Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: compass
|
16
|
-
requirement: &
|
16
|
+
requirement: &70276964560760 !ruby/object:Gem::Requirement
|
17
17
|
none: false
|
18
18
|
requirements:
|
19
19
|
- - ! '>='
|
@@ -21,7 +21,7 @@ dependencies:
|
|
21
21
|
version: 0.11.5
|
22
22
|
type: :runtime
|
23
23
|
prerelease: false
|
24
|
-
version_requirements: *
|
24
|
+
version_requirements: *70276964560760
|
25
25
|
description: Highly configurable CSS Grid Framework written in Sass.
|
26
26
|
email: adam@stacoviak.com
|
27
27
|
executables: []
|
@@ -30,8 +30,11 @@ extra_rdoc_files: []
|
|
30
30
|
files:
|
31
31
|
- ABOUT.mdown
|
32
32
|
- lib/grid-coordinates.rb
|
33
|
-
- stylesheets/_grid-coordinates.
|
33
|
+
- stylesheets/_grid-coordinates.scss
|
34
34
|
- stylesheets/modules/_bulletproof-clearfix.sass
|
35
|
+
- stylesheets/partials/_grid-coordinates-mixin.scss
|
36
|
+
- stylesheets/partials/_grid-coordinates-mixins.scss
|
37
|
+
- stylesheets/partials/_grid-functions.scss
|
35
38
|
homepage: http://grid-coordinates.com/
|
36
39
|
licenses: []
|
37
40
|
post_install_message:
|
@@ -46,7 +49,7 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
46
49
|
version: '0'
|
47
50
|
segments:
|
48
51
|
- 0
|
49
|
-
hash:
|
52
|
+
hash: 233659113814929658
|
50
53
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
51
54
|
none: false
|
52
55
|
requirements:
|
@@ -1,114 +0,0 @@
|
|
1
|
-
@import "compass/utilities"
|
2
|
-
@import "compass/css3"
|
3
|
-
|
4
|
-
// Modules
|
5
|
-
@import "modules/bulletproof-clearfix"
|
6
|
-
|
7
|
-
// Configure Grid Coordinates
|
8
|
-
$grid-columns: 12 !default
|
9
|
-
$grid-width: 60px !default
|
10
|
-
$grid-gutter-width: 20px !default
|
11
|
-
|
12
|
-
// Support for deprecated clearfix options
|
13
|
-
$support-legacy-grid-clearfix: true !default
|
14
|
-
|
15
|
-
=grid-coordinates
|
16
|
-
.__clearfix
|
17
|
-
@include bulletproof-clearfix
|
18
|
-
@if $support-legacy-grid-clearfix
|
19
|
-
.grid-clearfix, .grid-pie-clearfix
|
20
|
-
@extend .__clearfix
|
21
|
-
.grid-container, .nested-grid-container, .grid-block, .grid-full
|
22
|
-
@extend .__clearfix
|
23
|
-
.grid-container
|
24
|
-
@include grid-container-base
|
25
|
-
.nested-grid-container
|
26
|
-
@include nested-grid-container-base
|
27
|
-
.grid-block
|
28
|
-
@include grid-block-base
|
29
|
-
.grid-full
|
30
|
-
@include grid-base($grid-columns)
|
31
|
-
|
32
|
-
// Loops
|
33
|
-
@for $i from 1 through $grid-columns
|
34
|
-
.grid-#{$i}
|
35
|
-
@include grid-base($i)
|
36
|
-
@extend .grid-block
|
37
|
-
@for $i from 1 through $grid-columns - 1
|
38
|
-
.grid-prefix-#{$i}
|
39
|
-
@include grid-prefix($i)
|
40
|
-
@for $i from 1 through $grid-columns - 1
|
41
|
-
.grid-suffix-#{$i}
|
42
|
-
@include grid-suffix($i)
|
43
|
-
@for $i from 1 through $grid-columns - 1
|
44
|
-
.grid-push-#{$i}
|
45
|
-
@include grid-push($i)
|
46
|
-
@for $i from 1 through $grid-columns - 1
|
47
|
-
.grid-pull-#{$i}
|
48
|
-
@include grid-pull($i)
|
49
|
-
|
50
|
-
// Grid Container
|
51
|
-
=grid-container-base
|
52
|
-
margin:
|
53
|
-
right: auto
|
54
|
-
left: auto
|
55
|
-
width: ($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)
|
56
|
-
|
57
|
-
=grid-container
|
58
|
-
@include bulletproof-clearfix
|
59
|
-
@include grid-container-base
|
60
|
-
|
61
|
-
// Nested Container
|
62
|
-
=nested-grid-container-base
|
63
|
-
display: inline-block
|
64
|
-
margin:
|
65
|
-
left: -($grid-gutter-width / 2)
|
66
|
-
right: -($grid-gutter-width / 2)
|
67
|
-
width: auto
|
68
|
-
|
69
|
-
=nested-grid-container
|
70
|
-
@include bulletproof-clearfix
|
71
|
-
@include nested-grid-container-base
|
72
|
-
|
73
|
-
// Grid Block
|
74
|
-
=grid-block-base
|
75
|
-
@include box-sizing(border-box)
|
76
|
-
@include float-left
|
77
|
-
position: relative
|
78
|
-
margin:
|
79
|
-
right: ($grid-gutter-width / 2)
|
80
|
-
left: ($grid-gutter-width / 2)
|
81
|
-
|
82
|
-
=grid-block
|
83
|
-
@include bulletproof-clearfix
|
84
|
-
@include grid-block-base
|
85
|
-
|
86
|
-
// Grid
|
87
|
-
=grid-base($grid-columns)
|
88
|
-
@include grid-width($grid-columns)
|
89
|
-
|
90
|
-
=grid($grid-columns)
|
91
|
-
@include grid-base($grid-columns)
|
92
|
-
@include grid-block
|
93
|
-
|
94
|
-
=grid-full
|
95
|
-
@include grid($grid-columns)
|
96
|
-
|
97
|
-
// Grid logic
|
98
|
-
=grid-width($grid-columns)
|
99
|
-
@if $grid-columns == 1
|
100
|
-
width: $grid-width
|
101
|
-
@else
|
102
|
-
width: (($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)) - $grid-gutter-width
|
103
|
-
|
104
|
-
=grid-prefix($grid-columns)
|
105
|
-
margin-left: (($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)) + ($grid-gutter-width / 2)
|
106
|
-
|
107
|
-
=grid-suffix($grid-columns)
|
108
|
-
margin-right: (($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)) + ($grid-gutter-width / 2)
|
109
|
-
|
110
|
-
=grid-push($grid-columns)
|
111
|
-
left: ($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)
|
112
|
-
|
113
|
-
=grid-pull($grid-columns)
|
114
|
-
left: -($grid-columns * $grid-width) + ($grid-columns * $grid-gutter-width)
|