Blueprint Fancy Type
Fancy Typography for your website.
This file can be imported using:
@import "blueprint/fancy-type"
View the Source for this module on Github.
Imports
The following sass files are automatically imported when you import this file:
Configurable Variables help
$alternate-text-font
- Value
-
"Warnock Pro", "Goudy Old Style", "Palatino", "Book Antiqua", Georgia, serif
Mixins
View Source: Sass | SCSSfancy-type
=fancy-type
+fancy-paragraphs
.caps
+caps
.dquo
+dquo
.alt
+alt
@mixin fancy-type { @include fancy-paragraphs; .caps { @include caps; } .dquo { @include dquo; } .alt { @include alt; } }
To install the fancy type plugin:
- Import the fancy_type module:
@import "blueprint/fancy_type" - Mix in
fancy-typeto your project’s body or at the top level of your stylesheet:body { @include fancy-type; }
alt
=alt
color: $alt-text-color
font-family: $alternate-text-font
font-style: italic
font-weight: normal
@mixin alt { color: $alt-text-color; font-family: $alternate-text-font; font-style: italic; font-weight: normal; }
For great looking type, use this code instead of asdf:
<span class="alt">asdf</span>
Best used on prepositions and ampersands.
dquo($offset)
=dquo($offset: 0.5em)
margin-left: -$offset
@mixin dquo($offset: 0.5em) { margin-left: -$offset; }
For great looking quote marks in titles, replace “asdf” with:
<span class="dquo">“</span>asdf”
(That is, when the title starts with a quote mark).
Note: you may have to change this value depending on your font size.
incr($font-size, $base-font-size, $old-line-height)
=incr($font-size: 10px, $base-font-size: $blueprint-font-size, $old-line-height: $base-font-size * 1.5)
font-size: 1em * $font-size / $base-font-size
line-height: 1em * $old-line-height / $font-size * 4 / 5
margin-bottom: 1.5em
@mixin incr($font-size: 10px, $base-font-size: $blueprint-font-size, $old-line-height: $base-font-size * 1.5) { font-size: 1em * $font-size / $base-font-size; line-height: 1em * $old-line-height / $font-size * 4 / 5; margin-bottom: 1.5em; }
Reduced size type with incremental leading
This could be used for side notes. For smaller type, you don’t necessarily want to follow the 1.5x vertical rhythm — the line-height is too much.
Using this mixin, reduces your font size and line-height so that for every four lines of normal sized type, there is five lines of the sidenote. eg:
Arguments:
* $font-size – The desired font size in pixels. This will be converted to ems for you. Defaults to 10px.
* $base-font-size – The base font size in pixels. Defaults to 12px
* $old-line-height – The old line height. Defaults to 1.5 times the base-font-size
caps
=caps
font-variant: small-caps
letter-spacing: 1px
text-transform: lowercase
font-size: 1.2em
line-height: 1%
font-weight: bold
padding: 0 2px
@mixin caps { font-variant: small-caps; letter-spacing: 1px; text-transform: lowercase; font-size: 1.2em; line-height: 1%; font-weight: bold; padding: 0 2px; }
Surround uppercase words and abbreviations with this class. Based on work by Jørgen Arnor Gårdsø Lom
fancy-paragraphs
=fancy-paragraphs
p + p
+sibling-indentation
p.incr,
.incr p
+incr
@mixin fancy-paragraphs { p + p { @include sibling-indentation; } p.incr, .incr p { @include incr; } }
This mixin is automatically included when you include fancy-type
sibling-indentation
=sibling-indentation
text-indent: 2em
margin-top: -1.5em
/* Don't want this in forms.
form &
text-indent: 0
@mixin sibling-indentation { text-indent: 2em; margin-top: -1.5em; /* Don't want this in forms. */ form & { text-indent: 0; } }
Indentation instead of line shifts for sibling paragraphs. Mixin to a selector like p + p