wysiwyg.css

wysiwyg.css file is a simple collection of styles targeted at HTML elements generated from a WYSIWYG editor (like TinyMCE) or Markdown.

Its purpose are:

• readability: both the spacing and colors are visually balanced
• simplicity: you only need a single class to style all elements
• extensibility: you can easily customise the output thanks to variables

As a matter of fact, wysiwyg.css supports themes.

Example

This whole white block of content only uses a single CSS class on its container.
Everything inside are HTML elements with no additional class.

How it works

You just add the .wysiwyg CSS class to a container, and it will style all its child elements:

<div class="wysiwyg">
  <!-- Your generated HTML -->
</div>

In order to blend in gracefully with your design, the wysiwyg container will inherit colors (for text, headings and links) and typography (font family, size and smoothing).

What it styles

Blocks

• Headings: from <h1> to <h6>
• Paragraphs <p>
• Lists: <ol> and <ul>
• Blockquotes <blockquote>
• Tables <table> <tr> <th> and <td>
• Pre <pre>
• Figures <figure> and <figcaption>

Inline elements

• Links: <a>
• Semantic: <strong> and <em>
• Code: <code> <kbd> and <samp>
• Abbreviations: <abbr>
• Notations: <mark> <s> <del> and <ins>
• Quotes: <q> and <cite>
• Other: <small> <sub> <sup> <hr>

How it looks

The content you're reading is styled using wysiwyg.css with its default parameters.

You can have paragraphs, with links, important or emphasised words, code snippets, abbr, short quotes, citations, highlighted text, keyboard inputs, strikethrough, deleted and inserted elements, sample text, small text, and words with_suband^suptext.

You also have horizontal breaks.

You also have unordered lists:

• From basic lists
  • With nested items
    • That have a different bullet point
      • At each level
        • Up to
          • The 6th level
• With items that can spawn multiple lines
• Like this one: lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas at aliquet orci. Curabitur eget porttitor sem. Aenean eu convallis diam. Sed nibh massa, rhoncus id interdum pellentesque, congue ac erat.

And ordered lists:

1. Step one
   1. Side step one
      1. Side step two
         1. Site step three
            1. Side step four
               1. Side step five
2. Step two
3. ????
4. PROFIT!!!

And even definition lists:

Name

Godzilla

Born

1952

Birthplace

Japan

Color

Green

You can also use the blockquote element. It can be used with or without paragraphs.

The figure and related figcaption elements are supported:

Tables are supported: cells, rows, head, body, and foot are styled.

Customisation

To provide flexibility, wysiwyg.css is written in Sass and comes with a list of variables and options.

Variables

-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif

"Inconsolata", "Consolas", "Monaco", monospace

Options

By default, all options are set to false.