Glue

module

title

Use 'sticky' to hold the Navigation on top of the viewport.

<div class="table">
    <div class="row header">
        <div class="col-2 col-3-md">col-2 col-3-md</div>
        <div class="col-auto">col-auto</div>
    </div>

    <div class="row">
        <div class="col-2 col-3-md">col-2 col-3-md</div>
        <div class="col-auto">col-auto</div>
    </div>

    <div class="row">
        <div class="col-2 col-3-md">col-2 col-3-md</div>
        <div class="col-auto">col-auto</div>
    </div>

    <div class="row">
        <div class="col-2 col-3-md">col-2 col-3-md</div>
        <div class="col-auto">col-auto</div>
    </div>

    <div class="row footer">
        <div class="col-2 col-3-md">col-2 col-3-md</div>
        <div class="col-auto">col-auto</div>
    </div>
</div>

<div class="nav">
    <div class="toggle active">
        <span class="icon-menu"></span>
    </div>

    <div class="module">module</div>

    <div class="title">title</div>

    <div class="col-auto right">
        <div class="searchbox">
            <input placeholder="Suchen..." name="SearchTerm" class="form-input">
        </div>
    </div>

    <div class="user-toggle bg-primary">
        <span class="">GL</span>
    </div>
</div>

Main Menu

<div id="full-menu" class="full-menu active">
    <div class="menu-items">
        <div class="menu-title">menu-title</div>

        <a class="menu-item active" href="/">menu-item active</a>

        <a class="menu-item" href="/">menu-item</a>
    </div>

    <div class="menu-items">
        <div class="menu-title">menu-title</div>

        <a class="menu-item" href="/">menu-item</a>
    </div>

    <div class="menu-items">
        <div class="menu-title">menu-title</div>

        <a class="menu-item" href="/">menu-item</a>
    </div>

    <div class="menu-items">
        <div class="menu-title">menu-title</div>

        <a class="menu-item" href="/">menu-item</a>
    </div>
</div>

Side Menu

<div class="side-menu sample-side-menu active">
    <div class="menu-items">
        <div class="menu-title">menu-title</div>

        <a class="menu-item" href="/">menu-item</a>

        <a class="menu-title" href="/">menu-title</a>
    </div>
</div>

User Menu

<div id="user-menu" class="user-menu active">
    <div class="menu-items">
        <a class="menu-item active" href="/">menu-item active</a>

        <a class="menu-item" href="/">menu-item</a>
    </div>
</div>

List

Simple List

col-2 col-3-md

col-auto

col-2 col-3-md

col-auto

col-2 col-3-md

col-auto

<div class="table">
    <div class="row header">
        <div class="col-2 col-3-md">col-2 col-3-md</div>
        <div class="col-auto">col-auto</div>
    </div>

    <div class="row">
        <div class="col-2 col-3-md">col-2 col-3-md</div>
        <div class="col-auto">col-auto</div>
    </div>

    <div class="row">
        <div class="col-2 col-3-md">col-2 col-3-md</div>
        <div class="col-auto">col-auto</div>
    </div>

    <div class="row">
        <div class="col-2 col-3-md">col-2 col-3-md</div>
        <div class="col-auto">col-auto</div>
    </div>

    <div class="row footer">
        <div class="col-2 col-3-md">col-2 col-3-md</div>
        <div class="col-auto">col-auto</div>
    </div>
</div>

Paging

<div class="row">
    <div class="col-25 ml-5 center"><i class="icon-first"></i></div>
    <div class="col-25 center"><i class="icon-left"></i></div>
    <div class="col-25 center">1</div>
    <div class="col-25 center">2</div>
    <div class="col-auto"></div>
    <div class="col-25 center"><i class="icon-right"></i></div>
    <div class="col-25 mr-5 center"><i class="icon-last"></i></div>
</div>

<div class="row bg-nav-background white-color">
    <div class="col-25 ml-5 center"><i class="icon-first bg-white"></i></div>
    <div class="col-25 center"><i class="icon-left bg-white"></i></div>
    <div class="col-25 center">1</div>
    <div class="col-25 center">2</div>
    <div class="col-auto"></div>
    <div class="col-25 center"><i class="icon-right bg-white"></i></div>
    <div class="col-25 mr-5 center"><i class="icon-last bg-white"></i></div>
</div>

Filtered List

col-6

col-2 col-3-md

col-auto

col-2 col-3-md

col-auto

col-2 col-3-md

col-auto

<div class="filtered-list">
    <div class="filter form">
        <div class="row">
            <div class="col-6">
                <div class="form-input">col-6</div>
            </div>

            <div class="col-6">
                <div class="form-input">col-6</div>
            </div>
        </div>
    </div>

    <div class="list">
        <div class="table">
            <div class="row header">
                <div class="col-2 col-3-md">col-2 col-3-md</div>
                <div class="col-auto">col-auto</div>
            </div>

            <div class="row">
                <div class="col-2 col-3-md">col-2 col-3-md</div>
                <div class="col-auto">col-auto</div>
            </div>

            <div class="row">
                <div class="col-2 col-3-md">col-2 col-3-md</div>
                <div class="col-auto">col-auto</div>
            </div>

            <div class="row">
                <div class="col-2 col-3-md">col-2 col-3-md</div>
                <div class="col-auto">col-auto</div>
            </div>

            <div class="row footer">
                <div class="col-25 ml-5 center"><i class="icon-first"></i></div>
                <div class="col-25 center"><i class="icon-left"></i></div>
                <div class="col-25 center">1</div>
                <div class="col-25 center">2</div>
                <div class="col-auto"></div>
                <div class="col-25 center"><i class="icon-right"></i></div>
                <div class="col-25 mr-5 center"><i class="icon-last"></i></div>
            </div>
        </div>
    </div>
</div>

Filtered List with Detail

col-6

col-2 col-3-md

col-auto

col-2 col-3-md

col-auto

col-2 col-3-md

col-auto

details

Details

details

'footer' sticks to the bottom of the page.

<div class="details">
    details

    <div class="footer">
        footer
    </div>
</div>

Controls

Calendar

7/2/2025

<div class="form">
    <div class="row">
        <div class="col-2">Text Input</div>
        <div class="col-10"><input type="text" placeholder="Text Input" /></div>
        <div class="col-2">Number Input</div>
        <div class="col-10"><input type="number" placeholder="Number Input" /></div>
    </div>
</div></code>

Activities

01.01.24 01:01 - Test User activity

01.01.24 01:01 - Test User activity success

01.01.24 01:01 - Test User activity warning

01.01.24 01:01 - Test User activity error

<div class="activities">
    <div class="activity">
        <div class="activity-content">
            <small> 01.01.24 01:01 - Test User</small>
            activity
        </div>

        <div class="activity-icon">
            <i class="icon-activities icon-invert"></i>
        </div>
    </div>

    <div class="activity success">
        <div class="activity-content">
            <small> 01.01.24 01:01 - Test User</small>
            activity success
        </div>

        <div class="activity-icon">
            <i class="icon-todos icon-invert"></i>
        </div>
    </div>

    <div class="activity warning">
        <div class="activity-content">
            <small> 01.01.24 01:01 - Test User</small>
            activity warning
        </div>

        <div class="activity-icon">
            <i class="icon-settings icon-invert"></i>
        </div>
    </div>

    <div class="activity error">
        <div class="activity-content">
            <small> 01.01.24 01:01 - Test User</small>
            activity error
        </div>

        <div class="activity-icon">
            <i class="icon-bug icon-invert"></i>
        </div>
    </div>
</div>

Grid

Simple Grid

col-2

col-4

col-6

<div class="row">
    <div class="col-2 bg-blue">col-2</div>
    <div class="col-4 bg-cyan">col-4</div>
    <div class="col-6 bg-teal">col-6</div>
</div>

Fixed Column/Auto Column

col-75

col-150

col-auto

col-10 to col-250 in 5 steps.

<div class="row">
    <div class="col-75 bg-blue">col-75</div>
    <div class="col-150 bg-cyan">col-150</div>
    <div class="col-auto bg-teal">col-auto</div>
</div>

Fixed Row Height

row-50

row-75

row-100

height-10 to height-250 in 5 steps.

<div class="row height-50">
    <div class="col-12 bg-blue">row-50</div>
</div>

<div class="row height-75">
    <div class="col-12 bg-cyan">row-75</div>
</div>

<div class="row height-100">
    <div class="col-12 bg-teal">row-100</div>
</div>

Endless Row

col-6 bg-blue

col-6 bg-cyan

col-6 bg-teal

no-wrap keeps the content in the same row.

<div class="row no-wrap overflow-auto pb-10">
    <div class="col-6 bg-blue">col-6 bg-blue</div>
    <div class="col-6 bg-cyan">col-6 bg-cyan</div>
    <div class="col-6 bg-teal">col-6 bg-teal</div>
</div>

Align Rows

col-6

col-4

<div class="row">
    <div class="col-6 bg-blue">col-6</div>
</div>

<div class="row center">
    <div class="col-6 bg-cyan">col-6</div>
</div>

<div class="row right">
    <div class="col-6 bg-teal">col-6</div>
</div>

<div class="row">
    <div class="col-4 top">
        <div class="row">
            <div class="col-12 bg-blue">col-4</div>
        </div>
    </div>

    <div class="col-4">
        <div class="row">
            <div class="col-12 bg-cyan">col-4</div>
        </div>
    </div>

    <div class="col-4 bottom">
        <div class="row">
            <div class="col-12 bg-teal">col-4</div>
        </div>
    </div>
</div>

Align Column

col-4

col-4 center

col-4 right

<div class="row">
    <div class="col-4 bg-blue">col-4</div>
    <div class="col-4 center bg-cyan">col-4 center</div>
    <div class="col-4 right bg-teal">col-4 right </div>
</div>

Break Columns

col-auto

col-3

col-6

Breakpoints:
lg: 1200px
md: 992px
sm: 768px
xs: 576px

<div class="row">
    <div class="col-auto bg-blue">col-auto</div>
    <div class="row-break-sm"></div>
    <div class="col-3 bg-cyan">col-3</div>
    <div class="row-break"></div>
    <div class="col-6 bg-teal">col-6</div>
</div>

Grid Gap

col-6

col-auto

col-6

col-auto

col-6

col-auto

gap-5: 5rem gap
gap-10: 10rem gap

Warning! gap-5 and gap-10 only work, if there is a col-auto in the row.

<div class="row gap-10">
    <div class="col-6 bg-blue">col-6</div>
    <div class="col-auto bg-blue">col-auto</div>
    <div class="col-6 bg-cyan">col-6</div>
    <div class="col-auto bg-cyan">col-auto</div>
    <div class="col-6 bg-teal">col-6</div>
    <div class="col-auto bg-teal">col-auto</div>
</div>

Hide Columns

col-3 col-6-md

col-6 col-hide-md

Breakpoints:
lg: 1200px
md: 992px
sm: 768px
xs: 576px

<div class="row">
    <div class="col-3 bg-cyan">col-3</div>
    <div class="row-break-sm"></div>
    <div class="col-3 bg-teal">col-3</div>
    <div class="row-break"></div>
    <div class="col-6 bg-red">col-6</div>
    <div class="col-auto bg-orange">col-auto</div>
</div>

Margin Columns

col-3 col-mr-2

col-2

col-3 col-ml-2

col-1 col-ml-auto col-mr-3

col-5 col-ml-2

Breakpoints:
lg: 1200px
md: 992px
sm: 768px
xs: 576px

<div class="row">
    <div class="col-3 bg-blue col-mr-2">col-3 col-mr-2</div>
    <div class="col-2 bg-cyan">col-2</div>
    <div class="col-3 bg-teal col-ml-2">col-3 col-ml-2</div>
</div>

<div class="row">
    <div class="col-1 bg-blue col-ml-auto col-mr-3">col-1 col-ml-auto col-mr-3</div>
    <div class="col-5 bg-teal col-ml-2">col-5 col-ml-2</div>
</div>

Responsive Columns

col-3 col-12-md

col-auto col-12-md

col-3 col-12-md

Breakpoints:
lg: 1200px
md: 992px
sm: 768px
xs: 576px

<div class="row">
    <div class="col-3 col-12-md bg-blue">col-3 col-12-md</div>
    <div class="col-auto col-12-md bg-cyan">"col-auto col-12-md</div>
    <div class="col-3 col-12-md bg-teal">col-3 col-12-md</div>
</div>

Nested Columns

col-3 col-12-md

col-6 col-12-sm

col-6

<div class="row">
    <div class="col-3 col-12-md bg-blue">col-3 col-12-md</div>

    <div class="col-auto col-12-md">
        <div class="row bg-cyan">
            <div class="col-6 col-12-sm">col-6 col-12-sm</div>

            <div class="col-6 col-12-sm">
                <div class="row bg-teal">
                    <div class="col-6">col-6</div>
                    <div class="col-6">col-6</div>
                </div>
            </div>
        </div>
    </div>
</div>

Form

Simple Form

Text Input

Number Input

<div class="form">
    <div class="row">
        <div class="col-2">Text Input</div>
        <div class="col-10"><input type="text" placeholder="Text Input" /></div>
        <div class="col-2">Number Input</div>
        <div class="col-10"><input type="number" placeholder="Number Input" /></div>
    </div>
</div></code>

Nested Form

Text Input

Number Input

Text Input

Number Input

<div class="form">
    <div class="row">
        <div class="col-2">Text Input</div>
        <div class="col-10"><input type="text" placeholder="Text Input" /></div>
        <div class="col-2">Number Input</div>
        <div class="col-10"><input type="number" placeholder="Number Input" /></div>
        <div class="col-12 ">
            <div class="row">
                <div class="col-2">Text Input</div>
                <div class="col-4"><input type="text" placeholder="Text Input" /></div>
                <div class="col-2">Number Input</div>
                <div class="col-4"><input type="number" placeholder="Number Input" /></div>
            </div>
        </div>
    </div>
</div>

Table

filter sticky

success

active/selected

disabled

<div class="table">
    <div class="row header sticky">
        <div class="col-2">Test</div>
        <div class="col-auto">Test</div>
        <div class="col-2">Test</div>
    </div>

    <div class="row filter sticky">
        <div class="col-12">filter sticky</div>
    </div>

    <div class="row">
        <div class="col-2"><input type="number" /></div>
        <div class="col-auto"><input type="text" placeholder="text" /></div>
        <div class="col-2"><input type="number" /></div>
    </div>

    <div class="row success">
        <div class="col-2"><input type="number" /></div>
        <div class="col-auto"><input type="text" /></div>
        <div class="col-2"><input type="number" /></div>
    </div>

    <div class="row disabled">
        <div class="col-2"><input type="number" /></div>
        <div class="col-auto"><input type="text" /></div>
        <div class="col-2"><input type="number" /></div>
    </div>

    <div class="row footer sticky">
        <div class="col-2">Total</div>
        <div class="col-auto"></div>
        <div class="col-2 text-right"><span class="form-input">0</span></div>
    </div>
</div>

<div class="table">
    <div class="row header sticky">
        <div class="col-2">Test</div>
        <div class="col-auto">Test</div>
        <div class="col-2">Test</div>
    </div>

    <div class="row filter sticky">
        <div class="col-12">Filter</div>
    </div>

    <div class="row">
        <div class="col-2"><input type="number" /></div>
        <div class="col-auto"><input type="text" placeholder="text" /></div>
        <div class="col-2"><input type="number" /></div>
    </div>

    <div class="row success">
        <div class="col-2"><input type="number" /></div>
        <div class="col-auto"><input type="text" /></div>
        <div class="col-2"><input type="number" /></div>
    </div>

    <div class="row disabled">
        <div class="col-2"><input type="number" /></div>
        <div class="col-auto"><input type="text" /></div>
        <div class="col-2"><input type="number" /></div>
    </div>

    <div class="row footer sticky">
        <div class="col-2">Total</div>
        <div class="col-auto"></div>
        <div class="col-2 text-right"><span class="form-input">0</span></div>
    </div>
</div>

Modal

<div class="modal active">
    <div class="modal-overlay"></div>

    <div class="modal-container">
        <div class="modal-header">
            <div class="modal-title">Title</div>
            <i class="icon-x hand"></i>
        </div>

        <div class="modal-body">
            Body
        </div>

        <div class="modal-footer">
            <button>btn</button>
        </div>
    </div>
</div>

Default alignment of the buttons is left. To align the buttons to the right, add buttons to a container with the class .modal-footer-right.

<div class="modal active">
    <div class="modal-overlay"></div>

    <div class="modal-container">
        <div class="modal-header">
            <div class="modal-title">Title</div>
            <i class="icon-x hand"></i>
        </div>

        <div class="modal-body">
            Body
        </div>

        <div class="modal-footer">
            <button class="primary">btn primary</button>

            <div class="modal-footer-right">
                <button>btn</button>
            </div>
        </div>
    </div>
</div>

Default: 25rem
modal-50: 50rem
modal-75: 75rem
modal-100: 100rem
modal-max: 90vw

<div class="modal active">
    <div class="modal-overlay"></div>

    <div class="modal-container modal-50">
        <div class="modal-header">
            <div class="modal-title">Title</div>
            <i class="icon-x hand"></i>
        </div>

        <div class="modal-body">
            Body
        </div>

        <div class="modal-footer">
            <button>btn</button>
        </div>
    </div>
</div>

Variables

Name

Value

modal-overlay

rgba(0, 0, 0, 0.5)

modal-background

#ffffff

Notifications

Success Message

Warning Message

Error Message

Durations:
countdown-5: 5s
countdown-10: 10s
countdown-20: 20s
countdown-30: 30s

<div class="notifications">
    <div class="notification success">
        <div class="notification-body">
            <b>Success</b>
            Message
        </div>

        <i class="icon-x hand"></i>

        <div class="countdown-bar">
            <div class="countdown-5"></div>
        </div>
    </div>

    <div class="notification warning">
        <div class="notification-body">
            <b>Warning</b>
            Message
        </div>

        <i class="icon-x hand"></i>

        <div class="countdown-bar">
            <div class="countdown-10"></div>
        </div>
    </div>

    <div class="notification error">
        <div class="notification-body">
            <b>Error</b>
            Message
        </div>

        <i class="icon-x hand"></i>

        <div class="countdown-bar">
            <div class="countdown-30"></div>
        </div>
    </div>
</div>

Tabs

tab active

label

tab

<div class="row p-10">
    <div class="col-12 tabs">
        <div class="tab active">tab active <div class="label rounded mr-5">label</div></div>
        <div class="tab">tab</div>
        <div class="tab">tab</div>
    </div>
</div>

Buttons

Alternative the Class .btn can be used instead of the HTML Tag button.

<button class="primary">Primary</button>
<button><i class="icon-print"></i> Default</button>
<button class="success">Success</button>
<button class="warning">Warning</button>
<button class="error">Error</button>
<button class="disabled">Disabled</button>
<button class="btn-small">btn-small</button>
<button class="btn-large">btn-large</button>

Labels

label

label small

label rounded

label primary

label default

label success

label warning

label error

label bug

label priority-1

label priority-2

label priority-3

label priority-4

<div class="label">label</div>
<div class="label small">label small</div>
<div class="label rounded">label rounded</div>
<div class="label primary">label primary</div>
<div class="label default">label default</div>
<div class="label success">label success</div>
<div class="label warning">label warning</div>
<div class="label error">label error</div>
<div class="label bug">label bug</div>
<div class="label priority-5">label priority-1</div>
<div class="label priority-5">label priority-2</div>
<div class="label priority-5">label priority-3</div>
<div class="label priority-5">label priority-4</div>

Switches

form-Switch

form-Switch active

<i class="form-switch"></i> form-Switch
<i class="form-switch active"></i> form-Switch active

Icons

Icon List

icon-activities

icon-add, icon-plus

icon-minus

icon-archive

icon-arrow-down

icon-arrow-up

icon-barcode

icon-change

icon-check

icon-unchecked

icon-check-list

icon-copy

icon-delete

icon-download

icon-edit

icon-error

icon-favorites

icon-filter

icon-folder

icon-goto-split

icon-goto

icon-info

icon-keyboard

icon-logout

icon-mail

icon-map

icon-merge

icon-messages

icon-note

icon-phone

icon-print

icon-reset

icon-rewind

icon-forward

icon-scan

icon-search

icon-settings

icon-text-message

icon-timesheet

icon-todos

icon-upload

icon-x

icon-up

icon-down

icon-first

icon-left

icon-right

icon-last

icon-play

icon-pause

icon-stop

icon-file-doc

icon-file-gif

icon-file-jpg

icon-file-pdf

icon-file-png

icon-file-ppt

icon-file-txt

icon-file-unknown

icon-file-xls

icon-success

icon-failed

icon-warning

<i class="icon-bug"></i>

Icons

Icon List

icon-a-arrow-down

icon-a-arrow-up

icon-a-large-small

icon-accessibility

icon-activity

icon-air-vent

icon-airplay

icon-alarm-clock-check

icon-alarm-clock-minus

icon-alarm-clock-off

icon-alarm-clock-plus

icon-alarm-clock

icon-alarm-smoke

icon-album

icon-align-center-horizontal

icon-align-center-vertical

icon-align-center

icon-align-end-horizontal

icon-align-end-vertical

icon-align-horizontal-distribute-center

icon-align-horizontal-distribute-end

icon-align-horizontal-distribute-start

icon-align-horizontal-justify-center

icon-align-horizontal-justify-end

icon-align-horizontal-justify-start

icon-align-horizontal-space-around

icon-align-horizontal-space-between

icon-align-justify

icon-align-left

icon-align-right

icon-align-start-horizontal

icon-align-start-vertical

icon-align-vertical-distribute-center

icon-align-vertical-distribute-end

icon-align-vertical-distribute-start

icon-align-vertical-justify-center

icon-align-vertical-justify-end

icon-align-vertical-justify-start

icon-align-vertical-space-around

icon-align-vertical-space-between

icon-ambulance

icon-ampersand

icon-ampersands

icon-amphora

icon-anchor

icon-angry

icon-annoyed

icon-antenna

<i class="icon-bug"></i>

Icon Styles

icon-bug icon-s

icon-bug

icon-bug icon-l

icon-bug icon-xl

icon-bug icon-invert

icon-bug icon-disabled

Icons Colors

icon-bug bg-black

icon-bug bg-green

icon-bug bg-red

Utilities

Margins

m-5 to m-25 in 5 steps.

<div class="m-10">m-10 (margin)</div>
<div class="ml-10">ml-10 (margin-left)</div>
<div class="mr-10">mr-10 (margin-right)</div>
<div class="mt-10">mt-10 (margin-top)</div>
<div class="mb-10">mb-10 (margin-bottom)</div>

Paddings

p-5 to p-25 in 5 steps.

<div class="p-10">p-10 (padding)</div>
<div class="pl-10">pl-10 (padding-left)</div>
<div class="pr-10">pr-10 (padding-right)</div>
<div class="pt-10">pt-10 (padding-top)</div>
<div class="pb-10">pb-10 (padding-bottom)</div>

https://glue.rocks/0.4/glue.min.css

Source code licensed MIT. Website content licensed CC BY-NC-SA 4.0