Design Grid

Icon

Resources and Tutorials for Web Designers and Developers

CSS 2.1 and CSS 3 Help Cheat Sheets

The CSS 2.1 Help Sheet covers Syntax, Font, Text, Margins, Padding, Border, Position, Background, List, Media Types and Keywords. The CSS 3 Help Sheet contains code snippets for Rounded Corners, Box Shadow, Multiple Columns, Text Shadow, RGBa, Font Face (actually, not the CSS3 property, but still include for the sake of usefulness), Box Sizing, Box Resize, Outline and Gradients.

These were kindly made available for free by Smashing Magazine.

Head over there and get yours.

A set of 70 free social media icons

I’ve often found myself requiring icons when linking to or referencing different social networks I’m a member of.

Whilst there are a lot of icon sets available that can help me do this, most seem to be oversized and highly stylised. In the past I’ve used site favicons, but these can often be visually inconsistent.

You can grab these beautiful icons from Paul Robert Lloyd here.

45 Fresh Useful JavaScript and jQuery Techniques and Tools

Yes, this is another round-up of fresh and useful Javascript techniques, tools and resources. But don’t close the tab yet, as you might find this one very useful.

In this selection we present calendars, forms, buttons, navigation, debugging, optimization and compatibility tables as well as handy resources and tools. We also cover various jQuery-plugins that will help you extend the functionality of your website and improve user experience with ready components or coding solutions.

Read the full article over at Smashing Magazine

Display your unread gmail count using PHP

This little snippet of code does amazing things!

Using imap_open, you can display your unread email count from your googlemail (or any pop/imap server). I used it for my status board, and it works a treat.

$mbox = imap_open ("{imap.googlemail.com:993/imap/ssl/novalidate-cert}INBOX",
"gmailusername", "gmailpassword", OP_READONLY)
or die("can't connect: " . imap_last_error());
$check = imap_mailboxmsginfo($mbox);
if ($check) {
print $check->Unread; //. "/" . $check->Nmsgs;
} else {
print "Failed";
}

Just a couple of things to note:

  • novalidate-cert – This is important for Google Mail, otherwise you will get authentication failures
  • Make sure you have php5-imap installed. [sudo apt-get install php5-imap ; /etc/init.d/apache2 restart]

The Future Of CSS Typography

There has been an increasing and sincere interest in typography on the web over the last few years. Most websites rely on text to convey their messages, so it’s not a surprise that text is treated with utmost care. In this article, we’ll look at some useful techniques and clever effects that use the power of style sheets and some features of the upcoming CSS Text Level 3 specification, which should give Web designers finer control over text.

Read the full article over at Smashing Magazine

Web Design Criticism: A How-To

Web design is a relatively young field. It’s youthful, growing and made up of people from all kinds of backgrounds, many of whom lack formal design training. We have learned, and still are learning, as we go.

Read the full article over at Smashing Magazine

Applying Mathematics To Web Design

“Mathematics is beautiful.”

This may sound absurd to people who wince at numbers and equations. But some of the most beautiful things in nature and our universe exhibit mathematical properties, from the smallest seashell to the biggest whirlpool galaxies. In fact, one of the greatest ancient philosophers, Aristotle, said: “The mathematical sciences particularly exhibit order, symmetry and limitation; and these are the greatest forms of the beautiful.”

Because of its beautiful nature, mathematics has been a part of art and architectural design for ages. But it has not been exploited much for website design. This is probably because many of us regard mathematics as being antithetical to creativity. On the contrary, mathematics can be atool to produce creative designs. That said, you don’t have to rely on math for every design. The point is that you should regard it as your friend, not a foe. For illustrative purposes, we created a couple of web designs that present mathematical principles discussed in this article. We are also giving away a couple of PSDs that you can use right away in your next design.

Layouts featured in this post were created specifically for the purpose of this article. During the design process we made sure that all of the designs shown in this article are essentially mathematical in nature; that is, they exhibit order, symmetry and limitation.

Read the full article over at Smashing Magazine

Mastering Photoshop: Unknown Tricks and Time-Savers

We all have shortcuts that are essential to our daily workflow. A majority of them are staples such as Copy (Command + C) and Paste (Command + V), but occasionally we stumble upon a shortcut we wish we’d learned years ago. Suddenly, this simple shortcut has streamlined our process and shaved quite a bit of time off our day. Collected here are some lesser known but extremely useful shortcuts. Many of these are not documented in the “Keyboard Shortcuts” menu, and some of them don’t even have equivalent menu options.

Read the full article over at Smashing Magazine

Super Clean Fonts Perfect for Minimal Style Design

Finding the right typeface or font for a design can be a tricky process. So it’s good to have a nice selection of fonts at your disposal. With this article, we’re tying to help you out with that and give you some typographicenjoyment. Here are 20 free fonts that are super clean and would be great to use in your next minimal style design.

Read the full article over at Web Design Ledger

Emerging Techniques Every Web Developer Should Know

The Web is evolving fast: new features, formats, user needs, continuously change the way we interact with websites. In this post I want to suggest you some interesting emerging techniques every web developer should know in order to build modern web applications.

Read the full article over at woorkup.