Skip to content

Commit 2229b17

Browse files
author
Matthew Stone
committed
initial troubleshooting
1 parent ba3e2e3 commit 2229b17

File tree

2 files changed

+168
-1
lines changed

2 files changed

+168
-1
lines changed

‎_sass/z_boilerplate/_plumber.scss‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
// PLUMBER - Easy baseline grids with SASS
2+
// https://jamonserrano.github.io/plumber-sass
3+
// Copyright 2016 Viktor Honti
4+
// MIT License
5+
6+
@mixin plumber(
7+
$font-size: null,
8+
$line-height: null,
9+
$leading-top: null,
10+
$leading-bottom: null,
11+
$grid-height: null,
12+
$baseline: null,
13+
$use-baseline-origin: null
14+
) {
15+
// *** VALIDATE PARAMETERS ***
16+
// font-size
17+
@if not $font-size {
18+
$font-size: -plumber-get-default(font-size);
19+
}
20+
@if not unitless($font-size) or $font-size <= 0 {
21+
@error '$font-size parameter must be a positive unitless number, got #{$font-size} instead';
22+
}
23+
24+
// line-height
25+
@if not $line-height {
26+
$line-height: -plumber-get-default(line-height);
27+
}
28+
@if not unitless($line-height) or $line-height != round($line-height) or $line-height < 1 {
29+
@error '$line-height parameter must be a positive unitless integer, got #{$line-height} instead';
30+
}
31+
32+
// leading-top
33+
@if not $leading-top {
34+
$leading-top: -plumber-get-default(leading-top);
35+
}
36+
@if not -plumber-is-integer($leading-top) {
37+
@error '$leading-top parameter must be a non-negative integer, got #{$leading-top} instead.';
38+
}
39+
40+
// leading-bottom
41+
@if not $leading-bottom {
42+
$leading-bottom: -plumber-get-default(leading-bottom);
43+
}
44+
@if not -plumber-is-integer($leading-bottom) {
45+
@error '$leading-bottom parameter must be a non-negative integer, got #{$leading-bottom} instead';
46+
}
47+
48+
// grid-height
49+
@if not $grid-height {
50+
$grid-height: -plumber-get-default(grid-height);
51+
}
52+
@if unitless($grid-height) or $grid-height < 0 {
53+
@error '$grid-height parameter must be a positive unit, got #{$grid-height} instead';
54+
}
55+
56+
// baseline
57+
@if not $baseline {
58+
$baseline: -plumber-get-default(baseline);
59+
}
60+
@if not $baseline {
61+
@error '$baseline must be passed as a parameter or defined in defaults';
62+
} @else if not (unitless($baseline) and $baseline >= 0 and $baseline < 1) {
63+
@error '$baseline parameter must be a unitless fraction between 0 and 1, got #{$baseline} instead';
64+
}
65+
66+
// use-baseline-origin
67+
@if not $use-baseline-origin {
68+
$use-baseline-origin: -plumber-get-default(use-baseline-origin);
69+
}
70+
@if type-of($use-baseline-origin) != bool {
71+
@error '$use-baseline-origin parameter must be Boolean, got #{$use-baseline-origin} instead';
72+
}
73+
74+
// *** CALCULATE BASELINE CORRECTION ***
75+
// the distance of the original baseline from the bottom
76+
$baseline-from-bottom: ($line-height - $font-size) / 2 + ($font-size * $baseline);
77+
// the corrected baseline will be on the nearest gridline
78+
$corrected-baseline: round($baseline-from-bottom);
79+
// the difference between the original and the corrected baseline
80+
$baseline-difference: $corrected-baseline - $baseline-from-bottom;
81+
82+
// if baseline origin is used for leadings substract the distance of the baseline from the edges
83+
@if $use-baseline-origin == true {
84+
$leading-top: $leading-top - ($line-height - $corrected-baseline);
85+
$leading-bottom: $leading-bottom - $corrected-baseline;
86+
}
87+
88+
// *** CALCULATE FONT SIZE AND LINE HEIGHT
89+
$font-size: $font-size * $grid-height;
90+
$line-height: $line-height * $grid-height;
91+
92+
// *** CALCULATE MARGINS AND PADDINGS ***
93+
$padding-top: null;
94+
$margin-top: null;
95+
$margin-bottom: null;
96+
$padding-bottom: null;
97+
98+
@if $baseline-difference < 0 {
99+
// add top leading
100+
$margin-top: $leading-top * $grid-height;
101+
// push the baseline down to the next gridline
102+
$padding-top: - $baseline-difference * $grid-height;
103+
// add the remaining distance to reach the next gridline
104+
$padding-bottom: (1 + $baseline-difference) * $grid-height;
105+
// add bottom leading and remove the 1 excess grid height that comes from pushing down
106+
$margin-bottom: ($leading-bottom - 1) * $grid-height;
107+
} @else {
108+
// add top leading and remove the 1 excess grid height that comes from pulling up
109+
$margin-top: ($leading-top - 1) * $grid-height;
110+
// pull the baseline up to the previous gridline
111+
$padding-top: (1 - $baseline-difference) * $grid-height;
112+
// add the remaining distance to reach the next gridline
113+
$padding-bottom: $baseline-difference * $grid-height;
114+
// add bottom leading
115+
$margin-bottom: $leading-bottom * $grid-height;
116+
}
117+
118+
// round pixel values to decrease browser inconsistencies
119+
@if unit($grid-height) == "px" {
120+
$line-height: -plumber-round($line-height);
121+
$margin-top: -plumber-round($margin-top);
122+
$padding-top: -plumber-round($padding-top);
123+
$padding-bottom: -plumber-round($padding-bottom);
124+
$margin-bottom: -plumber-round($margin-bottom);
125+
}
126+
127+
// *** CSS OUTPUT ***
128+
font-size: $font-size;
129+
line-height: $line-height;
130+
margin-top: $margin-top;
131+
padding-top: $padding-top;
132+
padding-bottom: $padding-bottom;
133+
margin-bottom: $margin-bottom;
134+
}
135+
136+
// *** DEFAULTS ***
137+
// Do not change it here, use the plumber-set-defaults mixin instead!
138+
$-plumber-defaults: (
139+
font-size: 2,
140+
line-height: 3,
141+
leading-top: 0,
142+
leading-bottom: 0,
143+
grid-height: 1rem,
144+
baseline: null,
145+
use-baseline-origin: false,
146+
) !default;
147+
148+
// Merge provided settings into the defaults map
149+
@mixin plumber-set-defaults($defaults...) {
150+
$-plumber-defaults: map-merge($-plumber-defaults, keywords($defaults)) !global;
151+
}
152+
153+
// Get a default value
154+
@function -plumber-get-default($key) {
155+
@return map-get($-plumber-defaults, $key);
156+
}
157+
158+
// Check if a value is a non-negative integer
159+
@function -plumber-is-integer($value) {
160+
@return (unitless($value) and $value == round($value));
161+
}
162+
163+
// Round value to the nearest quarter pixel
164+
// This provides reasonable precision and prevents grid creep (by fractions adding up) in most browsers
165+
@function -plumber-round($value) {
166+
@return round($value * 4) / 4;
167+
}

‎assets/css/main.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77

88
// import vendor files
99
@import
10-
'z_boilerplate/vendor/plumber-sass/plumber';
10+
'z_boilerplate/plumber';
1111

1212

1313
// import files from utils folder

0 commit comments

Comments
 (0)