Skin documentation

Skin is a free open source library of Tailwind CSS components. The optional JavaScript functionality is written in vanilla JavaScript, so it all works out-of-the-box!

Getting started

Introduction

All class names used by Skin use the following prefixes:

tb-: Tailwind base
tc-: Tailwind component
tu-: Tailwind utility

Component modifiers utilize two dashes (--) in their names.

Installation

Install Skin via npm: npm install -D @bayfrontmedia/skin

Tailwind configuration

Add to the main stylesheet (modify path as needed): @import "./node_modules/@bayfrontmedia/skin/dist/css/skin.css";

Define the following variables in the main stylesheet (modify as needed):

@theme {
    --color-primary: var(--color-violet-500);
    --color-secondary: var(--color-orange-500);
}

@layer base {

    :root {

        --skin-text-primary: var(--color-white);
        --skin-text-secondary: var(--color-white);
        --skin-border-radius: .5rem;
        --skin-border-width: 1px;
        --skin-typo-radius: 0.25rem;

        --skin-bg-default: var(--color-gray-100);
        --skin-bg-content: var(--color-white);
        --skin-border-default: var(--color-gray-300);
        --skin-text-default: var(--color-gray-700);
        --skin-text-light: var(--color-gray-500);
        --skin-text-code: var(--color-red-600);

    }

    .dark {

        --skin-bg-default: var(--color-gray-900);
        --skin-bg-content: var(--color-gray-800);
        --skin-border-default: var(--color-gray-700);
        --skin-text-default: var(--color-gray-200);
        --skin-text-light: var(--color-gray-400);
        --skin-text-code: var(--color-red-400);

    }

}

To support dark mode via class names, add to the main stylesheet:

@custom-variant dark (&:where(.dark, .dark *));

JavaScript

Optionally add Skin's JavaScript file before the closing </body> tag:

<script src="path/to/dist/js/skin-lib.js"></script>

Either of the following CDN links can also be used:

<script src="https://www.unpkg.com/@bayfrontmedia/skin@3.0.1/dist/skin.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@bayfrontmedia/skin@3.0.1/dist/skin.min.js"></script>

Alternatively, Skin can be imported as a module using import * as Skin from "@bayfrontmedia/skin"

Then, initialize Skin:

document.addEventListener('DOMContentLoaded', () => {

        Skin.init({
            debug: true,
            themeParam: {
                enabled: true,
                name: "theme"
            }
        });

    });

In either case, Skin is attached to the window object.

Ensure the JavaScript file is added to Tailwind as a source. When using Skin as a module, your JavaScript file may already be added. When using as a library, you can use @source "/path/to/dist/js/skin.js";

Styles

CSS variables

--skin-color-info
--skin-color-warning
--skin-color-error
--skin-color-success

Base classes

tb-typo

Component classes

tc-alert
tc-badge
tc-btn
tc-btn-row
tc-btn-col
tc-blockquote
tc-blockquote--l
tc-blockquote--c
tc-blockquote--r
tc-blockquote-quote
tc-blockquote-quote--l
tc-blockquote-quote--c
tc-blockquote-quote--r
tc-code
tc-code-circles
tc-list
tc-list-horizontal
tc-list-ordered
tc-list-outline
tc-form-group
tc-form-label
tc-form-label-msg
tc-form-input
tc-form-file
tc-form-textarea
tc-form-select
tc-form-checkbox
tc-form-switch
tc-form-switch--sm
tc-form-radio
tc-form-color
tc-line
tc-spinner
tc-table
tc-table--row
tc-table--border
tc-table--zebra
tc-table--hover

Third party plugin component classes

tc-toast
tc-toast-close
tc-dropdown
tc-offcanvas
tc-tooltip

Utility classes

tu-tight
tu-text-primary
tu-text-secondary
tu-border-radius
tu-border-width
tu-bg-default
tu-bg-content
tu-border-default
tu-text-default
tu-text-light
tu-text-code
tu-bg-inverse
tu-text-inverse
tu-disabled
tu-bg-info
tu-bg-info-light
tu-border-info
tu-border-info-light
tu-text-info
tu-text-info-content
tu-text-info-light-content
tu-bg-warning
tu-bg-warning-light
tu-border-warning
tu-border-warning-light
tu-text-warning
tu-text-warning-content
tu-text-warning-light-content
tu-bg-error
tu-bg-error-light
tu-border-error
tu-border-error-light
tu-text-error
tu-text-error-content
tu-text-error-light-content
tu-bg-success
tu-bg-success-light
tu-border-success
tu-border-success-light
tu-text-success
tu-text-success-content
tu-text-success-light-content
tu-status-info
tu-status-warning
tu-status-error
tu-status-success
tu-style-content
tu-style-inverse
tu-style-default
tu-style-default-o
tu-style-primary
tu-style-primary-o
tu-style-secondary
tu-style-secondary-o
tu-style-info
tu-style-info-o
tu-style-info-light
tu-style-warning
tu-style-warning-o
tu-style-warning-light
tu-style-error
tu-style-error-o
tu-style-error-light
tu-style-success
tu-style-success-o
tu-style-success-light
tu-style-glass

JavaScript

Documentation coming soon...

Examples

Typography

The tb-typo utility class is used to give default typography styling to some base elements.

Any child elements inside tb-typo will inherit these styles. To prevent a specific element from inheriting the typography styling, assign it the tb-typo-omit class. To apply the typography styling to a specific element not inside a tb-typo element, assign it the tb-typo-apply class.

Here are some examples. This is small and also ^{this is sup} and finally _{this is sub} for reference.

Other typography include hyperlinks and marked text , along with bold text and italic text.

Inline quotations look like this, and inline code looks like this.

Press Ctrl + C to copy to the clipboard.

When I tried to open the file, I received the message: File not found!

Styles

Styles utilize a combination of background, border and text colors.

NOTE: Due to their opacity, tu-style-*-light styles do not work well for elements which may overlay others (have a higher z-index), such as toasts.

tu-style-default

tu-style-default-o

tu-style-content

tu-style-inverse

tu-style-primary

tu-style-primary-o

tu-style-secondary

tu-style-secondary-o

tu-style-info

tu-style-info-o

tu-style-info-light

tu-style-warning

tu-style-warning-o

tu-style-warning-light

tu-style-error

tu-style-error-o

tu-style-error-light

tu-style-success

tu-style-success-o

tu-style-success-light

tu-style-glass

Alert

This is an unstyled dismissible alert

This is a custom styled alert

This is an info light alert

This is a warning light alert

This is an error light alert

This is success light alert

Badge

Default Default with tag Info light 2 minutes ago 5

Button

Blockquote

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.