

Labcss.net - An HTML/CSS snippet, allows direct visual manipulation of CSS - ronreiter
http://labcss.net

======
teuobk
Seems similar to <http://webputty.net> , though WebPutty has CSS hosting,
better integration with existing sites, and compatibility with SCSS.

That aside, what problem do you see this as solving? As in, why would somebody
learning CSS by "playing around" (as you say on your About page) want to use
LabCSS instead of Firebug or the Chrome debugger?

~~~
ronreiter
First of all, webputty will not always be free. Second thing is, webputty is a
website for CSS manipulation, whereas labcss is a snippet website for creating
styled HTML elemments. The process of building the website is the significat
advantage of this website, and not only the CSS tweaking.

------
mwill
It supports javascript but the problem is the whole thing is refreshed for
every character you type. Example, adding "alert('foo')" will give you an
alert for every character you type in the edit box.

Am I doing it wrong or is this supposed to happen? It could probably do with a
run button like JSFiddle.

~~~
tristanstraub
I would go for a check box to turn the auto update on or off. I love this
feature.

Along with the selectors on the left and all the nice sliders, you can try out
a lot of stuff really quickly.

~~~
phalasz
I think the checkbox approach would be good.

Nice tool though. Easy to try out quick changes fast.

------
dave1010uk
I thought this was just a JSFiddle/JSbin type site for CSS but then I clicked
on the generated HTML and realized what it lets you do. This looks like a
great tool for learning CSS but I can't imagine myself pasting in some
HTML/CSS and tweaking one thing at a time by pointing and clicking.

I'd still recommend checking out <http://jsfiddle.net> which lets you keep JS,
HTML and CSS separate and makes it easy to include specific versions of JS
libraries (handy for testing/reporting bugs). There's also a nice embeddable
(iframe) version and it lets you test ajax responses. There's also
<http://jsbin.com> which has similar features.

------
jcfrei
I think the idea is really well executed so forgive my question: why would I
use this instead of the built-in functionalities of chrome/firebug?

~~~
ronreiter
Because it allows you to feed back the changes to your snippets immediately to
the stylesheet.

------
Meai
Pretty cool, although I still don't understand how margin-top: 50%; moves the
thing so far down ;) Damn you CSS!

~~~
bgrins
<http://www.w3.org/TR/CSS2/box.html#margin-properties>

When margin top or bottom is a percentage, it refers to the width, not height,
of the containing block. If the parent is 100% width (say, the body), the
element will move down 50% of your screen width.

Usually, you don't want this, but you can use it to do some cool tricks with
keeping the aspect ratio of an element, like this:
<http://jsfiddle.net/bgrins/999FP/>

------
AdesR
I have been using the bookmarklets provided by squarefree.com
(<https://www.squarefree.com/bookmarklets/webdevel.html>) for about 8 or 9
years now. Cross browser, works on the current page, dead easy.

------
morsch
"This Google App Engine application is temporarily over its serving quota.
Please try again later."

:(

~~~
ronreiter
Yea, didn't see it coming. Fixed now.

------
ilija139
I don't get it. What are the advantages of using this instead of WebKit's
Developer Tools or FireBug?

~~~
ronreiter
Because changes are fed back to the CSS stylesheet. And it's a snippet
website, apart from a design tool.

~~~
ilija139
Chrome v13 can save the modified CSS file, it even has revision history.

------
gildas
Already broken ?

Uncaught SyntaxError: <unknown message reserved_word> in HTMLFiddle.js:87

------
aptwebapps
It'd be neat if it could grab an existing page. Give it a url and start
messing around.

~~~
ronreiter
Cool feature, I'll definitely consider it but it's a bit difficult to execute
properly because of image paths and remote javascript/CSS files.

------
bluesnowmonkey
The transparent blue overlays you get on hover break scrolling.

------
vadim27
Great use of open source resources!

------
theitgirl
very cool..i like that it updates in real-time unlike jsfiddle where you have
to click save.

