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 #35

This newsletter issue was sent out to 58,500 newsletter subscribers on June 7th 2011.

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

Table of Contents

  1. Flexible Font Sizes With jQuery2
  2. Auto-Reload Style Sheets Whenever CSS Files Are Saved3
  3. Showcase Of Beautiful Paper Designs4
  4. Subtle Patterns: Free Patterns For Your Projects5
  5. WeekendHacker: A Place For Short Collaborative Projects6
  6. Custom Grid Patterns7
  7. Turn Letters, Words And Phrases Into Beautiful Typographic Designs8

1. Flexible Font Sizes With jQuery

With the huge variety in display sizes that designers have to deal with, creating a design that looks good whether the user is on a smartphone, tablet or giant desktop monitor can be challenging. Reflowing paragraph text is one way to deal with different screen sizes, but wouldn’t it be nice to get even further and achieve scalable headlines that fill the width of a parent element?

Flexible Font Sizes with jQuery9

That’s where FitText10 comes in. It’s a jQuery plug-in for responsive and fluid layouts that resizes display text to fit the parent element. It’s a great solution for creating headlines that look good on everything from a small mobile device to a 30-inch desktop display. (cc)

2. Auto-Reload Style Sheets Whenever CSS Files Are Saved

We’ve all been there: we write a bit of CSS code, save it, switch over to the browser, reload to see the changes, and then go back to the editor, following the same tiresome cycle over and over again. Wouldn’t it be nice to have a tool that automatically detects changes in the CSS and shows them in any Web browser, without needing to manually refresh the page? It would, wouldn’t it? Well, that’s exactly what Vogue11 does.


This tool reloads the style sheet (not the HTML) of a page in all browsers, and it can even be configured to reload a page automatically in multiple browsers at the same time. The tool doesn’t host your website but rather runs your website’s own local server. To use it, you just need to install NodeJS and npm. The project is open source (MIT licensed) and can be forked on Github. (vf)

3. Showcase Of Beautiful Paper Designs

Want the perfect wedding invitation? Need ideas for a business card? Looking for inspiration for a stationery project? Launched in 2008, Oh So Beautiful Paper13 is a design, wedding and lifestyle blog that offers up daily beauty.

Showcase of Beautiful Paper Designs14

The blog showcases stationery design and serves as an inspirational resource for designers. If you’re interested in typography, color, ornaments and paper, this is definitely a blog to follow. (as)

4. Subtle Patterns: Free Patterns For Your Projects

Patterns can add a lot of richness to website designs when used the right way. That being said, incorporating a busy or bold pattern without letting it dominate the design is a lot harder. Subtle patterns are a much better choice in a lot of cases, and they’re easier to get right.

Subtle Patterns: Free Patterns for Your Projects15

Subtle Patterns16 has just such patterns — more than 25, in fact — all for free. There are organic patterns like fabric and stone, and geometric patterns like stripes and diamonds. You can also submit your own patterns under a Creative Commons license to share with the community. The patterns must tile properly, and you can submit only PNG and GIF file formats. (cc)

5. WeekendHacker: A Place For Short Collaborative Projects

Are you working on a short project that would take a couple of days, a couple of hours or even less if you just had some help? Whether you have an idea for a short project or want to find someone to work with on bigger projects, WeekendHacker17 might be the solution for you.

WeekendHacker: A Place for Small Collaborative Projects18

WeekendHacker is a place where you can issue a cry for help for one of those tiny projects that cross your path. It’s a mailing list which allows you to reach out for designers and developers who might want to help you with the parts of small projects that you are not strong in. Simply sign up, post your small project, and wait for other people to help you. All users get one email a day, curating cool little projects that people post. No spam; just cool little projects you can join. (ar)

6. Custom Grid Patterns

When a website layout requires order, consistency and structure, many designers turn to grids. Many grid systems are out there, but not everyone wants to use a template. Sometimes you need a custom solution.

Customized Grid Patterns19

Modular Grid Pattern20 enables you to create a grid template for Photoshop and other image editing applications. Enter the baseline, the module’s width and height, the gutter width, and the number of modules (columns), and it gives you a custom pattern to import into Photoshop. A Photoshop extension is also available, and you can download a PNG or transparency map, too. (cc)

7. Turn Letters, Words And Phrases Into Beautiful Typographic Designs

Words consist of mere letters that, when joined with design and creativity, gain visual and semantic weight. The Phraseology Project21 celebrates this process by experimenting with beautiful typography — and sometimes mixing illustration and type. The project lets you submit a letter, word or phrase, which is then turned into a beautiful design by the website’s founder, Drew Melton, or another creative who is participating in the project.

Phraseology Project22

Essentially, the Phraseology Project is meant to be an ongoing experiment in typography, a space in which to practice typography. In the words of Drew, “Most design sites or blogs are merely feeds of disconnected visual stimulation. I wanted to do something that you could actually influence and invest in.” And that’s exactly what he’s done. The project helps Drew and his colleagues learn about the process of creating honest typographic artwork. It’s a wonderful example of a side project that encourages experimentation and exploration of design. (il) (vf)

The authors in this newsletter are: Vitaly Friedman (vf), Iris Ljesnjanin (il), Andrew Rogerson (ar), Anne Sundermann (as), Cameron Chapman (cc).


  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

↑ 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. 1

    Love this edition! The FitText blurb alone sent me on a 1 hour-plus inspiration excursion to Lettering.js, Lost World’s Fairs, Friends of Mighty, and more!

  2. 2

    Tobias Strebitzer

    June 7, 2011 5:37 am

    Regarding auto-reloading of css files, i think it’s still not the fastest way to go. Make sure you have a look at FireFile (, which lets you save changes made by Firebug to your live server.


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