Dsign

HTML CSS Design with Classes and Attributes

<!-- Classes -->
<p class="color-red font-size-2rem cursor-pointer">Hello</p>

<!-- Attributes -->
<p color="red" font-size="2rem" cursor="pointer">Hello</p>

Installation

<script src="https://cdn.jsdelivr.net/gh/dlvdls18/[email protected]/src/dsign.js"></script>

Usage

Call the function Dsign to update the style of classes and attributes. (called once by default)

Dsign();

<p color="red" id="myEl">Hello</p>
<script>
myEl.setAttribute("color", "orange");
// Color doesn't change

Dsign();
// Color changed
</script>

Applying Styles

Classes can use for neat and clean style. however, it doesn’t support special characters such as space, hashtags and more.

It is recommended to use classes with one word value (in short, no space and special characters).

Using classes with dashes will not work since it’s a special character.

<!-- Bad -->
<p class="transition-background-image 0.2s ease-in-out, color 1s ease-out background-image-linear-gradient(to bottom, red, blue) font-family-var(--my-font)">Hello</p>
<!-- Good -->
<p class="color-orange background-color-black padding-8px font-family-courier">Hello</p>

Format

Every properties are kebab cases.

text-align-center
font-weight-400
color-green

Attributes

<style>="<value>"
color="red"
font-family="courier"
background-color="teal"

Classes

<style>-<value>
color-red
font-family-courier
background-color-teal

GitHub

View Github