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

The Grid

The Thin UI grid is a lightweight column grid, based on the familiar n/12 column system, with all the power of CSS Grid. 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.

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

4 per row (auto → 3 cols each)

1
2
3
4
5
6
7
8

2 per row (6 cols each = 50%)

Left
Right

3 and 9

3 cols
9 cols

4 and 8

4 cols
8 cols

3, 3, and 6

3
3
6

3, 3, and 6, 6, 3, and 3

3
3
6
6
3
3

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

Form Elements Styling

Group Switches

Single-element Toggle Switch

Checkblocks

Color Picker (basic)

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

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>

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.