Thin UI

Thin UI v2.1.1
https://github.com/getButterfly/thin-ui

Introduction

Thin UI is an opinionated, lightweight UI framework consisting of a Flex-powered column grid and a list of basic components, such as form fields and buttons. 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 CSS framework.

Installation

Thin UI consists of a Flex-powered column grid and a list of basic components, such as form fields and buttons.

Install the grid and the components as a bundle:

<link href="thin-ui.css" rel="stylesheet">

Changelog

= 2.1.1 =
* FIX: Fixed unstyled non-link pill value
* FIX: Fixed undeclared accent colour to match the primary colour
* UPDATE: Updated pills to use Flexbox
* UPDATE: Added box-sizing reset

= 2.1.0 =
* FEATURE: Added the details/summary element
* FIX: Updated the popover to not require a label element
* FIX: Updated the popover to be less overqualified

= 2.0.3 =
* FIX: Updated the popover to not inherit parent's styles

= 2.0.2 =
* FEATURE: Added single-element toggle
* FIX: Fixed the pill line height
* ENHANCEMENT: Reset the popover button
* ENHANCEMENT: Improved the modal close button usability

= 2.0.1 =
* FEATURE: Added modal dialog

= 2.0.0 =
* FIX: Prefixed all classes
* ENHANCEMENT: Removed and combined all related elements
* PERFORMANCE: Removed Font Awesome integration
* PERFORMANCE: Removed sf-menu/Thin UI navigation
* PERFORMANCE: Removed special case: reverse grid
* PERFORMANCE: Removed special case: media breakpoints

= 1.1.1 =
* DEPRECATED: Removed the duplicate switch (breaking change)
* DEPRECATED: Removed custom checkboxes (degrading change)

= 1.1.0 =
* ENHANCEMENT: Refactored the Popover component (removed JavaScript) (breaking change)
* ENHANCEMENT: Refactored the Tab component (removed JavaScript) (breaking change)
* DEPRECATED: Removed the Toast component (breaking change)

= 1.0.2 =
* FIX: Quoted a font name
* ENHANCEMENT: Simplified pill markup

Components

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.

.thin-ui-col
.thin-ui-col
.thin-ui-col
<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.

.thin-ui-col.thin-ui-col-3
.thin-ui-col.thin-ui-col-9
.thin-ui-col.thin-ui-col-4
.thin-ui-col.thin-ui-col-4
.thin-ui-col.thin-ui-col-4
.thin-ui-col.thin-ui-col-5
.thin-ui-col.thin-ui-col-2
.thin-ui-col.thin-ui-col-2
.thin-ui-col.thin-ui-col-3
<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.

.thin-ui-col.thin-ui-col-grow-2
.thin-ui-col
.thin-ui-col
.thin-ui-col.thin-ui-col-grow-3
.thin-ui-col.thin-ui-col-grow-2
.thin-ui-col
.thin-ui-col.thin-ui-col-grow-3
.col
<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%.

Fixed 168px
Auto Width
.col.col-fixed
.col
.col
<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.

Fixed 168px
Dynamic Width
.thin-ui-col.thin-ui-col-fixed
.col.col-grow-2
.col
Fixed 168px
Dynamic Width
25% of Total Width
.thin-ui-col.thin-ui-col-fixed
.thin-ui-col.thin-ui-col-grow-2
.col
.thin-ui-col.thin-ui-col-3
<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.

.thin-ui-col-top
.thin-ui-col-middle
.thin-ui-col-bottom
<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.

.thin-ui-col-align-top
.thin-ui-col-align-middle
.thin-ui-col-align-bottom
Tall column expanding
the height of
the 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.

.thin-ui-grid-start .thin-ui-col.thin-ui-col-6
.grid-center .thin-ui-col.thin-ui-col-3
.grid-center .thin-ui-col.thin-ui-col-3
.thin-ui-grid-end .thin-ui-col.thin-ui-col-6
<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.

.thin-ui-grid-around .thin-ui-col.thin-ui-col-3
.thin-ui-grid-around .thin-ui-col.thin-ui-col-3
.thin-ui-grid-around .thin-ui-col.thin-ui-col-3
.thin-ui-grid-between .thin-ui-col.thin-ui-col-3
.thin-ui-grid-between .thin-ui-col.thin-ui-col-3
.thin-ui-grid-between .thin-ui-col.thin-ui-col-3
<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.

1
2
3
1
2
.thin-ui-col-first
.thin-ui-col-last
2
3
<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.

Auto Column
Nested inside
Nested inside
Auto Column
<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

Single-element 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.

This is a title

This is a highlighted .col--inner element.

This is a title

This is a .col--inner element.

This is another title

This is a .col--inner element.

Pills

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

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

Item Title

Popover Content #1

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.

Popover Content #2

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.

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

Tab #1 Content

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.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tab #2 Content

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.

Tab #3 Content

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.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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.

This is the title
This is the subtitle

This is a paragraph.

This is another paragraph.

This is yet another paragraph.