Feb 15 2013

New Tools: CSS-Preprocessor Roole and HTML Converter Markdown.css

Advertisement

Astonishing things happen inside the development community. It keeps pushing out tools at an hourly rate, where some tools become essential and others are never again heard of. Today we will be looking at two tools, one from each side of this spectrum. While Roole, a JavaScript-based preprocessing CSS language, proves immediately useful, Markdown.css asks for a deeper look, or two.

roole-w550

Roole: CSS Preprocessor Based On JavaScript

Fresh from the section “Useful Tools”, the brand-new CSS preprocessor Roole rightfully draws some attention. Roole stands in line with Sass and LESS, which might sound like the reinvention of the wheel at first look.

Roole is different, though. It is based on pure JavaScript and can be implemented natively, while the alternatives have their downsides. Roole can be integrated on the server-side with node.js or on the client-side using native capabilities as long as JavaScript is not deactivated. In the latter case the runtime compiler of LESS would run into trouble, too. Sass generally takes more effort, if you want to compile it at runtime.

Roole combines programmer’s logic with stylesheets and allows for simple and complex results in a time and code saving way. The demo site has lots of examples.

Additionally, Roole cares for the tedious task of vendor prefixing. Short standard conform instructions are enough::

roole-vendor-prefixing-w550

Roole.org/test lets you check, whether your browser supports it and to which extent. My Chrome, running under Windows 8 Pro, made the whole way through. Roole is in its infancy and can be downloaded from Github under MIT license in version 0.1.2.

The website of the project has a live editor to experiment with the possibilities. Compared to Sass and LESS, Roole is a little down the road. Establishing a pure JavaScript CSS preprocessor sounds attractive, though. So keep an eye on Roole.

Markdown.css Lets HTML Look Like Markdown

From the other end of the spectrum, we see Peter Cole’s Markdown.css. Markdown.css is a stylesheet to convert any HTML into Markdown. Hey wait. That would be useful. This instead is not, what Markdown.css does. It only lets HTML look like Markdown. To visualize this, let’s look at the following screenshots. This HTML:

markdownify_before-w550

Will look like this after Markdown.css:

markdownify-w550

Readability is improved. So far, so good. A good use-case would be, if you could copy and paste the Markdown for further editing. But it is exactly this, that is not possible. If you copy and paste, you lose the complete Markdown part.

markdown-css-css-w550

Thus, Markdown.css, realized using LESS, is a mere experiment. What I like the most is, what can be learned from the sources. I got inspired by Markdown.css and its LESS base. Thanks, Peter.

By the way: Markdown.css has an additional bookmarklet which lets you markdownify any website you are surfing on.

Related Links:

About the Author

Dieter Petereit is Noupe's Editor-In-Chief and a veteran of the web with over 25 years of experience in the world of IT. As soon as Netscape became available he started to do what already at that time was called webdesign and has carried on ever since. Almost a decade ago he started writing for several online publications, some well, some lesser known. Dieter is a heavy G-Plusser, so why not meet him over there?

Homepage

Comments and Discussions
search form
 
image description image description