The Mini-version of the iPad is out and ready to burn the competition with it’s lightweight and pencil-thin design. It’s bad enough that it resembles its bigger brother, but after a while you won’t be able to tell yours apart from everyone else’s. Let’s inject some attitude into the little fella, and spice up its sexy back a bit with some help from these awesome decals.

In this post, we’re going to show you just some of the awesomeness that you can get on your new iOS device, and yes, you can already buy them now. Who knows, you may even find something to match the Macbook decal you already have. By the way, we know that black has always been the ‘safe’ color to get but if you are not into monochromatic decor, do check out some of the sites that carry these decals for more vibrant alternatives.

Recommended Reading: 40 IPad Mini Cases, Covers & Sleeves You Can Buy

Editor’s note: As usual, the decals are available while stocks last, and it’s best to shop around for the best prices. Check out the full list and name a favorite in the comments section!

Batman [$10.99]

Alien [$5]

Headphones [$5.49]

Apple Juice [$6.49]

I Love Fridays [$9.90]

LEGO Man [$9.99]

Evolution [$5.49]

Portal Figure [$3.49]

Wavy Scrolls [$6]

Flowers [$7.99]

Frog [$4]

Batman Mask [$3.49]

Animals [$9.90]

Crossbones [$5.99]

Camera [$9.90]

Cat [$9.90]

Cookie Monster [$9.90]

Wild Cat [$9.90]

Dog With Headphones [$9.90]

Movie Clapper Board [$9.90]

F It [$9.90]

Apple Fanatic [$9.90]

Homer Apple Brain [$9.90]

Apple Business Card [$9.90]

I Love Apple [$9.90]

Snow White [$9.90]

Cookie Monster [$9.90]

I Love Apple Pie [$7.99]

Coffee Cup [$7.99]

Pear, Apple & Pineapple [$8.99]

F Off [$8.99]

Girl With Balloons [$9.99]

Monkey Wearing Signboard [$9.99]

Bullet Through Apple [$9.99]

Apple Branch [$9.99]

Hand Picking Apple [$9.99]

Lovebird [$9.99]

Michael Jackson [$9.99]

Molecule [$9.99]

Owl [$9.99]

Pacman [$9.99]

Pen Tool [$9.99]

Skeleton Arm [$9.99]

Creation of Adam [$10.99]

Golf Club [$10.99]

Apple Tree [$9.99]

Painter [$9.90]

Early Bird [$9.99]

Elephant [$9.99]

Wings [$7.99]

Related posts:

1. 65 Macbook Vinyl Decals (Stickers) to Impress
2. Faceoff: iPad Mini vs 6 Other Tablets [Comparison]
3. 40 iPad Mini Cases, Covers & Sleeves You Can Buy
4. Top 10 iPad Stands You Can Buy

In our last post, we have mentioned once about Compass. According to the official site, it is described as an open-source CSS Authoring Framework.

In short, Compass is a Sass extension and, like LESS Element of LESS, it has a bunch of ready-to-use CSS3 Mixins, except it has also added several other stuff that make it a more powerful companion tool to Sass. Let’s check it out.

Installing Compass

Compass, like Sass, needs to be installed in our system. But, if you are using an application like Scout App or Compass.app, this will not be necessary.

Without them, you need to do it “manually” through Terminal/Command Prompt. To do so, type the following command line;

On Mac/Linux Terminal

  sudo gem install compass  

On Windows Command Prompt

  gem install compass  

If the installation succeeds, you should get a notification as shown below;

Then, run the following command line in your working directory to add Compass project files.

  compass init  

Further Reading: Compass Command Line Documentation

Compass Configuration

If you have run this command compass init, you should now have a file named config.rb in your working directory. This file is used to configure the project output. For example, we can change our preferred directory names.

  http_path = "/"  css_dir = "css"  sass_dir = "scss"  images_dir = "img"  javascripts_dir = "js"  

Strip out the comment line that is generated by Compass; we set true if we need the comments to be printed or false if it doesn’t have to.

  line_comments = false  

We can also decide the CSS output. There are four options we can select :expanded, :compact, :compressedand :nested. For now, we just need it to be expanded as we are still in the development stage.

  output_style = :expanded  

I think these configurations will suffice for most projects in general, but you can always refer to this documentation, Compass Configuration Reference if you need more preferences.

Lastly, we need to watch every file in the directory with this command line;

  compass watch  

This command line, as in Sass, will watch every file change, and create or update the corresponding CSS files. But remember, run this line after you have done configuring the project in config.rb, or else it will just ignore the changes in the file.

CSS3 Mixins

Before walking through CSS3, in our primary .scss file, we need to import the Compass with the following line @import "compass";, this will import all the extensions in Compass. But, if we need only CSS3 we can also do it more specifically with this line @import "compass/css3".

Further Reading: Compass CSS3.

Now, let’s start creating something with Saas and Compass. In the HTML document, assuming that you also have created one, we will put the following simple markup:

  <section>  	<div> </div>  </section>  

The idea is also simple; we will create a rotated box with rounded corners, and below is our Sass nested styles for the starter;

  body {  	background-color: #f3f3f3;  }  section	{  	width: 500px;    	margin: 50px auto 0;  	div {  		width: 250px;  		height: 250px;  		background-color: #ccc;  		margin: 0 auto;  	}  }  

And, to get our rectangle the rounded corners, we can include the Compass CSS3 Mixins as follows;

  body {  	background-color: #f3f3f3;  }  section	{  	width: 500px;    	margin: 50px auto 0;  	div {  		width: 250px;  		height: 250px;  		background-color: #ccc;  		margin: 0 auto;  		@include border-radius;  	}  }  

This border-radius Mixins will generate all the browser prefixes and, by default, the corner radius will be 5px. But, we can also specify the radius to our need this way @include border-radius(10px);
}.

  section div {    width: 250px;    height: 250px;    background-color: #ccc;    margin: 0 auto;    -webkit-border-radius: 10px;    -moz-border-radius: 10px;    -ms-border-radius: 10px;    -o-border-radius: 10px;    border-radius: 10px;  }  

Next, as the plan we will also rotate the box. It’s really easy to do it with Compass, all we need to do is just call the transformation method, like so;

  body {  	background-color: #f3f3f3;  }  section	{  	width: 500px;    	margin: 50px auto 0;  	div {  		width: 250px;  		height: 250px;  		background-color: #ccc;  		margin: 0 auto;  		@include border-radius(10px);  		@include rotate;  	}  }  

This Mixins will also generate those tedious vendor prefixes and the rotation will take 45 degree by default. See the generated CSS below.

  section div {    width: 250px;    height: 250px;    background-color: #ccc;    margin: 0 auto;    -webkit-border-radius: 10px;    -moz-border-radius: 10px;    -ms-border-radius: 10px;    -o-border-radius: 10px;    border-radius: 10px;    -webkit-transform: rotate(45deg);    -moz-transform: rotate(45deg);    -ms-transform: rotate(45deg);    -o-transform: rotate(45deg);    transform: rotate(45deg);  }  

Compass Helpers

One of the most powerful features in Compass is the Helpers. According to the official site, The compass helpers are functions that augment the functions provided by Sass. Alright, let’s take a look at the following examples to get a clear picture.

Adding @Font-face files

In this example, we are going to add custom font family with @font-face rule. In plain CSS3, the code may look something like this below, consisting of four different font types and it is also hard to remember for some people.

  @font-face {    font-family: "MyFont";    src:  url('/fonts/font.ttf') format('truetype'),    		url('/fonts/font.otf') format('opentype'),    		url('/fonts/font.woff') format('woff'),    		url('/fonts/font.eot') format('embedded-opentype');  }  

With Compass we can do the same more easily with font-files() Helpers;

  @include font-face("MyFont", font-files("font.ttf", "font.otf", "font.woff", "font.eot"));  

The code above will generate a result that is exactly the same as the first code snippet, it will also automatically detect the font type and add it to the format() syntax.

However, if we take a look at the code closely, you will see that we did not add the font path (/fonts/). So, how did Compass know where the fonts are located? Well, don’t get confused, this path is actually derived from config.rb with fonts_path property;

  fonts_dir = "fonts"  

So, let’s say we change it to fonts_dir = "myfonts", then the generated code will be url('/myfonts/font.ttf'). By default, when we are not specifying the path, Compass will direct it to stylesheets/fonts.

Adding Image

Let’s create another example, this time we will be adding an image. Adding images through CSS is a common thing. We generally do this by using the background-image property, like so;

  div {  	background-image: url('/img/the-image.png');  }  

In Compass, rather than using the url() function, we can replace it with image-url() Helpers and similar to adding @font-face above, we can completely ignore the path and let Compass handle the rest.

This code will also generate the exact same CSS declaration as in the first snippet.

  div {  	background-image: image-url(the-image.png);  }  

In addition, Compass also has Image Dimension Helpers, it primarily detects the image width and height, so in case we need them both to be specified in our CSS we can add two more lines, as follows;

  div {  	background-image: image-url("images.png");  	width: image-width("images.png");  	height: image-height("images.png");   }  

The output will become something like this;

  div {    background-image: url('/img/images.png?1344774650');    width: 80px;    height: 80px;  }  

Further Reading: Compass Helper Functions

Final Thought

Alright, we have discussed quite a lot about Compass today and as you can see it’s really a powerful tool and let us write CSS in a more elegant way.

And, as you already knew, Sass is not the only CSS Preprocessor; there is also LESS which we have thoroughly discussed before. In the next post, we will try to compare, head-to-head, which one of these two does the job better in preprocessing CSS.

• Download Source

Related posts:

1. Getting Started with Sass: Installation and the Basics
2. A Look Into: CSS3 Box-sizing
3. CSS3 Tutorial: Create A Sleek On/Off Button
4. How to Create Gmail logo with CSS3