Doner Tiles UI

Doner Tiles UI

Composable tiles CSS library generator

Lightweight CSS library designed to help you build aesthetic tile-based interfaces effortlessly.

Check out the repo and add your themes to match your project or build tiles CSS excluding some components.

Donate Repository

Quick start

1. Add the stylesheet with all themes (or npm i doner-tiles-ui) and give the page background: var(--dnr-page).

HTML

<link rel="stylesheet" href="https://ui.doner.cloud/styles/doner-tiles.css">

2. Build tiles with these classes.

HTML

<div class="dnr-tile">
  <img class="dnr-tile-img" src="" alt="" />
  <div class="dnr-tile-header">
    <h2></h2>
    <h3></h3>
  </div>
  <div class="dnr-tile-content"></div>
  <div class="dnr-tile-actions">
    <button class="dnr-btn"></button>
    <button class="dnr-btn dnr-btn--accent"></button>
  </div>
</div>

Only one theme? Show glassmorphism-doner-tiles.css

The same styles for the theme picked above, with your accent colors.

CSS

Node.js usage

1. Set themes, colors and components in app/config.json.

JSON

{
  "themes": ["neobrutalism", "material"],
  "components": [
    "tile",
    "tile/header",
    "tile/image",
    "tile/actions",
    "button",
    "button/accent"
  ],
  "hover": "lift",
  "colors": {
    "accent": "#122446",
    "accentContrast": "#ffffff",
    "dark": {
      "accent": "#ffd23f",
      "accentContrast": "#111111"
    }
  }
}

2. Build the minified CSS file.

Shell

cd app
npm run start