Dresscode is a new way to think about building web pages.

Overview

At its core, Dresscode embeds entire CSS rules in CSS class names. For example:

<div data-dresscode='my-class' class='background-color_red color_white'></div>

The classes above are parsed into CSS declarations and associated with the class named my-class defined in the data-dresscode data attribute above:

.my-class {
  background-color: red;
  color: white;
}

As previously mentioned, entire rules can be created from a single class name.

Pseudo-classes

<div data-dresscode='my-class'
class='--hover_background-color_green --hover_color_yellow'></div>

Compiles to:

.my-class:hover {
  background-color: green;
  color: yellow;
}

Pseudo-elements

<div data-dresscode='my-class'
class='--first-child_background-color_blue --first-child_color_pink'></div>

Compiles to:

.my-class:first-child {
  background-color: blue;
  color: pink;
}

@rules

<div data-dresscode='my-class' data-md='media screen and (min-width: 768px)'
class='at-md_background-color_lime at-md_color_fuchsia'></div>

Compiles to:

@media screen and (min-width: 768px) {
  .my-class {
    background-color: lime;
    color: fuchsia;
  }
}

ToDo

• Improve config process
• Group rules by @rules part of key
• Hide elements with data-dresscode
• Handle pseudo-elements requiring parentheses