{Poet}

Poet is a CSS typography library for eloquent, expressive and responsive websites. It is great for all sites looking for responsive and clean typography and exceptional for blogs, news sites, and online books looking to make high quality readible content. Poet offers base style improvments, as well as countless utilities to make your website sharper than ever!

Poet is great as a standalone library or to use along side your favorite framework like Bootstrap. In fact a bunch of concepts in Poet come from Boostrap, however Poet expands on them by adding responsive utilities for elements such as headers to expand and shrink them based on device size. Poet makes for clean, crisp text on all devices, as well as uses concepts like The Golden Ratio to make text feel airy and readable.

Download on GitHub
Star
1. HTML Headers

Resize your browser to see how the headers scale smoothly to match the device size.

This is a h1 tag

This is a h2 tag

This is a h3 tag

This is a h4 tag

This is a h5 tag
This is a h6 tag
<h1>This is a h1 tag</h1>
<h2>This is a h2 tag</h2>
<h3>This is a h3 tag</h3>
or
<span class="h4">This is a h4 tag</span>
<span class="h5">This is a h5 tag</span>
<span class="h6">This is a h6 tag</span>
2. Mighty Headers

Resize your browser to see how the headers scale smoothly to match the device size.

Mighty-1

Mighty-2 Mighty-3 Mighty-4
<h1 class="mighty-1">Mighty-1</h1>
<h2 class="mighty-2">Mighty-2</h2>
or
<span class="mighty-3">Mighty-3</span>
<span class="mighty-4">Mighty-4</span>
3. Paragraphs

By default paragraph tags are adjusted to be responsive to the device size, adjust you browser screen to see how it scales.

By default paragraph tags are adjusted to be responsive to the device size, adjust you browser screen to see how it scales.

<p>By default paragraph tags...</p>
4. Fluid Text

This is great to produce text at a nice readible size and scales up and down well on different devices. Try resizing your window to see how it adjusts.

This is a short example of how fluid text looks on your device. Adjust the width of your browser and you can see how the text adjusts for smaller devices.
<div class="text-fluid">This is a short example of how fluid text looks...</div>
5. Typeface

Use these to easily switch font faces. The default font is .font-san-serif, but remember that .font-serif is the most readible text and is good for articles or big blocks or text.

This is a line of san serif text
This is a line of serif text
This is a line of monospace text
This is a line of cursive text
<span class="font-sanserif">This is a line of san serif text</span>
<span class="font-serif">This is a line of serif text</span>
<span class="font-monospace">This is a line of monospace text</span>
<span class="font-cursive">This is a line of cursive text</span>
6. Font Weight

Easily apply different font weights to different sections of text.

This is text weighted at 100
This is text weighted at 300
This is text weighted at normal
This is text weighted at 500
This is text weighted at bold
<span class="text-ultra-light">This is text weighted at 100</span>
<span class="text-light">This is text weighted at 300</span>
<span class="text-normal">This is text weighted at normal</span>
<span class="text-heavy">This is text weighted at 500</span>
<span class="text-bold">This is text weighted at 900</span>
7. Color

Use these for emphasis, good for validation errors or disabled text.

This is a line of info text
This is a line of success text
This is a line of warning text
This is a line of danger text
This is a line of muted text
<span class="text-info">This is a line of info text</span>
<span class="text-success">This is a line of success text</span>
<span class="text-warning">This is a line of warning text</span>
<span class="text-danger">This is a line of danger text</span>
<span class="text-muted">This is a line of muted text</span>
8. Inline Text

You know how to use these...

This is a line of underlined text
This is a line of strike throught text
This is a line of bold text
This is a line of italic text
This text has a highlighted section in it
<span class="text-underline">This is a line of underlined text</span>
<span class="text-strike">This is a line of strike through text</span>
<span class="text-bold">This is a line of bold text</span>
<span class="text-italic">This is a line of italic text</span>
<span class="text-line">This text looks like a link</span>
This text has a <span class="text-highlight">highlighted section</span> in it
9. Smart Underline

Smart underline is a slicker, more refined way of underlining. It is thinner and doesn't intrude on characters the dip below the baseline.

1. This is a normal css underline:

ex. qayapaj

2. This is a fancy smart underline:

ex. qayapaj

3. This is a smart underline without line intrusion:

ex. qayapaj
<span class="text-underline">This has a normal css underline</span>
<span class="text-smart-underline">This is a fancy smart underline</span>
<span class="text-smart-underline-noshadow">This is a smart underline without line intrusion</span>
works with links too
<a href="#" class="text-smart-underline">Link</a>
10. Text Alignment

Use these to align your text left, center, and right. You can use the .text-center-block to center an element fully horizontally.

This text if left aligned
This this text in centered
This text is right aligned
This text is centered within its parent
<span class="text-left">This text if left aligned</span>
<span class="text-center">This text if centered</span>
<span class="text-right">This text if right aligned</span>
<span class="text-center-block">This text is centered within its parent</span>
11. Indentation

Use for starting paragraphs.

This is multiple lines of text, the first line of this text has an indentation. The other lines of this text don't indent. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
<div class="text-indent">This is multiple lines of text...</div>
12. Chapter

Use for liven up your blog or start a new section of text. This one is great for articles.

Make me a pie! This is multiple lines of text, the first letter of this text is emphasized. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
<div class="text-chapter">This is multiple lines of text...</div>
12.5 Chapter

Same example as about but it used .font-serif for an easier to read block of text.

Make me a pie! Example of serif font with this style. This is multiple lines of text, the first letter of this text is emphasized. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.
<div class="text-chapter font-serif">This is multiple lines of text...</div>
13. Unselectable Text

Apply this class to any section of text that you do not want the user to be able to select or highlight. Can be good for page headers and such.

This text you can try to highlight with your cursor, but you WON'T be able to...

...while this text you CAN highlight with your cursor by double clicking or clicking and dragging!
<span class="text-unselectable">This text you can try to highlight...</span>
14. Superscript & Subscript

Use these to link to references or show exponents.

This text1 has two superscripts2
This text3 has two subscripts4
This text<sup>1</sup> has two superscripts<span class="text-superscript">2</span>
This text<sub>3</sub> has two subscripts<span class="text-subscript">3</span>
15. User Highlighting

Use this if you want the user to feel like they are using a highlighter when they are selecting text.

This has the .text-user-highlight class which means it is special, use your cursor to highlight this text and see what happens.


See how this text highlights normally with your system highlight color without the class.

<p class="text-user-highlight">This has the .text-user-highlight class which means it is special...</p>