Rabbit

UW Student Seminars (WUMSS) maintains a fork of tacit, originally created by Yegor Bugayenko. To avoid confusion with the original, our fork is branded as rabbit.

Rabbit is a CSS framework to make web services to look attractive without graphic design. This is how your website will look if you add just this code to your HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://wumss.github.io/rabbit/rabbit.min.css"/>
  </head>
</html>

Don’t use CSS classes to make your HTML code look nice. (With one exception: the hamburger menu requires a few classes and IDs, see below!) Just make sure it is HTML5 compliant and you’ll be fine. Again, no classes, just standard HTML elements, like <table> and <input>.

Check the source code of this page.

Hamburger Menu

Structure your navigation like this to take advantage of Rabbit’s responsive hamburger menu:

<header>
  <nav>
    <input id="nav-trigger" class="nav-trigger" type="checkbox" checked="checked">
    <ul>
      <li><a href="/">Home</a></li><!--
   --><li><a href="/link">Other Link</a></li>
    </ul>
    <label for="nav-trigger"></label>
  </nav>
</header>

Forms

Here is a simple form:

Tables

A simple table would look like this:

Make	Price	Year
BMW X6	$75,000	2013
Mercedes-Benz E350	$52,700	2014

Headings

Just use standard <h1>...<h6> tags:

This is <h1>

Use a heading of the highest level once per page.

This is <h2>

Use <h2> for sections of the page.

This is <h3>

Use <h3> for sub-sections.

This is <h4>

Avoid this type of heading.

This is <h5>

Avoid this type of heading.

This is <h6>

Avoid this type of heading.

Lists

Just use standard <ul>, <ol> and <dl> tags:

Orange
Apple
1. First
2. Second
  - Blue
  - Yellow
  - Green
  - Red
3. Third
Apricot

Banana: A yellow fruit that is easy to peel.; Which also grows on a tree.
Cashew: A tan nut without a peel.
Cherry: A red fruit that is hard to peel.

Blockquote

Use this to emphasize a quote
— Author Name, Publication

Keyboard

Sometimes you want to let people know they should press a keyboard command like ctrl + l.

Images

Work in progress

The framework is still in development.