0.0.6 • Published 3 years ago
style-tile-elements v0.0.6
Style Tile Web Elements
Highly-customized Style Tile Creator using Web Components and JS/CSS.
See full documentation: https://man.sr.ht/~andresmazzo/style-tile-elements/
Usage
Implement style tile in one line.
<style-tile class="default" />Customize the style tile using a web editor for super easy real time configuration.
<style-tile-editor>
<style-tile class="default" />
</style-tile-editor>Import css theme tu customize appearence.
<head>
<link rel="stylesheet" href="https://unpkg.com/style-tile-elements@0.0.2/dist/style-tile-elements/styles/default.css">
</head>Override theme via css variables.
style-tile.default {
--style-tile-color: var(--style-tile-color-3);
--style-tile-background-color: #CCC;
}Set project and elements (buttons, colors, adjectives, patterns, typos) via JS:
const elem = document.querySelector('style-tile.default');
elem.project = {
version: "v0.0.2",
logo: "/assets/logo80.png",
name: "Style Tile Project",
author: "Andres Mazzo",
website: "https://andresmazzo.com"
};
elem.elements = {
buttons: [
{
type: 'secondary',
text: 'Back'
},
{
type: 'primary',
text: 'Next'
}
],
colors: ['#3e778a', '#ad3', '#333'],
patterns: ['/assets/texture-1.jpg', '/assets/texture-2.jpg', '/assets/texture-3.jpg'],
typos: [{
size: 'h1',
text: 'Header'
},
{
size: 'h2',
text: 'Subheader'
},
{
size: 'p',
text: 'Lorem Ipsum bla bla bla'
}],
adjectives: ['some', 'cool', 'adjectives']
};