singularitygs 1.1.2 → 1.8.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. checksums.yaml +7 -7
  2. data/lib/singularitygs.rb +14 -6
  3. data/stylesheets/_singularitygs.scss +21 -30
  4. data/stylesheets/singularitygs/_api.scss +103 -24
  5. data/stylesheets/singularitygs/_css-grid.scss +141 -0
  6. data/stylesheets/singularitygs/_helpers.scss +6 -2
  7. data/stylesheets/singularitygs/api/_calc.scss +218 -0
  8. data/stylesheets/singularitygs/api/_float.scss +87 -147
  9. data/stylesheets/singularitygs/api/_isolation.scss +98 -131
  10. data/stylesheets/singularitygs/grids/_add.scss +34 -16
  11. data/stylesheets/singularitygs/grids/_find.scss +6 -8
  12. data/stylesheets/singularitygs/gutter-styles/_add.scss +39 -16
  13. data/stylesheets/singularitygs/gutter-styles/_find.scss +10 -5
  14. data/stylesheets/singularitygs/gutter-styles/_helpers.scss +6 -10
  15. data/stylesheets/singularitygs/gutters/_add.scss +37 -14
  16. data/stylesheets/singularitygs/gutters/_find.scss +9 -5
  17. data/stylesheets/singularitygs/helpers/_background-grid.scss +196 -219
  18. data/stylesheets/singularitygs/helpers/_box-sizing.scss +17 -32
  19. data/stylesheets/singularitygs/helpers/_clearfix.scss +10 -95
  20. data/stylesheets/singularitygs/helpers/_columns.scss +4 -3
  21. data/stylesheets/singularitygs/helpers/_directions.scss +6 -0
  22. data/stylesheets/singularitygs/helpers/_find.scss +112 -65
  23. data/stylesheets/singularitygs/helpers/_layout.scss +107 -10
  24. data/stylesheets/singularitygs/helpers/_sass-lists.scss +1 -1
  25. data/stylesheets/singularitygs/helpers/_settings.scss +60 -0
  26. data/stylesheets/singularitygs/helpers/_sort.scss +56 -0
  27. data/stylesheets/singularitygs/helpers/_span-shared.scss +20 -2
  28. data/stylesheets/singularitygs/language/_parse-add.scss +53 -9
  29. data/stylesheets/singularitygs/language/_parse-list.scss +3 -3
  30. data/stylesheets/singularitygs/math/_columns.scss +9 -7
  31. data/stylesheets/singularitygs/math/_context.scss +1 -1
  32. data/stylesheets/singularitygs/math/_gutters.scss +2 -1
  33. metadata +52 -72
  34. data/templates/box-sizing/behaviors/box-sizing/boxsizing.htc +0 -399
  35. data/templates/box-sizing/behaviors/box-sizing/boxsizing.php +0 -23
  36. data/templates/box-sizing/manifest.rb +0 -4
  37. data/templates/demos/demo-float.scss +0 -159
  38. data/templates/demos/demo-isolation.scss +0 -132
  39. data/templates/demos/float.html.erb +0 -18
  40. data/templates/demos/isolation.html.erb +0 -18
  41. data/templates/demos/manifest.rb +0 -17
  42. data/templates/grid-toggle/grid.js +0 -16
  43. data/templates/grid-toggle/grid.min.js +0 -2
  44. data/templates/grid-toggle/manifest.rb +0 -22
  45. data/templates/project/grid.js +0 -16
  46. data/templates/project/grid.min.js +0 -2
  47. data/templates/project/manifest.rb +0 -23
  48. data/templates/project/partials/_base.scss +0 -4
  49. data/templates/project/style.scss +0 -15
@@ -1,159 +0,0 @@
1
- @import "singularitygs";
2
-
3
- $break: 700px;
4
- $break2: 900px;
5
- $break3: 1200px;
6
-
7
- $grids: add-grid(2);
8
- $grids: add-grid(2 8 2 1 at $break);
9
- $grids: add-grid(12 at $break2);
10
- $grids: add-grid(1 3 5 7 9 at $break3);
11
- $gutters: add-gutter(1/3);
12
- // $gutters: add-gutter(.25 at $break);
13
- $output: 'float';
14
-
15
- body {
16
- margin: 0;
17
- padding: 0;
18
- @include background-grid;
19
- }
20
-
21
- div {
22
- height: 50px;
23
- }
24
-
25
- #foo {
26
- background: red;
27
- height: 30px;
28
- @include grid-span(1, 2);
29
-
30
- @include breakpoint($break) {
31
- @include grid-span(1, 4);
32
- clear: none;
33
- }
34
-
35
- @include breakpoint($break2) {
36
- @include grid-span(2, 11);
37
- }
38
-
39
- @include breakpoint($break3) {
40
- @include grid-span(1, 3);
41
- @include push(2, 1);
42
- }
43
- }
44
-
45
- #bar {
46
- background: green;
47
- height: 20px;
48
- @include grid-span(1, 1);
49
- clear: left;
50
-
51
- @include breakpoint($break) {
52
- @include grid-span(2, 2);
53
- @include push(1, 1);
54
- clear: none;
55
- }
56
-
57
- @include breakpoint($break2) {
58
- @include grid-span(8, 3);
59
- clear: none;
60
- }
61
-
62
- @include breakpoint($break3) {
63
- @include grid-span(1, 1);
64
- @include pull(3, 1);
65
- }
66
-
67
- }
68
-
69
- #baz {
70
- background: purple;
71
- @include grid-span(1, 1);
72
-
73
- @include breakpoint($break) {
74
- // This piece's position is very wonky in Float, and as such we need to do some custom silliness to place it. It winds up looking similar to Isolation positioning, but in revers. Fortunately, because we have functions like column-span, gutter-span, and grid-span, we're able to build this fairly easily and have the heavy lifting of the math done for us.
75
- width: column-span(1, 1);
76
- float: right;
77
- margin-left: -100%;
78
- margin-right: grid-span(2, 2) + gutter-span();
79
- clear: none;
80
- }
81
-
82
- @include breakpoint($break2) {
83
- margin-right: 0;
84
- @include grid-span(2, 1);
85
- @include pull(10, 1);
86
- clear: none;
87
- }
88
-
89
- @include breakpoint($break3) {
90
- @include grid-span(1, 5);
91
- }
92
- }
93
-
94
- #qux {
95
- background: yellow;
96
- @include grid-span(1, 1);
97
- clear: both;
98
-
99
- @include breakpoint($break) {
100
- @include grid-span(3, 2);
101
- // clear: left;
102
- }
103
-
104
- @include breakpoint($break2) {
105
- @include grid-span(3, 4);
106
- clear: both;
107
- @include push(3, 1);
108
- }
109
-
110
- @include breakpoint($break3) {
111
- @include grid-span(1, 2);
112
- clear: none;
113
- @include pull(2, 2);
114
- }
115
- }
116
-
117
- #waldo {
118
- background: blue;
119
- height: 70px;
120
-
121
- @include grid-span(1, 2);
122
-
123
- @include breakpoint($break) {
124
- @include grid-span(1, 1);
125
- clear: left;
126
- }
127
-
128
- @include breakpoint($break2) {
129
- @include grid-span(3, 1);
130
- @include pull(6, 1);
131
- }
132
-
133
- @include breakpoint($break3) {
134
- @include grid-span(1, 4);
135
- clear: none;
136
- margin-right: -100%;
137
- margin-left: 0;
138
- }
139
- }
140
-
141
- #garfield {
142
- background: orange;
143
-
144
- @include grid-span(2, 1);
145
-
146
- @include breakpoint($break) {
147
- @include float-span(4, 1);
148
- }
149
-
150
- @include breakpoint($break2) {
151
- @include grid-span(5, 8);
152
- }
153
-
154
- @include breakpoint($break3) {
155
- @include grid-span(2, 3);
156
- clear: both;
157
- @include push(2, 1);
158
- }
159
- }
@@ -1,132 +0,0 @@
1
- @import "singularitygs";
2
-
3
- $break: 700px;
4
- $break2: 900px;
5
- $break3: 1200px;
6
-
7
- $grids: add-grid(2);
8
- $grids: add-grid(2 8 2 1 at $break);
9
- $grids: add-grid(12 at $break2);
10
- $grids: add-grid(1 3 5 7 9 at $break3);
11
- $gutters: add-gutter(1/3);
12
- // $gutters: add-gutter(.25 at $break);
13
- // $output: 'float';
14
-
15
- body {
16
- margin: 0;
17
- padding: 0;
18
- @include background-grid;
19
- }
20
-
21
- div {
22
- height: 50px;
23
- }
24
-
25
- #foo {
26
- background: red;
27
- height: 30px;
28
- @include grid-span(1, 2);
29
-
30
- @include breakpoint($break) {
31
- @include grid-span(1, 4);
32
- }
33
-
34
- @include breakpoint($break2) {
35
- @include grid-span(2, 11);
36
- }
37
-
38
- @include breakpoint($break3) {
39
- @include grid-span(1, 3);
40
- }
41
- }
42
-
43
- #bar {
44
- background: green;
45
- height: 20px;
46
- @include grid-span(1, 1);
47
-
48
- @include breakpoint($break) {
49
- @include grid-span(2, 2);
50
- }
51
-
52
- @include breakpoint($break2) {
53
- @include grid-span(8, 3)
54
- }
55
-
56
- @include breakpoint($break3) {
57
- @include grid-span(1, 1);
58
- }
59
-
60
- }
61
-
62
- #baz {
63
- background: purple;
64
- @include grid-span(1, 1, $options: 'both');
65
-
66
- @include breakpoint($break) {
67
- @include grid-span(1, 1);
68
- }
69
-
70
- @include breakpoint($break2) {
71
- @include grid-span(2, 1);
72
- }
73
-
74
- @include breakpoint($break3) {
75
- @include grid-span(1, 5);
76
- }
77
- }
78
-
79
- #qux {
80
- background: yellow;
81
-
82
- @include grid-span(1, 1, $options: 'left');
83
-
84
- @include breakpoint($break) {
85
- @include grid-span(3, 2, $options: 'left');
86
- }
87
-
88
- @include breakpoint($break2) {
89
- @include grid-span(3, 4, $options: 'both');
90
- }
91
-
92
- @include breakpoint($break3) {
93
- @include grid-span(1, 2);
94
- }
95
- }
96
-
97
- #waldo {
98
- background: blue;
99
- height: 70px;
100
-
101
- @include grid-span(1, 2, $options: 'right');
102
-
103
- @include breakpoint($break) {
104
- @include grid-span(1, 1, $options: 'left');
105
- }
106
-
107
- @include breakpoint($break2) {
108
- @include grid-span(3, 1, $options: 'right');
109
- }
110
-
111
- @include breakpoint($break3) {
112
- @include grid-span(1, 4);
113
- }
114
- }
115
-
116
- #garfield {
117
- background: orange;
118
-
119
- @include grid-span(2, 1, $options: 'left');
120
-
121
- @include breakpoint($break) {
122
- @include isolation-span(4, 1, 'both');
123
- }
124
-
125
- @include breakpoint($break2) {
126
- @include grid-span(5, 8);
127
- }
128
-
129
- @include breakpoint($break3) {
130
- @include grid-span(2, 3, $options: 'both');
131
- }
132
- }
@@ -1,18 +0,0 @@
1
- <% project_name = File.basename(Compass.configuration.project_path) %><% project_js = Compass.configuration.javascripts_dir %><% project_css = Compass.configuration.css_dir %>
2
- <html>
3
- <head>
4
- <title>Singularity HTML Demo</title>
5
- <link rel="stylesheet" href="<%= project_css %>/demo-float.css">
6
- </head>
7
- <body>
8
- <div id="page">
9
- <div id="foo"></div>
10
- <div id="bar"></div>
11
- <div id="baz"></div>
12
- <div id="qux"></div>
13
- <div id="waldo"></div>
14
- <div id="garfield"></div>
15
- </div>
16
-
17
- </body>
18
- </html>
@@ -1,18 +0,0 @@
1
- <% project_name = File.basename(Compass.configuration.project_path) %><% project_js = Compass.configuration.javascripts_dir %><% project_css = Compass.configuration.css_dir %>
2
- <html>
3
- <head>
4
- <title>Singularity HTML Demo</title>
5
- <link rel="stylesheet" href="<%= project_css %>/demo-isolation.css">
6
- </head>
7
- <body>
8
- <div id="page">
9
- <div id="foo"></div>
10
- <div id="bar"></div>
11
- <div id="baz"></div>
12
- <div id="qux"></div>
13
- <div id="waldo"></div>
14
- <div id="garfield"></div>
15
- </div>
16
-
17
- </body>
18
- </html>
@@ -1,17 +0,0 @@
1
- description "Singularity Demos"
2
-
3
- discover :stylesheets
4
- file 'isolation.html.erb', :to => 'isolation.html', :erb => true
5
- file 'float.html.erb', :to => 'float.html', :erb => true
6
-
7
- help %Q{
8
- For help with Singularity, please ask a question on Stack Overflow (http://stackoverflow.com/questions/ask) tagged with "singularitygs".
9
-
10
- To file an issue with Singularity, please use our GitHub Issue Queue (https://github.com/Team-Sass/Singularity/issues).
11
- }
12
-
13
- welcome_message %Q{
14
- Welcome to the Singularity Demo!
15
-
16
- These two sites, with their accompanying Sass, should give you a working example as to how Singularity works with its two out-of-the-box output styles.
17
- }
@@ -1,16 +0,0 @@
1
- (function() {
2
- window.onload = function() {
3
- var body = document.body;
4
- body.onkeypress = function(e) {
5
- if (e.keyCode == 103 || e.charCode == 103) {
6
- var dev = body.getAttribute('data-development-grid');
7
- if (dev === null || dev == 'hide') {
8
- body.setAttribute('data-development-grid', 'show');
9
- }
10
- else {
11
- body.setAttribute('data-development-grid', 'hide');
12
- }
13
- }
14
- }
15
- }
16
- })();
@@ -1,2 +0,0 @@
1
- /*Grid Toggle*/
2
- window.onload=function(){var b=document.body;b.onkeypress=function(a){if(103==a.keyCode||103==a.charCode)a=b.getAttribute("data-development-grid"),null===a||"hide"==a?b.setAttribute("data-development-grid","show"):b.setAttribute("data-development-grid","hide")}};
@@ -1,22 +0,0 @@
1
- description "Singularity Grid Toggle"
2
-
3
- discover :javascripts
4
-
5
- help %Q{
6
- For help with Singularity, please ask a question on Stack Overflow (http://stackoverflow.com/questions/ask) tagged with "singularitygs".
7
-
8
- To file an issue with Singularity, please use our GitHub Issue Queue (https://github.com/Team-Sass/Singularity/issues).
9
- }
10
-
11
- welcome_message %Q{
12
- Welcome to Singularity! Grids Without Limits.
13
-
14
- See our Getting Started guide at http://singularity.gs to get started and for full documentation.
15
-
16
- If you need support for IE6/7, you should install the Border Box polyfill. Simply type `compass install singularitygs/box-sizing` in your command line from the root of your project folder (where config.rb is).
17
-
18
-
19
- For help with Singularity, please ask a question on Stack Overflow (http://stackoverflow.com/questions/ask) tagged with "singularitygs".
20
-
21
- To file an issue with Singularity, please use our GitHub Issue Queue (https://github.com/Team-Sass/Singularity/issues).
22
- }
@@ -1,16 +0,0 @@
1
- (function() {
2
- window.onload = function() {
3
- var body = document.body;
4
- body.onkeypress = function(e) {
5
- if (e.keyCode == 103 || e.charCode == 103) {
6
- var dev = body.getAttribute('data-development-grid');
7
- if (dev === null || dev == 'hide') {
8
- body.setAttribute('data-development-grid', 'show');
9
- }
10
- else {
11
- body.setAttribute('data-development-grid', 'hide');
12
- }
13
- }
14
- }
15
- }
16
- })();
@@ -1,2 +0,0 @@
1
- /*Grid Toggle*/
2
- window.onload=function(){var b=document.body;b.onkeypress=function(a){if(103==a.keyCode||103==a.charCode)a=b.getAttribute("data-development-grid"),null===a||"hide"==a?b.setAttribute("data-development-grid","show"):b.setAttribute("data-development-grid","hide")}};
@@ -1,23 +0,0 @@
1
- description "Singularity Install"
2
-
3
- discover :stylesheets
4
- discover :javascripts
5
-
6
- help %Q{
7
- For help with Singularity, please ask a question on Stack Overflow (http://stackoverflow.com/questions/ask) tagged with "singularitygs".
8
-
9
- To file an issue with Singularity, please use our GitHub Issue Queue (https://github.com/Team-Sass/Singularity/issues).
10
- }
11
-
12
- welcome_message %Q{
13
- Welcome to Singularity! Grids Without Limits.
14
-
15
- See our Getting Started guide at http://singularity.gs to get started and for full documentation.
16
-
17
- If you need support for IE6/7, you should install the Border Box polyfill. Simply type `compass install singularitygs/box-sizing` in your command line from the root of your project folder (where config.rb is).
18
-
19
-
20
- For help with Singularity, please ask a question on Stack Overflow (http://stackoverflow.com/questions/ask) tagged with "singularitygs".
21
-
22
- To file an issue with Singularity, please use our GitHub Issue Queue (https://github.com/Team-Sass/Singularity/issues).
23
- }
@@ -1,4 +0,0 @@
1
- //////////////////////////////
2
- // Imports
3
- //////////////////////////////
4
- @import "singularitygs";
@@ -1,15 +0,0 @@
1
- //////////////////////////////
2
- // Set legacy support
3
- //
4
- // If you need support for IE6 or IE7, you should install the Box Sizing polyfill.
5
- // In your project's folder from the command line, type the following:
6
- // compass install singularitygs/box-sizing
7
- //////////////////////////////
8
- $legacy-support-for-ie6: false;
9
- $legacy-support-for-ie7: false;
10
- $legacy-support-for-mozilla: false;
11
-
12
- //////////////////////////////
13
- // Import Base
14
- //////////////////////////////
15
- @import "partials/base";