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 </>
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:
.no-margin-on-mobile
- setmargin: 0
.hide-on-mobile
- hide viadisplay: 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)
Heading 2 (with h4 style)
Lists ul, ol, li
- Bullet 1
- Bullet 2
- Sub-bullet 1
- Sub-bullet 2
- Bullet 3
- Bullet 1
- Bullet 2
- Sub-bullet 1
- Sub-bullet 2
- Bullet 3
- 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!"
<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 1 | Column 2 | Column 3 |
---|---|---|
Data 1 | Data 2 | Data 3 |
Data 1 | Data 2 | Data 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
<.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
Forms are designed with usability in mind.- 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>