Stylup

Stylup is a markup language for managing HTML class names in responsive designs. It parses a custom syntax into conventional HTML class names so your markup is less repetitive, especially in responsive designs.

Github

Usage

Groups

<p class="[text underline uppercase]"></p>

Outputs:

<p class="text-underline text-uppercase"></p>

Block Queries

<div class="@sm([span 1] no-guttering)
            @md([span 2])
            @lg([span 4])
            @xl([span 8])"></div>

Outputs:

<div class="span-1-sm no-guttering-sm span-2-md span-4-lg span-8-xl"></div>

Inline Queries

<div class="hidden@sm [span 2@md 4@md 8@lg]"></div>

Outputs:

<div class="hidden-sm span-2-md span-4-md span-8-lg"></div>

Customise

(Coming soon)

Input

<div class="sm:hidden | span md:2 lg:4"></div>

Customise the syntax to your own tastes using regular expressions.

Output

<div class="sm__hidden md__span—2 lg__span-4"></div>

Change how Stylup outputs to conventional HTML class names to work with your own framework.

Feedback

If you have some feedback about Stylup I would love to hear from you. You can either raise an issue on github or send me a message on twitter.