Glassine Paper

Usage

@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
@import './glassine-paper-variables.css';
@import './theme.css';
@import './glassine-paper.min.css';

Install via npm

npm install https://github.com/MichinobuMaeda/glassine-paper

Usage in JavaScript/Node.js projects

import 'glassine-paper/css';

Or with require

require('glassine-paper/css');

In HTML (if using a bundler like webpack/vite)

<link rel="stylesheet" href="node_modules/lib/glassine-paper.min.css">

Buttons

Variant: filled tonal danger error outlined elevated text
Size: xs sm md

<button class="button filled sm">
  ...
</button>

Variant: filled tonal danger error outlined elevated text
Size: xs sm md

<a class="button filled xs" href="...">
  ...
</a>

Variant: filled tonal danger error outlined elevated
Size: xs sm md

<label class="button filled sm">
  <input type="checkbox" checked />
  ...
</label>

Icon buttons

Variant: filled tonal danger error outlined text
Size: xs sm md
Width: (default) narrow wide
Radius: (default) square

<button class="button icon filled sm narrow square">
  ...
</button>

Variant: filled tonal danger error outlined
Size: xs sm md
Width: (default) narrow wide
Radius: (default) square

<label class="button icon filled sm narrow square">
  <input type="checkbox" checked />
  ...
</label>

Button groups

<div class="button-group">
  <button class="button ..." checked>
  ...
</div>

Size: xs sm md
Radius: (default) square

<label class="connected-button-group square md">
  <label class="button icon filled">
    <input type="checkbox" checked />
  </label>
  ...
</label>

FAB

Color: primary-container secondary-container tertiary-container primary secondary tertiary
Size: xs sm md
Variant: (default) closed

<button class="fab primary sm">
  ...
</button>

Checkbox

Variant: (default) danger error

<input class="checkbox danger" type="checkbox" />

Switch

<input class="switch" type="checkbox" />

Radio button

<input class="radio" type="radio" />

Text fields

Variant: filled outlined
State: (default) error

Note: Use the same text for both label and placeholder.

<div class="textfield filled">
  <svg>...</svg>
  <label>Label text</label>
  <input type="text" value="" placeholder="Label text" />
  <svg>...</svg>
  <div>Supporting text</div>
</div>

<div class="textfield outlined">
  <svg>...</svg>
  <label>Label text</label>
  <input type="text" value="" placeholder="Label text" />
  <svg>...</svg>
  <div>Supporting text</div>
</div>

<div class="textfield filled error">
  <svg>...</svg>
  <label>Label text</label>
  <input type="email" value="invalid" placeholder="Label text" />
  <svg>...</svg>
  <div>Error message</div>
</div>

App bar

Position: (default) sticky

<div class="app-bar sticky">
  <button>...</button>
  ...
  <img src="..." alt="...">
  <div class="title-area">
    <h1 class="title">...</h1>
    <div class="subtitle">...</div>
  </div>
  ...
  <a href="...">...</a>
  <button>...</button>
</div>

Navigation drawer

Variant: (default) modal hidden

<div class="nav-drawer">
  <button>...</button>
  ...
  <hr />
  ...
  <a href="...">...</a>
  <button class="active">...</button>
</div>

Menu

State: (default) active disabled hidden

<div class="menu" style="--menu-width: 16rem">
  <button class="active">
    <span class="prefix">
      <svg ...>...</svg>
    </span>
    Menu item
  </button>
  <button>
    <span class="prefix">
      <svg ...>...</svg>
    </span>
    Menu item
    <span class="suffix">
      <svg ...>...</svg>
    </span>
  </button>
  <a href="#">
    <span class="prefix">
      <svg ...>...</svg>
    </span>
    Link item
  </a>
  <hr />
  <button disabled>
    <span class="prefix">
      <svg ...>...</svg>
    </span>
    Disabled item
  </button>
  <a class="disabled">
    <span class="prefix">
      <svg ...>...</svg>
    </span>
    Disabled link
  </a>
</div>

Tabs

Variant: primary -- not implemented (default)

<div class="tabs">
  <a class="active" href="...">
    <svg ...>...</svg>
    Tab 1
  </a>
  <a href="...">Tab 2</a>
  <button>Tab 3</button>
</div>

Toolbars

Variant: docked floating
Color: (default) vibrant
Item: (default) primary checked

<!-- Floating vibrant toolbar -->
<div class="toolbar floating vibrant">
  <button class="active">
    <svg>...</svg>
  </button>
  <a href="#">
    <svg>...</svg>
  </a>
  <label>
    <input type="checkbox" />
    <svg>...</svg>
  </label>
  <label>
    <input type="checkbox" checked />
    <svg>...</svg>
  </label>
</div>

Slider (with JavaScript code)

Size: xs sm md
Orientation: (default) top-bottom bottom-top

<div class="slider sm">
  <div class="value-indicator">30</div>
  <input
    id="slider01"
    type="range"
    min="0"
    max="100"
    step="10"
    list="slider01-list"
    value="30"
  />
  <div class="datalist" id="slider01-list">
    <div class="option" key="0" value="0"></div>
    <div class="option" key="10" value="10"></div>
    ...
  </div>
</div>