textretty

    1.1.0 • Public • Published

    Textretty

    A simple typography stylesheet for article content.

    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 need 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'd better 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, All rights reserved.

    Keywords

    none

    Install

    npm i textretty

    DownloadsWeekly Downloads

    0

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    47.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • eltrac