Vrej Sanati Blog


Functions in SASS

Another cool feature in SASS is that we can create functions for our CSS. In the following code, I am creating a function to be able to dynamically create a linear gradient with custom opacity. Please check it out.

@function linear-gradient($pos, $gradients...) {
  $type: linear;
  $pos-type: type-of(nth($pos, 1));

  // if $pos doesn't exist, fix $gradient
  @if ($pos-type == color) or (nth($pos, 1) == "transparent")  {
    $gradients: zip($pos $gradients);
    $pos: false;
  }

  $type-gradient: $type, $pos, $gradients;
  @return $type-gradient;
}

This is how you call the function

@include background(linear-gradient(top, orange, red));

Working with Variables in SASS

Working with SASS will give you many benefits that will make your life easyer. Using Variables is one of them. You can define all the values as variables and use them all over your site knowing that later, changing the value will be a breaze. Please take a look at my code example I did with SASS variables.
/* Dimensions */
$large: 22px;
$medium: 14px;
$small: 12px;
$micro: 10px;



//global button variables
$button-radius: 4px;
$button-height:36px;

/* Form Dimensions */
$input-height: 40px;
$field-radius: 4px;


/* Site Dimensions */
$site-wide: 1205px;
$site-width: 920px;
$footer-height: 395px;

/* Colors */
$black: #242524;
//this is been used as an accent color.
// The blue is just a name I am turning it to grey now
$blue: #898989;
$white: #fff;
$off-white: #f4f4f4;
$dark-grey: #55565a;
$grey: #999;
$dark: #55565a;
$light-grey: #e1e1e1;
$soft-grey: rgba(241,241,241,1);
$light-blue: #198ccc;
$light-brown: #aca095;
// Mainly for button use

//google red for cart & checkout
$google-red: #e84e40;
$google-red-hover: #FF5445;


//google green
$google-green: #8bc34a;

//PayPal grey
$paypal-grey: #e4e4e4;
$paypal-grey-hover: #d5d5d5;


//age-Proof-suncare
$red: #6c001c;
$red-hover: #450012;
//redness-therapy
$teal: #00ad9c;
$teal-hover: #008679;
//resurgence
$light-green: #8ca509;
$light-green-hover: #6a7e04;
//acne
$acne-blue: #0391ce;
$acne-blue-hover: #006591;
// e-shield
$orange: #ff7f00;
$orange-hover: #d76c02;
//bodycare
$silver: #695744;
$silver-hover: #44321f;
//murad-man
$green: #0d523b;
$green-hover: #062b1f;
//pore reform
$pink: #b5005c;
$pink-hover: #870045;
//age reform
$purple: #891f62;
$purple-hover: #6f154e;
//youth-builder
$yellow: #dcc325;
$yellow-hover: #bfa732;
//harrys
$blue-grey: #607D8B;
$blue-grey-hover: #3C5866;

//acne = acne blue
//age-reform = purple
//pore-reform = pink
//murad-man = green
//bodycare = silver
//e-shield = orange
//resurgence = light green
//redness-therapy = teal
//age-Proof-suncare = red
//youth-builder = yellow

/* Z-Index */
$level1: 1;
$level2: 2;
$level3: 3;
$level4: 4;
$level5: 5;

/* Speeds */
$quick: .1s;
$fast: .25s;
$slow: .45s;
$half-sec: .5s;
$mini-sec: .20s;


/* Fonts */
$bebas-light: "bebas neue light";
$bebas-book: "bebas neue book";
$bebas-bold: "bebas neue bold";


/*Item*/
$item-height: 423px;


/* Community, Bio and Insider vars */
/*font-sizes*/
$big-font: 30px;
$large-font:20px;
$medium-font: 18px;
$regular-font:16px;
$small-font: 14px;
$extra-small-font: 12px;

/*heights*/
$little-hero-height : 420px;
$medium-hero-height: 650px;
$hero-height: 655px;

Practice javaScript Objects in an array

Here I wrote an object constructor called person, and then I created an empty array, then I am adding each family members to it one by one and the looping true them to print their name.  I hope this comes handy to you.

 


// My Person constructor
function Person(name,age){
this.name = name;
this.age = age;
};

// Now I can make an array of people
var family = new Array();
family[0] = new Person("alice", 40);
family[1] = new Person("bob", 42);
family[2] = new Person("michelle", 8);
family[3] = new Person("timmy", 6);

// loop through my new array

for(i=0; i<family.length; i++){
console.log(family[i].name);
}

How to target IE 8 and bellow inside your css

body {
color: red; /* all browsers, of course */
color : green9; /* IE8 and below */
*color : yellow; /* IE7 and below */
_color : orange; /* IE6 */
}

Setting Up VirtualHosts in XAMPP on Mac

Setup your hosts file first

If you don’t know how to edit your hosts file in mac, please visit my previous post here

Enable VirtualHosts

The first thing you’ll need to do is open the file/Applications/XAMPP/xamppfiles/etc/httpd.conf in your favourite text editor. Look for the following lines:

# Virtual hosts
#Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Uncomment the second line by removing the hash (#), so that Apache loads your custom VirtualHosts configuration file:

# Virtual hosts
Include /Applications/XAMPP/etc/extra/httpd-vhosts.conf

Create your VirtualHosts

Open the file /Applications/XAMPP/xamppfiles/etc/extra/httpd-vhosts.conf. Towards the bottom of the file you will see some example VirtualHosts, which you should comment out or delete.

At the bottom of the file, add ‘localhost’ as the default named VirtualHost:

<VirtualHost *:80>
   DocumentRoot /Users/???/Documents/workspace/trunk/htdocs
   ServerName test.myserver.local
  <Directory "/Users/???/Documents/workspace/trunk/htdocs">
     AllowOverride All
  </Directory>
</VirtualHost>

How to Modify your hosts file on MAC

Editing the hosts file

Editing the hosts file in Mac OS X – Leopard, is a pretty easy task, especially if you are familiar with the terminal.

Step 1 – Open the Terminal.app

Either by start typing Terminal on the Spotlight, or by going into Applications -> Utilities -> Terminal.

Step 2 – Open the hosts file

Open the hosts by typing on the Terminal that you have just opened:

$ sudo nano /private/etc/hosts

Type your user password when prompted.

Step 3 – Edit the hosts file

The hosts file contains some comments (lines starting with the # symbol), as well as some default hostname mappings (e.g. 127.0.0.1 – localhost).
Simply append your new mappings underneath the default ones. Or edit one of the default values if you know what you are doing!
You can navigate the file using the arrow keys.

Step 4 – Save the hosts file

When done editing the hosts file, press control-o to save the file.
Press enter on the filename prompt, and control-x to exit the editor.

Step 5 – Flush the DNS cache

On Leopard you can issue a simple Terminal command to flush the DNS cache, and have your host file changes to take immediate effect:

$ dscacheutil -flushcache

You can now test your new mapping on the browser

There was an error executing the following command with VBoxManage: [“hostonlyif”, “create”]

I had this error where I tried to turn my vagrant up.
I fixed this issue by restarting my VirtualBox true the terminal.

Here is how to restart your VirtualBox, using command line:

sudo /Library/StartupItems/VirtualBox/VirtualBox restart

How to make your Vimeo or YouTube video responsive

First of all wrap the video embed code with a’div’and specify a 50% to 60% padding bottom. Then, name and specify the child elements i.e ‘iframe’, ‘object’, ‘embed’ as having 100% width, 100% height, with absolute position. This forces all the embed elements to expand to full-width automatically!

Here is the html mark up

<div class="video-wrapper">
   <iframe width="500" height="281" 
src="http://www.youtube.com/watch?v=1CKgKKxyhBI" frameborder="0" allowfullscreen="">
   </iframe>
</div>

Using CSS you can set the video to be responsive.

.video-wrapper { 
    position: relative; 
    padding-bottom: 56.25%; 
    padding-top: 30px; 
    height: 0; overflow: hidden; 
} 
.video-container iframe, 
.video-container object, 
.video-container embed { 
    position: absolute; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
}

Enjoy!

Display custom pin it button inside the WordPress Loop

Here is how I solved my problem.

Just drop this inside the WordPress loop and it should do the trick.

<a href="//pinterest.com/pin/create/button/?url=<?php the_permalink(); ?>&media=< ?php $thumb = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail' ); echo $thumb['0']; ?>" data-pin-do="buttonPin" data-pin-config="none"><img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" /></a>

Tags archive page won’t show up for custom post types and takes you to a blank or 404 page

This is another bug within WordPress where it only looks for tags on posts and not the custom post types. Here is how to solve this problem.

If you are seeing the 404 page, chances are that you don’t have the tag.php file so go ahead and create tag.php if you don’t have one already.

Copy and paste the following code in your functions.php  file.

add_filter('pre_get_posts', 'query_post_type');
function query_post_type($query) {
if ( is_category() || is_tag() && empty( 
$query->query_vars['suppress_filters'] ) ) {
$post_type = get_query_var('post_type');
if($post_type)
$post_type = $post_type;
else
$post_type = array('REPLACE WITH YOUR OWN ARRAY');
$query->set('post_type',$post_type);
return $query;
}
}

Make sure to add your own array in the code. Example: ‘books, magazines, apps’