Basic CSS Framework

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

It can be used as a foundation for many kinds of web apps.

Usage

The stylesheet is pre-installed in the starter app at public/vendor/basic.css.

Example:

$page = Page.create({
    title: 'My Web App',
    body: bodyHtml(),
    css: ['/vendor/basic.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  

Just add a .grid class to an element to activate a basic 2-column CSS Grid style.

Each child element will be treated as a grid cell.

At the mobile breakpoint (see below), cells will expand to 100% width.

Customizing the Grid

You can override the number of columns and gap size using standard Grid CSS.

/* 3 columns with a 2rem gap */
.my-grid {
    grid-gap: 2rem;
    grid-template-columns: 50% 25% 25%;
}

Mobile Breakpoint  

There is a single mobile breakpoint when the browser window is 768px wide.

When the viewport is smaller than this breakpoint, grid cells to expand to 100% width.

These utility classes will also be activated:

• .hide-on-mobile - hide via display: none
• .wide-on-mobile - expand to 100% width
• .center-on-mobile - center text and alignment

Typography  

Font Stack

The base font stack uses the native UI font of the user's device, for the highest quality, glyph support, and legibility.

They are all close enough in proportion and style (modern sans serif) that your overall page style will appear consistent across devices.

-apple-system    (Apple)
Segoe UI         (Windows)
Roboto           (Android)
Helvetica Neue   (Older Apple)
Arial
sans-serif

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.

Lists

You can add the list-unstyled class to a list element (e.g. <ul>) to remove all bullet decorations from its child <li> elements.

Blockquote

<blockquote>
    <p> "Come friends, it's not too late to seek a newer world."
    <footer> Alfred, Lord Tennyson
</>

Code code, pre, kbd

fn someCode {
    // a comment
}

Tables  

Utility Classes  

• .break - bottom margin of 2rem
• .center - center the element within its parent
• .wide - set to 100% width

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

Forms  

Forms are designed according to usability best practices.

• Larger fields, for bigger click targets.
• Larger text, to make it easier to spot typos.
• Single-column vertical layout, which is mobile-friendly and easier for users to visually understand.

See also the Form module.

Text Input

<form>

  <!-- Email -->
  <.form-group>
      <label> Email
      <input name="email" type="email">
      <small> We promise not to spam you.
  </>

  <!-- Password -->
  <.form-group>
      <label> Password
      <input name="password" type="password">
  </>

  <!-- Textarea -->
  <.form-group>
    <label> Comment <small> optional
    <textarea name="comment"></>
  </>

</>

Selects, Radios, Checkboxes

<form>

  <!-- Select Pulldown -->
  <.form-group>
    <label> Pulldown
    <select name="pulldown">
      <option value="0"> Select...
      <option value="1"> Option 1
      <option value="2"> Option 2
      <option value="3"> Option 3
    </>
  </>

  <!-- Radio Buttons -->
  <.form-group>
    <label> Radio Buttons

    <.form-checks>
      <label.form-check>
        <input type="radio" name="exRadio" value="1" checked>
        <span> Option 1
      </>
      <label.form-check>
        <input type="radio" name="exRadio" value="2">
        <span> Option 2
      </>
      <label.form-check>
        <input type="radio" name="exRadio" value="3">
        <span> Option 3
      </>
    </>
  </>

  <!-- Checkmark -->
  <.form-group.form-checks>
    <label.form-check>
      <input type="checkbox" name="accept" id="exCheck" value="1">
      <span> I accept the Terms
    </>
  </>

</form>

Buttons  

<button type='submit'> Submit Button

<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

<.button> Button Class

<.button-ish.panel style="width:50%"> Button-ish Content

See also

• SVG Icons