Marked as CSS Playground

Paper Jokes

The other day, I sat down to write but nothing was coming. I loaded up my document in Marked, Brett Terpstra’s excellent Markdown live preview (and so much more) app. As I flipped through my collection of custom stylesheets to preview the paltry paragraph with, I decided I wanted something a little different. So I fired up TextMate and started whipping up a new design.

HTML and CSS, by their nature, have to be released out in the open. Want to know how someone made a site you like? Well, the source code is right there if you know where to look. As a result, the Internet is littered with snippets of code shared by many the kind-hearted souls in the design community.1

I don’t like HTML all that much. It has been a long slog from my first Web site (um, 15 years ago?) to my current level of head-above-water-ness. I do, however, love to tinker with CSS. That’s where the real fun happens. Marked outputs some solid HTML5, much better than what I’d start off with from scratch. Since it’s based on Webkit (i.e. Safari) there are a bevy of CSS3 tricks you can throw at it.

One feature that has become indispensable as I help write the custom CSS for Fountain for Marked is the ability to track CSS changes. If you’re using a Custom stylesheet in Marked, you can edit the CSS and the changes will refresh every time you hit save. Change the color of an element, save it, and, boom, there it is in Marked.

Now, back to me, trying to write but getting sidetracked writing a custom preview for Marked. I wanted to create a theme based on an early (ultimately foolhardy) Screenplay Markdown stylesheet that made the script look like a piece of paper. I figured I could throw it together in a new sheet pretty quickly.2

I modified the custom sheet that comes with Marked and felt pretty good, but something was missing. So I did a little wandering around the web and found some neat CSS tricks that I wanted to try out but never had the chance to.

Everything I have ever learned about CSS I have learned by messing with code. There are so many creative folks out there coming up with new and interesting ways to use stylesheets3 that it rarely seems worth waiting for a full-on project to play with the weirdest and wildest bits of code. I’m loving just throwing CSS at Marked (like these beautiful patterns), breaking it and figuring out how to tame it.

That’s why Marked, besides being a great Markdown preview app, is also a great CSS playground, a place where you can go nuts and make a mess without any consequences. I don’t have to track my changes or worry about breaking the way something works elsewhere on the site; I can just have fun and take the code for a spin. Hopefully, when I actually decide to work on a new design, my bag of tricks will have expanded.

Oh, and that custom stylesheet I decided to work on the other day is featured in the image at the top of this article. You can go grab it here. Happy writing, if you ever get to it.

  1. See, for example CSSDeck↩︎

  2. I tend to approach CSS with an idea in mind, challenging myself to get it done in no time flat and finding myself still tinkering hours later, hungry and disoriented. Doesn’t everyone? ↩︎

  3. I’m looking at you, CSS Homer Simpson↩︎