Version: v0.7.0 - Beta.  We welcome contributors & feedback.

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:

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.

Cell 1
Cell 2
Cell 3
Cell 4

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:


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

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.

Unstyled List

Blockquote

"Come friends, it's not too late to seek a newer world."

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

Code code, pre, kbd

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

fn someCode {
    // a comment
}

Tables  

Heading 1Heading 2Heading 3
Data 1Data 2Data 3
Data 1Data 2Data 3
Data 1Data 2Data 3

Utility Classes  

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

Forms  

Forms are designed according to usability best practices.

See also the Form module.

Text Input

We promise not to spam you.
<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 Class

Button-ish Content

<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