Pure Awesomeness

Responsive Images

March 29, 2012 by Greg | 0 comments

Most responsive designs use Max-width to create flexible images. To make the images fluid, just add max-width:100% and height:auto.

The max-width: 100% treatment ensures that your images never exceeds the width of its parent element. If the width of its container changes, the image resizes proportionally in nearly all modern browsers.

Filament Group introduced a practical technique that delivers optimized, contextual image sizes for responsive layouts that utilize dramatically different image sizes at different resolutions.

This technique uses .htaccess files and a JS file to serve up different sized images based on the screen width. This approach will allow developers to start with mobile-optimized images in their HTML and specify a larger size to be used for users with larger screen resolutions — without requesting both image sizes. You can view a demonstration of the technique here.

Matt Wilcox took a similar approach to the mobile image problem and created a solution called Adaptive Images. The Adaptive Images script works much like the Filament Group’s Responsive Images code, butAdaptive-Images doesn’t require you to do anything special or even create the different versions of the images yourself. Just drop in the Adaptive Images code and you’re done.

Craig Russell developed a technique that uses a server side script (in PHP) to serve up images of several different resolutions. It requires a small amount of JavaScript and can scale quite easily. The PHP script has a nested array that lists images files and their relative percentage scales. For each image file the nested array describes the file’s scale.

Get Pinterest on your Website

March 27, 2012 by Greg | 0 comments


Pinterest has been creating quite a stir in the social networking world over the past months. One of the most beautiful things about the web is that it’s full of overwhelming resources, tutorials and plugins developed by dedicated developers in order to make our lives easier. For people who want to ride the waves of the popularity and create their own Pinterest clone websites. Today we are going to get your own Pinterest site in 4 simple steps.

  1. Create the HTML structure of your boxes.
  2. Setting the size of your images
  3. Adding the like feature to your posts
  4. Integrating WordPress theme with your HTML structure
  5. Stacking Your posts using jQuery Masonry
  6. Overcoming the pagination issues with “infinite scrolling”

1. Create The HTML Structure Of Your Boxes.

The main structure of Pinterest content box is close to this:

<div> <div> <div> <a href=""> <strong>Comment</strong> </a> </div> <div> <a href=""> <strong>Repin</strong> </a> </div> </div>   <a href=""> <img alt="" src=""> </a>  <p>Cairo</p> <p><span>12 repins&nbsp;&nbsp;</span></p>  <div> <a title="Jessica Wozniak" href=""> <img alt="Picture of Jessica Wozniak" src=""> </a>  <a href="">Jessica Wozniak</a>  onto <a href="">Category Name</a> </p> </div> </div>

2. Setting The Size Of Your Images

First we will use WordPress as the CMS and create a photo blog. There are many free high quality WordPress themes out there, below you can find some of the best.

Now we will Add a new post and click on the “Set featured Image” found at the bottom of the right column to add your thumbnail image.

In the index.php file found in your current theme folder, add the following code that will display the thumbnail image we just added into our post.

<?php echo get_the_post_thumbnail(get_the_ID(),'meduim'); ?>

Notice 'medium' is the size of the thumbnail. You can use 'large''medium' or 'Thumbnail'.

These sizes determine the maximum dimensions in pixels to use when inserting an image into the body of a post. You can setup the size of the ‘Large’, ‘Medium’ and ‘Thumbnail’ in your WordPress Admin area > Setting > Media > Image sizes

Now you can link the image of the post to it’s original source. To do this, we will add a new 'Custom Field'to our post and we will give it this name 'Source-URL' and in the value of this custom field you can insert the URL of the source of your image.

Back to index.php template file, we need to add the link to the post thumbnail. Now we will use the code below to add the custom field name we added into our post.

<a href="<?php echo get_post_meta($post->ID, 'Source-URL', true); ?>"></a>

3. Adding The Like Feature To Your Posts And Get The Total Number Of Likes

One of the most appealing features of Pinterest is the ability to allow users to like the posts and show the total number of likes per post. We can mimic this using the “I Like This” WordPress plugin. To display the number of likes for every post, add this to your index.php file after activating your plugin:

<?php if(function_exists(getILikeThis)) getILikeThis('get'); ?>

4. Integrating WordPress Theme With Your HTML Structure

We need to display the latest x number of posts on your home page. To do this we will create our own loop using WP_Query to fetch the posts and integrate it with our HTML markup.

<?php $latestPosts = new WP_Query(); $latestPosts->query('showposts=20'); ?> <?php while ($latestPosts->have_posts()) : $latestPosts->the_post(); ?> <div> <div> <div> <strong><?php comments_number('No Comments', '1 Comment', '% Comments' ); ?></strong> </div> <div> <strong><?php if(function_exists(getILikeThis)) getILikeThis('get'); ?></strong> </div> </div>   <a href="<?php echo get_post_meta($post->ID, 'Source-URL', true); ?>"> <img alt="<?php the_title(); ?>" src="<?php echo get_the_post_thumbnail(get_the_ID(),'meduim'); ?>"> </a>  <p><?php the_title(); ?></p> <p><span>12 repins&nbsp;&nbsp;</span></p>  <div> <? echo get_avatar( get_the_author_meta('user_email'), $size = '50'); ?> <?php the_author_link(); ?> onto <?php the_category(', ') ?> </div> </div> <?php endwhile; ?>

5. Stacking Your Posts Using JQuery Masonry

Notice how Pinterest have their posts in a neatly stacked layout, we want to replicate this effect. To acheive this effect, we will use jQuery Masonry plugin to minimize the vertical gaps between the boxes of varying height. Integrating Masonry in WordPress is simple, first add the following to the theme’s functions.phpto enqueue jQuery:

if (!is_admin()) { wp_deregister_script('jquery'); wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false); wp_enqueue_script('jquery'); }

Now add the following to your header.php file:

<?php wp_head(); ?> <script language="javascript" type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.masonry.min.js"></script>

Notice how we placed the Masonry script after wp_head.

Now that everything is in place, the last thing to do is to add the Masonry function, preferably right after the script call in header.php:

$('#container').masonry({ itemSelector: '.pin-box' });

#container is the name of the wrapper around the posts .pin-box. So now we have all the posts in a neatly stacked layout, same as Pinterest.

6. Overcoming The Pagination Issues With “Infinite Scrolling”

We need to activate the infinite scrolling effect on the blog. To do this we will use Paul Irish jQuery plugin:Infinite Scroll. You can download the WordPress version from here.

Masonry integrates well with auto-paging scripts like Infinite Scroll. We just need to use the appended method to force Masonry to position only the newly appended elements, and skip over all the previous elements that are already in their proper position, thus saving precious milliseconds of page load time.

For more information about integrating Masonry with Infinite Scroll, check out http://masonry.desandro.com/demos/infinite-scroll.html and http://masonry.desandro.com/docs/methods.html#appended

Responsive Design Boilerplates

March 25, 2012 by Greg | 0 comments

Ethan Marcotte coined the term “Responsive Design” to describe the process of using liquid layouts and media queries to scale websites so that they fit any screen size.

Fluid grids is one of the three technical ingredients (Fluid grids, flexible images, and media queries) to deliver elegant visual experiences. A fluid grid layout can be created through the smart use of DIV layers, percentages and math.

Boilerplates combines these three ingredients (flexible grid, Responsive images and Media queries) into one neat package: a flexible grid enhanced with scripts. There are several interesting Boilerplates out there, some are right for some situations, and others are right for others.

  1. Skeleton is a small collection of CSS & JS files that can help you develop sites that look beautiful at any screen size. Skeleton uses 960 grid as its base.
  2. 320 and up prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point.
  3. Gridless is a solid HTML5 and CSS3 framework for making responsive, cross-browser websites with nice typography. Gridless takes a different approach to responsiveness: it uses media queries to serve a progressively-enhanced responsive layout, starting from mobile and building up to desktop sizes.
  4. The Goldilocks Approach offers a slightly different practice from the most other responsive design frameworks which is: “targeting every resolution/device rather than only the popular ones”. You can view a working demo here.

15 Beautiful and Useful FREE PSD Files

March 23, 2012 by Greg | 0 comments

Dribbble is a great community, and is a place where you can find much more than inspiration and awesome professionals. It’s a place where you can find really talented people sharing their work with you for free.


Sliding Tags

PSD Files

Sticky Butterscotch UI Kit

PSD Files

28 Layer Syles

PSD Files

Mimi Glyphs

PSD Files

Ui Elements

PSD Files

Light UI Kit

PSD Files

Share Buttons

PSD Files

Mini glyphs (12 px)

PSD Files

Progress Bar

PSD Files

Bella UI

PSD Files

12 px glyphs

PSD Files

Derailed Ui Set

PSD Files

Mini Clouds Set

PSD Files

Share buttons

PSD Files

Vector UI Kit

PSD Files


Via WebDesignLedger

Gridpak – The Responsive grid generator

March 19, 2012 by Greg | 0 comments

I haven’t used this yet, but it looks to be fanfreakingtastic aka Pure Awesomeness.

What is it?

Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.

Why should I use it?

We think it’s the best and most flexible way to devise a responsive layout. You control every aspect of the grid from column padding to where ‘break points’ occur. Our simple interface makes it quick and easy to visualise your responsive grid system and output it in the formats you need to make a lightning quick start to any project.


The CSS that Gridpak generates is compatible with IE 8+, however it makes use of some more experimental CSS properties such as the media querybox-sizing and background-clipproperties so we suggest using it in conjunction with a library such as Modernizr to ensure backwards compatibility.


Stop reading and just go check it out!

Silent Film Director Contest

March 19, 2012 by Greg | 0 comments

Happy to announce – the international contest of silent films, created on iPhone 

Why is it important? ”The Artist” scooped 5 Oscars, including the best picture. “Napoleon” is said to be the main art event this spring. Now it is your turn to create a silent film masterpiece for the world-wide audience. 


How to enter? The rules are simple:

 - Grab the iPhone (iPad, or iPod touch)
 - Think of a great plot and actors 
 - Shoot a video and edit it with Silent Film Director for iPhone
 - Submit the video to the contest right from inside the app
What will I get? Best movies are awarded every week. Prizes include the new iPad, tickets to “Napoleon” show in San Francisco, iPhone styluses, iPhone milos and more great stuff. We have the best Silent Era experts among the judges, so make sure your movie is a pure masterpiece. 
If I am not in, but I know people who will love the idea?
Check the official site for details and help us to spread the word about the contest. We need your support!

Goodies for you

March 13, 2012 by Greg | 0 comments

Creepy goodies guy

I found some great gems that I wanted to share with you! Roughly two weeks ago I had shared some great CSS tools that I think everyone should have in their tool belt. Here are some more tools to add:

Dirty Markup – A simple web app for making your HTML, CSS, and JavaScript code less messy. Just select the type of code, paste it into the form, and select options you want. There’s also support for HTML5. It’s now available with no restrictions.

Fontomas – It makes it easy to create your own icon font for web use. Just choose the icons you want, rearrange them, and then save the font for use. You can even load a Cufon or SVG font from your own files. Developed by Roman Shmelev and Vitaly Puzrin.

HTML5 Please API – Alerts your visitors to the fact that their browser doesn’t support certain features, and gives them user-friendly language about what they can do. In other words, rather than a message that says something like “Get a WebRTC capable browser”, the HTML5 Please API will tell your visitors they need a specific browser (like Firefox or Chrome).


That is all – carry on.

A simple change to win more proposals

March 11, 2012 by Greg | 0 comments

People typically buy on emotion, they usually do not buy based on research (facts/figures). We need something to look at. We seek out demos to see software being used, and we demand to see a portfolio as proof of competency.

So while your proposal must let clients know you thoroughly understand their problem and can creatively solve it, you need to engage them by articulating your plan. You want to drive home your point while being tactful about substituting rational words with emotional ones.


That’s great and all, but let’s solidify this by coming up with several examples to see what this looks like.

A few rational words:

  • combat
  • sufficient
  • notion
  • construct
  • allow
  • purchase
  • excellent

A few emotional words:

  • fight
  • idea
  • powerful
  • unique
  • successful
  • amazing
  • intense

This is a very simple strategy that’ll stimulate your proposals. It’s subtle and may not seem like it’ll do much but what you’re doing here is invoking emotion through tactical placement of powerful words.I highly recommend that you use this on your sales website and proposals.

Prefixr Autocomplete

March 9, 2012 by Greg | 0 comments

coda prefixr

Here are couple more tools to add to your CSS tool belt! NetTuts, or Jeffrey Way rather, created this Prefixr that is web based, and that is great. However, there is a more convenient (sorry Jeffrey) option for those of us that use Coda (I still do as I am slowly transitioning to Sublime). You can download the Coda plugin by clicking the link below. This will, without a doubt, increase productivity and decrease time spent writing out each browsers prefix. The keyboard shortcut is crtl+alt+cmd+U  by the way.