singularitygs 1.1.2 → 1.2.0.rc.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. checksums.yaml +7 -7
  2. data/lib/singularitygs.rb +2 -2
  3. data/stylesheets/_singularitygs.scss +13 -26
  4. data/stylesheets/singularitygs/_api.scss +89 -29
  5. data/stylesheets/singularitygs/_helpers.scss +6 -2
  6. data/stylesheets/singularitygs/api/_float.scss +87 -147
  7. data/stylesheets/singularitygs/api/_isolation.scss +81 -133
  8. data/stylesheets/singularitygs/grids/_add.scss +34 -16
  9. data/stylesheets/singularitygs/grids/_find.scss +6 -8
  10. data/stylesheets/singularitygs/gutter-styles/_add.scss +39 -16
  11. data/stylesheets/singularitygs/gutter-styles/_find.scss +10 -5
  12. data/stylesheets/singularitygs/gutter-styles/_helpers.scss +6 -10
  13. data/stylesheets/singularitygs/gutters/_add.scss +37 -14
  14. data/stylesheets/singularitygs/gutters/_find.scss +9 -5
  15. data/stylesheets/singularitygs/helpers/_background-grid.scss +155 -181
  16. data/stylesheets/singularitygs/helpers/_box-sizing.scss +17 -32
  17. data/stylesheets/singularitygs/helpers/_clearfix.scss +10 -95
  18. data/stylesheets/singularitygs/helpers/_columns.scss +4 -3
  19. data/stylesheets/singularitygs/helpers/_directions.scss +6 -0
  20. data/stylesheets/singularitygs/helpers/_find.scss +112 -64
  21. data/stylesheets/singularitygs/helpers/_layout.scss +39 -10
  22. data/stylesheets/singularitygs/helpers/_sass-lists.scss +1 -1
  23. data/stylesheets/singularitygs/helpers/_settings.scss +98 -0
  24. data/stylesheets/singularitygs/helpers/_sort.scss +56 -0
  25. data/stylesheets/singularitygs/helpers/_span-shared.scss +20 -2
  26. data/stylesheets/singularitygs/language/_parse-add.scss +52 -8
  27. data/stylesheets/singularitygs/language/_parse-list.scss +3 -3
  28. data/stylesheets/singularitygs/math/_columns.scss +5 -4
  29. data/stylesheets/singularitygs/math/_context.scss +1 -1
  30. data/stylesheets/singularitygs/math/_gutters.scss +2 -1
  31. metadata +63 -54
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
- ---
2
- SHA512:
3
- data.tar.gz: 9bd5f9cb1cec2ea2abdac9b10f08739fcdfb434ab893407288392ac87f34abe753ffd59c2037bc7c4cb17a4f82916e50a39520a7c1e1b9af487ba55c4c3dc06d
4
- metadata.gz: a80c3265806c357e5b5af5b7eff905662f824e9bea412cf5237d9ca29856e7577d29d5bc8d12d73cbd068bc7d22192605fb3bfb94c9443079cdb71e4c4243c37
5
- SHA1:
6
- data.tar.gz: 13f176ec322bfb02fee62f3901105c91ce1998e5
7
- metadata.gz: 1bd5f24e9faa1a5727193d09220e14b0fd395dd0
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 77de76920fd546a70587ae4aa397b9e4592a331d
4
+ data.tar.gz: 267fa655d9d5556402e516b5195ae54450943a83
5
+ SHA512:
6
+ metadata.gz: 6dca4e176cba9e91ad1b01a4ccd7195a9338bbcc87efdedcc90bb106219e92d5b30beb58a79d555e0a2ce4eb10897f7003e1a1a3d72f559608ece8101cb74d8e
7
+ data.tar.gz: 14f8bee9514d0277946e55ef883f7fa8e0b28d4992678ee2cfda8cb459555cbaadc58019f0e2000a1ea4c1a779d4c1b6cb375144bbdc78b0876e35cf52a1287e
data/lib/singularitygs.rb CHANGED
@@ -4,6 +4,6 @@ require 'breakpoint'
4
4
  Compass::Frameworks.register("singularitygs", :path => "#{File.dirname(__FILE__)}/..")
5
5
 
6
6
  module SingularityGS
7
- VERSION = "1.1.2"
8
- DATE = "2013-08-01"
7
+ VERSION = "1.2.0.rc.1"
8
+ DATE = "2014-01-12"
9
9
  end
@@ -1,34 +1,21 @@
1
1
  //////////////////////////////
2
- // Import Required Extensions
2
+ // Default Settings
3
3
  //////////////////////////////
4
- @import "breakpoint";
4
+ $Singularity-Settings: (
5
+ 'grids': (-1px: 12),
6
+ 'gutters': (-1px: .25),
7
+ 'gutter styles': (-1px: 'opposite'),
8
+ 'output': 'isolation',
9
+ 'direction': 'ltr',
10
+ 'mobile first': true,
11
+ 'include border box': false,
12
+ 'include clearfix': false
13
+ );
5
14
 
6
15
  //////////////////////////////
7
- // Default Variables
16
+ // User Settings
8
17
  //////////////////////////////
9
-
10
- // The grids being used
11
- $grids: () !default;
12
-
13
- // The gutters of the inner columns of the grid
14
- $gutters: () !default;
15
-
16
- // The gutter styles
17
- // Options: opposite/split (fixed)
18
- $gutter-styles: () !default;
19
-
20
- // Specifies whether or not you're building mobile-first grids. Defaults to true
21
- $mobile-first: true !default;
22
-
23
- // Default output style.
24
- $output: 'isolation' !default;
25
-
26
- // Direction for your grid. Can be ltr, rtl, or both
27
- $direction: 'ltr' !default;
28
-
29
- // Whether or not to include border-box or clearfix with all spans
30
- $include-border-box: false !default;
31
- $include-clearfix: false !default;
18
+ $singularity: () !default;
32
19
 
33
20
  //////////////////////////////
34
21
  // Import General Helpers
@@ -1,39 +1,99 @@
1
- @mixin grid-span($span, $location: 1, $grid: false, $gutter: false, $output-style: $output, $options: false) {
1
+ @import "api/float";
2
+ @import "api/isolation";
2
3
 
3
- @if $output-style == 'float' {
4
- @include output-float($span, $location, $grid, $gutter, $options);
5
- }
6
- @else if $output-style == 'isolation' {
7
- @include output-isolation($span, $location, $grid, $gutter, $options);
4
+ //////////////////////////////
5
+ // Master Grid Span mixin
6
+ //////////////////////////////
7
+ @mixin grid-span($span, $location: 1, $grid: null, $gutter: null, $output-style: null, $gutter-style: null, $options: null) {
8
+
9
+ @if $output-style == null {
10
+ $output-style: sgs-get('output');
8
11
  }
9
- }
10
12
 
11
- @mixin push($span, $location, $grid: false, $gutter: false, $output-style: $output) {
13
+ $Grid: find-grid($grid);
14
+ $Gutter: find-gutter($gutter);
15
+ $Style: find-gutter-style($gutter-style);
12
16
 
13
- @if $output-style == 'float' {
14
- @include push-float($span, $location, $grid, $gutter);
15
- }
16
- @else if $output-style == 'isolation' {
17
- @include push-isolation($span, $location, $grid, $gutter);
18
- }
19
- }
17
+ $Start-Row: start-row($location);
18
+ $End-Row: end-row($span, $location, $Grid);
20
19
 
21
- @mixin pull($span, $location, $grid: false, $gutter: false, $output-style: $output) {
20
+ $Fixed-Gutter: fixed-gutter($Grid, $Gutter, $Style);
21
+ $Split-Gutter: index($Style, 'split');
22
+ $Gutter-Property: gutter-property($Grid, $Gutter, $Style);
22
23
 
23
- @if $output-style == 'float' {
24
- @include pull-float($span, $location, $grid, $gutter);
25
- }
26
- @else if $output-style == 'isolation' {
27
- @include pull-isolation($span, $location, $grid, $gutter);
24
+ $Direction: sgs-get('direction');
25
+ $From: if($options and type-of($options) == 'map', if(map-get($options, 'from'), map-get($options, 'from'), $Direction), $Direction);
26
+ $From: if($From == 'ltr' or $From == 'rtl', named-direction($From), $From);
27
+
28
+ $Holder: ();
29
+ @each $k, $v in $options {
30
+ $Holder: if($k == 'from', $Holder, map-merge($Holder, ($k: $v)));
28
31
  }
29
- }
32
+ $options: if(length($Holder) > 0, $Holder, null);
30
33
 
31
- @mixin isolate($span, $location, $grid: false, $gutter: false, $output-style: $output) {
34
+ $Span-Map: (
35
+ 'span': $span,
36
+ 'location': $location,
37
+ 'grid': $Grid,
38
+ 'gutter': $Gutter,
39
+ 'style': $Style,
40
+ 'start row': $Start-Row,
41
+ 'end row': $End-Row,
42
+ 'fixed gutter': $Fixed-Gutter,
43
+ 'split gutter': $Split-Gutter,
44
+ 'gutter property': $Gutter-Property,
45
+ 'options': $options
46
+ );
32
47
 
33
- @if $output-style == 'float' {
34
- @include isolate-float($span, $location, $grid, $gutter);
35
- }
36
- }
37
48
 
38
- @import "api/float";
39
- @import "api/isolation";
49
+ @if function-exists('output-#{$output-style}') {
50
+ $Left: ();
51
+ $Right: ();
52
+
53
+ @if $Direction == 'both' or $From == 'left' or ($Direction == 'rtl' and $From == 'opposite') {
54
+ $Left: call('output-#{$output-style}', map-merge($Span-Map, ('direction': left)));
55
+ }
56
+
57
+ @if $Direction == 'both' or $From == 'right' or ($Direction == 'ltr' and $From == 'opposite') {
58
+ $Right: call('output-#{$output-style}', map-merge($Span-Map, ('direction': right)));
59
+ }
60
+
61
+ $Left-Keys: map-keys($Left);
62
+ $Right-Keys: map-keys($Right);
63
+ $Exclude: ();
64
+
65
+ @each $key in $Left-Keys {
66
+ @if index($Right-Keys, $key) {
67
+ @if map-get($Right, $key) == map-get($Left, $key) {
68
+ $Exclude: append($Exclude, $key);
69
+ }
70
+ }
71
+ }
72
+
73
+ // Always try and print the Left value
74
+ @each $property, $value in $Left {
75
+ #{$property}: $value;
76
+ }
77
+
78
+ // If Direction is Both or RTL, add the RTL attribute selector
79
+ @if $Direction == 'both' or $Direction == 'rtl' {
80
+ [dir="rtl"] & {
81
+ @each $property, $value in $Right {
82
+ @if not index($Exclude, $property) {
83
+ #{$property}: $value;
84
+ }
85
+ }
86
+ }
87
+ }
88
+ @else {
89
+ @each $property, $value in $Right {
90
+ @if not index($Exclude, $property) {
91
+ #{$property}: $value;
92
+ }
93
+ }
94
+ }
95
+ }
96
+ @else {
97
+ @warn "There doesn't appear to be an output style named `#{$output-style}`. Please ensure that the function `output-#{$output-style}` and that the output style `#{$output-style}` are both available before trying to use them.";
98
+ }
99
+ }
@@ -1,13 +1,17 @@
1
+ //////////////////////////////
2
+ // Setting Helpers
3
+ //////////////////////////////
4
+ @import "helpers/settings";
5
+
1
6
  //////////////////////////////
2
7
  // Code Helpers
3
8
  //////////////////////////////
4
9
  @import "helpers/find";
5
10
  @import "helpers/sass-lists";
6
11
  @import "helpers/columns";
7
- @import "helpers/clearfix";
8
- @import "helpers/box-sizing";
9
12
  @import "helpers/span-shared";
10
13
  @import "helpers/directions";
14
+ @import "helpers/sort";
11
15
 
12
16
  //////////////////////////////
13
17
  // UI Helpers
@@ -1,160 +1,98 @@
1
- @mixin output-float($span, $location, $columns, $gutter, $options: false) {
1
+ @function output-float($Span-Map) {
2
+ // Set up Left/Right maps
3
+ $Return: ();
2
4
 
3
- $location-holder: $location;
5
+ $Span: map-get($Span-Map, 'span');
6
+ $Location: map-get($Span-Map, 'location');
4
7
 
5
- @if type-of($location) == string {
6
- @if end-row($span, $location, $columns) {
7
- $grid-length: length(find-grid($columns));
8
- $location-holder: $grid-length - $span;
9
- }
10
- @else {
11
- $location-holder: 1;
12
- }
13
- }
8
+ $Grid: map-get($Span-Map, 'grid');
9
+ $Gutter: map-get($Span-Map, 'gutter');
10
+ $Style: map-get($Span-Map, 'style');
14
11
 
15
- $gutter: find-gutter($gutter);
16
- $gutter-span: gutter-span($gutter, $columns);
17
- $end-row: end-row($span, $location, $columns);
18
- $start-row: start-row($location);
19
-
20
- $gutter-style: find-gutter-style();
21
- $fixed-gutter: fixed-gutter($columns, $gutter);
22
- $gutter-property: gutter-property($columns, $gutter);
23
-
24
- width: column-span($span, $location-holder, $columns, $gutter, $gutter-style);
25
-
26
- @if $direction == 'ltr' or $direction == 'both' {
27
- // Set the CSS direction to ltr
28
- $cssdir: 'ltr';
29
- // Find the CSS named direction and opposite direction
30
- $dir: named-direction($cssdir);
31
- $opp: opposite-direction($dir);
32
-
33
- clear: $opp;
34
-
35
- @if $end-row {
36
- float: $opp;
37
- @if index($gutter-style, split) and not $fixed-gutter {
38
- #{$gutter-property}-#{$dir}: 0;
39
- #{$gutter-property}-#{$opp}: $gutter-span / 2;
40
- }
41
- @else if not $fixed-gutter {
42
- #{$gutter-property}-#{$opp}: 0;
43
- }
44
- }
45
- @else {
46
- float: $dir;
47
-
48
- @if $start-row {
49
- @if index($gutter-style, split) and not $fixed-gutter {
50
- #{$gutter-property}-#{$dir}: $gutter-span / 2;
51
- #{$gutter-property}-#{$opp}: $gutter-span / 2;
52
- }
53
- @else if not $fixed-gutter {
54
- #{$gutter-property}-#{$dir}: 0;
55
- #{$gutter-property}-#{$opp}: $gutter-span;
56
- }
12
+ $Start-Row: map-get($Span-Map, 'start row');
13
+ $End-Row: map-get($Span-Map, 'end row');
57
14
 
58
- }
59
- }
15
+ $Fixed-Gutter: map-get($Span-Map, 'fixed gutter');
16
+ $Split-Gutter: map-get($Span-Map, 'split gutter');
17
+ $Gutter-Property: map-get($Span-Map, 'gutter property');
60
18
 
61
- @if $fixed-gutter {
62
- @if index($gutter-style, split) {
63
- #{$gutter-property}-#{$dir}: $gutter-span / 2;
64
- #{$gutter-property}-#{$opp}: $gutter-span / 2;
65
- }
66
- @else {
67
- #{$gutter-property}-#{$opp}: $gutter-span;
68
- }
69
- }
70
- }
19
+ $Direction: map-get($Span-Map, 'direction');
20
+ $Options: map-get($Span-Map, 'options');
71
21
 
72
- @if $direction == 'rtl' or $direction == 'both' {
73
- // Set the CSS direction to ltr
74
- $cssdir: 'rtl';
75
- // Find the CSS named direction and opposite direction
76
- $dir: named-direction($cssdir);
77
- $opp: opposite-direction($dir);
78
-
79
-
80
- [dir="#{$cssdir}"] & {
81
- clear: $opp;
82
-
83
- @if $end-row {
84
- float: $opp;
85
- @if index($gutter-style, split) and not $fixed-gutter {
86
- #{$gutter-property}-#{$dir}: 0;
87
- #{$gutter-property}-#{$opp}: $gutter-span / 2;
88
- }
89
- @else if not $fixed-gutter {
90
- #{$gutter-property}-#{$opp}: 0;
91
- }
92
- }
93
- @else {
94
- float: $dir;
95
-
96
- @if $start-row {
97
- @if index($gutter-style, split) and not $fixed-gutter {
98
- #{$gutter-property}-#{$dir}: $gutter-span / 2;
99
- #{$gutter-property}-#{$opp}: $gutter-span / 2;
100
- }
101
- @else if not $fixed-gutter {
102
- #{$gutter-property}-#{$dir}: 0;
103
- #{$gutter-property}-#{$opp}: $gutter-span;
104
- }
105
- }
106
- }
107
-
108
- @if $fixed-gutter {
109
- @if $direction == 'rtl' {
110
- @if index($gutter-style, split) {
111
- #{$gutter-property}-#{$dir}: $gutter-span / 2;
112
- #{$gutter-property}-#{$opp}: $gutter-span / 2;
113
- }
114
- @else {
115
- #{$gutter-property}-#{$opp}: $gutter-span;
116
- }
117
- }
118
- @else if not index($gutter-style, split) {
119
- #{$gutter-property}-#{$opp}: $gutter-span;
120
- }
121
- }
122
- }
22
+ @if $Start-Row {
23
+ $Location: 1;
24
+ }
25
+ @else if $End-Row {
26
+ $Location: column-count($Grid) - $Span;
123
27
  }
124
28
 
125
- @include span-shared;
126
- }
127
-
128
- @mixin push-float($span, $location, $columns: false, $gutter: false) {
29
+ $Width: column-span($Span, $Location, $Grid, $Gutter, $Style);
30
+ $Margin-Span: column-span(($Location - 1), 1, $Grid, $Gutter, $Style);
31
+ $Gutter-Span: gutter-span($Gutter, $Grid);
129
32
 
130
- @if type-of($location) == string {
131
- $location: 1;
33
+ // Backwards Compatibility for Options
34
+ @if type-of($Options) != 'map' and $Options != null {
35
+ $Options: ('clear': unquote(nth($Options, 1)));
132
36
  }
133
37
 
134
- // Find the columns and gutters
135
- $columns: find-grid($columns);
136
- $gutter: find-gutter($gutter);
38
+ $Dir: $Direction;
39
+ $Opp: opposite-direction($Dir);
137
40
 
138
- // Combine the columns and gutters
139
- $gutter: column-span($span, $location, $columns, $gutter) + gutter-span($gutter, $columns);
41
+ $Return: map-merge($Return, ('width': $Width));
42
+ $Return: map-merge($Return, ('clear': $Opp));
140
43
 
141
- margin-left: $gutter;
142
- }
44
+ @if ($End-Row) {
45
+ $Return: map-merge($Return, ('float': $Opp));
143
46
 
144
- @mixin pull-float($span, $location, $columns: false, $gutter: false) {
47
+ @if $Split-Gutter and not $Fixed-Gutter {
48
+ $Return: map-merge($Return, ('#{$Gutter-Property}-#{$Dir}': 0));
49
+ $Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': $Gutter-Span / 2));
50
+ }
51
+ @else if not $Fixed-Gutter {
52
+ $Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': 0));
53
+ }
54
+ }
55
+ @else {
56
+ $Return: map-merge($Return, ('float': $Dir));
145
57
 
146
- @if type-of($location) == string {
147
- $location: 1;
58
+ @if $Split-Gutter and not $Fixed-Gutter {
59
+ $Return: map-merge($Return, ('#{$Gutter-Property}-#{$Dir}': $Gutter-Span / 2));
60
+ $Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': $Gutter-Span / 2));
61
+ }
62
+ @else if not $Fixed-Gutter {
63
+ @if $Start-Row {
64
+ $Return: map-merge($Return, ('#{$Gutter-Property}-#{$Dir}': 0));
65
+ }
66
+ $Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': $Gutter-Span));
67
+ }
68
+ }
69
+ // If options are set, we merge them in!
70
+ @if ($Options) {
71
+ $Return: map-merge($Return, $Options);
148
72
  }
149
73
 
150
- // Find the columns and gutters
151
- $columns: find-grid($columns);
152
- $gutter: find-gutter($gutter);
74
+ // If CLear isn't already available, set it!
75
+ @if not map-has-key($Return, 'clear') {
76
+ $Return: map-merge($Return, ('clear': none));
77
+ }
153
78
 
154
- // Combine the columns and gutters
155
- $gutter: (column-span($span, $location, $columns, $gutter) + gutter-span($gutter, $columns)) * -1;
79
+ // Left Fixed Gutters
80
+ @if $Fixed-Gutter {
81
+ @if index($Style, 'split') {
82
+ $Return: map-merge($Return, ('#{$Gutter-Property}-#{$Dir}': $Gutter-Span / 2));
83
+ $Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': $Gutter-Span / 2));
84
+ }
85
+ @else {
86
+ @if not $End-Row {
87
+ $Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': $Gutter-Span));
88
+ }
89
+ @else {
90
+ $Return: map-merge($Return, ('#{$Gutter-Property}-#{$Opp}': 0));
91
+ }
92
+ }
93
+ }
156
94
 
157
- margin-left: $gutter;
95
+ @return $Return;
158
96
  }
159
97
 
160
98
  //////////////////////////////
@@ -162,11 +100,13 @@
162
100
  //
163
101
  // Makes working with Float easier, as it allows you to walk the grid for symmetric grids and easy applying of 'last' and 'first', as well as automatically building the verbose grid-span mixin call
164
102
  //////////////////////////////
165
- @mixin float-span($span, $location: false, $grid: false, $gutter: false) {
103
+ @mixin float-span($Span, $Location: false, $grid: false, $gutter: false, $gutter-style: false, $from: false) {
166
104
  $grid: find-grid($grid);
167
105
  $gutter: find-gutter($gutter);
168
106
  $row: false;
169
107
 
108
+ $Options: if($from, ('from': $from), null);
109
+
170
110
  // Working around SASS treating a number like a list with one element
171
111
  @if type-of($grid) == 'list' and length($grid) == 1 {
172
112
  $grid: nth($grid, 1);
@@ -175,27 +115,27 @@
175
115
  // Working with a symmetric grid
176
116
  @if type-of($grid) == 'number' {
177
117
  // Special treatment for non-numeric location
178
- @if type-of($location) != 'number' {
179
- @if $location == 'last' or $location == 'omega' {
180
- $location: $grid - $span + 1;
118
+ @if type-of($Location) != 'number' {
119
+ @if $Location == 'last' or $Location == 'omega' {
120
+ $Location: $grid - $Span + 1;
181
121
  }
182
122
  @else {
183
- @if $location == 'first' or $location == 'alpha' {
123
+ @if $Location == 'first' or $Location == 'alpha' {
184
124
  $row: true;
185
125
  }
186
- $location: 1;
126
+ $Location: 1;
187
127
  }
188
128
  }
189
129
 
190
- @include grid-span($span, $location, $grid, $gutter, 'float');
130
+ @include grid-span($Span, $Location, $grid, $gutter, 'float', $gutter-style, $Options);
191
131
 
192
132
  @if $row {
193
133
  clear: both;
194
134
  }
195
135
  }
196
136
  // Working with an asymmetric grid, should have location provided
197
- @else if type-of($grid) == 'list' and $location != false {
198
- @include grid-span($span, $location, $grid, $gutter, 'float');
137
+ @else if type-of($grid) == 'list' and $Location != false {
138
+ @include grid-span($Span, $Location, $grid, $gutter, 'float', $gutter-style, $Options);
199
139
  }
200
140
  @else {
201
141
  @warn 'Asymmetric Grids need a Location value as well as a span value in order to know where on the grid you are! Please include a location value!';