Source » Demo »

Let’s start with the markup.

To keep semantic code our menu is organized as a simple unordered list:

Our list items will only be displaying images (with CSS sprite method) but we do not want to... Read more→]]>

In this short tutorial we are going to build a nice and eye-catching animated navigation menu with the help of jQuery. We will need hoverIntent and BackgroundPosition jQuery plugins, as well as sprite image for our menu items.

Source » Demo »

Let’s start with the markup.

The Markup

To keep semantic code our menu is organized as a simple unordered list:

<ul>
  <li id="articles"><a href="#"><span>Articles</span></a></li>
  <li id="events"><a href="#"><span>Events</span></a></li>
  <li id="shop"><a href="#"><span>Shop</span></a></li>
  <li id="about"><a href="#"><span>About</span></a></li>
  <li id="contact"><a href="#"><span>Contact</span></a></li>
</ul>

Our list items will only be displaying images (with CSS sprite method) but we do not want to leave them blank because of search engines. So we add a span inside the anchor tag of each list item. We will hide those spans form the user’s view in our stylesheet. We also assign an id to each list item for later use in CSS and jQuery.

The CSS

We will use CSS sprite method for our menu items.

We load a single background image for all of our menu items and then give individual ones their own coordinates. The id that we assigned to each list item earlier allows us to target each item individually.

ul { list-style: none; margin: 0 auto; }
ul li a { display: block; height: 42px; background: url(../images/nav.png) 0 0 no-repeat; }
#articles a { background-position: 0 0; }
#events a { background-position: 0 -42px; }
#shop a { background-position:0 -84px; }
#about a { background-position:0 -126px; }
#contact a { background-position:0 -168px; }

Finally, let’s add some jQuery magic.

The jQuery

First, we include the latest version of jQuery library and necessary plugins in our html document:

<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="js/jquery.backgroundPosition.js"></script>

hoverIntent jQuery plugin attempts to determine the user’s intent. It was derived and works like jQuery’s built-in hover. However, instead of immediately calling the onMouseOver function, it waits until the user’s mouse slows down enough before making the call. Thus it delays or prevents the accidental firing of animations.

The other jQuery plugin, BackgroundPosition, adds the ability to do background-position animations since animating multi-value properties like background-position is not supported in jQuery by default.

Next when the document is loaded we call hoverIntent method on our menu items. As with jQuery built-in hover, we need to define two functions. First will execute when the mouse pointer enters the element and the second when the mouse pointer leaves the element.

When the mouse pointer enters menu item we animate the horizontal position of its background image to the left. We repeat animation for several times to create a nice bouncing effect. When the mouse pointer leaves menu item we return its background image to the original position and again we repeat animation for several times to achieve a bouncing effect.

$(document).ready(function(){
  $('li').hoverIntent(
    function(){
      navitem = $(this);
      if (navitem.attr('id')==='articles'){ypos1=0;}
      else if (navitem.attr('id')==='events'){ypos1=-42;}
      else if (navitem.attr('id')==='shop'){ypos1=-84;}
      else if (navitem.attr('id')==='about'){ypos1=-126;}
      else {ypos1=-168;}
      navitem.children('a').stop().animate(
      {backgroundPosition:'-150px '+ypos1+'px'}, 220,
      function(){
        navitem.children('a').animate(
        {backgroundPosition:'-137px '+ypos1+'px'}, 64,
        function(){
          navitem.children('a').animate(
          {backgroundPosition:'-140px '+ypos1+'px'}, 32);
        });
      });
    },
    function(){
      navitem2 = $(this);
      if (navitem2.attr('id')==='articles'){ypos2=0;}
      else if (navitem2.attr('id')==='events'){ypos2=-42;}
      else if (navitem2.attr('id')==='shop'){ypos2=-84;}
      else if (navitem2.attr('id')==='about'){ypos2=-126;}
      else {ypos2=-168;}
      navitem2.children('a').stop().animate(
      {backgroundPosition:'6px '+ypos2+'px'}, 220,
      function(){
        navitem2.children('a').animate(
        {backgroundPosition:'-3px '+ypos2+'px'}, 64,
        function(){
          navitem2.children('a').animate(
          {backgroundPosition:'0 '+ypos2+'px'}, 32);
        });
      });
    }
  );
});

By this point our animated navigation menu is finished. Feel free to modify it according to your needs and use it to spice up your own websites. :)

Follow us on Twitter, or subscribe to MazeofMinds RSS Feed for more tutorials and posts.

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images (or other media)... Read more→]]> In this post you will find useful frameworks and plugins which will help you to build responsive websites faster.

jQuery Plugins

Blueberry

Blueberry is an experimental opensource jQuery image slider plugin which has been written specifically to work with fluid/responsive web layouts.

Response JS

Response JS is a lightweight jQuery plugin that gives web designers tools for building performance-optimized, mobile-first responsive websites. It provides semantic ways to dynamically swap code blocks based on breakpoints and serve images (or other media) progressively via HTML5 data attributes. Its object methods give developers hooks for triggering responsive actions and booleans for testing responsive properties.

Fittext.js

FitText makes font-sizes flexible. Use this plugin on your fluid or responsive layout to achieve scalable headlines that fill the width of a parent element.

FitVids.js

A lightweight, easy-to-use jQuery plugin for fluid width video embeds.

Templates & Frameworks

320 and Up

‘320 and Up’ starts with a tiny screen stylesheet that contains only reset, colour and typography styles. Media Queries then load assets and layout styles progressively and only as they’re needed. Think of this as responsible responsive design. ‘320 and Up’ is a device agnostic, one web boilerplate.

Amazium

Responsive framework based on 960 grid system.

Foundation

An easy to use, powerful, and flexible framework for building prototypes and production code on any kind of device.

Inuit.css

Inuit.css framework is built to work on smaller screens (such as tablets) and tiny screens (such as phones) straight out of the box with minimal effort.

The Constellation WordPress Theme

The Constellation theme is the perfect starting point for any WordPress project. It gives you the flexibility to provide bespoke styles for different devices, totally up-to-date HTML5 code which is fantastic for SEO, a flexible grid system on top of all the other goodness bundled in to the HTML5 boiler plate.

Reverie

Reverie Framework is an extremely versatile HTML5 WordPress framework based on ZURB’s Foundation, a powerful tool for building prototypes on any kind of devices.

Skeleton

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone.

Gridless

Gridless is an optionated HTML5 and CSS3 boilerplate for making mobile first responsive, cross-browser websites with beautiful typography.

Simple Grid

SG is prepared for 4 distinct ranges of screen size: screens 720px, screens 720px, screens than 985px, and screens than 1235px. This means that people visiting your site will receive a layout that’s tuned to the size of their browser window.

The 1140 grid

The 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser.
Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.

The Goldilocks Approach

CSS and HTML boilerplate Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent.

Gridpak – The Responsive Grid Generator

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.

BluCSS

BluCSS is a CSS framework designed with ease of use and simplicity in mind. It is specifically made so that when you’re working on your next project, you don’t have to worry about the essentials. With BluCSS, you can be up and running in less than a minute. One feature that stands out in this framework is responsive image functionality. Just apply any “blu_” class to an image, same as any other element, and the image will automatically be resized according to the browser width.

“The grand essentials of happiness are: something to do, something to love, and something to hope for.”

See you in 2012!

I just recently watched Sujan Patel’s SEO for WordPress in 2011 from this year’s WordCamp San Francisco and want to share it with you. Sujan Patel is the founder and president of the SEO consulting agency Single Grain and in this video he speaks on the latest traffic driving tips for your WordPress website including the best plugins for SEO and Social Media.

You can also check out Sujan Patel’s slides SEO for WordPress.

If you like this post and would like to be kept up to date with fresh design news and resources, you can follow us on Twitter, Tumblr or by subscribing to our RSS feed.

Important! If you have... Read more→]]>

This is the second post from the series of posts about useful tools and services for web designers and developers. I planned it to be a monthly series but from now I will share a collection of tools and links once a week.

If you like this post and would like to be kept up to date with fresh design news and resources, you can follow us on Twitter, Tumblr or by subscribing to our RSS feed.

Important! If you have an app or other useful resource you’d like to share, tweet it to @mazeofminds or drop us an e-mail.

Bufferapp

A lovely tool for twitter, just recently discovered. Buffer app helps you build a tweet queue and spreads out your updates over time.

Tiny Fluid Grid

This tool helps you build fluid grid based web layouts. Tiny Fluid Grid ships with an index.html with demo code, and the grid.css containing the CSS for the grid you created.

The Semantic Grid System

With The Semantic Grid System you can set column and gutter widths, choose the number of columns, and switch between pixels and percentages. And all without any none semantic “.grid_x” classes in your markup.

Golden Grid System

Golden Grid is a folding grid system for responsive web design. Created by Joni Korpi.

The Heads-Up Grid

The Heads-Up Grid is an overlay grid for in-browser website development, built with HTML, CSS, JavaScript.

Photoswipe

PhotoSwipe is a free HTML/CSS/JavaScript based image gallery specifically targeting mobile devices. This gallery provides your visitors with a familiar and intuitive interface allowing them to interact with images on your mobile website.

jQuery Mobile Pagination Plugin

The Pagination plugin creates touch-drag navigation between separate HTML pages. Simply add this plugin to your page and link together documents via ordinary HTML anchors. The linked pages will pre-fetch, and in browsers that support touch events, you’ll be able to drag between the linked pages, while desktop users can navigate with mouse or keyboard.

TransformJS 1.0 Beta

TransformJS is a free JavaScript library to help you use 2D and 3D transforms as regular CSS properties.
TransformJS is supported in all major browsers: Safari, Chrome, Firefox, Opera, and IE. However, since all browsers don’t share the same featureset, TransformJS will make its best attempt at using the best feature available.

Batman.js

With Batman.js you can build web apps beautifully and quickly. It is a full-stack microframework extracted from real use and designed to maximize developer and designer happiness. Worth to check it out.

Evolution of The Web

Lovely interactive infographic about evolution of web created by Vizzuality, Hyperakt and Google Chrome team.

Mobilizer

This is a simple desktop app for previewing mobile websites, design mockups, and local HTML on Mac or PC.

Patternizer

As the name suggests it’s a tool for making patterns. With Patternizer, it’s easy to make cool patterns in just a few minutes. It takes all the work out of creating complicated patterns, letting you focus on creativity.

ProCSSor

ProCSSor is a powerful and free CSS prettifier that lets you format CSS in the exact way you want. It empowers you to turn your CSS into something that is visually more compelling, and with a minimum of effort at that.

Android 2.3.4 GUI PSD (High-Density)

Fully vectorized Android GUI PSD. The template is based on the most popular screen size (normal) and pixel-density (high) using the default Android skin as the baseline.

So today I will give you an opportunity to have a look at the ”live” typography examples from the beautiful Old Town of Vilnius. If you love typography and have never been in... Read more→]]>

The idea to write this post came  from many “live” typography examples in various blogs from all around of world.  I’m quite a big fan of “live” typography posts. It’s always interesting to see what kind of typography you can find in others cities. Letters tell the story about the city history, culture and age.

So today I will give you an opportunity to have a look at the ”live” typography examples from the beautiful Old Town of Vilnius. If you love typography and have never been in Vilnius I think you’ll find this post interesting.

If you have a post like this and want to share it, send me a link to your blog. I would love to see it.

If you want to know more about Vilnius you can read it here and here.

To filter portfolio items we will use Quicksand plugin. Additionally, we will... Read more→]]>

In this tutorial I will show you how to create a filterable portfolio using jQuery. The idea is to display all of your work in a single page that would have a filtering option allowing visitors to filter portfolio items by category. Limiting your portfolio to a single page helps to display all the portfolio items quickly and effectively and the filter makes it easy to navigate.

To filter portfolio items we will use Quicksand plugin. Additionally, we will need Easing Plugin to give advanced easing options and PrettyPhoto plugin to view full-size protfolio items.

The beautiful photos used in the demo are from the portfolio of fashion and beauty photographer Yulia Gorbachenko.

Source » Demo »

The Markup

Say we have a number of photos in our portfolio and they can be classified in these categories: Beauty, Hannah, On Fire, Traction, Wavelength or Hair. Let’s create a category filter to navigate through our photos. A simple unordered list will perfectly work:

<ul class="filter">
  <li class="current all"><a href="#">All</a></li>
  <li class="beauty"><a href="#">Beauty</a></li>
  <li class="hannah"><a href="#">Hannah</a></li>
  <li class="onfire"><a href="#">On Fire</a></li>
  <li class="traction"><a href="#">Traction</a></li>
  <li class="wavelength"><a href="#">Wavelength</a></li>
  <li class="hair"><a href="#">Hair</a></li>
</ul>

We assign classes equal to the category name to each list item for later use in jQuery. Additionally, we add one more list item “All” to view all portfolio items. We also assign the class "current" to this item because we want to show all portfolio items in the default view.

Now when we have our filter let’s move on and create one more list to hold our portfolio items:

<ul class="portfolio">
  <li data-id="id-1" data-type="hannah">
    <a href="images/hannah_yg.jpg" rel="prettyPhoto[portfolio]">
      <img src="images/hannah_yg_thumb.jpg" />
    </a>
  </li>
  <li data-id="id-2" data-type="hair">
    <a href="images/bianca_yg.jpg" rel="prettyPhoto[portfolio]">
      <img src="images/bianca_yg_thumb.jpg" />
    </a>
  </li>
  <li data-id="id-3" data-type="traction">
    <a href="images/heather_yg.jpg" rel="prettyPhoto[portfolio]">
      <img src="images/heather_yg_thumb.jpg" />
    </a>
  </li>
  ...
</ul>

Each list item contains the thumbnail image with an anchor tag around it. The anchor’s href attribute defines the URL of the full-size image and the rel attribute is necessary for the PrettyPhoto plugin that we will use later.

You may have also noticed that every list item has data-id and data-type attributes. Both are necessary for the Quicksand plugin. data-id is a unique identifier and data-type defines the category to which the portfolio item is assigned. Note that data-* is a perfectly valid HTML5 attribute.

The CSS

This isn’t a tutorial on CSS, so I won’t go into great detail about how to style the gallery. You can see my stylesheet in the source files attached to this post. I would just like to note that I have used several selectors and properties that are not supported in the earlier versions of IE.

The jQuery

First, we include the latest version of jQuery library and necessary plugins in the head of our document. For the prettyPhoto plugin we also need to include prettyPhoto stylesheet that comes with the plugin:

<link rel="stylesheet" type="text/css" href="css/prettyPhoto.css"/>
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery.quicksand.js"></script>
<script type="text/javascript" src="js/jquery.prettyPhoto.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

Next, when the document is loaded we initialize the prettyPhoto plugin. The prettyPhoto plugin accepts a number of parameters so you can easily customize it:

$(document).ready(function(){
  $(".portfolio a[rel^='prettyPhoto']").prettyPhoto({
    theme:'light_square',
    autoplay_slideshow: false,
    overlay_gallery: false
  });

Then we add some code to handle the Quicksand plugin:

var $portfolioClone = $(".portfolio").clone();
$(".filter a").click(function(e){
  $(".filter li").removeClass("current");
  var $filterClass = $(this).parent().attr("class");
  if ($filterClass == "all") {
    var $filteredPortfolio = $portfolioClone.find("li");
  } else {
    var $filteredPortfolio = $portfolioClone.find("li[data-type~="+$filterClass+"]");
  }

Quicksand works by comparing two collections of items and replacing them with a nice shuffling animation. By appending .clone() to our portfolio list and assigning it to $portfolioClone, we get a copy of the original list items that we will use later.
Once the link in the category filter is clicked, we want to remove the class current from the list item that has it and to determine which link has been clicked by taking the class value and assigning it to the $filterClass. In the case if the “All” link has been clicked, we want to show all of the portfolio items. Otherwise, we want to show only those list items that have data-type attribute with a value containing $filterClass.

    $(".portfolio").quicksand( $filteredPortfolio, {
      duration: 800,
      easing: 'easeInOutQuad'
    }, function(){
      $(".portfolio a[rel^='prettyPhoto']").prettyPhoto({
        theme:'light_square',
        autoplay_slideshow: false,
        overlay_gallery: false
      });
    });
    $(this).parent().addClass("current");
    e.preventDefault();
  })
});

Finally, we call quicksand. $filteredPortfolio which was assigned in the if statement contains filtered portfolio items that are to be displayed instead of the original portfolio items. We can also specify how long the animation will take, the easing type for the animation (don’t forget to include jQuery Easing Plugin for this) and other optional parameters. As the last argument we include a callback function to apply prettyPhoto on newly cloned portfolio items as well.

In the last lines of code we add the class current to the parent of the clicked link and call preventDefault() to prevent the browser jump to the link anchor.

With that our filterable portfolio is finished. I hope you enjoyed the tutorial and find it useful! I tried to explain everything as best as I can and if you have any questions, please feel free to ask.

Follow us on Twitter, or subscribe to RSS Feed for more tutorials and posts.

1. Novocento – Download

Novocento is an uppercase-only font family inspired by european typographic tendencies of the first half of 20th century. You can use this font face for headlines, visual identities or short sentences. Created by graphic designer Jan Tonellato.

2. Quattrocento – Download

Quattrocento Roman is a Classic typeface with wide... Read more→]]>

For this week I have only few fonts to share with you. Nevertheless, these are still good and usable typefaces. I’m sure you’d agree that it’s quality not quantity that matters.

1. Novocento – Download

Novocento is an uppercase-only font family inspired by european typographic tendencies of the first half of 20th century. You can use this font face for headlines, visual identities or short sentences. Created by graphic designer Jan Tonellato.

2. Quattrocento – Download

Quattrocento Roman is a Classic typeface with wide and open letterforms, and great x-height. Also it has good legibility for body text at small sizes and tiny details that only shows up at bigger sizes make it also great for display use. It’s available for web use in Google font library.
Quattrocento is created by amazing self-taught type designer Pablo Impallari who has also designed the famous Lobster font. Check his website for more high quality fonts.

3. UNIK2 – Download

Unik2 is the updated version of Unik made in 2009 by DavidisCreative from Fonts of Chaos.  If you are unfamiliar with Fonts of Chaos, it is an open type foundry founded in 2011. They  produce alternative free typefaces for experimental graphic artwork. Although Font of Chaos still are young and fresh they have already created seven interesting and unique typefaces.  So  if you are looking for more  fonts like Unik2 for your artwork you should definitely check their website.

Download File »