Skip to content

Blueprint link icons

Jump to bottom Edit New page
niclupien edited this page Nov 10, 2011 · 2 revisions

Blueprint link icons

Link icons are a great way to make links more visually appealing. Blueprint has a set of link icons which can be included into your app with minimal effort. This tutorial will show you how to do this.

The project

Create the project as usual

# compass create 06 --using blueprint

Now for the first time, we will use the install command. This command allow compass to add some assets to your project.

# compass install blueprint/link_icons 06

The last "06" is the name of your project folder relative to where you are. If you are into your project folder, you don't need this paramater. (See Compass Command Line)

The markup

The markup is very straightforward. You don't need anything special, the link_icons module has a set of selector to detect links and add the corresponding image. The following links contains all type of link_icons compass offers you.

<!DOCTYPE>
<html>
<head>
  <link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <link href="stylesheets/print.css" media="print" rel="stylesheet" type="text/css" />
  <!--[if lt IE 8]>
      <link href="stylesheets/ie.css" media="screen, projection" rel="stylesheet" type="text/css" />
  <![endif]-->
</head>
<body>
  <div id="container">
    <h1>Link icons</h1>

    <a href="http://">Http</a> <br />
    <a href="mailto:">Mailto</a> <br />
    <a href=".pdf">PDF</a> <br />
    <a href=".doc">DOC</a> <br />
    <a href=".xls">XLS</a> <br />
    <a href=".rss">RSS</a> <br />
    <a href=".rdf">RDF</a> <br />
    <a href="aim:">AIM</a> <br />
    <a href="#" class="help">Help</a> <br />
  </div>
</body>
</html>

The first anchor elements are example of link to specific file type or protocol. The last is a custom class I created to expand the link_icons to add icons not included in compass.

The style

We will add the link_icons module globally so all you have to do is to import and include the proper mixin.

@import "blueprint/reset";
@import "partials/base";
@import "blueprint";
@import "blueprint/link-icons";

@include blueprint-typography;

#container {
  @include container;
  @include link-icons;
}

.help {
  @include link-icon('help.png');
}

I nested link-icons mixin into container so all links inside container will be transformed. I also added a help class to show how to add a custom link icon.

Last words

When you install the link_icons module, there is a sass file that is automatically created for you to use with link icons. I didn't show it here because I wanted to simplify this example. The default file contains a useful no-link-icon class you can apply on links you don't want to show icon.

I am not convinced I will use this module very often but i can imagine lots of uses to it. Maybe in scaffolding toolbars/sidebars or in a wiki project. I don't know yet but i'll tell you if I find a common use case for this. But still, it's good to know that it exists and that compass has it.

Add a custom footer
Add a custom sidebar
Clone this wiki locally