Lorem ipsum for images in French Maid


Just yesterday, I saw a post on HN about the lorem ipsum for images, and I thought, "Hey kinda neat, but it shouldn't really require a server.  All you really need is a place holder."  So I decided to add it to French Maid, and it didn't take long…considering I was watching TV at the same time. 

French Maid is just a small little javascript wrapper library that injects common behaviors into web pages using unobtrusive javascript, based on jQuery.  All you ever need to do is set the attributes of html to standard html5 or microformats, and it'll give you some behavior that makes sense.  I started this because while working in Sinatra and Django, there wasn't built in javascript behaviors for templates like in Rails.  Turns out that was a good thing, but a bit annoying, so I wrote something to help me out.  

Lorem ipsum for images is the only non-standard in there right now.  When you're laying out a page, put:

<!-- Changes this into a div placeholder -->
<img class="lorem" data-size="200x100" />

And you'll get an image placeholder 200 px wide by 100 px height.  There's only a few options:

<!-- When you want to set the color -->
<img class="lorem" data-size="100x100" data-color="#ddd" />

<!-- Or when you want some other styles along with it -->
<img class="lorem" data-size="100x100" style="margin: 10px" />

<!-- Or if you want to override something -->
<img class="lorem" data-size="100x100" style="border: 0px solid black" />

This is pretty useful for having placeholder icons.  I usually spend lots of time picking icons when I'm laying out a page, when I really shouldn't be.  

I haven't yet made a homepage for French Maid.  Figured I would when it's more mature, but hey, if you're not embarrassed when you release something, it's too late, right?  So while I haven't gotten around to implementing all the microformat and html5 specifications, it's been useful so far, especially for standard pattern AJAX calls.  The screenshot is from the test/example/documentation page in the project.  You need Sinatra gem to run it.  Then just fire up the server by running the test file, then navigate to localhost:4567 and start clicking around.

Have fun, and if you find it useful, lemme know.  It'll be motivation to get a homepage up for it.

2 thoughts on “Lorem ipsum for images in French Maid

  1. Hey there, lemme know if there are any problems. French maid is still relatively new, but it should work pretty well and easily. If you have patches, send a pull request on github! 🙂

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s