Documentation

Warning

This version of the framework is in alpha status. For production use, please use the previous version instead.


If you haven't already, check out the "Get started" page first.

General concepts

Before you start, there are some general concepts you should be aware of when producing Ozli web framework sites:

  1. You don't need to use custom class elements to take advantage of most of the framework's components.
  2. For elements and components that require additional markup or otherwise need attention before use, you will need to use the appropriate class names.
  3. It's recommended to use the appropriate web standards to achieve a specific result rather than attempting to cobble together different types of components provided by this framework that aren't intended to be mixed.
    • For example, don't use this framework's "switch" component to aid you in positioning a different, unrelated element. Instead, use flex, grid, padding and other industry-standard techniques.

Headings

Result

Heading 1

Heading 2

Heading 3

Heading 4

Code <h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Paragraphs

Result

Default paragraph

Paragraph 1

Paragraph 2

Paragraph 3

Code <p>Default paragraph</p>
<p class="paragraph-1">Paragraph 1</p>
<p class="paragraph-2">Paragraph 2</p>
<p class="paragraph-3">Paragraph 3</p>

Buttons

Result




Code <button>Default button</button>
<button class="primary">Primary button</button>
<button class="lightweight">Lightweight button</button>
<br>
<button disabled>Disabled default button</button>
<button class="primary" disabled>Disabled primary button</button>
<button class="lightweight" disabled>Disabled lightweight button</button>
<br>
<button class="flex">Default flex button</button>
<button class="primary flex">Primary flex button</button>
<button class="lightweight flex">Lightweight flex button</button>
<br>
<button class="flex" disabled>Disabled default flex button</button>
<button class="primary flex" disabled>Disabled primary flex button</button>
<button class="lightweight flex" disabled>Disabled lightweight flex button</button>
<br>
<button class="large">Large default button</button>
<button class="primary large">Large primary button</button>
<br>
<button class="large" disabled>Disabled large default button</button>
<button class="primary large" disabled>Disabled large primary button</button>

Form inputs

Result
Code (todo)

Badges

Result Default small badge Highlight small badge Lowlight small badge Accent small badge

Default large badge Highlight large badge Lowlight large badge Accent large badge
Code <strong class="badge small">Default small badge</strong>
<strong class="badge small highlight">Highlight small badge</strong>
<strong class="badge small lowlight">Lowlight small badge</strong>
<strong class="badge small accent">Accent small badge</strong>
<br><br>
<strong class="badge large">Default large badge</strong>
<strong class="badge large highlight">Highlight large badge</strong>
<strong class="badge large lowlight">Lowlight large badge</strong>
<strong class="badge large accent">Accent large badge</strong>

Blockquotes

Result
Default blockquote
Lightweight blockquote
Code <blockquote>Default blockquote</blockquote>
<blockquote class="lightweight">Lightweight blockquote</blockquote>

Personas

A short description of what a persona is would be written here.

Result

Jeff Jefferson

My name's Jeff (144px²)

Jeff Jefferson

My name's Jeff (96px²)

Jeff Jefferson

My name's Jeff (64px²)

Jeff Jefferson (48px²)

Jeff Jefferson (32px²)

Code <div class="persona">
<img class="round" src="https://placehold.it/144x144">
<div class="group">
<h2 class="heading-2">Jeff Jefferson</h2>
<p class="paragraph-2">My name's Jeff (144px²)</p>
</div>
</div>

<div class="persona">
<img class="round" src="https://placehold.it/96x96">
<div class="group">
<h3 class="heading-3">Jeff Jefferson</h3>
<p class="paragraph-3">My name's Jeff (96px²)</p>
</div>
</div>

<div class="persona">
<img class="round" src="https://placehold.it/64x64">
<div class="group">
<h4 class="heading-4">Jeff Jefferson</h4>
<p class="paragraph">My name's Jeff (64px²)</p>
</div>
</div>

<div class="persona">
<img class="round" src="https://placehold.it/48x48">
<div class="group">
<p class="paragraph-2 persona">Jeff Jefferson (48px²)</p>
</div>
</div>

<div class="persona">
<img class="round" src="https://placehold.it/32x32">
<div class="group">
<p class="persona">Jeff Jefferson (32px²)</p>
</div>
</div>

Dialogue boxes

Result

Test

Code <button onclick="openDialogueBox('testDialogue')">Open dialogue box</button>
<div class="dialogBgFader" style="display: none"></div>
<dialog class="testDialogue">
<button class="close">X</button>
<p>Test</p>
</dialog>

Components

Headings
  • h1
  • h2
  • h3
  • h4
Paragraphs
  • p
  • p.paragraph-1
  • p.paragraph-2
  • p.paragraph-3
Buttons
  • button
  • button.primary
  • button.lightweight
  • button[disabled]
  • button.primary[disabled]
  • butotn.lightweight[disabled]
  • button.flex
  • button.primary.flex
  • button.lightweight.flex
  • button.flex[disabled]
  • button.primary.flex[disabled]
  • button.lightweight.flex[disabled]
  • button.large
  • button.primary.large
  • button.large[disabled]
  • button.primary.large[disabled]
Form inputs
  • input[type="text"]
  • input[type="date"]
  • input[type="number"]
  • input[type="tel"]
  • input[type="email"]
  • input[type="password"]
  • input[type="checkbox"]
  • input[type="checkbox" checked]
  • input[type="radio"]
  • input[type="radio" checked]
  • input[type="radio"] (with desc.)
  • input[type="radio" checked] (with desc.)
  • input.switch[type="checkbox"]
  • input.switch[type="checkbox" checked]
  • input.switch[type="checkbox"] (custom state text)
  • input.switch[type="checkbox"] (no state text)
  • input.switch[type="checkbox"] (no label, auto state text)
  • input.switch[type="checkbox"] (no label, no state text)
Badges
  • strong.badge.small
  • strong.badge.small.highlight
  • strong.badge.small.lowlight
  • strong.badge.small.accent
  • strong.badge.large
  • strong.badge.large.highlight
  • strong.badge.large.lowlight
  • strong.badge.large.accent
Blockquotes
  • blockquote
  • blockquote.lightweight
Personas
  • div.persona (144px²)
  • div.persona (96px²)
  • div.persona (64px²)
  • div.persona (48px²)
  • div.persona (32px²)
Headers
  • header.typographic
  • header.typographic.small
  • header.typographic.lightweight
  • header.typographic.small.lightweight
Dialogue boxes
  • dialog
  • dialog[open]
  • div.dialogBgFader
Footers
  • footer
  • footer.lightweight