7.5 KiB
| title | description | video | sass | tags | ||||||
|---|---|---|---|---|---|---|---|---|---|---|
| Typography Helpers | Our helper classes allow you to scaffold certain typographic styles faster. | dq7s3PVpQ7M |
|
|
Text Alignment
Deprecation Notice: From v6.5.x, we are moving text alignment classes to Prototype specific mode and thus text alignment classes will be disabled by default. You can re-enable it though, with a simple `@include`.
You can change the text alignment of an element by adding .text-left, .text-right, .text-center or .text-justify to an element.
Adding a breakpoint to the front of a text alignment class will cause it to only be applied on that size screen or larger. For example, .medium-text-center will keep text left-aligned on the smallest screens, but switch to center-aligned on medium screens and larger.
Watch this part in video
<p class="text-left"><!-- ... --></p>
<p class="text-right"><!-- ... --></p>
<p class="text-center"><!-- ... --></p>
<p class="text-justify"><!-- ... --></p>
This text is left-aligned. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.
This text is right-aligned. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.
This text is center-aligned. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.
This text is justified. Set in the year 0 F.E. ("Foundation Era"), The Psychohistorians opens on Trantor, the capital of the 12,000-year-old Galactic Empire. Though the empire appears stable and powerful, it is slowly decaying in ways that parallel the decline of the Western Roman Empire.
Subheader
Lighten up your headers by adding a class of .subheader to any header element.
Watch this part in video
<h1 class="subheader">h1.subheader</h1>
<h2 class="subheader">h2.subheader</h2>
<h3 class="subheader">h3.subheader</h3>
<h4 class="subheader">h4.subheader</h4>
<h5 class="subheader">h5.subheader</h5>
<h6 class="subheader">h6.subheader</h6>
Lead Paragraph
A slightly-larger-than-normal block of text, useful for decks, blurbs, or other descriptive text.
Watch this part in video
<p class="lead">What are your cats <em>really</em> dreaming about while they sleep?</p>
Un-bulleted List
In Foundation, the <ul> is a bulleted list and <ol> is a numbered list by default, but you can add the class .no-bullet to remove the bullets and numbers respectively.
Unordered List
Watch this part in video
<ul class="no-bullet">
<li>List item with a much longer description or more content.</li>
<li>List item</li>
<li>List item
<ul>
<li>Nested list item</li>
<li>Nested list item</li>
<li>Nested list item</li>
</ul>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
Ordered List
<ol class="no-bullet">
<li>List item with a much longer description or more content.</li>
<li>List item</li>
<li>List item
<ol>
<li>Nested list item</li>
<li>Nested list item</li>
<li>Nested list item</li>
</ol>
</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ol>
Typescale
Adjust font-size by overriding an element’s default size. This can be useful to size a <p> or <h1> through <h6> using Foundation's existing header sizes.
Especially useful because: It's important to avoid skipping heading levels when structuring your document, as it confuses screen readers. For example, after using an <h2> in your code, the next heading used should be either <h2> or <h3>. If you need a heading to look bigger or smaller to match a specific style, use CSS to override the default size.
For headers:
<h2 class="h1">Lorem Ipsum Dolor</h2>
<h3 class="h2">Lorem Ipsum Dolor</h3>
<h4 class="h3">Lorem Ipsum Dolor</h4>
<h5 class="h4">Lorem Ipsum Dolor</h5>
<h6 class="h5">Lorem Ipsum Dolor</h6>
For text:
<p class="h1">Lorem Ipsum Dolor</p>
<p class="h2">Lorem Ipsum Dolor</p>
<p class="h3">Lorem Ipsum Dolor</p>
<p class="h4">Lorem Ipsum Dolor</p>
<p class="h5">Lorem Ipsum Dolor</p>
<p class="h6">Lorem Ipsum Dolor</p>
Statistics
If you're building a dashboard, you might need to display some important numbers real big. Just add the .stat class to any element to amp up the font size.
Watch this part in video
<p>Days without merge conflict</p>
<div class="stat">128</div>