Documentation

NoticeWeave.css is currently under development. Things may be unfinished or rough.

Text Styles

Paragraphs

Paragraphs use the font and color specified by the --main-font-family and --main-text-color variables. As with any HTML document, you can use <em> and <strong> for italics or bold text, respectively.

By default, Weave.css uses your system font. (San Francisco on Mac, Segoe UI on Windows, and the Ubuntu font on GNU/Linux systems.)

Example:

This is a paragraph. If I choose, I can make things bold, italicized, or both at once.

Headers

Weave.css includes two header styles - one that uses your --header-font-family and one that uses the --main-font-family variables.

The default font for headers is the light variant of your system font. You can change the header weight by modifying the --header-font-weight variable.

Secondary text can be added to headers using the <small> tag.

Examples:

Header 1 Secondary Text

Header 2 Secondary Text

Header 3 Secondary Text

Subtitles

Subtitles are similar to headers, except that the color is changed to a lighter grey. You can make a header into a subtitle by adding the class="subtitle" to it.

Examples:

Subtitle 1

Subtitle 2

Subtitle 3

TipThe subtitle class can be applied to any element, and it will have the same effect.

Text Additions

Weave.css includes a few other features that may be useful in styling text.

Attention Boxes

Attention boxes can be used to draw attention to a certain part of a page. Any element can be placed inside of them. They can even be nested inside one another.

To use an attention box, create a div with the class attention.

Examples:

You can even put an attention box inside another attention box, and the background darkens to create a sense of hierarchy, like this:

Code Blocks

You've probably already seen a few code blocks throughout this page. Code blocks are used for... displaying code, of course.

There are two kinds of code blocks: inline code, and multi-line code blocks.

Examples:

You can print things using the PRINT command.

Multi-line code blocks:

Fun FactPutting code blocks into code blocks was really meta.

There is even a version of the multi-line code block designed for shell commands:

Labels

Labels can be added before a paragraph, to draw attention to it.

Example:

Label TextDescription text, or something.

Form Elements

Buttons

Weave.css includes a few options for buttons. By default, they use the color defined by the --primary-color variable, but they also come in a secondary variation that has a grey background. There are also flat buttons, which have a more subtle animation.

Link Buttons

Normal Flat Secondary Secondary Flat Disabled

Form Buttons

Normal Flat Secondary Secondary Flat Disabled