@smpl-css/design v0.0.4

SMPL CSS

A Simple alternative to Material that allows you to code native html again!

• No Bloat! It's very lightweight
• No Frameworks! Use with React, Angular, Svelte, Vue, etc.
• No Learning Curve! It's just css classes, and we provide tons of examples.
• Designer Friendly! Yes, design tokens are included, and can easily be updated.
• Completely Customizable! Use this to jumpstart your design system!

Finally, a UX framework that simply is just UX!

Getting Started

1. Import the css into your app.
2. Import your preferred Material Icon Theme and set the --icon-font
3. Apply your design tokens.

Example:

Importing JS/CSS Modules before your own stylesheets.

// React Example (main.tsx)
import "@smpl-css/design";
import "@smpl-css/design/index.css";
import "@smpl-css/design/utilities.css"; // optional
...
import "index.css"

Customizing by applying overrides in your own stylesheets:

@import url("https://fonts.googleapis.com/icon?family=Material+Icons+Round");

:root {
  --icon-font: "Material Icons Round";

  /* any overrides */
}

Optional Flex/Grid Utility classes

To get lightweight utility classes for flex and grid, import the following module as well:

@import url ("../node_modules/smpl-css/utilities.css");

A Trivial Amount of Javascript

You can opt-in to use a very small amount (< 0.4kb) of javascript to have:

• the ripple effect starting from click location
• viewport-aware menu contexts.

Table Of Contents

Surfaces

Components

Utilities

Customization

Surface Examples

AppBar

Base Example:

<div class="appbar">
  <p data-icon="menu" />
  <p class="flex-1 my-custom-font">My App</p>
  <p data-icon="contrast"></p>
</div>

!NOTE AppBar has display: flex on it. the example above uses utility classes, but it should be self explanatory.

Paper

Base Example

<section class="paper">...</section>

!NOTE Elevation options should be used sparingly. If you are applying this everywhere, consider updating your --paper-shadow css variable.

Card

Base Example

<article class="card">...</article>

!NOTE Elevation options should be used sparingly. If you are applying this everywhere, consider updating your --paper-shadow css variable.

Component Examples

Accordions

Base Example:

<div class="accordion-group">
  <details>
    <summary>My First Accordion</summary>
    <div>Contents</div>
  </details>
  <details>
    <summary>My Second Accordion</summary>
    <div>Contents</div>
  </details>
</div>

Alerts

Base Example:

<div class="alert (error|info|warning|success)">My Alert information</div>

Buttons

• Buttons are natively styled, but also the class btn can be applied to any element.
• Buttons have ripple effects.

Base Example:

<button>My Button</button>

<a href="#" class="btn">button-like</a>

Chips

Base Example:

<span class="chip">Chip</span>

!NOTE Chips are color-mode agnostic, so when creating your own classes that reflect your palette, set background and color accordingly. utilize var(--text-light) and var(--text-dark) to appropriate backgrounds.

Checkboxes

Base Example:

<label><input type="checkbox" class="checkbox" />My Checkbox</label>

File Uploads

Base Example:

<label class="file-upload" style="width: 400px; text-align:center;">
  <input type="file" />
  <span data-icon="upload" />
  <p>File Upload</p>
</label>

Icons

Base Example:

<span data-icon="plus" />
<!--No text-->
<span data-icon="folder">Icon Appears Before Text</span>
<span data-icon-after="file">Icon Appears After Text</span>

!NOTE

• The [data-icon] and [data-icon-after] attributes can be applied to (almost) any element.
• If using material icon fonts, icon names can be found here: https://fonts.google.com/icons?icon.set=Material+Icons

Menus

Menus are meant to build things like dropdowns, auto-completes, etc. It supports viewport awareness out of the box. For menus to work properly, they require a focusable element within them, such as a button, input, etc.

Additionally, the popup should include a tab-index, in order to keep focus. If you wish to close on click, you will need to call the "blur" function, something like: document.activeElement.blur(); or e.target.closest("[popover]").blur();

Base Example:

<div class="menu">
  <button>Click Me For A Popup</button>
  <div popover="manual" tabindex="0">
    <p>Some Popup Content</p>
    <p>Additional Content</p>
  </div>
</div>

you can add your own css and implement how you wish to interact with the content, cursor, etc.

Here's suggested styling for options:

.menu [popover] .option {
  cursor: pointer;
  white-space: nowrap;
  padding: 0.5rem;
  margin: 0;
  &:hover {
    background-color: var(--bg-surface-hover);
  }
}

Radio Buttons

Base Example:

<label><input type="checkbox" class="checkbox" />My Checkbox</label>

Tabs

Base Example:

<div className="tabs">
  <label>Tab 1<input type="radio" name="tab" /></label>
  <label>Tab 2<input type="radio" name="tab" /></label>
  <label>Tab 3<input type="radio" name="tab" /></label>
</div>

• Note: If you have too many tabs, they will auto-scroll x.

Text Fields

Base Examples:

<fieldset class="text-field (outlined|standard|simple)">
  <legend>Title</legend>
  <input type="text" placeholder="" />
</fieldset>

!NOTE > placeholder="" is required for transform effects to work properly.

Toggles

<label><input type="checkbox" class="toggle" />My Toggle</label>

Utility Examples

Flex

Flex Utility classes allow simple use of the flexbox system without needing to develop your own styles, or include other design systems.

some classes leverage a common breakpoint for large screens.

Grid

Utilizes a 12-column grid with common columns spans.

some classes leverage a common breakpoint for large screens.

Customize Design Tokens

A full list of overridable design tokens, with default values included.

Just place this into your application's initial css file, and the tokens are available anywhere.

:root {
  /** Backgrounds **/
  --bg-main: #fafafa;
  --bg-surface: #ffffff;
  --bg-surface-hover: #e2e2e2;
  --bg-light: #fff;

  --border-primary: #d2d2d2;
  --text-primary: #000;
  --text-contrast: #fff;
  --text-light: #fff;
  --text-dark: #000;

  --hover-grow-scale: 1.01;
  --transition-interaction: 0.15s;
  --transition-standard: 0.35s;
  --transition-ripple: 0.75s;

  --elevation-0: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
  --elevation-1: 0px 2px 5px -1px rgba(0, 0, 0, 0.25);
  --elevation-2: 0px 4px 10px -2px rgba(0, 0, 0, 0.35);
  --elevation-3: 0px 6px 15px -5px rgba(0, 0, 0, 0.45);

  /* Surfaces */
  --section-radius: 8px;
  --section-border-width: 0;
  --section-padding-x: 16px;
  --section-padding-y: 16px;

  --paper-shadow: var(--elevation-1);
  --paper-margin-bottom: 8px;

  --appbar-floating-margin-x: 0.5rem;
  --appbar-floating-margin-y: 0.5rem;

  /** Tab Specific **/
  --tab-padding-x: 24px;
  --tab-padding-y: 8px;
  --tab-border-width: 2px;
  --tab-border-color: var(--border-primary);

  /* Elements are inputs, buttons, checkboxes, tabs, etc.*/
  --element-radius: 8px;
  --element-elevation: 0px 1px 2px 0px rgba(0, 0, 0, 0.5);
  --element-primary: #3030ce;
  --element-hover: #2020a0;
  --element-highlight: #e9e9e9;
  --element-inactive: #888;
  --element-shadow: var(--elevation-1);
  --element-font-size: 1rem;

  /* Chips */
  --chip-radius: 16px;
  --chip-padding-x: 8px;
  --chip-padding-y: 4px;
  --chip-border: #888;

  /** Fab **/
  --fab-border-radius: 50rem;
  --fab-padding-x: 16px;
  --fab-padding-y: 16px;

  /* Text Field Specific */
  --input-container-padding-x: 0;
  --input-container-padding-y: 8px;
  --input-padding-x: 8px;
  --input-padding-y: 4px;
  --input-border: #888;

  /* Icons */
  --icon-font: "Material Icons";
  --icon: #888;

  /* Emphasis Colors */
  --emphasis-info: blue;
  --emphasis-positive: green;
  --emphasis-negative: red;
  --emphasis-warning: orange;
}

Dark Mode

Although SMPL-CSS doesn't come packaged with a dark mode, you can create your own Dark Mode by overriding current design tokens:

[data-theme="dark"] {
  /* color-specific design tokens */
}