Today we are going to celebrate the unsung heroes that are… our fingers. I think it’s pretty safe to say that all articles of Hongkiat are written by using fingers. From clicks to swipes, from tapping to typing, we cannot really do without fingers in this digital age. Our daily tasks will be extremely hard to execute and complete without them, and it’s only fair to celebrate fingers in at least one post, like the one we have today!

(Image Source: Mupii)

With the help of creative re-imaginings and clever tricks of ‘finger artists’, we now can get a look into the lives of the finger people. Check out these 30 impressive photos of fingers depicting very human lives. Full list after the jump.

Abrigos. Note that your fingers are parts of your body too, and they could feel cold too! So get them some nice coats to keep them warm. (Image Source: Mupii)

Bad Boys. Instead of painting directly on fingers, Komusō drew the faces using a software, creating this unique and amusing piece! Check out the moustache on that one! (Image Source: Komusō)

Catching Some Rays. After months of hectic typing works, it’s always good to catch some rays on the beach. And here’s another finger enjoying the sunlight! (Image Source: (f)ritz)

Controversy. Oh my dear fingy, who attacked you? (Image Source: soheresanomelette)

Conversation of 3 Fingers. Well, they seem to be having a pretty fun conversation. Also the cool thing about this artwork is that the expressions look so natural! (Image Source: Frozen Moments)

Earth Day. Even fingers are celebrating Earth day! And it’s so true, we’re all stuck together on the same Earth, like these finger people are stuck together in the same palm. Better make the best of it. (Image Source: Cathy86)

Purple Day. I didn’t know about Purple Day until these nice finger supporters from Cathy86 introduced it to me. (Image Source: Cathy86)

Finger Punk. “For sure it’s the middle finger =D” (Image Source: Weyler Tomaszewski)

Friendship. Awe, aren’t they cutest finger friends? (Image Source: arjunv)

Good Day. Don’t always stay in your room, even your fingers know how to bask in the sunlight! (Image Source: Mupii)

Bad Day. Probably the face that my fingers will show me when I have played too much video games by knocking the keyboard aggressively. (Image Source: Andres Reynoso)

Happiness and Joy. They will always be together throughout their whole life, so why not live it in a happy way? (Image Source: Brian Kaleo Cox)

Hi. This one has a beard! (Image Source: Kotaro Kawano)

Hug. They share a heart and a hug. Thanks Imadlak for this lovely one! (Image Source: Imadlak)

I Guess That’s Love. It looks like these fingers have a far better love story than I do. No, I am not crying. (Image Source: Imadlak)

Lover. And here’s another lovely moment of the finger couple, captured by creator Mupii. (Image Source: Mupii)

Madam Fifi. Madam Fifi has a lot of detailed accessories, and she obviously had a very nice skincare treatment. (Image Source: (f)ritz)

Just Smile! “These are the kind of expressions I wear every day. And now, so do my fingers!” (Image Source: Daisy Oak)

Master Thief. Hey, what is that thing behind your back, Mr. Little Finger? Besides the fact that the expressions are accurately illustrated, you could see that Cathy86 has really invested lots of effort to make this work as realistic as possible. (Image Source: Cathy86)

The ‘Solo’. There’s always a naughty one in the band of the hand, can you guess which finger I’m talking about? (Image Source: Cathy86)

Mr. Finger’s Big Surprise. She is speechless with the flowers he has for her. It’s nice to know that some people put effort into making you happy. (Image Source: olivia house)

Ninja Finger. He’s coming and he’s invisible… he is Ninja Finger. Epic idea from epic Timegril4468! (Image Source: Timegirl4468)

Out For The Night! Relax with your fingers when all the work for today is done! 2 super-mini beers please! (Image Source: Poke The Rock)

Relaxing In A Tub. Nothing like a bubble bath to help a busy finger relax. No more facepalming on the keyboard for today. (Image Source: (f)ritz)

Share the Cake. To listen or not to listen? That’s the question for this finger. But first of all, how will it eat the cake? (Image Source: Poke The Rock)

Taking Photo. Enchanting and detailed face illustration is what makes this work really stands out from the rest. (Image Source: EllieHickles95)

TGIF. Probably the best-dressed finger of the list! Time to get down on Friday! (Image Source: (f)ritz)

The Lost Finger. Whoa… where am I? (Image Source: Misanthropus)

UGHHH. I admire Felipe Katsumata for coming up with this really creative idea and ughhh, it looks really painful! (Image Source: Felipe Katsumata)

Under My Umbrella. Another work that makes me feel like having a life partner, I envy these fingers and you know why! (Image Source: maskqueraide)

Reflection

Do not underestimate the efforts put into these finger! Though most of them look really simple, it actually takes lots of brain juice to make those boring fingers look really interesting and as lively as possible. Therefore, a heartfelt thanks to artists and photographers who went so far just to take an awesome photo that cheers up our routine-filled life! Be sure to share with us more touching or amusing finger people stories!

Related posts:

1. Draw Something: Doodles That Go to Extremes [PICS]
2. 35 Imaginative “Hands And Fingers” Photo Manipulations
3. 40 Cosplay Costumes That Will Blow You Away [PICS]
4. Retro Game Characters Invading Our Real Life [PICS]

Today we are going to continue our discussion on Sass and this will be the final part of our Sass series. This time, rather than a theoretical approach, this is going to be a bit more practical. We will create an online vCard using Sass along with Compass.

The idea is that the vCard should be easily adjustable, for color and size. In the process, we will be using a few Sass and Compass features like Variables, Mixins, Operations, Selectors Inheritance, Nested Rules and Compass Helpers. If you have missed our previous posts from this series, we suggest you have a look at them first before continuing.

Planning and Wireframing

When working with Sass and Compass, planning is essential. We typically need to have the big picture on how our final result (e.g. page or website) is going to be. It will be helpful to browse some sites like Behance or Dribbble for ideas. We can then draft the ideas onto paper or construct it in a wireframe, like this example below.

As you can see from the image above, our vCard contains contact info about ‘John’ – a picture profile, some information about John, such as his name, email address, phone number and a brief description about who he is or what he does. That will be our ‘bio’ section.

Below are his social identities in the form of social buttons. This will be our ‘social’ section.

Preparing Assets

Before we start coding, here are some essentials to get ready. I gather that by now you should have Sass and Compass installed in your machine.

(If you are not sure whether you have installed them, you can run this command sass -v or compass -v through Command Prompt or Terminal or, you can always use application like Scout App if you prefer working with a GUI.)

We will also need a few assets like font icons and social media icons, which you can get from places like ModernPictograms and Social Media Icons.

Lastly, since we are using Command Prompt/Terminal for this tutorial, we need to navigate to our directory and run Compass project with these two commands: compass init and compass watch.

HTML Markup

Below is the HTML markup of our vCard, it’s pretty straightforward. All sections are wrapped within logical HTML5 tag <section>.

  <div class="vcard">  <section class="bio cf">  	<img src="images/me.jpg" width="80" height="80">  	<div class="detail">  		<ul>  			<li class="name">Thoriq Firdaus</li>  			<li class="email">me@email.com</li>  			<li class="phone">(+62)1.2345.678.9</li>  			<li class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dolor neque, eleifend at pellentesque quis, convallis sit amet tellus. Etiam et auctor arcu.</li>  		</ul>  	</div>  </section>  <section class="social cf">  	<ul>  		<li class="social-facebook"><a href="#">Facebook</a></li>  		<li class="social-twitter"><a href="#"> Twitter</a></li>  		<li class="social-google"><a href="#">Google+</a></li>  		<li class="social-dribbble"><a href="#">Dribbble</a></li>  	</ul>  </section>  </div>  

As you can see above, the social identities included in the ‘social’ section is structured within list elements so we can easily display them side-by side. Each of them is given a class name following this convention social-facebook, social-twitter, social-google and so on.

Compass Configuration

We need to configure Compass a bit by uncommenting a few lines in config.rb file, as follows:

  # You can select your preferred output style here (can be overridden via the command line):  output_style = :expanded    # To enable relative paths to assets via compass helper functions. Uncomment:  relative_assets = true    # To disable debugging comments that display the original location of your selectors. Uncomment:  line_comments = false  

If you cannot find config.rb file, you probably haven’t run this command compass init in your project directory.

Importing Files

Since we will be using Compass, we need to import it using;

  @import "compass";  

And it is my personal preference to reset default styles from the browsers so that the output will be rendered more consistently. Compass, in this case, has a Reset module. This module is based on Eric Meyer’s CSS reset and can be imported using;

  @import "compass/reset";  

However, I prefer using Normalize that thankfully also comes in Sass/Scss format. Download the file here, save it in sass working directory and import it into our stylesheet.

  @import "normalize";  

Recommended Reading: Reviewing CSS Style Priority Level

Variables

We certainly will have a few constant values in the stylesheet, thus we will store them in variables and these two variables below will define the base color of our vCard.

  $base: #fff;  $dark: darken($base, 10%);  

While the $width variable below will be our page’s width; it will also be the basis for defining other element sizes.

  $width: 500px;  $space: $width / 25; // = 20px  

And the $space variable, as you can see, will be the default spacing or column size in our vCard which in this example would be 20px;

Compass also has Helpers to detect image size and we will make use of this feature on our picture profile, as follows;

  $img: image-width("me.jpg") + (($space / 4) * 2);  

The extra Addition of (($space / 4) * 2) in the code above, is to calculate the total image width including the border that will frame the picture. A frame generally has two sides; top and bottom / left and right, that is why we multiply the division result by 2.

Selector Inheritance

There are apparently a few selectors in our stylesheet that will have same styling rules. To avoid repetition in our code, we will need to specify these styles in the first place and inherit them with the @extend directive whenever needed. This method, in Sass, is known as Selector Inheritance, a very useful feature that is missing in LESS.

  .float-left {  	float: left;  }  .box-sizing {  	@include box-sizing(border-box);  }  

Styles

When all that is necessary has been setup, then it is time to style our vCard, starting with a background color to our HTML document;

  html {   	height: 100%;  	background-color: $base;  }  

vCard

The following styles define the vCard wrapper. If you have been working with LESS previously, this code will be familiar to you and easy to digest.

  .vcard {  	width: $width;  	margin: 50px auto;  	background-color: darken($base, 5%);  	border: 1px solid $dark;  	@include border-radius(3px);  	ul {  		padding: 0;  		margin: 0;  		li {  			list-style: none;  		}  	}	  }  

The wrapper’s width inherits the value from $width variable. The background color is darker by 5% from the base color, whilst the border color will be darker by 10%. This coloring is achieved using Sass color functions.

The vCard will also have 3px radius of rounded corners that is achieved using Compass CSS3 Mixins; border-radius(3px).

Bio Section

As we have noted early in this tutorial, the vCard can be divided into two sections. These nested styles below will define the first section that contains the picture profile with a few details (name, email and phone).

  .bio {  	border-bottom: 1px solid $dark;  	padding: $space;  	@extend .box-sizing;  	img {  		@extend .float-left;  		display: block;  		border: ($space / 4) solid #ffffff;  	}  	.detail {  		@extend .float-left;  		@extend .box-sizing;  		color: darken($base, 50%);  		margin: {  			left: $space;  			bottom: $space / 2;  		}  		width: $width - (($space * 3) + $img);  		li {  			&:before {  				width: $space;  				height: $space;  				margin-right: $space;  				font-family: "ModernPictogramsNormal";  			}  			&.name:before {  					content: "f";  			}  			&.email:before {  					content: "m";  			}  			&.phone:before {  					content: "N";   			}  		}  	}  }  

There is one thing from the code above that we think you need to take a notice. The width in .detail selector is specified with this equation $width - (($space * 3) + $img);.

This equation is used to dynamically calculate the detail’s width by subtracting the picture profile width and the spaces (padding and margin) from the vCard total width.

Social Section

The styles below are for the second section in the vCard. There is actually no difference with plain CSS here, only now they are nested, and a few values are defined with variables.

  .social {  	background-color: $dark;  	width: 100%;  	padding: $space;  	@extend .box-sizing;  	ul {  		text-align: center;  		li {  			display: inline-block;  			width: 32px;  			height: 32px;  			a {  				text-decoration: none;  				display: inline-block;  				width: 100%;  				height: 100%;  				text-indent: 100%;  				white-space: nowrap;  				overflow: hidden;  			}  		}  	}  }  

In this section, we will display the social media icons using the image sprite technique, and Compass has a feature to do that job faster.

First of all, we need to put our icons in a special folder – let’s name the folder /social/, for example. Back in the stylesheet, concatenate those icons with the following @import rule.

  @import "social/*.png";  

The social/ above refer to the folder where we store the icons. This folder should be nested within the image folder. Now, if we take a look at in our image folder, we should see a sprite image generated with random characters, like social-sc805f18607.png. At this point, nothing still not happens at the front-end, until we apply the styles with the following line.

  @include all-social-sprites;  

Final Result

Finally, after all the hard work we can now see the result like this:

In case we think that 500px is too wide later on, we only need to change the value in $width variable – for example, 350px – the rest will “magically” be adjusted. You can also experiment with the color variable.

• View Demo
• Download Source

Conclusion

In this tutorial we have shown you how to build a simple online vCard with Sass and Compass; this is just an example, however. Sass and Compass are indeed powerful, but sometimes it is not necessary. For instance, when we are working on a website with a few pages and probably will also only need fewer lines of styles, using Sass and Compass is considered excessive.

Further reading: Official Sass Language Documentation

This post closes our Sass series and we hope you enjoyed it. If you have any question regarding to this subject don’t hesitate to add it in the comment box below.

Related posts:

1. Syntactically Awesome Stylesheets: Using Compass in Sass
2. Getting Started with Sass: Installation and the Basics
3. CSS Preprocessors Compared: Sass vs. LESS
4. Building Instagram Photo Search Engine With JQuery And PHP [Tutorial]

Have confidential data in your Mac that needs to be locked with secure passwords to prevent unwanted access? Forget third-party software, paid or free – you can easily encrypt a folder on your Mac without any additional tools.

You can create an encrypted disk image from your specified folder directly. Follow our simple 5-steps process to encrypt your folder easily in minutes.

Recommended Reading: How To Encrypt USB Flash Drive

Encrypting Folders

1. Firstly, open up Disk Utility.

   

2. Then, click on File > New > Disk Image From Folder.

   

3. Select the folder you want to encrypt, and click Image.

   

4. Choose ‘read/write’ if you want your folder to be edit-able (if not, just choose another format), and choose ’128-bit AES encryption’.

   

5. Type in any password you desire, and very importantly, make sure the checkbox for ‘Remember password in my keychain’ is NOT ticked, else it will defeat the whole purpose of encrypting your folder.

   

And that’s it! A password-protected .dmg file will be created based on the folder you selected.Larger folders may take longer to encrypt. Once that is done, you can delete the original folder.

To access the encrypted disk image, just double-click the .dmg file to mount it in the Finder and punch in the password whenever you try to access the folder. Always uncheck the box saying "Remember password in my keychain" to make sure it is salways protected by passwords.

After a disk image is mounted, you’re able to access the folder like normal. Now, putting any files in the folder will put the file under encrypted protection too.

After you’re done working with the folder and want it to be password protected again, just unmount the folder from Finder.

Related posts:

1. How to Customize Mac’s Folder Icon With Any Image [Quicktip]
2. Automating Tasks in Mac With Folder Actions [Quicktip]
3. How to Transfer iOS Screenshots To Your Mac Easily [Quicktip]
4. How to Sync Any Folders Outside /Dropbox [Quicktip]