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

Category: CSS & CSS3 | February 27, 2020
Author:BigCoke233
Views Total:199 views
Official Page:Go to website
Last Update:February 27, 2020
License:MIT

Preview:

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

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>

You Might Be Interested In:


Leave a Reply