[ Laszlo Porkolab ]

There are many interesting “must-have” web design tool available on the internet, I tried to collect my favorite typography tools:

1. Type Scale is a great visual font size calculator, helps to set your typography correctly.

2. Colorable helps to set the correct font and background color/contrast ratio of your site. You can generate correct font and background colors with this visual editor.

3. Golden Ratio Typography Calculator helps to “discover the perfect typography for your website by entering your current font size and content width.”

4. PX to EM calculator is great for px to em, em to px conversions, and you can learn more about pix, em, % and pt.

FitVids.js is a great jQuery plugin for fluid width video embeds. It also available in wordpress plugin, but I wanted to add manually into my theme. This tutorial is about how to add FitVids.js manually into your wordpress theme.

• download Fitvids.js from here
• upload “FitVids.js-master” folder into your theme’s js directory
• create a new file with name “FitVids.js” and copy this code:

(function($) {
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $(".post").fitVids();
  });
  
  })(jQuery);

• you can replace “.post” with container name of your posts
• upload “FitVids.js” into your theme’s js folder
• copy and paste this code into your theme’s functions.php file:

wp_enqueue_script('fitvids', get_template_directory_uri() . '/js/FitVids.js-master/jquery.fitvids.js', array('jquery'), '', TRUE); 

wp_enqueue_script('fitvids-xtra', get_template_directory_uri() . '/js/FitVids.js', array(), '', TRUE);

Now you have responsive youtube and vimeo embeds. Here is a sample youtube video: