stipe 0.0.3.8 → 0.0.3.9

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/readme.md CHANGED
@@ -16,6 +16,10 @@ Stipe is a Compass Extension, so Compass is set as a depdency. You will need to
16
16
  For [reasons explained](/Anotheruiguy/toadstool/blob/master/doc-src/exploited-bug.md) please continue using the alpha gem and upgrading to Sass 3.2 will break Toadstool and Stipe.
17
17
 
18
18
  # Stipe Changelog
19
+ ## 0.0.3.9
20
+ * Addressed no-boxsizing calculation in grid to account for a border on a single side
21
+ * Added support for a grid debug view
22
+
19
23
  ## 0.0.3.8
20
24
  * Addressed bugs with new Flexbox spec ... yeah, I did it wrong ;(
21
25
 
@@ -0,0 +1 @@
1
+ @import "lib/grid_background";
@@ -6,15 +6,16 @@
6
6
  // All values are entered as integers and conversion math is done in the mixin.
7
7
  // Do not enter combination values such as '36em'
8
8
 
9
- @mixin grid($col_count, $grid_child, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_uom, $col_gutter, $grid_type, $grid_align, $grid_context, $border_color) {
9
+ $border_place: '';
10
+ @mixin grid($col_count, $grid_child, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_uom, $col_gutter, $grid_type, $grid_align, $grid_context, $border_color, $border_place: $border_place) {
10
11
 
11
12
  @if $grid_type == 12 {
12
13
  $col_width: 80 - $col_gutter;
13
- @include the_grid($col_count, $col_width, $grid_uom, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align, $grid_context, $border_color);
14
+ @include the_grid($col_count, $col_width, $grid_uom, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align, $grid_context, $border_color, $border_place);
14
15
  }
15
16
  @else if $grid_type == 16 {
16
17
  $col_width: 60 - $col_gutter;
17
- @include the_grid($col_count, $col_width, $grid_uom, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align, $grid_context, $border_color);
18
+ @include the_grid($col_count, $col_width, $grid_uom, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align, $grid_context, $border_color, $border_place);
18
19
  }
19
20
  }
20
21
 
@@ -1,10 +1,3 @@
1
- .grid_12_col_background {
2
- background: url(/axle/images/12_col.gif);
3
- margin-bottom: 20px;
4
- float: left;
5
- }
6
-
7
- .grid_12_col_background_shift {
8
- @extend %grid_12_col_background;
9
- background-position: -10px 0 !important;
10
- }
1
+ .styleguide_article {
2
+ background-image: url(data:image/gif;base64,R0lGODlhUAABAIAAAP/////l5SwAAAAAUAABAAACC4SPocvtD6NsqIICADs=);
3
+ }
@@ -1,96 +1,146 @@
1
1
  // 'the_grid' determines width by taking column count, calculates gutter count
2
2
  // default setting for grid is ``em`` this is specified in ``_config.scss``
3
3
 
4
- @mixin the_grid($col_count, $col_width, $grid_uom, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align, $grid_context, $border_color) {
5
-
6
- //determines full col width with gutters
7
- $col_gutter_width: ($col_count - 1) * $col_gutter + ($col_count * $col_width);
8
-
9
- // determines width of contextual grid block for calculating percentages
10
- $grid_context_width: $grid_context * 80;
11
-
12
- $grid_padding_lr: $grid_padding_l + $grid_padding_r;
13
-
14
- @include grid_placement($grid_align, $grid_uom, $grid_child, $grid_context_width, $margin: $col_gutter / 2);
15
-
16
- // fallback for unsupported browsers
17
- $grid_width_fallback: $col_gutter_width - (($grid_padding_l + $grid_padding_r) + ($grid_border * 2));
18
-
19
- @if $grid_uom == em {
20
- @if $grid_border > 0 {
21
- border: #{$grid_border}px $standard_border_style $border_color;
22
- }
23
-
24
- @if $grid_padding_lr > 0 {
25
- padding: {
26
- left: em($grid_padding_l);
27
- right: em($grid_padding_r);
28
- }
29
- }
30
- @if $grid_padding_tb > 0 {
31
- padding: {
32
- top: em($grid_padding_tb);
33
- bottom: em($grid_padding_tb);
34
- }
35
- }
36
- $grid_width: em($col_gutter_width);
37
- width: $grid_width;
38
-
39
-
40
- @if $grid_width_fallback < $col_gutter_width {
41
- .no-boxsizing & {
42
- width: #{$grid_width_fallback}px;
43
- }
44
- }
45
- }
4
+ @mixin the_grid($col_count, $col_width, $grid_uom, $grid_padding_l, $grid_padding_r, $grid_padding_tb, $grid_border, $grid_child, $col_gutter, $grid_align, $grid_context, $border_color, $border_place) {
5
+
6
+ //determines full col width with gutters
7
+ $col_gutter_width: ($col_count - 1) * $col_gutter + ($col_count * $col_width);
8
+
9
+ // determines width of contextual grid block for calculating percentages
10
+ $grid_context_width: $grid_context * 80;
11
+
12
+ $grid_padding_lr: $grid_padding_l + $grid_padding_r;
13
+
14
+ @include grid_placement($grid_align, $grid_uom, $grid_child, $grid_context_width, $margin: $col_gutter / 2);
15
+
16
+ // fallback for unsupported browsers
17
+ $grid_width_fallback: $col_gutter_width - (($grid_padding_l + $grid_padding_r) + ($grid_border * 2));
18
+
19
+
20
+
21
+ @if $grid_uom == em {
22
+ @if $grid_border > 0 {
23
+
24
+ @if $border_place != '' {
25
+ border-#{$border_place}-width: #{$grid_border}px;
26
+ }
27
+ @else {
28
+ border-width: #{$grid_border}px;
29
+ }
30
+ border-color: $border_color;
31
+ border-style: $standard_border_style;
32
+ }
33
+
34
+ @if $grid_padding_lr > 0 {
35
+ padding: {
36
+ left: em($grid_padding_l);
37
+ right: em($grid_padding_r);
38
+ }
39
+ }
40
+ @if $grid_padding_tb > 0 {
41
+ padding: {
42
+ top: em($grid_padding_tb);
43
+ bottom: em($grid_padding_tb);
44
+ }
45
+ }
46
+ $grid_width: em($col_gutter_width);
47
+ width: $grid_width;
48
+
49
+
50
+ @if $grid_width_fallback < $col_gutter_width {
51
+ @if $border_place != '' {
52
+ $grid_width_fallback: $grid_width_fallback + $grid_border;
53
+ .no-boxsizing & {
54
+ width: #{$grid_width_fallback}px;
55
+ }
56
+ }
57
+ @else {
58
+ .no-boxsizing & {
59
+ width: #{$grid_width_fallback}px;
60
+ }
61
+ }
62
+ }
63
+ }
46
64
 
47
- @else if $grid_uom == percent {
48
- @if $grid_border > 0 {
49
- border: #{$grid_border}px $standard_border_style $border_color;
50
- }
51
-
52
- $grid_width: $col_gutter_width / $grid_context_width * 100%;
53
- @if $grid_padding_lr > 0 {
54
- padding: {
55
- //left: $grid_padding_lr / $grid_960;
56
- left: $grid_padding_l / $grid_context_width * 100%;
57
- right: $grid_padding_r / $grid_context_width * 100%;
58
- }
59
- }
60
- @if $grid_padding_tb > 0 {
61
- padding: {
62
- top: $grid_padding_tb / $grid_context_width * 100%;
63
- bottom: $grid_padding_tb / $grid_context_width * 100%;
64
- }
65
- }
66
- width: $grid_width;
67
-
68
- @if $grid_width_fallback < $col_gutter_width {
69
- .no-boxsizing & {
70
- width: $grid_width_fallback / $grid_context_width * 100%;
71
- }
72
- }
73
- }
74
- @else if $grid_uom == combo {
75
- $grid_width: $col_gutter_width / $grid_context_width * 100%;
76
- @if $grid_padding_lr > 0 {
77
- padding: {
78
- left: em($grid_padding_l);
79
- right: em($grid_padding_r);
80
- }
81
- }
82
- @if $grid_padding_tb > 0 {
83
- padding: {
84
- top: em($grid_padding_tb);
85
- bottom: em($grid_padding_tb);
86
- }
87
- }
88
- width: $grid_width;
89
-
90
- @if $grid_width_fallback < $col_gutter_width {
91
- .no-boxsizing & {
92
- width: $grid_width_fallback / $grid_context_width * 100%;
93
- }
94
- }
95
- }
65
+ @else if $grid_uom == percent {
66
+ @if $grid_border > 0 {
67
+
68
+ @if $border_place != '' {
69
+ border-#{$border_place}-width: #{$grid_border}px;
70
+ }
71
+ @else {
72
+ border-width: #{$grid_border}px;
73
+ }
74
+ border-color: $border_color;
75
+ border-style: $standard_border_style;
76
+ }
77
+
78
+ $grid_width: $col_gutter_width / $grid_context_width * 100%;
79
+ @if $grid_padding_lr > 0 {
80
+ padding: {
81
+ left: $grid_padding_l / $grid_context_width * 100%;
82
+ right: $grid_padding_r / $grid_context_width * 100%;
83
+ }
84
+ }
85
+ @if $grid_padding_tb > 0 {
86
+ padding: {
87
+ top: $grid_padding_tb / $grid_context_width * 100%;
88
+ bottom: $grid_padding_tb / $grid_context_width * 100%;
89
+ }
90
+ }
91
+ width: $grid_width;
92
+
93
+ @if $grid_width_fallback < $col_gutter_width {
94
+ @if $border_place != '' {
95
+ $grid_width_fallback: $grid_width_fallback + $grid_border;
96
+ .no-boxsizing & {
97
+ width: #{$grid_width_fallback}px;
98
+ }
99
+ }
100
+ @else {
101
+ .no-boxsizing & {
102
+ width: #{$grid_width_fallback}px;
103
+ }
104
+ }
105
+ }
106
+ }
107
+
108
+ // keeping this around just in case, but I really hate this concept of support.
109
+ // much better managed with the percentage grid system taking into account context
110
+ // this was a bad idea anyway.
111
+
112
+ // @else if $grid_uom == combo {
113
+ // @if $grid_border > 0 {
114
+ //
115
+ // @if $border_place != '' {
116
+ // border-#{$border_place}-width: #{$grid_border}px;
117
+ // }
118
+ // @else {
119
+ // border-width: #{$grid_border}px;
120
+ // }
121
+ // border-color: $border_color;
122
+ // border-style: $standard_border_style;
123
+ // }
124
+ //
125
+ // $grid_width: $col_gutter_width / $grid_context_width * 100%;
126
+ // @if $grid_padding_lr > 0 {
127
+ // padding: {
128
+ // left: em($grid_padding_l);
129
+ // right: em($grid_padding_r);
130
+ // }
131
+ // }
132
+ // @if $grid_padding_tb > 0 {
133
+ // padding: {
134
+ // top: em($grid_padding_tb);
135
+ // bottom: em($grid_padding_tb);
136
+ // }
137
+ // }
138
+ // width: $grid_width;
139
+ //
140
+ // @if $grid_width_fallback < $col_gutter_width {
141
+ // .no-boxsizing & {
142
+ // width: $grid_width_fallback / $grid_context_width * 100%;
143
+ // }
144
+ // }
145
+ // }
96
146
  }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: stipe
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.3.8
4
+ version: 0.0.3.9
5
5
  prerelease:
6
6
  platform: ruby
7
7
  authors:
@@ -78,6 +78,7 @@ files:
78
78
  - stylesheets/stipe/grid/lib/_grid_margin.scss
79
79
  - stylesheets/stipe/grid/lib/_push_logic.scss
80
80
  - stylesheets/stipe/grid/lib/_the_grid.scss
81
+ - stylesheets/stipe/grid/_debug.scss
81
82
  - stylesheets/stipe/grid/_extends.scss
82
83
  - stylesheets/stipe/_grid.scss
83
84
  - stylesheets/stipe/toadstool/ui_patterns/_color_grid.scss