Doner Tiles UI

Quick start

Use the code below, and the tiles will work instantly.

<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>

.dnr-tile{padding:40px;h2,h3,p{margin:0;}}.dnr-tile-content{line-height:1.6em;padding-top:20px;}.dnr-tile-header{display:flex;flex-direction:column;}.dnr-tile-header *:not(:first-child){padding-top:10px;}.dnr-tile-img{width:100%;margin-bottom:40px;}.dnr-tile-actions{display:flex;flex-direction:column;gap:20px;padding-top:40px;}@media(min-width:856px){.dnr-tile-actions{flex-direction:row;justify-content:end;}}.dnr-btn{font-size:.8em;padding:15px 25px;text-decoration:none;color:inherit;}.dnr-btn:hover{cursor:pointer;}.dnr-btn--accent{color:var(--accent-color--contrast);}.dnr-tile{border-radius:var(--border-radius--std);box-shadow:var(--shadow--std);}.dnr-tile-img{border-radius:var(--border-radius--std);}.dnr-btn{border:none;border-radius:var(--border-radius--std);box-shadow:var(--shadow--std);background-color:transparent;}.dnr-btn:hover{box-shadow:var(--shadow--mvd);filter:brightness(1.05);}.dnr-btn--accent{background-color:var(--accent-color);color:var(--accent-color--contrast);}:root{--border-radius--std:50px;--shadow--std:10px 10px 30px #a7a7a7,-10px -10px 30px #e7e7e7;--shadow--mvd:12px 12px 25px #a7a7a7,-12px -12px 25px #e7e7e7;--accent-color:#122446;--accent-color--contrast:#ffffff;}
.dnr-tile{padding:40px;h2,h3,p{margin:0;}}.dnr-tile-content{line-height:1.6em;padding-top:20px;}.dnr-tile-header{display:flex;flex-direction:column;}.dnr-tile-header *:not(:first-child){padding-top:10px;}.dnr-tile-img{width:100%;margin-bottom:40px;}.dnr-tile-actions{display:flex;flex-direction:column;gap:20px;padding-top:40px;}@media(min-width:856px){.dnr-tile-actions{flex-direction:row;justify-content:end;}}.dnr-btn{font-size:.8em;padding:15px 25px;text-decoration:none;color:inherit;}.dnr-btn:hover{cursor:pointer;}.dnr-btn--accent{color:var(--accent-color--contrast);}.dnr-tile{border:var(--border--std);border-color:var(--accent-color);box-shadow:5px 5px 5px var(--accent-color);}.dnr-btn{border:var(--border--std);border-color:var(--accent-color);background-color:transparent;}.dnr-btn:hover{box-shadow:var(--shadow--std);}.dnr-btn--accent{border:var(--border--accent);background-color:var(--accent-color);}.dnr-btn--accent:hover{border-right:2px solid var(--accent-color--contrast);border-bottom:2px solid var(--accent-color--contrast);box-shadow:5px 5px 5px var(--accent-color);}:root{--border--std:2px solid var(--accent-color);--border--accent:2px solid var(--accent-color);--shadow--std:5px 5px 5px var(--accent-color);--accent-color:#122446;--accent-color--contrast:#ffffff;}
.dnr-tile{padding:40px;h2,h3,p{margin:0;}}.dnr-tile-content{line-height:1.6em;padding-top:20px;}.dnr-tile-header{display:flex;flex-direction:column;}.dnr-tile-header *:not(:first-child){padding-top:10px;}.dnr-tile-img{width:100%;margin-bottom:40px;}.dnr-tile-actions{display:flex;flex-direction:column;gap:20px;padding-top:40px;}@media(min-width:856px){.dnr-tile-actions{flex-direction:row;justify-content:end;}}.dnr-btn{font-size:.8em;padding:15px 25px;text-decoration:none;color:inherit;}.dnr-btn:hover{cursor:pointer;}.dnr-btn--accent{color:var(--accent-color--contrast);}.dnr-tile{box-shadow:var(--shadow--std);}.dnr-btn{background:transparent;border:none;border-radius:var(--border-radius--std);box-shadow:var(--shadow--std);}.dnr-btn:hover{box-shadow:var(--shadow--mvd);filter:brightness(1.05);}.dnr-btn--accent{background-color:var(--accent-color);}:root{--shadow--std:0 1px 2px rgba(0,0,0,0.12),0 1px 2px rgba(0,0,0,0.24);--shadow--mvd:0 4px 6px rgba(0,0,0,0.12),0 4px 6px rgba(0,0,0,0.24);--accent-color:#122446;--accent-color--contrast:#ffffff;}

Node.js usage

Update the config.json to set theme, colors and desired components.

{ "theme": "neobrutalism", "components": [ "tile", "tile/header", "tile/image", "tile/actions", "button", "button/accent" ], "colors": { "accent": "#122446", "accentContrast": "#ffffff" }, "variables": true, "reset": true }

Run the script to build the minified css file.

$npm run start

Doner Tiles UI

Composable tiles css library generator

Lightweight CSS library designed to help you build esthetic 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