Thin UI

Flex Grid

Thin UI Flex Grid is a lightweight column grid with all the power of flexbox. Built using a functional CSS approach, which means you get exactly what you ask for without any hidden surprises. The resulting file size is far smaller than a traditional column grid.

The Basic Auto Layout

Each column inside the grid is automatically assigned an equal share of the total. The columns are built to respect the layout over the content.

<div class="thin-ui-grid">
    <div class="thin-ui-col">
        Auto Column
    </div>
    <div class="thin-ui-col">
        Auto Column
    </div>
    <div class="thin-ui-col">
        Auto Column
    </div>
</div>

Percentage Based Columns

Based on the familiar n/12 column system.

<div class='thin-ui-grid'>
  <div class='thin-ui-col thin-ui-col-3'>
    25% (3/12)
  </div>
  <div class='thin-ui-col thin-ui-col-9'>
    75% (9/12)
  </div>
</div>

Flex Grow Columns

Based on flex-grow, this layout style allows for dynamic content distribution. These columns will respect their given ratio and resist dropping onto a second row unlike a percentage based column.

<div class='thin-ui-grid'>
  <div class='thin-ui-col thin-ui-col-grow-3'>
    Grow 3 Columns
  </div>
  <div class='thin-ui-col'>
    Auto Column
  </div>
</div>

Fixed Columns

Add in the fixed column class and pass the column a defined width or allow content like an image to dictate the desired width. It's recommended to fill the space with dynamic flex columns however you can mix in percent based columns too. Utilizing a fixed column with only percent based columns will make it difficult to reach 100%.

<div class='thin-ui-grid'>
  <div class='thin-ui-col thin-ui-col-fixed' style='width:168px;'>
    thin-ui-col thin-ui-col-fixed
  </div>
  <div class='thin-ui-col'>
    thin-ui-col
  </div>
  <div class='thin-ui-col'>
    thin-ui-col
  </div>
</div>

Mixed Columns

This is the real power of flexbox at work in your layouts.

<div class='thin-ui-grid'>
  <div class='thin-ui-col thin-ui-col-fixed' style='width:168px;'>
    Fixed Column
  </div>
  <div class='thin-ui-col thin-ui-col-grow-2'>
    Grow 2 Column
  </div>
  <div class='thin-ui-col'>
    Auto Column
  </div>
  <div class='thin-ui-col thin-ui-col-3'>
    25% (3/12)
  </div>
</div>

Content Alignment

Vertically align the content inside of a column.

<div class='thin-ui-grid'>
  <div class='thin-ui-col thin-ui-col-top' style='height:96px;'>
    Content aligned to top
  </div>
  <div class='thin-ui-col thin-ui-col-middle' style='height:96px;'>
    Content aligned to middle
  </div>
  <div class='thin-ui-col thin-ui-col-bottom' style='height:96px;'>
    Content aligned to bottom
  </div>
</div>

Column Vertical Alignment

Columns alignment relative to each other inside of the .thin-ui-grid container.

<div class='thin-ui-grid'>
  <div class='thin-ui-col thin-ui-col-align-top'>
    Top Aligned Column
  </div>
  <div class='thin-ui-col thin-ui-col-align-middle'>
    Middle Aligned Column
  </div>
  <div class='thin-ui-col thin-ui-col-align-bottom'>
    Bottom Aligned Column
  </div>
  <div class='thin-ui-col' style='height:112px;'>
    Tall Column
  </div>
</div>

Grid Horizontal Alignment

Apply modifier classes to the .thin-ui-grid element to change the alignment of columns.

<div class='thin-ui-grid thin-ui-grid-end'>
  <div class='thin-ui-col thin-ui-col-6'>
    Aligned to the end
  </div>
</div>

Column Distribution

Distribute space around or between columns equally.

<div class='thin-ui-grid thin-ui-grid-between'>
  <div class='thin-ui-col thin-ui-col-3'>
    Equal space between columns
  </div>
  <div class='thin-ui-col thin-ui-col-3'>
    Equal space between columns
  </div>
  <div class='thin-ui-col thin-ui-col-3'>
    Equal space between columns
  </div>
</div>

Column Ordering

Change the order of columns by using the modifier classes .thin-ui-col-first to move a column to the first position or .thin-ui-col-last to move it to the last position.

<div class='thin-ui-grid'>
  <div class='thin-ui-col thin-ui-col-last'>
    1st Column
  </div>
  <div class='thin-ui-col'>
    2nd Column
  </div>
  <div class='thin-ui-col'>
    3rd Column
  </div>
</div>

Grid Nesting

Grids nest easily with no cascading conflicts. Great for complex layouts.

<div class='thin-ui-grid'>
  <div class='thin-ui-col'>
    Auto Column
    <div class='thin-ui-grid'>
      <div class='thin-ui-col'>
        Nested Inside
      </div>
      <div class='thin-ui-col'>
        Nested Inside
      </div>
    </div>
  </div>
  <div class='thin-ui-col'>
    Auto Column
  </div>
</div>

Forms

All form elements have a standard, default style, a basic reset to bring them in line with modern standards (font, font size, border, border radius, background and shadow).

Standard/Default Styling

<form class="thin-ui-form">
    ...
</form>

Enhanced Styling

Group Switches

Switch One Switch Two

Email me about account activity

Single-element Toggle Switch

Toggle Switch

Checkblocks

Color Picker (basic)

Buttons

Button Sizes

Mini buttons

Primary Button Secondary Button Neutral Button

<a href="#" class="thin-ui-button thin-ui-button-primary thin-ui-button-small">Primary Button</a>
    <a href="#" class="thin-ui-button thin-ui-button-secondary thin-ui-button-small">Secondary Button</a>
    <a href="#" class="thin-ui-button thin-ui-button-neutral thin-ui-button-small">Neutral Button</a>

Small buttons

Primary Button Secondary Button Neutral Button

<a href="#" class="thin-ui-button thin-ui-button-primary thin-ui-button-small">Primary Button</a>
<a href="#" class="thin-ui-button thin-ui-button-secondary thin-ui-button-small">Secondary Button</a>
<a href="#" class="thin-ui-button thin-ui-button-neutral thin-ui-button-small">Neutral Button</a>

Regular buttons

Primary Button Secondary Button Neutral Button

<a href="#" class="thin-ui-button thin-ui-button-primary thin-ui-button-regular">Primary Button</a>
<a href="#" class="thin-ui-button thin-ui-button-secondary thin-ui-button-regular">Secondary Button</a>
<a href="#" class="thin-ui-button thin-ui-button-neutral thin-ui-button-regular">Neutral Button</a>

Regular buttons (rounded)

Primary Button Secondary Button Neutral Button

<a href="#" class="thin-ui-button thin-ui-button-primary thin-ui-button-regular thin-ui-button-rounded">Primary Button</a>
<a href="#" class="thin-ui-button thin-ui-button-secondary thin-ui-button-regular thin-ui-button-rounded">Secondary Button</a>
<a href="#" class="thin-ui-button thin-ui-button-neutral thin-ui-button-regular thin-ui-button-rounded">Neutral Button</a>

Large buttons

Primary Button Secondary Button Neutral Button

<a href="#" class="thin-ui-button thin-ui-button-primary thin-ui-button-large">Primary Button</a>
<a href="#" class="thin-ui-button thin-ui-button-secondary thin-ui-button-large">Secondary Button</a>
<a href="#" class="thin-ui-button thin-ui-button-neutral thin-ui-button-large">Neutral Button</a>

Hero buttons

Download

<a href="#" class="thin-ui-button thin-ui-button-primary thin-ui-button-hero">Primary Hero Button</a>

Boxes

Inner boxes, complete with border, border radius, shadow and more.

Pills

Flexible pill elements containing name/value pairs. Suitable for short name/value attributes, with or without links.

• browser Edge 14.14393
• browser.name Edge
• handled no
• level error
• mechanism onerror
• url https://getbutterfly.com/how-to-show-an-outdated-browser-alert-on-internet-explorer-11/

<ul class="thin-ui-pills">
    <li class="thin-ui-pill">
        <span class="thin-ui-pill-name">browser</span>
        <span class="thin-ui-pill-value">Edge 14.14393</span>
    </li>
    <li class="thin-ui-pill">
        <span class="thin-ui-pill-name">browser.name</span>
        <span class="thin-ui-pill-value"><a href="#">Edge</a></span>
    </li>
</ul>

Popovers

CSS-only popovers. The example below uses Font Awesome SVG icons. Font Awesome SVG styling is natively integrated with Thin UI.

<div class="thin-ui-popover">
    <button type="button" name="popover">🛎️</button>
    <div class="thin-ui-popover-body">
        <h3>Popover Content #1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
</div>

Tabs

CSS tabs. The example below uses Font Awesome SVG icons. Font Awesome SVG styling is natively integrated with Thin UI.

Modal Dialog

A simple modal dialog, using only Vanilla JavaScript

Usage

Import thin-ui.css and thin-ui-modal.js into your HTML.

<link rel="stylesheet" href="thin-ui.css">
<script src="thin-ui-modal.js"></script>

Add a function that will call the modal dialog, to handle the Promise. Based on modalResponse value (true, false or null), execute any code or action you need.

async function openModal() {
    this.myModal = new SimpleModal('Hello there!', 'Do you like this modal popup? It is very light and easy to configure.', 'Sure, 100%', 'Not really, no');
    try {
        const modalResponse = await myModal.question();
        alert(`The response is ${modalResponse}`);
    } catch (err) {
        console.log(err);
    }
}

Details/Summary

A pretty <details> element.