Wednesday, February 22, 2012

CSS/HTML Snippets - Free Font - Color Schemes - WordPress - jQuery - Album Covers

The email is not displayed properly? View the online version.

The Smashing Email Newsletter

Issue #53, Tuesday, February 21st 2012 | 99,770 subscribers | Previous issues

Editorial

Dear Readers,

As mentioned in the previous newsletter issue, we've been busy bees organizing the upcoming SmashingMag Meetup as well as a one-day workshop with CSS Guru Jens Grochtdreis in Frankfurt on Monday the 27th of February. The CSS3 Master class will be held in English and all you have to do to join is to answer a short question related to the topic of the workshop on our meetup page. Last but definitely not least, we'd like to thank MailChimp for sponsoring the workshop, and Linotype for sponsoring the evening event — both to which we all look very much forward to!

Last week was also pretty exciting for us, especially after the launch of the Smashing Book #3 presale. We've received truly smashing feedback and promise to give our best to answer all further requests and questions via our contact form and on Twitter (#smbook3). The pre-order is available for just a few days so don't miss your opportunity to pre-order the Smashing Book #3 at a special price while you can!

In today's newsletter issue, we'll be covering some CSS & HTML snippets, a quality free font, a color scheme tool and vintage album covers. We're also giving away 2 tickets to the Mobilism Conference in Amsterdam. Further details regarding the conf tickets are provided below.

We hope you enjoy the newsletter!

Table of Contents

01. Quick Peek At A Designer Hall Of Fame
02. Common Patterns Of Markup & Style
03. Entypo: Free Pictogram Font
04. Match Up Your Colors
05. Monitor And Manage Your WordPress Sites
06. DataTables: Plug-in For jQuery Javascript Library
07. The Infinite Preloader
08. Thirty-Three Vintage Album Covers
09. Things Organized Neatly
10. New on Smashing Magazine
11. Smashing Highlights


1. Quick Peek At A Designer Hall Of Fame

Whether you are a design enthusiast or a company marketing director, you're likely to be always looking for new and exciting designs to spice up your wallpaper/company website. Browsing for nuggets on the Web can be a lot of fun, but sometimes you wish someone would take the time to put together a little designer "Hall Of Fame"... actually, 'he' did.

Quick Peek At A Designer Hall Of Fame

365 Awesome Designers is a "no-frills" — but lots of "design-thrills" — project, that features interesting, creative, (pick your "awesome" adjective of choice) designers and some of their creations. Every day the avid design fan can discover a new craftsperson. And should your interest in a designer go deeper, the website's creators provide you with all the necessary information to either stalk your new favorite designer online or on Twitter. (jc)


2. Common Patterns Of Markup & Style

Whatever project you're working on, the chances are high that you'll be using the same snippets of code that you've used in your previous projects as well. Whether it's a data table, a search, breadcrumbs or pagination — wouldn't it be nice to have a library of bulletproof reusable CSS/HTML components and just grab them when you need them for your work?

Common Patterns Of Markup & Style

Pea.rs might be just the tool you're looking for. It's an open source WordPress theme that lets you collect, test and experiment with interface pattern pairings of CSS and HTML. You can easily have your own pattern library setup and running quickly. Essentially, each pattern is a post in WordPress, code snippets are added using custom fields, and the main content field is used for optional notes. Very useful! (vf)


Advertisement


3. Entypo: Free Pictogram Font

Pictograms are simple symbols that represent signs, instructions, or any other idea. They are also common interface design elements — widely used for apps or general websites. While you could use them separately (or integrate them as sprites in your website), they are often useful to have as perfectly scalable icons, e.g. if you want to display something on a map.

Entypo — Free Pictogram Font

Entypo Pictograms is a set of more than 100 pictograms available as OpenType fonts, released under Creative Commons license and also free for commercial use. The collection consists of many navigation elements and other easily recognizable icons. Authors Daniel Bruce and Andreas Blombäck will appreciate seeing any usage of Entypo in your design. (af)


4. Match Up Your Colors

Few people have pitch-perfect color vision. Disregarding the large part of the population that has some form of color-blindness, it is rare that one can say with utter certainty exactly which color corresponds to which. For designers whose work partly depends on matching color palettes, the hit-and-miss approach to color selection can be nerve-wrecking and time-consuming. Colllor represents a viable, if not overly clinical, tool to help choose your color palette.

Match Up Your Colors

Colllor helps you find specific colors and their corresponding shades, hues and tones. You can even look for associating colors to broaden your palette, which can be a useful tool in a Web developer's belt. You can input color names using plain English as well as in Hex code, but don't expect too much — we have tried (in vain) to get results on 'rust', 'sunset', and 'yellow', to no avail. (jc)


5. Monitor And Manage Your WordPress Sites

So you've got about a dozen projects running on WordPress. Some of them are somehow customized, but most are using the same plugins or even the same themes. What do you do if your plugins or themes get outdated, or if a new version comes along? Going through all the websites and updating the plugins manually doesn't sound very exciting, does it?

Monitor And Manage Your WordPress Sites

WP Remote to the rescue. This little online service helps you monitor and manage all of your WordPress-powered websites and keeps you up to date. The tool allows you to instantly take care of core WordPress updates, plugin updates and theme updates, generating daily backups. WP Remote is absolutely free to use; you only need to install the WP Remote plugin on your WordPress sites, activating it with your API key. A great little time-saver for small projects. (vf)


Advertisement


6. DataTables: Plug-in For jQuery Javascript Library

Sorting, filtering, pagination and state-saving in an interactive table sounds like quite an overhead for any developer, especially if you're keen on high performance and the scalability of your tables. DataTables is a highly flexible jQuery plug-in that can help you with exactly that challenge.

DataTables — Plug-in For jQuery Javascript Library

The library can display data from different sources, be it DOM (i.e. an HTML table in a page), a JavaScript array, or a server-side file with JSON formatting. Among other features, the library provides pagination, on-the-fly filtering, and multi-column sorting with data type detection. And the features that DataTables provides can be enhanced by many freely available plug-ins: e.g. with row grouping, column filtering, column resizer, etc. The library weighs 68K minified, and 20K gzip'd. If you're looking for an advanced and robust data tables plug-in, this is certainly one worth checking out. Open source, and released under GPL and BSD. (af)


7. The Infinite Preloader

Flash preloaders are well-known from the good old days. At that time, loading times on the Web were long, Adobe Flash was kind of cool, and preloaders were not only useful but necessary to indicate the status of the loading process for Flash-based websites. In fact, in 2008 we featured creative Flash preloaders in one of our articles. But the New York Web and advertising agency Big Spaceship devoted an entire website to (its own and other) Flash preloaders.

The Infinite Preloader

The site is called Prettyloaded, and it's actually a (pretty long) Flash movie — with its own preloader, of course. Most of today's preloaders are much simpler: the notorious AJAX circle ball and its various minimalistic descendants dominate the scene, so no Flash plugin is necessary. Still, looking at creative preloaders might be useful to come up with more original HTML5 preloaders, as well. (sl)


8. Thirty-Three Vintage Album Covers

Some people collect postcards, others collect stamps or pencils. The guys behind Jive Time Records, a Seattle-based store specializing in used vinyl, collect — guess what? — vintage album covers. More than that, they group and classify them according to their shapes: circles, dots, squares, lines, stripes or arrows.

Thirty-Three Vintage Album Covers

The result is Project Thirty-Three, a growing collection of vintage album covers that convey their messages with only simple shapes and typography. The website features over 430 covers and the collection keeps growing. Now, that's an interesting source of inspiration for your next cover design or poster! (vf)


9. Things Organized Neatly

Being organized may be very helpful in our everyday lives. Some people are naturally organized, and without noticing it, create patterns and rules for systemizing their objects. In case you're one of those talented people who makes a hobby out of this mania, you'd certainly like to visit Things Organized Neatly.

Things Organized Neatly

In the blog curated by Austin Radcliffe, you'll observe perfectly harmonized compositions that vary in shape, size, material, color, category and related objects. Some examples are vintage matchboxes, headphones, keys, cups, to name a few. There's also the possibility of posting one of your compositions, in case you'd like to show your friends that organization can also be an art in itself. (tt)


10. New on Smashing Magazine


11. Smashing Highlights

  • Writing Systems And Calligraphy Of The World
    Pick any language you like: Arabic, Chinese, Japanese, maybe Nepali? Each is based on a different writing system, which makes it interesting to figure out how they work. Learn how to draw inspiration and apply it to your own typography work.

  • Free Typographic XHTML/CSS-Layouts For Your Designs
    Some brilliant typographic templates designed by our fantastic Web design community. Feel free to take a look at all the wonderful templates - we hope that they'll help you improve the quality of typography in your future designs!

  • Designing and Producing Creative Business Cards
    Plenty of creative business card showcases are available out there. This guide is meant to help you decide which technique is right for you, how to correctly prepare the files and what to look for in a printer when creating your own business card.


Thank You For Reading!

As always, we sincerely appreciate everyone's time and support. We would also like to thank our trainees Ana Flasker and Luca Degasperi for all their great work and contribution in the previous months. We hope that your internship at Smashing Magazine has met your expectations and we wish you both all the best in your future endeavours!

As mentioned at the beginning, this time we're giving away 2 tickets to the Mobilism Conference in Amsterdam, Netherlands. If you'd like to win one, all you have to do is tweet "Goddag @smashingmag take me to #mobilismconf in Amsterdam!" The two lucky winners will be announced on the 2nd of March. Good luck and stay tuned!

Frankfurt, here we come!

Yours sincerely,
The Smashing Team

Join our community: follow us on Twitter and join us on Facebook

The authors are: Iris Ljesnjanin (il), Talita Telma (tt), Ana Flasker (af), Stephan Poppe (sp), Cameron Chapman (cc), Luca Degasperi (ld), Andrew Rogerson (ar), Lisa Lang (ll), Vitaly Friedman (vf), Sven Lennartz (sl), Christiane Rosenberger (research), Elja Friedman (tools), Andrew Lobo (proofreading).

unsubscribe | update preferences | view it in your browser

No comments:

Post a Comment