grid-coordinates 1.1.9 → 1.2.0
Sign up to get free protection for your applications and to get access to all the features.
- 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)
|