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
|
-
|
|
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
|
-
.
|
|
2
|
-
background: url(/
|
|
3
|
-
|
|
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
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
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
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
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.
|
|
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
|