Tyfy - Modules - Paragraphs

Paragraphs inherit font size and line height from the <body>. Tyfy provides CSS classes for common style variations.

Classes

.cols2: Applied to a containing element to a make child content display in 2 columns using CSS columns. The style is responsive and degrades to a single column when the screen width is less than $tybreak-cols2.
.justified: Applied to a <p> tag to justify that paragraph. If applied to a containing element, all descendant paragraphs are justified.
.lede: Applied to a <p> tag to display the paragraph as a lede, with the font-size increased to $tyfont-size-lede and a proportionally larger line height.

Variables

$tybreak-cols2: 50em !default;; Breakpoint above which text inside an element with the cols2 class is displayed in two columns.
$tyfont-size: ("sm":-1, "h6":0, "h5":1, "h4":2, "h3":3, "h2":4, "h1":6, "quote":2, "lede":2) !default;; A SASS map of values indicating the scale step for each of the font size variables; the size of the lede text is set in this map.

Examples

Lede

<p class="lede">Luke, we’re ready for takeoff. Good luck, Lando When we find Jabba the Hut and that bounty hunter, we’ll contact you.</p>
<p>I’ll meet you at the rendezvous point on Tatooine. Princess, we’ll find Han. I promise. Chewie, I’ll be waiting for your signal. Take care, you two. May the Force be with you.</p>

Luke, we’re ready for takeoff. Good luck, Lando When we find Jabba the Hut and that bounty hunter, we’ll contact you.

I’ll meet you at the rendezvous point on Tatooine. Princess, we’ll find Han. I promise. Chewie, I’ll be waiting for your signal. Take care, you two. May the Force be with you.

Justified

<p class="justified">I heard the command center had been hit. You got your clearance to leave. Don’t worry. I’ll leave. First I’m going to get you to your ship. Your Highness, we must take this last transport. It’s our only hope. Send all troops in sector twelve to the south slope to protect the fighters. Imperial troops have entered the base. Come on… that’s it. Give the evacuation code signal.</p>
<div class="justified">
  <p>Hokey religions and ancient weapons are no match for a good blaster at your side, kid. You don’t believe in the Force, do you? Kid, I’ve flown from one side of this galaxy to the other. I’ve seen a lot of strange stuff, but I’ve never seen anything to make me believe there’s one all-powerful force controlling everything.</p>
  <p>There’s no mystical energy field that controls my destiny. It’s all a lot of simple tricks and nonsense. I suggest you try it again, Luke. This time, let go your conscious self and act on instinct. With the blast shield down, I can’t even see. How am I supposed to fight? Your eyes can deceive you. Don’t trust them.</p>
</div>

I heard the command center had been hit. You got your clearance to leave. Don’t worry. I’ll leave. First I’m going to get you to your ship. Your Highness, we must take this last transport. It’s our only hope. Send all troops in sector twelve to the south slope to protect the fighters. Imperial troops have entered the base. Come on… that’s it. Give the evacuation code signal.

Hokey religions and ancient weapons are no match for a good blaster at your side, kid. You don’t believe in the Force, do you? Kid, I’ve flown from one side of this galaxy to the other. I’ve seen a lot of strange stuff, but I’ve never seen anything to make me believe there’s one all-powerful force controlling everything.

There’s no mystical energy field that controls my destiny. It’s all a lot of simple tricks and nonsense. I suggest you try it again, Luke. This time, let go your conscious self and act on instinct. With the blast shield down, I can’t even see. How am I supposed to fight? Your eyes can deceive you. Don’t trust them.

Two Columns

<div class="cols2">
  <p>I want to come with you to Alderaan. There’s nothing here for me now. I want to learn the ways of the Force and become a Jedi like my father.</p>
  <p>Mos Eisley Spaceport. You will never find a more wretched hive of scum and villainy. We must be cautious. How long have you had these droids? About three or four seasons. They’re for sale if you want them.</p>
</div>

I want to come with you to Alderaan. There’s nothing here for me now. I want to learn the ways of the Force and become a Jedi like my father.

Mos Eisley Spaceport. You will never find a more wretched hive of scum and villainy. We must be cautious. How long have you had these droids? About three or four seasons. They’re for sale if you want them.

Sample text from Forcem Ipsum.