Introducing CSSBattle PRO

We're proud to introduce CSSBattle PRO, where you can upgrade your CSSBattle experience ๐Ÿฅณ. CSSBattle PRO gives you access to the following features:

Add plugins to the code editor ๐Ÿ”Œ #

With plugins, you can add custom scripts to enhance the editor and make it faster to reach the optimized solutions. For example, you can use it to automatically minify your code or convert the units to smaller character units. Here's a simple minification script to get you started:

function run(code) {
processedCode = code
.replace(/\<\!--\s*?[^\s?\[][\s\S]*?--\>/g,'')
.replace(/\>\s*\</g,'><')
.replace(/\/\*.*\*\/|\/\*[\s\S]*?\*\/|\n|\t|\v|\s{2,}/g,'')
.replace(/\s*\{\s*/g,'{')
.replace(/\s*\}\s*/g,'}')
.replace(/\s*\:\s*/g,':')
.replace(/\s*\;\s*/g,';')
.replace(/\s*\,\s*/g,',')
.replace(/\s*\~\s*/g,'~')
.replace(/\s*\>\s*/g,'>')
.replace(/\s*\+\s*/g,'+')
.replace(/\s*\!\s*/g,'!')

return processedCode;
}

Advanced target stats ๐Ÿ“Š #

Get a bird's-eye view on your performance in battles with these advanced stats. See where you're performing well and where you're lagging behind. Here's what it looks like:

Light theme โ˜€๏ธ๐ŸŒ™ #

This is one of our favourite features! You'll be able to switch between light and dark themes and customize the experience as you like. Here's what the light theme looks like:

PRO badge ๐ŸŽ– #

Apart from all the above features, you'll also get a shiny badge next to your name wherever it appears across CSSBattle.

Upcoming features #

We're also planning to add these features very soon which will make your PRO experience even better.

  • Create public community targets: Create your own targets for the community with your own rules. All the targets will be rated by the community and we'll feature new targets every week.
  • Organize your own battles: Create your own custom battles with your own targets or choose from the community targets. You can also make it invite only which is great for conferences or workplaces.

You can upgrade to CSSBattle PLUS for $3/month (a special launch price). This price may change in the future depending upon features but will remain the same for you if you decide to upgrade now.

We hope you enjoy CSSBattle PRO!

Learn CSS the gamified way!

Want to write for CSSBattle? Mail us your pitch.