Introduction

CSSDeck Labs is a place where you can quickly create some experiments (or testcases) that involves HTML, CSS, JS code.

In order to enjoy the platform just signup with twitter or github (takes 10 sec) and start using it!

The Collection

If you've made something pretty cool, then we'll simply feature it in our showcase (provided it meets certain standards).

This platform will become your online portfolio of amazing CSS and JS creations!

Testcases

Sometimes you have a bug while coding a webpage and you go out on places like IRC, forums, etc. to ask for help. This platform is the best way to make a reduced testcase, i.e., just take out (copy) the code that acts buggy on your webpage and paste them in the playground. Click save and hooray! share the link on IRC or forums and then people out there are gonna be able to help you out in minutes (if not seconds).

Workflow

The workflow is usually pretty simple and straightforward. You hit the labs and start writing your HTML, CSS or JS code in the code editors. You can also use pre-processors like haml, jade, sass, compass, jade, coffeescript, markdown, etc. from the Preferences pane. Just click the icons you see on the left side-pane.

You can include CSS or JS resources/libraries like jquery, mootools, bootstrap, etc.

Whatever code you write gets rendered in the big Output box in "realtime". Exactly, it's realtime, you don't need to click any button called "Render" or "Run" in order to process your code and render in the output box.

When you are done, just Save by clicking the Save button on the top bar. Once saved you can do a few interesting things. Like, you can make more changes and Update your item :P.

If you made a lot of changes and thought, "I don't wanna override the changes. Instead I would like to create a new version!". Then the New Milestone option (under) More section on top bar is FOR YOU.

You can also share your item on twitter, facebook, have a "Full View" of the item and ofcourse embed it in your webpage using the embed code from the Share box.

That's all buddy! Don't forget to Check out the list of features and keyboard shortcuts.