Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #7

This newsletter issue was sent out to 26,559 newsletter subscribers on April 27th 2010.

Every other week our editorial team works on short, entertaining and (of course) relevant articles for the upcoming issue. The newsletter is sent out on Tuesdays, and contains unique tips and tricks for designers and Web developers, written by us exclusively for our email subscribers. You can subscribe to the e-mail newsletter1, of course.

Table of Contents

  1. Elastic: A Visual Theme Editor for WordPress2
  2. Creating Dynamic Footnotes With CSS and jQuery3
  3. Free Payment Icon Set (10 Free Icons)4
  4. Typographic Accents Made Easy5
  5. Pixuffle: Shuffle Pixels Into Unique Compositions6
  6. Generating a Starter CSS from HTML Mark-Up7
  7. Get Out for Once: Look at an Online Garden8

1. Elastic: A Visual Theme Editor for WordPress

Elastic9 is a visual theme editor and engine for WordPress. In reality, it’s a new way to look at themes for WordPress. It allows virtually anyone with a modicum of technical skill to edit their WordPress theme. A new theme layout can be created literally in a minute or so (see the demo10 or slideshow presentation11), everything based on a grid layout with a defined size. Creating a layout is as simple as dragging and dropping boxes, resizing them and then specifying the type of content each should contain (header, footer, content, sidebar). It also aims to be developer-friendly.

Elastic: a visual theme editor for WordPress12

It’s still in early stages of development and has been released under the GPL license. Currently, Elastic is available in version 0.0.313. It’s also in the process of being completely rewritten to make it less restrictive to developers and more tightly integrated in WordPress’ core. In the meantime, it’s worth a try and might meet your needs as is. (cc)

2. Creating Dynamic Footnotes With CSS and jQuery

In body copy, footnotes can be a nice solution to hide content that is not directly relevant; for examples, linking to a citation source, explaining a particular term in detail or discussing something off-topic. In these situations, footnotes let readers jump to this information when they need it, while allowing the writer to focus on the important things and not get lost in details.

But in their simplest implementation – using sup tags and linking within the page – footnotes aren’t very user-friendly. They interrupt the experience, requiring the user to click the link, read the information and then return to the page with the browser’s “Back” button.


Lukas Mathis has come up with an elegant solution15 to improve this user experience: his jQuery script shows the content of footnotes as soon as the user indicates that they are interested in it – i.e. when they move the cursor over the footnote symbol.

If the user’s browsing device doesn’t support mouse hovering, they can still jump to a footnote via its link. The script works in Firefox, Chrome, Safari, Opera and Internet Explorer 7+. Alternatively, you could try the accessible footnotes technique or BrandSpankingNew footnotes script16. (vf)

3. Free Payment Icon Set (10 Free Icons)

One can hardly build an e-commerce website without trustworthy and recognizable e-commerce icons. Payment Icons17 in particular might come in handy to convey your message and fit the context. The guys over at Webiconset have just released this set of 10 high-quality icons for use in both private and commercial projects.


The set includes PNG icons for Visa, MasterCard, American Express, Cirrus and PayPal. Gold Coin icons and shopping carts are also provided. The icons are available in resolutions of 32×32, 48×48 and 64×64 pixels. (cs)

4. Typographic Accents Made Easy

Do you often find the need to edit body copy or emails in foreign languages with funny characters that for some reason do not display properly from the local keyboard? Then have a look at TypeIt19. The online tool will save you a lot of time and vexation. Don’t strain your brain trying to think of hotkeys like Alt + 134; stop hunting around for special characters in a word processor as you use an email client or instant messaging service. The service allows you to add typographic accents and special characters (e.g. punctuation marks) as you’re typing.

Typographic Accents Made Easy20

Instead of clicking on buttons for the accents, you can also use pre-defined shortcuts, like Control + N, to insert the characters: just point your cursor to the desired character and you’ll see a tooltip.

Also, you can switch between character sets while typing; you can use bold, italics, underlining and superscript; and you can change the font and size. TypeIt was developed by the Polish translator Tomasz P. Szynalski. The tool has full keyboard support for Internet Explorer 6+, Firefox, Safari, Opera and Chrome. (mm)

5. Pixuffle: Shuffle Pixels Into Unique Compositions

For some, it is just another Web gadget. For others, Pixuffle is an inspiring and creative online Web art tool. We think it is always good to present experimental applications that are relevant to imaginative design, and this one fits the bill.

Pixuffle: shuffle pixels to create unique compositions

Once you uploaded an image, the tool allows you to sort the parts of the picture by moving squares (parts of the image) around. Pixuffle shuffles the pixels’ positions in a playful puzzle interface. The generated images can be encoded in anything from ByteArrays to JPG files (using Alchemy’s C++ module), and they can be saved to your computer or posted to the Pixuffle Flickr gallery21. The project is open source, so developers can download the full code for image processing, encoding and uploading. The tool can be used online: no download is necessary. No other plug-ins are needed either. (cs)

6. Generating a Starter CSS from HTML Mark-Up

Primer22 is one of those little tools that make life easier for the Web developer. The tiny generator works online and has only one function: it extracts from an HTML page (copying and pasting will do) a framework of classes and IDs that can be used as the foundation of an external style sheet. This can be wonderful if you work by first doing the structure in HTML, and then the forms and colors in the style sheet.

Generating a Starter CSS from HTML Mark-Up23

Primer undercoats your CSS by pulling all of your classes and IDs and putting them in a starter style sheet. Now, just paste your HTML to get started. (sl)

7. Get Out for Once: Look at an Online Garden

Posts like “Unusual Places to Look for New Ideas” and “Out of the Box Ways to Find Inspiration” are proliferating in the blogosphere. Of course, stepping away from the computer for a while and looking at what the real world has to offer is great. But admit it, wouldn’t you love to be able do that on your computer, too?

Get Out for Once: Look at an Online Garden24

As unlikely as it sounds, GardenPuzzle25 is an online garden-planning tool. Choose from one of the many beautiful sceneries and arrange plants and trees into a garden of your own. If you have a genuine interest in the field, this is a great resource because each plant comes with a short description. You can try for the best one for your IRL garden, depending on climate and soil conditions. But above all, the tool is about organization of space, and that’s good for Web designers to practice, isn’t it?

The authors in this newsletter are: Vitaly Friedman (vf), Sven Lennartz (sl), Christina Sitte (cs), Cameron Chapman (cc), Manuela Müller (mm).


  1. 1
  2. 2 #a1
  3. 3 #a2
  4. 4 #a3
  5. 5 #a4
  6. 6 #a5
  7. 7 #a6
  8. 8 #a7
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' web with the latest tips and tricks for designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top