Documentation

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.

Grid

While it's recommended to use your own layout techniques specific to your use-case, Ozli provides a simple HTML shortcut via data-grid attributes for basic column-based layouts.

Result

12-column-based grid examples

You can have as many columns in a 12-column-based grid as you'd like, as long as they all add up to 12.


Variable column amounts, same size for each column

col-fill
col-half
col-half
col-third
col-third
col-third
col-quarter
col-quarter
col-quarter
col-quarter
col-6
col-6
col-4
col-4
col-4
col-2
col-2
col-2
col-2
col-2
col-2
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1
col-1

Variable column amounts, variable column sizes

col-1
col-10
col-1
col-2
col-8
col-2
col-quarter
col-6
col-quarter
col-4
col-6
col-2
col-1
col-1
col-6
col-4

2 columns, different sizes

col-11
col-1
col-10
col-2
col-8
col-4
col-7
col-5
col-6
col-6
col-5
col-7
col-4
col-8
col-2
col-10
col-1
col-11

6-column-based grid examples

You can have as many items in a 6-column-based grid as you'd like, as long as they all add up to 6.


Variable column amounts, same size for each column

col-fill
col-half
col-half
col-third
col-third
col-third
col-2
col-2
col-2
col-1
col-1
col-1
col-1
col-1
col-1

Variable column amounts, variable column sizes

col-1
col-4
col-1
col-1
col-1
col-2
col-2
col-2
col-4
col-5
col-1
col-1
col-1
col-4

2 columns, different sizes

col-5
col-1
col-4
col-2
col-2
col-4
col-1
col-5

3-column-based grid examples

You can have as many columns in a 3-column-based grid as you'd like, as long as they all add up to 3.

col-fill
col-2
col-1
col-1
col-2
col-1
col-1
col-1
Code <style>.gridExample div .card { margin: 0.5rem; }</style>
<div class="gridExample">
<h3>12-column-based grid examples</h3>
<p>You can have as many columns in a 12-column-based grid as you'd like, as long as they all add up to <strong>12</strong>.</p>

<br>
<h4>Variable column amounts, same size for each column</h4>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-fill">col-fill</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-half">col-half</div>
<div class="card" data-grid="col-half">col-half</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-third">col-third</div>
<div class="card" data-grid="col-third">col-third</div>
<div class="card" data-grid="col-third">col-third</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-quarter">col-quarter</div>
<div class="card" data-grid="col-quarter">col-quarter</div>
<div class="card" data-grid="col-quarter">col-quarter</div>
<div class="card" data-grid="col-quarter">col-quarter</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-6">col-6</div>
<div class="card" data-grid="col-6">col-6</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-4">col-4</div>
<div class="card" data-grid="col-4">col-4</div>
<div class="card" data-grid="col-4">col-4</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-2">col-2</div>
<div class="card" data-grid="col-2">col-2</div>
<div class="card" data-grid="col-2">col-2</div>
<div class="card" data-grid="col-2">col-2</div>
<div class="card" data-grid="col-2">col-2</div>
<div class="card" data-grid="col-2">col-2</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
</div>

<br>
<h4>Variable column amounts, variable column sizes</h4>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-10">col-10</div>
<div class="card" data-grid="col-1">col-1</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-2">col-2</div>
<div class="card" data-grid="col-8">col-8</div>
<div class="card" data-grid="col-2">col-2</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-quarter">col-quarter</div>
<div class="card" data-grid="col-6">col-6</div>
<div class="card" data-grid="col-quarter">col-quarter</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-4">col-4</div>
<div class="card" data-grid="col-6">col-6</div>
<div class="card" data-grid="col-2">col-2</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-6">col-6</div>
<div class="card" data-grid="col-4">col-4</div>
</div>

<br>
<h4>2 columns, different sizes</h4>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-11">col-11</div>
<div class="card" data-grid="col-1">col-1</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-10">col-10</div>
<div class="card" data-grid="col-2">col-2</div>
</div>
<!--<div data-grid="grid-col-12">
<div class="card" data-grid="col-9">col-9</div>
<div class="card" data-grid="col-quarter">col-quarter</div>
</div> col-9 and col-3 are buggy, need to figure out why. -->
<div data-grid="grid-col-12">
<div class="card" data-grid="col-8">col-8</div>
<div class="card" data-grid="col-4">col-4</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-7">col-7</div>
<div class="card" data-grid="col-5">col-5</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-6">col-6</div>
<div class="card" data-grid="col-6">col-6</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-5">col-5</div>
<div class="card" data-grid="col-7">col-7</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-4">col-4</div>
<div class="card" data-grid="col-8">col-8</div>
</div>
<!--<div data-grid="grid-col-12">
<div class="card" data-grid="col-3">col-3</div>
<div class="card" data-grid="col-9">col-9</div>
</div>-->
<div data-grid="grid-col-12">
<div class="card" data-grid="col-2">col-2</div>
<div class="card" data-grid="col-10">col-10</div>
</div>
<div data-grid="grid-col-12">
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-11">col-11</div>
</div>

<br>
<h3>6-column-based grid examples</h3>
<p>You can have as many columns in a 6-column-based grid as you'd like, as long as they all add up to <strong>6</strong>.</p>

<br>
<h4>Variable column amounts, same size for each column</h4>
<div data-grid="grid-col-6">
<div class="card" data-grid="col-fill">col-fill</div>
</div>
<div data-grid="grid-col-6">
<div class="card" data-grid="col-half">col-half</div>
<div class="card" data-grid="col-half">col-half</div>
</div>
<!--<div data-grid="grid-col-6">
<div class="card" data-grid="col-3">col-3</div>
<div class="card" data-grid="col-3">col-3</div>
</div>-->
<div data-grid="grid-col-6">
<div class="card" data-grid="col-third">col-third</div>
<div class="card" data-grid="col-third">col-third</div>
<div class="card" data-grid="col-third">col-third</div>
</div>
<div data-grid="grid-col-6">
<div class="card" data-grid="col-2">col-2</div>
<div class="card" data-grid="col-2">col-2</div>
<div class="card" data-grid="col-2">col-2</div>
</div>
<div data-grid="grid-col-6">
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
</div>

<br>
<h4>Variable column amounts, variable column sizes</h4>
<div data-grid="grid-col-6">
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-4">col-4</div>
<div class="card" data-grid="col-1">col-1</div>
</div>
<div data-grid="grid-col-6">
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-2">col-2</div>
<div class="card" data-grid="col-2">col-2</div>
</div>
<div data-grid="grid-col-6">
<div class="card" data-grid="col-2">col-2</div>
<div class="card" data-grid="col-4">col-4</div>
</div>
<div data-grid="grid-col-6">
<div class="card" data-grid="col-5">col-5</div>
<div class="card" data-grid="col-1">col-1</div>
</div>
<div data-grid="grid-col-6">
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-4">col-4</div>
</div>

<br>
<h4>2 columns, different sizes</h4>
<div data-grid="grid-col-6">
<div class="card" data-grid="col-5">col-5</div>
<div class="card" data-grid="col-1">col-1</div>
</div>
<div data-grid="grid-col-6">
<div class="card" data-grid="col-4">col-4</div>
<div class="card" data-grid="col-2">col-2</div>
</div>
<!--<div data-grid="grid-col-6">
<div class="card" data-grid="col-5">col-3</div>
<div class="card" data-grid="col-1">col-3</div>
</div>-->
<div data-grid="grid-col-6">
<div class="card" data-grid="col-2">col-2</div>
<div class="card" data-grid="col-4">col-4</div>
</div>
<div data-grid="grid-col-6">
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-5">col-5</div>
</div>

<br>
<h3>3-column-based grid examples</h3>
<p>You can have as many columns in a 3-column-based grid as you'd like, as long as they all add up to <strong>3</strong>.</p>

<div data-grid="grid-col-3">
<div class="card" data-grid="col-fill">col-fill</div>
</div>
<div data-grid="grid-col-3">
<div class="card" data-grid="col-2">col-2</div>
<div class="card" data-grid="col-1">col-1</div>
</div>
<div data-grid="grid-col-3">
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-2">col-2</div>
</div>
<div data-grid="grid-col-3">
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
<div class="card" data-grid="col-1">col-1</div>
</div>
</div>


Note: Remember to include the Ozli grid stylesheet in your head for this to work!

<link rel="stylesheet" href="https://ozli.ga/Ozli-v1.8/grid.css"></link>

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>
<br>
<button class="small">Small default button</button>
<button class="primary small">Small primary button</button>
<br>
<button class="small" disabled>Disabled small default button</button>
<button class="primary small" disabled>Disabled small primary button</button>

Form inputs

Result

















Code <form>
<label for="textboxInput">Textbox input</label>
<input name="textboxInput" type="text">

<br>
<label for="dateInput">Date input</label>
<input name="dateInput" type="date">

<br>
<label for="monthInput">Month input</label>
<input name="monthInput" type="month">

<br>
<label for="weekInput">Week input</label>
<input name="weekInput" type="week">

<br>
<label for="timeInput">Time input</label>
<input name="timeInput" type="time">

<br>
<label for="dateTimeInput">Datetime input</label>
<input name="dateTimeInput" type="datetime-local">

<br>
<label for="numberInput">Number input</label>
<input name="numberInput" type="number">

<br>
<label for="telephoneInput">Telephone input</label>
<input name="telephoneInput" type="tel">

<br>
<label for="emailInput">Email input</label>
<input name="emailInput" type="email">

<br>
<label for="passwordInput">Password input</label>
<input name="passwordInput" type="password">

<br>
<label for="searchInput">Search input</label>
<input name="searchInput" type="search">

<br>
<label for="urlInput">URL input</label>
<input name="urlInput" type="url">

<br>
<label for="textareaInput">Textarea input</label>
<textarea name="textareaInput"></textarea>

<br>
<label for="fileInput">File input</label>
<input name="fileInput" type="file">

<br>
<label for="checkboxInput1">Checkbox input (unchecked)</label>
<input name="checkboxInput1" type="checkbox">

<br>
<label for="checkboxInput2">Checkbox input (checked)</label>
<input name="checkboxInput2" type="checkbox" checked>

<br>
<label for="radioInput">Radio input</label>
<input name="radioInput" type="radio">
<input name="radioInput" type="radio" checked>

<br>
<label class="switch">
<span>Switch input without status text</span>
<input class="switch" type="checkbox" name="switchInput">
</label>
</form>

Badges

Badges are useful for visually tagging content, or for showing warning or error messages inline.

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 persona is a representation of a single identity or user. When interactive, it links to an account or profile page that show more information and relative metadata about that identity/user.

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


Note: Remember to include the Ozli script at the bottom of your body for this to work!

<script defer async src="https://ozli.ga/Ozli-v1.8/Ozli-v1.8.js"></script>

Footers

Result
Code <footer>Example footer</footer>
<footer class="lightweight">Lightweight example footer</footer>

Icons

Result
  • Edit icon using span:
  • Edit icon using i:

Playback icons

Play

&#xE768;

Pause

&#xE769;

Stop

&#xE71A;

Previous

&#xE892;

Next

&#xE893;

Full screen

&#xE740;

Back to windowed

&#xE73F;

Mute

&#xE74F;

Volume

&#xE767;

CC, subtitles

&#xE7F0;

Settings cog

&#xE713;


Rating icons

Like, thumbs up

&#xE8E1;

Dislike, thumbs down

&#xE8E0;

Star (outlined)

&#xE734;

Star (filled)

&#xE735;


Editing icons

Edit pencil

&#xE70F;

Cut

&#xE8C6;

Copy

&#xE8C8;

Paste

&#xE77F;

Undo

&#xE7A7;

Redo

&#xE7A6;

Delete

&#xE74D;

Save

&#xE74E;

Font

&#xE8D2;

Italic

&#xE8DB;

Underline

&#xE8DC;

Bold

&#xE8DD;

Highlight

&#xE7E6;

Crop

&#xE7A8;

Caption

&#xE8BA;

Align left

&#xE8E4;

Align centre

&#xE8E3;

Align right

&#xE8E2;


More icons

Click here for a full list of icons.

Code <li>Edit icon using span: <spanclass="icon">&#xE70F;</span></li>
<li>Edit icon using i: <i class="icon">&#xE70F;</i></li>

Cards

Result

W.I.P.

Code W.I.P.

Components

Grid
  • [data-grid=grid-col-12]
  • [data-grid=grid-col-6]
  • [data-grid=grid-col-3]
  • [data-grid=col-fill]
  • [data-grid=col-half]
  • [data-grid=col-third]
  • [data-grid=col-quarter]
  • [data-grid=col-12]
  • [data-grid=col-11]
  • [data-grid=col-10]
  • [data-grid=col-9]
  • [data-grid=col-8]
  • [data-grid=col-7]
  • [data-grid=col-6]
  • [data-grid=col-5]
  • [data-grid=col-4]
  • [data-grid=col-3]
  • [data-grid=col-2]
  • [data-grid=col-1]
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]
  • button.small
  • button.primary.small
  • button.small[disabled]
  • button.primary.small[disabled]
Form inputs
  • input[type="text"]
  • input[type="date"]
  • input[type="month"]
  • input[type="week"]
  • input[type="time"]
  • input[type="datetime-local"]
  • input[type="number"]
  • input[type="tel"]
  • input[type="email"]
  • input[type="password"]
  • input[type="search"]
  • input[type="url"]
  • input[type="file"]
  • textarea
  • 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
Icons
  • span.icon
  • i.icon
Cards
  • div.card

Test