Typography
Typography pack for Seed
Install
npm install seed-typography --save
Dependencies
About
Seed CSS introduces a new prefix to compliment those defined ITCSS. The new prefix namespace is tx, which is reserved for typography.
Alignment
All of the following classes support responsive modifiers.
Example
Hey! I'm in the center :)
Oh, that's cool. I'm on the left
<div class="tx-center">
Hey! I'm in the center :)
<div class="tx-left">
Oh, that's cool. I'm on the left
</div>
</div>Break
Decoration
I'm underlined! I must be super important.
<span class="tx-underline">I'm underlined! I must be super important.</span>Headings
All of the following classes support responsive modifiers.
I may be an H1, but I look H3
<h1 class="tx-h3">I may be an H1, but I look H3</h1>Headlines
All of the following classes support responsive modifiers.
I'm so big.
<h3 class="tx-headline-3">I'm so big.</h3>Line heights
All of the following classes support responsive modifiers.
Title: Heading line-height
This line-height is better for copy.
<h3 class="tx-lh-heading">
Title: Heading line-height
</h3>
<p class="tx-lh-copy">
This line-height is better for copy.
</p>Sizes
All of the following classes support responsive modifiers.
I'm super small.
<span class="tx-xs">I'm super small.</span>Smoothing
I so smooth.
I totes not smooth.
<span class="tx-smooth">I so smooth.</span>
<span class="tx-smooth-none">I totes not smooth.</span>Transform
Ah! All caps!
<span class="tx-uppercase">Ah! All caps!</span>Truncate
You can truncate text by adding the .tx-truncate text class to the selector containing the text.
Toy Story is a 1995 American computer-animated buddy-comedy adventure film produced
by Pixar Animation Studios and released by Walt Disney Pictures. Directed by John Lasseter,
Toy Story was the first feature-length computer-animated film and the first theatrical
film produced by Pixar.
<div class="tx-truncate">
Toy Story is a 1995 American computer-animated buddy-comedy adventure film produced
by Pixar Animation Studios and released by Walt Disney Pictures. Directed by John Lasseter,
Toy Story was the first feature-length computer-animated film and the first theatrical
film produced by Pixar.
</div>The CSS method of truncating requires the selector to be display: block. For selectors like <a> or <span>, we recommend you use the utility class of .u-d-block from seed-display to update the display property to block.
<a class="tx-truncate u-d-block" href="#">
Toy Story is a 1995 American computer-animated buddy-comedy adventure film produced
by Pixar Animation Studios and released by Walt Disney Pictures.
</a>Weight
I so thin.
I so bold.
<h4 class="tx-300">I so thin.</h4>
<h4 class="tx-800">I so bold.</h4>White-space
Wrap
Configurations
Below are the default Sass configuration variables for seed-typography. The variables can be found in the pack’s _config.scss file.
seed-typography/_config.scss// Namespaces
$seed-typography-namespace: "tx" !default;
$seed-typography-alignment-namespace: $seed-typography-namespace !default;
$seed-typography-break-namespace: #{$seed-typography-namespace}-break !default;
$seed-typography-decoration-namespace: $seed-typography-namespace !default;
$seed-typography-heading-namespace: #{$seed-typography-namespace} !default;
$seed-typography-headline-namespace: #{$seed-typography-namespace}-headline !default;
$seed-typography-line-height-namespace: #{$seed-typography-namespace}-lh !default;
$seed-typography-size-namespace: $seed-typography-namespace !default;
$seed-typography-transform-namespace: $seed-typography-namespace !default;
$seed-typography-truncate-namespace: #{$seed-typography-namespace}-truncate !default;
$seed-typography-weight-namespace: $seed-typography-namespace !default;
$seed-typography-white-space-namespace: #{$seed-typography-namespace}-ws !default;
$seed-typography-wrap-namespace: #{$seed-typography-namespace}-wrap !default;
// Important (Typical convention for utility purposes)
$seed-typography-use-important: true !default;
// Alignment
$seed-typography-alignment: (
justify: justify,
left: left,
center: center,
right: right
) !default;
// Break
$seed-typography-break: (
all: break-all,
keep-all: keep-all,
normal: normal
) !default;
// Decoration
$seed-typography-decoration: (
overline: overline,
strikethrough: line-through,
underline: underline,
no-decoration: none,
no-underline: none
) !default;
// Heading sizes
$seed-typography-heading-sizes: (
h1: 3rem,
h2: 2.25rem,
h3: 1.5rem,
h4: 1.25rem,
h5: 1rem,
h6: 0.875rem
) !default;
// Headline sizes
$seed-typography-headline-sizes: (
1: 5rem,
2: 4.5rem,
3: 4rem,
4: 3.5rem,
) !default;
// Generic sizes
$seed-typography-sizes: (
lead: map-get($seed-typography-heading-sizes, h4),
xl: 1.28rem,
lg: 1.14rem,
md: 1rem,
sm: 0.92rem,
xs: 0.78rem
) !default;
// Line-height
$seed-typography-line-height: (
heading: 1.2,
body: 1.5,
copy: 1.6,
reset: 1,
none: 0
) !default;
// Transform
$seed-typography-transform: (
capitalize: capitalize,
lowercase: lowercase,
uppercase: uppercase
) !default;
// Weights
$seed-typography-weight: (
lighter: lighter,
normal: normal,
bold: bold,
bolder: bolder
) !default;
// White space
$seed-typography-white-space: (
nowrap: nowrap,
pre: pre,
pre-line: pre-line,
normal: normal
);
// Wrap
$seed-typography-wrap: (
break: break-word,
normal: normal
) !default;