Version: v0.5.0 - Beta.  We welcome contributors & feedback.  THanks!

Base Stylesheet

THT comes with a minimal CSS framework (3.9kb gzipped) that is responsive and has a modern look & feel.

It can be used as a foundation for most kinds of content-centric web sites.

Usage  

Just call Css.include('base') at the top of your CSS template.

template css() {

    {{ Css.include('base') }}

    // your styles ...
}

An optional second argument sets the width of the <main> element, in pixels.

{{ Css.include('base', 800) }}

Or, use the base token when calling Response.sendPage.

Response.sendPage({
    title: 'My Web App',
    body: bodyHtml(),
    css: ['base', '/assets/main.css']
});

Normalize

The stylesheet is built on top of Normalize. It provides default styles that are consistent across all browsers.

Sizing  

All element sizes are in rem (root element) units.

Conversion to pixels is 10:1, which is easy to remember:

1rem = 10px   e.g. 27px = 2.7rem

Setting all of your style rules to rems has a couple of benefits:

Grid Layout  

Using .row and .col classes, you can specify a 12-column grid based on flexbox.

By default, columns will expand to fill an even amount of space. Add .w# to specify a column width (out of 12).

Add .no-gutters to remove the left/right padding in a column or row.

.col
.col
.col
.col
.col.w4
.col
.col.w3
.col.w2
.col.w7
<.row>
    <.col>> .col
    <.col>> .col
    <.col>> .col
    <.col>> .col
</>

<.row>
    <.col.w4>> .col.w4
    <.col>> .col
</>

<.row>
    <.col.w3>> .col.w3
    <.col.w2>> .col.w2
    <.col.w7>> .col.w7
</>
NoteThe grid CSS can be included as a standalone stylesheet via Css.include('grid').

Mobile Breakpoint  

There is a single mobile breakpoint when the browser window is 780px wide (or your <main> width + 20px).

Viewports beyond this breakpoint will cause grid columns to stack and resize dynamically.

These utility classes can also be applied:


Typography  

Headings h1-h6

Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6

Heading Classes

You can add a .h1 - .h6 class to give a heading a different visual style, while keeping its semantic level.

<h2.h4>> Heading 2 (with h4 style)

Heading 2 (with h4 style)

Lists ul, ol, li

Unordered List
  • Bullet 1
  • Bullet 2
    • Sub-bullet 1
    • Sub-bullet 2
  • Bullet 3
Ordered List
  1. Bullet 1
  2. Bullet 2
    1. Sub-bullet 1
    2. Sub-bullet 2
  3. Bullet 3
Unstyled List
  • Bullet 1
  • Bullet 2
  • Bullet 3
<!-- Unordered List -->
<ul>
    <li>> Bullet 1
    <li> Bullet 2
        <ul>
            <li>> Sub-bullet 1
            <li>> Sub-bullet 2
        </>
    </>
    <li>> Bullet 3
</>

<!-- Ordered List -->
<ol>
    <li>> Bullet 1
    <li> Bullet 2
        <ol>
            <li>> Sub-bullet 1
            <li>> Sub-bullet 2
        </>
    </>
    <li>> Bullet 3
</>

<!-- Unstyled List -->
<ul.list-unstyled>
    <li>> Bullet 1
    <li>> Bullet 2
    <li>> Bullet 3
</>

Blockquote

"Well! I've often seen a cat without a grin," thought Alice. "But a grin without a cat! It's the most curious thing I ever saw in my life!"

Lewis Carroll, Alice in Wonderland
<blockquote>
    <p>> "Well! I've often seen a cat without a grin," thought Alice. "But a grin without a cat! It's the most curious thing I ever saw in my life!"
    <footer>> Lewis Carroll, Alice in Wonderland
</>

Code code, pre, kbd

Press Ctrl-C or call System.exit().

.myClass {
    border-radius: 1rem;
    padding: 0.5rem;
}
<p>
  Press <kbd>Ctrl-C</> or call <code>System.exit()</>.
</>

<pre>>>
    .myClass {
        border-radius: 1rem;
        padding: 0.5rem;
    }
</>

Tables  

Column 1Column 2Column 3
Data 1Data 2Data 3
Data 1Data 2Data 3
<table class='table'>
  <thead>
      <tr>
        <th>> Column 1
        <th>> Column 2
        <th>> Column 3
      </>
  </>
  <tbody>
      <tr>
        <td>> Data 1
        <td>> Data 2
        <td>> Data 3
      </>
      <tr>
        <td>> Data 1
        <td>> Data 2
        <td>> Data 3
      </>
   </>
</>

Panels  

A panel is a lightweight way to frame content.

This is a panel with a paragraph.

<.panel>
    <p>> This is a panel with a paragraph.
</>

Alerts  

Tip:This is an informational alert.
Error!This is an error alert.
Success!This is a success alert.
<.alert>
    <strong>> Tip:
    This is an informational alert.
</>

<.alert.alert-error>
    <strong>> Error!
    This is an error alert.
</>

<.alert.alert-success>
    <strong>> Success!
    This is a success alert.
</>

Buttons  

Default Primary
Default Normal
Large Primary
Large Normal
Small Primary
Small Normal
<input type='button' value='Form Button' />
<input type='submit' value='Form Submit' />

<.button.button-primary>> Primary
<.button>> Normal

<.button.button-large.button-primary>> Large Primary
<.button.button-large>> Large Normal

<.button.button-small.button-primary>> Small Primary
<.button.button-small>> Small Normal
<.button.button-link>> Link Button

Forms  

Forms are designed with usability in mind.
We promise not to spam you.
<form>
  <fieldset>
    <label for="exEmail">> Email Address
    <input type="email" id="exEmail" placeholder="you@mail.com" />
    <small class="text-muted">> We promise not to spam you.
  </>

  <fieldset>
    <label for="exPass">> Password
    <input type="password" id="exPass" />
  </>

  <fieldset>
    <label for="exSelect">> Select
    <select id="exSelect">
      <option>> Option 1
      <option>> Option 2
      <option>> Option 3
      <option>> Option 4
      <option>> Option 5
    </>
  </>

  <fieldset>
    <label for="exTextarea">> Textarea
    <textarea id="exTextarea" rows="3" />
  </>

  <fieldset>
    <label for="exFile">> File Upload
    <input type="file" id="exFile" />
  </>

  <fieldset>
      <.radio>
        <label>
          <input type="radio" name="exRadio" value="1" checked />
          Option 1
        </>
      </>
      <.radio>
        <label>
          <input type="radio" name="exRadio" value="2" />
          Option 2
        </>
      </>
      <.radio.disabled>
        <label>
          <input type="radio" name="exRadio" value="3" />
          Option 3
        </>
      </>
  </>

  <fieldset.checkbox>
    <label>
      <input type="checkbox" /> Accept the Terms
    </>
  </>

  <fieldset>> <button type="submit" class="button button-primary">> Submit

</form>

See also