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.

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.

Copyright © Gavin McFarland