THT is in early Beta. We welcome contributors & feedback.

THT Base Stylesheet

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

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

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.w4
.col
.col.w3
.col.w2
.col.w7
<.row>
    <.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;
}
Press <kbd>Ctrl-C</> or call <code>System.exit()</>.

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

Tables  

Tables are not automatically styled, because some 3rd party plugins still use tables for layout. To style tables, add the table class.
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.
</>

Messages  

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

<.message.error>
    <strong>> Error!
    This is an error message.
</>

<.message.success>
    <strong>> Success!
    This is a success message.
</>

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

Forms  

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" placeholder="Password" />
  </>

  <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="exMulti">> Multiple Select
    <select multiple id="exMulti">
      <option>> Option 1
      <option>> Option 2
      <option>> Option 3
      <option>> Option 4
      <option>> Option 5
      <option>> Option 6
      <option>> Option 7
    </>
  </>

  <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" id="exRadio1" value="option1" checked />
          Option 1
        </>
      </>
      <.radio>
        <label>
          <input type="radio" name="exRadio" id="exRadio2" value="option2" />
          Option 2
        </>
      </>
      <.radio.disabled>
        <label>
          <input type="radio" name="exRadio" id="exRadio3" value="option3" disabled />
          Option 3 is disabled
        </>
      </>
  </>

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

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

</form>
TIPWe recommend using the Form module instead of writing markup for forms by hand.

Form Grid

<.row.gutters>
    <.col>
        <fieldset>
            <label for="exUsername">> Username
            <input type="text" id="exUsername" />
        </>
    </>
    <.col>
        <fieldset>
            <label for="exPassword">> Password
            <input type="password" id="exPassword" />
            <small>> <a href="/">> Forgot your password?
        </>
    </>
</>