wysiwyg.css

Style your TinyMCE or Markdown generated content with a single CSS class

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:

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

Inline elements

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 withsubandsuptext.

You also have horizontal breaks.


You also have unordered lists:

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:

Web design in 4 minutes
A full width image
An awesome picture
A small image

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

Name Instruments Period
Name Instruments Period
John Lennon Vocals, Guitar 1960–1969
Paul McCartney Vocals, Bass Guitar 1960–1970
George Harrison Guitar 1960–1970
Ringo Starr Drums 1962–1970

Customisation

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

Variables

Name Default value
Colours
$blue #2478ff
$pink #ff2450
$purple #9524ff
$grey-light hsl(0, 0%, 50%)
$grey hsl(0, 0%, 20%)
$grey-dark hsl(0, 0%, 10%)
$background hsl(0, 0%, 95%)
$border hsl(0, 0%, 90%)
$text $grey
$text-code $pink
$text-strong $grey-dark
$text-light $grey-light
$text-headings $grey-dark
$text-blockquote $grey-light
$link $blue
$link-hover $blue
$link-visited $purple
$background-code $background
$background-ins lime
$background-mark yellow
$table-background hsl(0, 0%, 100%)
$table-background-even hsl(0, 0%, 98%)
$table-background-hover hsl(0, 0%, 96%)
$table-border $border
$table-thead $grey-dark
Spacing
$line-height 1.6
$margin 1.4em
Typography
$family-wysiwyg
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
$family-code
"Inconsolata", "Consolas", "Monaco", monospace
$weight-strong 700
$weight-headings 700

Options

By default, all options are set to false.

Option If set to true
$closer-lists

Brings lists closer to the paragraph they immediately follow

$custom-colors

Applies the color variables to the content:

  • $text
  • $link
  • $text-strong
  • $text-headings
  • $text-blockquote
  • $text-code
  • $text-light
  • $table-thead
$custom-fonts

Applies the font-family variables to the content:

  • $family-wysiwyg
  • $family-code
$font-smoothing

Applies font smoothing to non-code content

$heading-borders

Adds bottom borders to h1 and h2

$show-underline

Underlines links

$striped-rows

Adds striped rows to tables

$visited-links

Applies the $link-visited color to visited links

Fork me on GitHub