Whale Tins logo: a happy whale swimming next to a can stuffed with his tasty meat

Stuff so much presentation into your HTML it ought to be illegal!

Whale Tins is the utility-first CSS and Javascript framework that’s guaranteed to create long downloads and difficult-to-maintain code.

How does it work?

Easy! Say you have some HTML on your Web page:

        <span>Visit our awesome page on X!</span>
      

Without Whale Tins, your site just looks like this:

It would be great if that span actually took you to your awesome page on X when you clicked on it. Before Whale Tins, this would have required hours of complicated Javascript coding and debugging, plus arcane CSS knowledge only possessed by graduates from Ivy League design schools.

But watch what happens when we stuff that span with easy-to-look-up Whale Tins tokens!

        <span class="whale-tins--inline-style:true whale-tins--event-override:allow_click whale-tins--pointing-devices:choose(mouse|finger|touchpad) whale-tins--color:select(getWhaleTinsColors=blue|onBlueNotFound=whale-tins--getDefaultColor) whale-tins--stripingAPI(version=2.3|apiKey=htFETI369dhghe783gdi38gd83|stripeType=whale-tins::under_stripe) whale-tins--buttonDownPressHandler:setState(isActive=true) whale-tins--createEventLoop(waitWhile(handler.clicked<=whale-tins--event[CURRENT])) whale-tins--display-module-screen(height<=400pixels) whale-tins--networkConnection(whale-tins-poweredByTesla|goTo(X,destination:awesome):repaintOnLoadNewPage">Visit our awesome page on X!</span>
      

Kazowie! Now that same Web page looks like this:

Try it!