OWL Base Stylesheet

OWL 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 framework 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  

These 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  

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

Icons  

OWL comes with a set of essential icons in SVG format, which means they inherit all text styles (size, color, etc.).

They are only about 50 bytes each and are inlined, so they don't trigger any extra network requests.

<span style="color: red">> {{ Web.icon('cancel') }} Cancel
arrowLeft
arrowRight
arrowUp
arrowDown
chevronLeft
chevronRight
chevronUp
chevronDown
wideChevronLeft
wideChevronRight
wideChevronUp
wideChevronDown
caretLeft
caretRight
caretUp
caretDown
menu
plus
minus
cancel
check
home
download
upload
search
lock
heart
star
twitter
facebook