Skip to content

Commit 8bce17a

Browse files
grayghostvisualsgrayghostvisuals
committed
Sass v1.1.2. Paragraphs Vertical Whitespace Boolean
1 parent 1912b73 commit 8bce17a

9 files changed

Lines changed: 97 additions & 60 deletions

File tree

‎Gruntfile.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ module.exports = function(grunt) {
103103
require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks);
104104

105105
// == Grunt Registered Tasks
106-
grunt.registerTask('default', ['jshint', 'compass']);
106+
grunt.registerTask('default', ['compass']);
107107
grunt.registerTask('test', ['qunit']);
108108
grunt.registerTask('hint', ['jshint']);
109109
grunt.registerTask('monitor', ['watch']);

‎css/demo.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎css/main.css‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
<meta name="robots" content="all">
1414
<meta name="description" content="A typographic starter kit for Web developers and designers, where we don’t make too many design choices, but we do set out patterns for proper markup and “pre-designed” styles for great Web typography.">
1515
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=1">
16-
<link rel="stylesheet" href="./css/main.css?1.1.0">
16+
<link rel="stylesheet" href="./css/main.css?1.1.2">
1717
<script src="./js/vendor/modernizr.min.js"></script>
1818
</head>
1919
<body>
@@ -54,13 +54,13 @@
5454
<a href="https://raw.github.com/typeplate/typeplate.github.io/master/typeplate/scss/typeplate-scss.zip" data-name="Sass Port" class="dl-item btn">
5555
<i class="icon-download"></i>Sass
5656
<hr>
57-
<small>v1.1.1 | 3kb</small>
57+
<small>v1.1.2 | 3kb</small>
5858
</a>
5959

6060
<a href="https://github.com/TypePlate/typeplate-bower" data-name="Bower Package" class="dl-item btn">
6161
<i class="icon-download"></i>Bower Pkg.
6262
<hr>
63-
<small>v1.1.1</small>
63+
<small>v1.1.2</small>
6464
</a>
6565
</div>
6666
</nav>
@@ -387,6 +387,7 @@ <h1 class="gamma section-title"><a class="perma-anchor" href="#indenting">§</a>
387387
</header>
388388
<p>On the web, paragraphs are commonly set in blocks, with top and bottom margins. Historically, paragraphs are set using indentation, which makes it easier to scan long-form text and are (we think) more conducive to readability.</p>
389389
<p>For the curious, here's a few example sites using the paragraph indentation approach we've chosen for our starter kit…<a href="http://markboulton.co.uk">Mark Boulton</a>, <a href="http://nicewebtype.com">Nice Web Type</a>, <a href="http://andy-logic.com">Andy Rutledge</a> and <a href="http://artequalswork.com">Nathan Ford</a> just to name a few.</p>
390+
<p>Authors choosing to opt out of our default styling may feel free to change the boolean variable in the Sass port to remove this opinionated default as depicted in the example below. <abbr title="cascading stylesheets">CSS</abbr> people you'll have to settle for the manual route to customize.</p>
390391

391392
<figure class="example no-top-pad">
392393
<p>I crawled out almost immediately, and crouched, my feet still in the water, under a clump of furze. The horse lay motionless (his neck was broken, poor brute!) and by the lightning flashes I saw the black bulk of the overturned dog cart and the silhouette of the wheel still spinning slowly. In another moment the colossal mechanism went striding by me, and passed uphill towards Pyrford.</p>
@@ -398,14 +399,24 @@ <h1 class="gamma section-title"><a class="perma-anchor" href="#indenting">§</a>
398399

399400
<figure class="typeplate-code-block">
400401
<figcaption>_typeplate.scss</figcaption>
401-
<pre><code class="language-scss">//paragraph siblings indent
402+
<pre><code class="language-scss">// Text Indentation Value
402403
$indent-val: 1.5em !default;
403404

405+
// Paragraph Styling Boolean
406+
// 'false' means no vertical whitespace
407+
// between subsequent paragraphs.
408+
$paragraph-vertical-whitespace: false !default;
409+
404410
p {
405411
margin: auto auto $indent-val;
406-
& + p {
407-
text-indent: $indent-val;
408-
margin-top: -$indent-val;
412+
413+
// Conditonal Check For Paragraph Styling
414+
@if $paragraph-vertical-whitespace == false {
415+
& + p {
416+
//siblings indentation
417+
text-indent: $indent-val;
418+
margin-top: -$indent-val;
419+
}
409420
}
410421
}</code></pre>
411422
</figure>

‎scss/_vars-typeplate.scss‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,18 @@
1-
// .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
1+
/*
2+
*
3+
.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
24
3-
// . '|| .
4-
// .||. .... ... ... ... .... ... ... || .... .||. ....
5-
// || '|. | ||' || .|...|| ||' || || '' .|| || .|...||
6-
// || '|.| || | || || | || .|' || || ||
7-
// '|.' '| ||...' '|...' ||...' .||. '|..'|' '|.' '|...'
8-
// .. | || ||
9-
// '' '''' '''' VARIABLES
10-
//
11-
12-
// .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
5+
. '|| .
6+
.||. .... ... ... ... .... ... ... || .... .||. ....
7+
|| '|. | ||' || .|...|| ||' || || '' .|| || .|...||
8+
|| '|.| || | || || | || .|' || || ||
9+
'|.' '| ||...' '|...' ||...' .||. '|..'|' '|.' '|...'
10+
.. | || ||
11+
'' '''' '''' VARIABLES
1312
13+
.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
14+
*
15+
*/
1416

1517

1618
// $BaseType
@@ -25,6 +27,18 @@ $font-family: serif; // Non-font-face font-stack
2527
$custom-font-family: false; // Custom font-face stack, if set will be added to the $base-font-family
2628

2729

30+
// $Paragraphs
31+
// -------------------------------------//
32+
33+
// Text Indentation Value
34+
$indent-val: 1.5em;
35+
36+
// Paragraph Styling Boolean
37+
// 'false' means no vertical whitespace
38+
// between subsequent paragraphs.
39+
$paragraph-vertical-whitespace: false;
40+
41+
2842
// $Small Print
2943
// -------------------------------------//
3044

@@ -77,12 +91,6 @@ $zeta: 18; // 18 = 18 × 1
7791
$type-scale-unit-value: rem;
7892

7993

80-
// $Text-Indentation
81-
// -------------------------------------//
82-
83-
$indent-val: 1.5em;
84-
85-
8694
// $Pull-Quotes
8795
// -------------------------------------//
8896

‎scss/main.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,9 @@
5656
// $Typeplate
5757
// ============================================================
5858

59-
// @Since v1.1.1
59+
// @Since v1.1.2
6060
@import "vars-typeplate"; // Custom Typeplate Variables
61-
// @Since v1.1.1
61+
// @Since v1.1.2
6262
@import "../typeplate/scss/typeplate"; // Typeplate Presets
6363

6464

‎typeplate/scss/_typeplate.scss‎

Lines changed: 21 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
'' '''' '''' A Typographic Starter Kit
1212
1313
URL ........... http://typeplate.com
14-
VERSION ....... 1.1.1
14+
VERSION ....... 1.1.2
1515
Github ........ https://github.com/typeplate/typeplate.github.io
1616
AUTHORS ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
1717
LICENSE ....... Creative Commmons Attribution 3.0
@@ -46,6 +46,18 @@ $custom-font-family: false !default; // Custom font-face stack, if set will be a
4646
$measure: $font-base * $line-height;
4747

4848

49+
// $Variable $Paragraphs
50+
// -------------------------------------//
51+
52+
// Text Indentation Value
53+
$indent-val: 1.5em !default;
54+
55+
// Paragraph Styling Boolean
56+
// 'false' means no vertical whitespace
57+
// between subsequent paragraphs.
58+
$paragraph-vertical-whitespace: false !default;
59+
60+
4961
// $Variable $Small-Print
5062
// -------------------------------------//
5163

@@ -98,12 +110,6 @@ $zeta: 18 !default; // 18 = 18 × 1
98110
$type-scale-unit-value: rem !default;
99111

100112

101-
// $Variable $Text-Indentation
102-
// -------------------------------------//
103-
104-
$indent-val: 1.5em !default;
105-
106-
107113
// $Variable $Pull-Quotes
108114
// -------------------------------------//
109115

@@ -611,10 +617,14 @@ h6 {
611617

612618
p {
613619
margin: auto auto $indent-val;
614-
& + p {
615-
//siblings indentation
616-
text-indent: $indent-val;
617-
margin-top: -$indent-val;
620+
621+
// Conditonal Check For Paragraph Styling
622+
@if $paragraph-vertical-whitespace == false {
623+
& + p {
624+
//siblings indentation
625+
text-indent: $indent-val;
626+
margin-top: -$indent-val;
627+
}
618628
}
619629
}
620630

‎typeplate/scss/_vars-typeplate.scss‎

Lines changed: 25 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
1-
// .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
1+
/*
2+
*
3+
.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
24
3-
// . '|| .
4-
// .||. .... ... ... ... .... ... ... || .... .||. ....
5-
// || '|. | ||' || .|...|| ||' || || '' .|| || .|...||
6-
// || '|.| || | || || | || .|' || || ||
7-
// '|.' '| ||...' '|...' ||...' .||. '|..'|' '|.' '|...'
8-
// .. | || ||
9-
// '' '''' '''' VARIABLES
10-
//
5+
. '|| .
6+
.||. .... ... ... ... .... ... ... || .... .||. ....
7+
|| '|. | ||' || .|...|| ||' || || '' .|| || .|...||
8+
|| '|.| || | || || | || .|' || || ||
9+
'|.' '| ||...' '|...' ||...' .||. '|..'|' '|.' '|...'
10+
.. | || ||
11+
'' '''' '''' VARIABLES
1112
12-
// .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
13+
.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
14+
*
15+
*/
1316

1417

1518

@@ -21,10 +24,21 @@ $line-height: 1.65;
2124
$font-size: 112.5; // percentage value (16 * 112.5% = 18px)
2225
$font-base: 16 * ($font-size/100); // converts our percentage to a pixel value
2326
$font-family: serif; // Non-font-face font-stack
24-
2527
$custom-font-family: false; // Custom font-face stack, if set will be added to the $font-family
2628

2729

30+
// $Paragraphs
31+
// -------------------------------------//
32+
33+
// Text Indentation Value
34+
$indent-val: 1.5em;
35+
36+
// Paragraph Styling Boolean
37+
// 'false' means no vertical whitespace
38+
// between subsequent paragraphs.
39+
$paragraph-vertical-whitespace: false;
40+
41+
2842
// $Small Print
2943
// -------------------------------------//
3044

@@ -77,12 +91,6 @@ $zeta: 18; // 18 = 18 × 1
7791
$type-scale-unit-value: rem;
7892

7993

80-
// $Text-Indentation
81-
// -------------------------------------//
82-
83-
$indent-val: 1.5em;
84-
85-
8694
// $Pull-Quotes
8795
// -------------------------------------//
8896

‎typeplate/scss/typeplate-scss.zip‎

-849 Bytes
Binary file not shown.

0 commit comments

Comments
 (0)