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
- Flexible Font Sizes With jQuery2
- Auto-Reload Style Sheets Whenever CSS Files Are Saved3
- Showcase Of Beautiful Paper Designs4
- Subtle Patterns: Free Patterns For Your Projects5
- WeekendHacker: A Place For Short Collaborative Projects6
- Custom Grid Patterns7
- 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?
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.
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 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 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.
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.
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 https://www.smashingmagazine.com/the-smashing-newsletter/
- 2 #a1
- 3 #a2
- 4 #a3
- 5 #a4
- 6 #a5
- 7 #a6
- 8 #a7
- 9 http://fittextjs.com/
- 10 http://fittextjs.com/
- 11 http://aboutcode.net/vogue/
- 12 http://aboutcode.net/vogue/
- 13 http://ohsobeautifulpaper.com/
- 14 http://ohsobeautifulpaper.com/
- 15 http://subtlepatterns.com
- 16 http://subtlepatterns.com
- 17 http://www.weekendhacker.net/
- 18 http://www.weekendhacker.net
- 19 http://modulargrid.org/#app
- 20 http://modulargrid.org/#app
- 21 http://phraseologyproject.com/
- 22 http://phraseologyproject.com/
Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf New York, on June 14–15, with smart design patterns and front-end techniques.