Pictos Free + Spriting with Compass

Pictos is awesome! And thanks to WooThemes, Drew Wilson released a free version to compliment blog designs called Pictos Free. Thanks, Drew.

The Backstory.

So, I have been wanting to play with Compass Spriting and I needed an excuse to play with something real world. Since I’m a fan of Drew Wilson (see also Founders Talk episodes #19 and #20) I decided to pull down a copy of the free version of Pictos and use that to play with Compass’s spriting feature. A little while later, and with the help of my Compass Extension Bootstrap, Pictos Free was born.

What is Pictos? What is Pictos Free, and why is it free?

Pictos is a very well done, royalty-free, icon set for interface designers by Drew Wilson. There’s a paid version as well as a free version of Tumblr icons, thanks to Drew’s collaboration with WooThemes.

After WooThemes discovered Drew Wilson and his amazing work on Dribbble, they decided to contact him about working with the WooTeam to bring some of that Pictos awesomeness over there. The result is a free, vector icon set which contains 21 icons perfectly suited for your blogging needs. By the way, you can follow me as well on Dribbble.

Pictos Free + Demo + Code

To show off Pictos Free, I’ve created a demo at pictosfree.heroku.com. Dive into the demo code and follow along with how to use it in the next sections.

Install Pictos Free

The very first thing we need to do is install Pictos Free.

(sudo) gem install pictos-free

Next, we need to require Pictos Free in our project’s Compass config file.

require 'pictos-free'

Once we have Pictos Free required by Compass, we can see that it is added to the list of available frameworks and patterns in Compass’s framework list.

We can run compass frameworks in our project to see a list of frameworks we have access to.

adamstacoviak@as-mbp-i7 [11:39:29] [~/Code/OS/sass/pictos-free/demo] [master]
-> % compass frameworks
Available Frameworks & Patterns:

  * blueprint
    - blueprint/basic      - A basic blueprint install that mimics the actual blueprint css.
    - blueprint/buttons    - Button Plugin
    - blueprint/link_icons - Icons for common types of links
    - blueprint/project    - The blueprint framework.
    - blueprint/semantic   - The blueprint framework for use with semantic markup.
  * compass
    - compass/ellipsis     - Plugin for cross-browser ellipsis truncated text.
    - compass/extension    - Generate a compass extension.
    - compass/pie          - Integration with http://css3pie.com/
    - compass/project      - The default project layout.
  * pictos-free
    - pictos-free/icons    - Pictos Free icons

Installable Frameworks & Patterns?

By far one of the coolest and most useful features of Compass is the ability to package up your coding best practices, frameworks, etc into extensions. But, it doesn’t end there.

What you may not know is that Compass allows you to package other assets for the framework such as images, fonts, text files, and more in your extension to provide installable patterns and templates.

As you can see from the output of compass frameworks above, we have access to pictos-free and we can install the pictos-free/icons pattern.

With Pictos Free, I’ve included a template that includes the License.txt file provided by Drew – as well as 72px black and white .png versions of all 21 icons. It’s quite possible that Drew and I will work together on this extension to make it more flexible as well as include other sizes, but for now, 72px black and white versions is what it ships with.

For another framework example that ships with installable patterns, take a look at Zocial Buttons.

Install the icons pattern

So let’s install the icons templates from the extension. Run this command from the root of the project you’re installing Pictos Free to.

# execute at the root of your project
compass install pictos-free/icons

You should see something like this.

-> % compass install pictos-free/icons
create public/images/pictos-free-black/icn1.png 
...
create public/images/pictos-free-white/icn6.png 
create public/images/pictos-free-white/icn7.png 
create public/images/pictos-free-white/icn8.png 
create public/images/pictos-free-white/icn9.png 
create License.txt 
remove .sass-cache/ 
remove public/stylesheets/stylesheet.css 
create public/stylesheets/stylesheet.css

Once you’ve done this, your project will now have the images for Pictos Free installed in your images directory and you are ready to use Pictos Free!

The next step is to @import Pictos Free with Compass, and here’s how simple that is.

// Pictos Free (white)
$pictos-free-white-spacing: 50px
@import "pictos-free-white"

If you look at the partial file _pictos-free-white.sass in the extension, you will see that all I am doing is following the Compass way of importing all the images from a folder and using the “magic sprite mixin” to add all the icons’ required styles to our CSS stylesheet.

@import "pictos-free-white/*.png"
+all-pictos-free-white-sprites

Which compiles to this CSS. This code snippet has been truncated because this single line of Sass compiles to approximately 174 lines of CSS for us.

.pictos-free-white-sprite, .pictos-free-white-icn1, .pictos-free-white-icn10 ... {
  background: url('/images/pictos-free-white-s0e3c56a72c.png') no-repeat;
}

.pictos-free-white-icn1 {
  background-position: 0 0;
}

.pictos-free-white-icn10 {
  background-position: 0 -122px;
}

...

.pictos-free-white-icn8 {
  background-position: 0 -2332px;
}

.pictos-free-white-icn9 {
  background-position: 0 -2455px;
}

Conclusion

Spriting with Compass can be pretty easy. It really does all the heavy lifting for you and all of the math as well. I also LOVE to package up code like this into reusable Compass extensions as well as provide the templates like I did here with the icons. It really makes adding a new feature or design asset to my projects that much easier. Plus, I can version that code and share it with others which is a HUGE win over the copy and paste scenario of vanilla CSS and using frameworks and patterns like this.