G$earch

50 Awesome IPad Mini Decals (Stickers)

Posted by Harshad

50 Awesome IPad Mini Decals (Stickers)


50 Awesome IPad Mini Decals (Stickers)

Posted: 09 Nov 2012 08:57 AM PST

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.

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]

Batman iPad Mini Decal

Alien [$5]

Alien iPad Decal

Headphones [$5.49]

Headphones iPad Mini Decal

Apple Juice [$6.49]

Apple Juice iPad Mini Decal

I Love Fridays [$9.90]

I Love Fridays iPad Mini Decal

LEGO Man [$9.99]

LEGO Man iPad Mini Decal

Evolution [$5.49]

Evolution iPad Mini Decal

Portal Figure [$3.49]

Portal Figure iPad Mini Decal

Wavy Scrolls [$6]

Wavy Scrolls iPad Mini Decal

Flowers [$7.99]

Flowers iPad Mini Decal

Frog [$4]

Frog iPad Mini Decal

Batman Mask [$3.49]

Batman Mask iPad Mini Decal

Animals [$9.90]

Animals iPad Mini Decal

Crossbones [$5.99]

Crossbones iPad Mini Decal

Camera [$9.90]

Camera iPad Mini Decal

Cat [$9.90]

Cat iPad Mini Decal

Cookie Monster [$9.90]

Cookie Monster iPad Mini Decal

Wild Cat [$9.90]

Cat iPad Mini Decal

Dog With Headphones [$9.90]

Dog With Headphones iPad Mini Decal

Movie Clapper Board [$9.90]

Movie Clapper Board iPad Mini Decal

F It [$9.90]

F It iPad Mini Decal

Apple Fanatic [$9.90]

Apple Fanatic iPad Mini Decal

Homer Apple Brain [$9.90]

Homer Apple Brain iPad Mini Decal

Apple Business Card [$9.90]

Apple Business Card iPad Mini Decal

I Love Apple [$9.90]

I Love Apple iPad Mini Decal

Snow White [$9.90]

Snow White iPad Mini Decal

Cookie Monster [$9.90]

Cookie Monster iPad Mini Decal

I Love Apple Pie [$7.99]

I Love Apple Pie iPad Mini Decal

Coffee Cup [$7.99]

Coffee Cup iPad Mini Decal

Pear, Apple & Pineapple [$8.99]

Pear, Apple & Pineapple iPad Mini Decal

F Off [$8.99]

F Off iPad Mini Decal

Girl With Balloons [$9.99]

Girl With Balloons iPad Mini Decal

Monkey Wearing Signboard [$9.99]

Monkey Wearing Signboard iPad Mini Decal

Bullet Through Apple [$9.99]

Bullet Through Apple iPad Mini Decal

Apple Branch [$9.99]

Apple Branch iPad Mini Decal

Hand Picking Apple [$9.99]

Hand Picking Apple iPad Mini Decal

Lovebird [$9.99]

Lovebird iPad Mini Decal

Michael Jackson [$9.99]

Michael Jackson iPad Mini Decal

Molecule [$9.99]

Molecule iPad Mini Decal

Owl [$9.99]

Owl iPad Mini Decal

Pacman [$9.99]

Pacman iPad Mini Decal

Pen Tool [$9.99]

Pen Tool iPad Mini Decal

Skeleton Arm [$9.99]

Skeleton Arm iPad Mini Decal

Creation of Adam [$10.99]

Creation of Adam iPad Mini Decal

Golf Club [$10.99]

Golf Club iPad Mini Decal

Apple Tree [$9.99]

Apple Tree iPad Mini Decal

Painter [$9.90]

Painter iPad Mini Decal

Early Bird [$9.99]

Early Bird iPad Mini Decal

Elephant [$9.99]

Elephant iPad Mini Decal

Wings [$7.99]

Wings iPad Mini Decal

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

Syntactically Awesome Stylesheets: Using Compass in Sass

Posted: 09 Nov 2012 02:27 AM PST

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.

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

0 comments:

Post a Comment