Skip to content

Commit 80da8f9

Browse files
grayghostvisualsgrayghostvisuals
committed
Version 1.1.3. px fallback for bottom margin with headings.
1 parent f9440e3 commit 80da8f9

4 files changed

Lines changed: 61 additions & 85 deletions

File tree

‎bower.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{
22
"name": "typeplate",
3-
"version": "1.1.2",
3+
"version": "1.1.3",
44
"author": "Dennis Gaebel and Zachary Kain",
5-
"homepage": "https://github.com/typeplate/typeplate-bower/",
5+
"homepage": "https://github.com/typeplate/typeplate-bower",
66
"repository": {
77
"type": "git",
88
"url": "git://github.com/typeplate/typeplate-bower.git"

‎css/typeplate.css‎

Lines changed: 35 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,12 @@
1-
/*
2-
*
3-
*.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
4-
*
5-
* . '|| .
6-
*.||. .... ... ... ... .... ... ... || .... .||. ....
7-
* || '|. | ||' || .|...|| ||' || || '' .|| || .|...||
8-
* || '|.| || | || || | || .|' || || ||
9-
* '|.' '| ||...' '|...' ||...' .||. '|..'|' '|.' '|...'
10-
* .. | || ||
11-
* '' '''' ''''
12-
*
13-
* URL ............ http://typeplate.com
14-
* VERSION ........ 1.1.2
15-
* Github ......... https://github.com/typeplate/typeplate.github.io
16-
* AUTHORS ........ Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
17-
* LICENSE ........ Creative Commmons Attribution 3.0
18-
* LICENSE URL .... http://creativecommons.org/licenses/by/3.0
19-
*
20-
* .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
21-
*
22-
*/
23-
1+
/*!
2+
TYPEPLATE
3+
URL ........... http://typeplate.com
4+
VERSION ....... 1.1.3
5+
Github ........ https://github.com/typeplate/bower
6+
AUTHORS ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
7+
LICENSE ....... Creative Commmons Attribution 3.0 (http://creativecommons.org/licenses/by/3.0)
8+
LICENSE URL ... https://github.com/typeplate/bower/blob/master/license.txt
9+
*/
2410

2511

2612
/**
@@ -177,76 +163,84 @@ h6 {
177163
*
178164
* 18, 21, 24, 36, 48, 60, 72, 90, 117
179165
*
180-
*/
166+
*
167+
* Explanation:
168+
* margin-bottom = ( base font-size * base line-height ) / current font-size
169+
*
170+
* Makes sure that there's always one unit of measure's worth of space between shit
171+
* for headings. This is better than spacing using line-height because of the wrapping issue where we have
172+
* wrapping onto 2 lines with a high line-height.
173+
*/
181174

182175
.tera {
183176
font-size: 117px;
184177
font-size: 6.5rem; /* 117 / 18 = 6.5 */
185-
margin-bottom: 0.25385em;
178+
margin-bottom: 0.25385px;
179+
margin-bottom: 0.25385rem;
186180
}
187181

188182
.giga {
189183
font-size: 90px;
190184
font-size: 5rem; /* 90 / 18 = 5 */
191-
margin-bottom: 0.33em;
185+
margin-bottom: 0.33px;
186+
margin-bottom: 0.33rem;
192187
}
193188

194189
.mega {
195190
font-size: 72px;
196191
font-size: 4rem; /* 72 / 18 = 4 */
197-
margin-bottom: 0.4125em;
192+
margin-bottom: 0.4125px;
193+
margin-bottom: 0.4125rem;
198194
}
199195

200196
h1,
201197
.alpha {
202198
font-size: 60px;
203199
font-size: 3.33333rem; /* 60 / 18 = 3.3333 */
204-
margin-bottom: 0.495em;
200+
margin-bottom: 0.495px;
201+
margin-bottom: 0.495rem;
205202
}
206203

207204
h2,
208205
.beta {
209206
font-size: 48px;
210207
font-size: 2.6667rem; /* 48 / 18 = 2.6667 */
211-
margin-bottom: 0.61875em;
208+
margin-bottom: 0.61875px;
209+
margin-bottom: 0.61875rem;
212210
}
213211

214212
h3,
215213
.gamma {
216214
font-size: 36px;
217215
font-size: 2rem; /* 36 / 18 = 2 */
218-
margin-bottom: 0.825em;
216+
margin-bottom: 0.825px;
217+
margin-bottom: 0.825rem;
219218
}
220219

221220
h4,
222221
.delta {
223222
font-size: 24px;
224223
font-size: 1.3333333333333333rem; /* 24 / 18 = 1.3333 */
225-
margin-bottom: 1.2375em;
224+
margin-bottom: 1.2375px;
225+
margin-bottom: 1.2375rem;
226226
}
227227

228228
h5,
229229
.epsilon {
230230
font-size: 21px;
231231
font-size: 1.16667rem; /* 21 / 18 = 1.1667 */
232-
margin-bottom: 1.4142857142857141em; /* measure( base font-size(18) * base line-height(1.65) ) / current font-size(21) = margin-bottom(1.4142857142857141) */
232+
margin-bottom: 1.41429px;
233+
margin-bottom: 1.41429rem;
233234
}
234235

235236
h6,
236237
.zeta {
237238
font-size: 18px;
238239
font-size: 1rem; /* 18 = 18 × 1 */
239-
margin-bottom: 1.65em; /* measure( base font-size(18) * base line-height(1.65) ) / current font-size(18) = margin-bottom(1.65) */
240+
margin-bottom: 1.65px;
241+
margin-bottom: 1.65rem;
240242
}
241243

242-
/* margin-bottom for headings:
243-
*
244-
* Explanation:
245-
* Makes sure that there's always one unit of measure's worth of space between shit
246-
* for headings. This is better than spacing using line-height because of the wrapping issue where we have
247-
* wrapping onto 2 lines with a high line-height.
248-
*/
249-
250244

251245
/**
252246
*

‎scss/_typeplate.scss‎

Lines changed: 21 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,12 @@
1-
/*!
2-
*
3-
.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
4-
5-
. '|| .
6-
.||. .... ... ... ... .... ... ... || .... .||. ....
7-
|| '|. | ||' || .|...|| ||' || || '' .|| || .|...||
8-
|| '|.| || | || || | || .|' || || ||
9-
'|.' '| ||...' '|...' ||...' .||. '|..'|' '|.' '|...'
10-
.. | || ||
11-
'' '''' '''' A Typographic Starter Kit
12-
13-
URL ........... http://typeplate.com
14-
VERSION ....... 1.1.2
15-
Github ........ https://github.com/typeplate/typeplate.github.io
16-
AUTHORS ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
17-
LICENSE ....... Creative Commmons Attribution 3.0
18-
LICENSE URL ... http://creativecommons.org/licenses/by/3.0
19-
20-
.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
21-
*
22-
*/
23-
1+
/*!
2+
TYPEPLATE
3+
URL ........... http://typeplate.com
4+
VERSION ....... 1.1.3
5+
Github ........ https://github.com/typeplate/bower
6+
AUTHORS ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
7+
LICENSE ....... Creative Commmons Attribution 3.0 (http://creativecommons.org/licenses/by/3.0)
8+
LICENSE URL ... https://github.com/typeplate/bower/blob/master/license.txt
9+
*/
2410

2511

2612
// .x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x.x //
@@ -46,7 +32,7 @@ $custom-font-family: false !default; // Custom font-face stack, if set will be a
4632
$measure: $font-base * $line-height;
4733

4834

49-
// $Variabl $Paragraphs
35+
// $Variable $Paragraphs
5036
// -------------------------------------//
5137

5238
// Text Indentation Value
@@ -238,20 +224,27 @@ $dropcap-bg: transparent !default;
238224

239225
// $Mixin $Type-Scale
240226
// -------------------------------------//
241-
// provides a pixel fallback if you decide
242-
// to use 'rems' as a unit over ems.
243227

244228
@mixin type-scale($scale, $base, $value, $measure:"") {
245-
// If 'rem' is used as a $value then provide a px fallback.
229+
246230
@if $value == rem {
231+
247232
font-size: $scale#{px};
248233
}
234+
249235
font-size: context-calc($scale, $base, $value);
236+
250237
@if $measure != "" {
238+
239+
@if $value == rem {
240+
margin-bottom: measure-margin($scale, $measure, $value: px);
241+
}
242+
251243
margin-bottom: measure-margin($scale, $measure, $value);
252244
}
253245
}
254246

247+
255248
// $Mixin $Hypens
256249
// -------------------------------------//
257250
//http://trentwalton.com/2011/09/07/css-hyphenation
@@ -548,6 +541,7 @@ small {
548541
// Extend included classes on any element of your
549542
// choosing for adjusting type based on the scale
550543
// provided.
544+
// Special Props to Harry Roberts for this trick.
551545

552546
// For example:
553547

‎scss/_vars-typeplate.scss‎

Lines changed: 3 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,6 @@
1-
/*
2-
*
3-
.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
4-
5-
. '|| .
6-
.||. .... ... ... ... .... ... ... || .... .||. ....
7-
|| '|. | ||' || .|...|| ||' || || '' .|| || .|...||
8-
|| '|.| || | || || | || .|' || || ||
9-
'|.' '| ||...' '|...' ||...' .||. '|..'|' '|.' '|...'
10-
.. | || ||
11-
'' '''' '''' VARIABLES
12-
13-
.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
14-
*
15-
*/
1+
// ===================================================
2+
// TYPEPLATE : Custom Sass Variables
3+
// ===================================================
164

175

186
// $BaseType

0 commit comments

Comments
 (0)