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:

• Users can change the font size and your design will scale accordingly.
• It's easy to design to a "soft grid" of half and whole rems. This adds a consistent and more professional-looking visual rhythm to the page.

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.

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

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:

• .no-margin-on-mobile - set margin: 0
• .hide-on-mobile - hide via display: none
• .wide-on-mobile - expand to full column width
• .center-on-mobile - center text and alignment

Typography  

Headings h1-h6

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)

Lists ul, ol, li

<!-- 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

<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

.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  

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

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

Alerts  

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

<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  

• Larger input text for easier editing.
• Optimized for vertical stacking. This is mobile-friendly and easier for users to visually understand.

<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

• SVG Icons
• Css Module
• Response.sendPage