Tiny Typography CSS Library For Better Reading Experience – textretty.css

Preview:

Description:

A tiny typography CSS library for articles & blog posts that applies professional and reader-friendly styles to most commonly used HTML elements for a better reading experience.

Supports HTML Tags:

• h1-h6
• p
• strong, b
• em, i
• del, s
• a
• img
• pre
• code
• kbd
• ol
• ul
• li
• table
• tr
• th
• td
• thead
• tbody
• tfoot
• blockquote
• hr
• header
• footer

How to use it:

1. Download and link to the core stylesheet textretty.css in the document.

<link rel="stylesheet" href="textretty.css" />

2. Load the textretty.expand.css if you need toggle panels & alerts.

<link rel="stylesheet" href="textretty.expand.css" />

3. That’s it. Happy writing.

4. Create a toggle panel that reveals the hidden content when hovering over the title.

<div class="tex-panel">
  <h3 class="tex-panel-title">Panel Title</h3>
  <div class="tex-panel-content">
    <!-- content -->
  </div>
</div>

5. Create an inline alert notification.

<div class="tex-alert">
  <p>I'm warning you!</p>
</div>
<div class="tex-alert-serious">
  <p>I'm warning you seriously!</p>
</div>