7

Github GitHub - BigCoke233/textretty.css: A simple typography stylesheet

 3 years ago
source link: https://github.com/BigCoke233/textretty.css
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

Textretty

A simple typography stylesheet used on HTML page.

Introduction

Textretty is a simple typography stylesheet which can be used on any html-based document. It's usually for article content but not the whole website. It can help you start writing quickly and you don't need to care about the style too much. And it has referenced to GitHub Markdown style.

Installation

Install textretty with npm.

$ npm install textretty

Or you can just grab the css file in the ./dist folder.

You can also get textretty.css with jsDelivr CDN, this method does not require to install.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/BigCoke233/textretty.css/dist/textretty.min.css">

Usage

Textretty only works in the element with .textretty class.

<head>
  <!-- ...... -->
  <link rel="stylesheet" href="textretty.css">
  <!-- ...... -->
</head>
<body>
  <!-- ...... -->
  <article class="textretty">
    <!-- your content here -->
  </article>
  <!-- ...... -->
</body>

Standard

Textretty has its own standard for elements. This following table shows every defined html tag and its standard usage. You are supposed to follow them.

Tag Name Descripiton h1-h6 Graded headings used as titles p Paragraph strong, b Text in bold em, i Text in italic del, s Deleted text a Anchor link img Image pre Code block code Inline code kbd Text on keyboards ol Ordered list ul Unordered list li List item table Just table tr Rows of table th Headings of table td Cells of table thead The header of a table tbody The body content of a table tfoot The footer of a table blockquote Quotions (block displayed) hr Divider / Separator header The header of an article/document footer The footer of an article/document

These tags above are all defined in textretty.css.

Headings

<h1>~<h6> are all headings. Usually, <h1> are used as the main title of the whole article / document. Others're used as subtitles while <h2> and <h3> are the most widely used. Here's an example:

<h1>How to put an elephent into a fridge?</h1>
<!-- content -->

  <h2>Open the door</h2>
  <!-- content -->
    <h3>Make sure it's wide enough first</h3>
	<!-- content -->
	
    <h3>Push heavily!</h3>
    <!-- content -->

  <h2>Push it in</h2>
  <!-- content -->

  <h2>Close the door</h2>
  <!-- content -->

The space before the <h2> and <h3> is there to help you understand their relation but they don't really exist.

Every <h1> and <h2> is underlined with a thick light-gray line just like GitHub. If you don't like it, you can add .tex-title-no-line class to .textretty container.

Paragraph

Paragraph is defined with <p>. Every <p> tag is a paragrph. But remember two lines in one <p> tag is not two paragraph.

<!-- I'm a paragraph -->
<p>The text in a paragraph.<p>

<!-- I'm just a paragraph but not two -->
<p>The text in line 1.<br>
The text in line 2.</p>

You can emphasize some important parts of a paragraph with bold and italic styles. <strong> and <b> are used for bold text while <em> and <i> are uesd for italic text. But attention, <strong> and <em> mean the text is really important and you're emphasizing it. <b> and <i> just make the text bold or italic and don't has certain meaings.

Please turn to this page for more information.

Copyright © 2020 Eltrac Koalar, released under MIT License.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK