Because modern web design doesn't have to be hard.


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

Text Styles


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


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

<p>This is a paragraph. If I choose, I can make things <strong>bold</strong>, <em>italicized</em>, or <strong><em>both at once.</em><strong></p>


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.


Header 1 Secondary Text

Header 2 Secondary Text

Header 3 Secondary Text

<h1>Header 1 <small>Secondary Text</small></h1>

<h2>Header 2 <small>Secondary Text</small></h2>

<h3>Header 3 <small>Secondary Text</small></h3>


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.


Subtitle 1

Subtitle 2

Subtitle 3

<h1 class="subtitle">Subtitle 1 </h1>

<h2 class="subtitle">Subtitle 2 </h2>

<h3 class="subtitle">Subtitle 3 </h3>

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.


Anything can be placed inside of an attention box.

<div class="attention">

  <p>Anything can be placed inside of an attention box.<p>


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

Nested attention boxes!

Nested attention boxes! (Deja vu, anyone?)

<div class="attention">

  <p>Nested attention boxes!<p>

  <div class="attention">

    <p>Nested attention boxes! (Deja vu, anyone?)<p>



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.


You can print things using the PRINT command.

<p>You can print things using the <code>PRINT</code> command.</p>

Multi-line code blocks:

10 PRINT "Weave.css is awesome."

20 GOTO 10

<div class="codeblock">

  <p>10 PRINT "Weave.css is awesome."</p>

  <p>20 GOTO 10</p>


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:

$sudo apt-get update

<div class="shell codeblock">

  <p>sudo apt-get update</p>



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


Label TextDescription text, or something.

<p><span class="label">Label Text</span>Description text, or something.</p>

Form Elements


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

<a href="#" class="button">Normal</a>

<a href="#" class="flat button">Flat</a>

<a href="#" class="secondary button">Secondary</a>

<a href="#" class="flat secondary button">Secondary Flat</a>

<a class="disabled button">Disabled</a>

Form Buttons

<button type="button" class="button">Normal</button>

<button type="button" class="flat button">Flat</button>

<button type="button" class="secondary button">Secondary</button>

<button type="button" class="flat secondary button">Secondary Flat</button>

<button type="button" disabled class="disabled button">Disabled</button>