Articles by Alex Ball

If you have started to dive into the wonderful world of CSS preprocessors (LESS or Sass), you might have also heard of Compass. If you haven’t decided on either LESS or Sass, I would make the investment and learn one, or both, of the technologies. It’s well worth the time and will make your coding and development life a lot easier.

Today, we’re going to look at Compass, an open-source CSS authoring framework built on Sass. Similar to Sass, it is installed via the command line (Terminal in Mac OS X) and is run off of Ruby.

Installing Compass

Compass runs on Ruby. If you’re using Mac OS X, you already have Ruby installed. If you are on a Windows machine, you can install it using the Windows Installer. I’ll proceed with this tutorial as if you’re running Mac OS X.

First, fire up Terminal. If this little black box scares you, don’t worry. I was always very intimidated by working in the Terminal, but after following some tutorials, working with Ruby and Git, you get to be more comfortable.

[WARNING: Working in the Terminal gives you access to seriously mess up your computer. Be cautious about command lines you run in the Terminal.]

The first command you’ll want to type into the command line is to check and see what version of Ruby you’re running. To check, run this command

ruby -v

Once you click enter, the Terminal should tell you which version of Ruby you are running. If you see something like this, you’re ready to install Compass and start working with it.

Now that we know we have Ruby running, we can install Compass. To install Compass, jump back into the Terminal and run this command:

sudo gem compass install

This will install Compass and you’re all set. Next, we’ll create a Compass project.

Creating a Compass Project

The creation of a Compass project is fairly unique. Again, we use the command line to set it up, but the commands can be a little different depending on what you want to call your project. Head on over to compass-style.org/install and run through their project creation ‘wizard’. It will help you set up either a new or existing Compass project, as well as naming the project, determining whether or not to set it up with Blueprint’s or Compass’s default stylesheets, and more.

For example, the project that I’m creating uses this command:

compass create developerdrive

This creates a new folder called developerdrive in the directory where I run the command line. [Hint, use the command line's "ls" and "cd" commands to list the files and change directories to make sure you install your files in the place you want them.]

So now that you’ve got those files installed, let’s look at how we can use some of Compass’s features.

Using Compass

So Compass, which as we’ve mentioned is a form of Sass, uses a set of mixins and functions that can help you powerfully and quickly create websites, web apps, and more.

To get started, visit Compass’s website and check out the References section. This will give you an extremely detailed look into all that Compass can provide.

Let’s first look at a CSS reset, which many people include in every one of their projects. Many of the resets are very robust, and usually you have to head over to Eric Meyer’s website to get the reset. But if you’re running a Compass project, including a CSS reset is as simple as

@import "compass/reset";

in your Sass file. That one line in .scss will compile (via CodeKit or the command line) to output

@mixin global-reset { html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { @include reset-box-model; @include reset-font; } // Unlike Eric's original reset, we reset the html element to be compatible // with the vertical rhythm mixins. html { @include reset-body; } ol, ul { @include reset-list-style;...

In my last post, I introduced Sass (Syntactically Awesome Stylesheets) and getting Sass set up on your machine by installing Ruby, installing Sass, watching a file and compiling via Terminal.

Now, we will look at a much simpler way to get set up with Sass. CodeKit. I’ll be upfront, I’m a user of CodeKit and I recommend the software to any web developer who works in Sass, LESS, Compass, JavaScript, or any other web language, however neither I nor Developer Drive has any relationship (personal or financial) with CodeKit, and my post does not necessarily signify an endorsement by Developer Drive for CodeKit.

That being said, let’s learn a little bit about it and how to get it set up.

Download CodeKit

To get started, first download CodeKit. It is a commercial product ($25), but you can download a fully functional trial version which is good for ten days.

Once downloaded, fire up CodeKit and you’re greeted by a friendly, but blank app screen.

To start, either drag your project folder (wherever you’re storing your Sass or where you plan to store your Sass) to the window or click the small plus (+) sign in the and locate the folder in the browser window that comes up.

CodeKit will automatically detect all of your Sass files in your folder (as well as all of your other files). It can also automatically detect which files should be compiled to CSS files based on the contents of the Sass. If you have a style.scss file that imports other Sass files. Once you open one of your Sass files that is being watched by CodeKit, it’ll automatically compile to CSS whenever you save. [Additionally, and pretty sweet(ly), CodeKit has an auto refresh feature where you can see your code deploy live in the browser without having to go click refresh everytime.]

Writing your first Sass

The standard extension for the latest version of Sass is .scss (this is as of Sass 3). The .scss extension is completely valid CSS (just like LESS is), so you can write standard CSS while mixing in your own Sass as well. Fire up your code editor and let’s write some Sass (I useCoda 2 which has a default color profile for .scss syntax and it comes in handy).

The code shows some variables and a paragraph declaration. Don’t worry about the syntax now as we’ll cover variables, mixins, nesting, selector inheritance and much more in later posts. For now, we’re still focusing on getting Sass to work with .scss files and the Terminal.

/* Sample Sass */ $blue: #00214D; $font-size: 16px; p { color: $blue; font-size: $font-size; }

Once you save this Sass, CodeKit will automatically detect it, create a corresponding CSS file in a CSS folder in the project folder you’re using.

Pretty awesome, right?

So next up, we’re going to go in-depth into nesting with Sass. In my opinion, the nesting functionality is easier and more powerful than nesting in LESS, although they share the same basic principals.

...

I recently completed a seven part series on Learning LESS, and we had a lot of commenters who requested a similar series on Sass (Syntactically Awesome Stylesheets). While there is a lot of discussion out there as to whether or not LESS or Sass is better, both have their place, both accomplish the same overall goal, and both can make your life (and your coding) much simpler and easier.

What is Sass?

Sass, which stands for Syntactically Awesome Stylesheets, is a “meta-language on top of CSS that’s used to describe the style of a document cleanly and structurally, with more power than flat CSS allows. Sass both provides a simpler, more elegant syntax for CSS and implements various features that are useful for creating manageable stylesheets” (from sass-lang.com).

There are several different ways to harness the true power of Sass, and I’ll do my best to cover each method. But basically, it’s commonly thought that Sass is a server side compiled language using Ruby (as opposed to LESS, which is a JavaScript library and thus compiled client side). Sass can however be compiled locally and then uploaded to your server or your website via FTP just as you would any other CSS stylesheet. Many people use CodeKit for this compiling, and we’ll cover that in a later post.

Installing Sass

Sass runs on Ruby. If you’re using Mac OS X, you already have Ruby installed (lucky you!). If you are on a Windows machine, you can install it using the Windows Installer. I’ll proceed with this tutorial as if you’re running Mac OS X.

First, fire up Terminal. If this little black box scares you, don’t worry. I was always very intimidated by working in the Terminal, but after following some tutorials, working with Ruby and Git, you get to be more comfortable.

[WARNING: Working in the Terminal gives you access to seriously mess up your computer. Be cautious about command lines you run in the Terminal.]

The first command you’ll want to type into the command line is to check and see what version of Ruby you’re running. To check, run this command

ruby -v

Once you click enter, the Terminal should tell you which version of Ruby you are running. If you see something like this, you’re ready to rock with Sass.

As you can see, as of this post, my version of Ruby is 1.8.7, which will work just fine for Sass. Now that we know we have Ruby, let’s install Sass.

You can install Sass by running this command

gem install sass

Click enter and the Sass install will begin. This process will take just a minute or two.

[Having trouble? If you got an error message saying you don't have privledges to write to the Ruby directory, you'll have to install Sass with the sudo command. Simply type sudo gem install sass and it should work for you.]

If all things go successfully, you should see this message.

And that’s it! Sass is now installed on your computer and you’re ready to start writing some Syntactically Awesome Stylesheets. Can we also pause a minute to just look at how awesome of a word ‘syntactically’ is? Just rolls off the tongue.

Writing your first Sass

The standard extension for the latest version of Sass is .scss (this is as of Sass 3). The .scss extension is completely valid CSS (just like LESS is), so you can write standard CSS while mixing in your own Sass as well. Fire up your code editor and let’s write some Sass (I use Coda 2 which has a default color profile for .scss syntax and it comes in handy).

The code shows some variables and a paragraph declaration. Don’t worry about the syntax now as we’ll cover variables, mixins, nesting, selector inheritance and much more in later posts. For now, we’re still focusing on getting Sass to work with .scss files and the Terminal.

/* Sample Sass */ $blue: #00214D; $font-size: 16px; p { color: $blue; font-size: $font-size; }

Looks pretty simple so far, right? Now let’s jump back into the Terminal and get Sass to watch the file. Make sure you’re in the same directory as the file you just saved (I saved mine to my Desktop). To check and see what folder you are in, simply type

ls

in the command line and it will list all of your files and folders.

To change directories, simply type cd

and then begin typing your location and press tab. Terminal will auto finish the folder. Run the command, then type

ls

again to confirm you’re in the correct directory.

Once you’re in the same directory as the .scss file you just created, we’ll tell Sass to watch the file and to translate it into a .css file. Once Sass is watching the file, any changes you make to the .scss file will automatically be updated in the .css stylesheet. The command for getting Sass to watch the file is

sass --watch sample-sass.scss:sample-sass.css

Sass will then tell you that it is watching for changes and automatically create a CSS file in the same location as your .scss file.

What’s Next?

Now you’re up and running with Sass, you can start writing some sassy code. In future articles, I’ll walk you through the syntax and the thought process behind planning out your code to be extremely efficient, and also showcase CodeKit (which replaces the need to work in the Terminal) when using Sass. We will also dive into Compass as well.

Have questions? Leave them in the comments below and I’ll answer them! Thanks for reading.

...

We’ll finish our Learning LESS series today as we talk about putting your LESS into action on your web projects. Today’s post will be slightly different than previous posts, as we won’t really showcase new techniques and code examples as much as we’ll talk about how to use LESS, projects you can work on to jump start your LESS development and more.

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

Coding With LESS

If you read our introduction to the Learning LESS series, you saw that I recommend compiling all of your LESS locally, and simply linking to one CSS stylesheet. Two of the top programs to do this is LESS.app and CodeKit, both from Incident57.

LESS.app

LESS.app is a free application that will detect all of the LESS files in your web folder, and compile them to CSS. You can set specific output folders and select which LESS files you actually want to compile (this comes in handy if you’ve divided up your LESS into smaller modular files and import them all into one stylesheet). Additionally, you can minify your CSS from this application, saving your precious file size (but don’t even think about editing your CSS file).

CodeKit

CodeKit is the next generation of the LESS.app and has a $20 price tag attached to it (to help the creator pay off his student loans, so in reality, it aint that bad). CodeKit compiles LESS perfectly, but does a lot more. It also compiles Sass, Stylus, Haml, Coffeescript, JavaScript and Compass files. Granted, I don’t know much about those other file types (other than JavaScript), but … CodeKit can compile them! Additionally, CodeKit has a pretty awesome feature where when you save your code, your browser will automatically refresh to reflect the changes, and it does it with some cool CSS3 animations.

LESS Projects

If you want to get a jump start on using LESS in your projects, I’d recommend grabbing an open source project that already utilizes LESS. It’s the best way to dig into the techniques and tricks that experienced and expert web developers use on their projects. I’ll run through a series of projects that I utilize on a daily basis that uses LESS.

Bootstrap, from Twitter

Bootstrap, from Twitter is one of the most popular open source projects on the web right now. Developed by Mark Otto and Jacob from Twitter, Bootstrap is a set of HTML, CSS and JavaScript components for baseline user interface components and interactions, including a responsive design, UX items such as buttons, forms, and more.

Bootstrap uses LESS as the basis for all of their styles, and really divides up their code into small, modular files, which becomes extremely maintainable and easy to understand.

Responsive Bones Theme for WordPress

If you’re into designing and developing for WordPress, might I suggest starting with Bones? There are a lot of WordPress starter themes out there, but in my opinion, not much do it better than Eddie Machado’s Bones.

The responsive version of Bones uses LESS to structure a responsively designed WordPress site, using CSS3 media queries to determine which LESS file is loaded into the compiler. It’s a pretty nifty system, and definitely worth a look if you’re looking at working with WordPress.

320 and Up Project

320 and Up is the ‘tiny screen first’ responsive boilerplate. This project is a perfect starting point for those looking to create a responsive website, but not building it straight into a CMS. If you’re just looking for a website, or will be looking to import it into another CMS like ExpressionEngine, 320 and Up is the place to be.

The project uses LESS to create a responsive framework for you to style up, starting with the smaller screens and working up, as opposed to designing for a desktop and scaling down. It’s an interesting concept, and definitely one to check out!

Conclusion

That wraps up our Learning LESS series here on DeveloperDrive. Thanks so much for reading, commenting and discussing. Do you have any other projects you know that use LESS that you use? Leave them in the comments below.

...

We’re getting to the end of our Learning LESS series, and this is one of the posts I’m most excited about. One of the best features of LESS is how modular and organized your code can be, and how it doesn’t add much weight or calls to your live sites (if you compile locally with LESS.app, CodeKit or some other compiler).

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

Grab a cup o’ joe, your favorite text editor and let’s learn how to divide up our LESS and keep things neat and tidy.

Setting Up Your Project

Whenever I’m about to start a project from scratch using LESS, I set up a simple folder structure.

As you can see, my LESS and CSS are separate folders. My next step is I always add my site to LESS.app (or CodeKit if you prefer). LESS.app will automatically search for all LESS files in your site folder and set up to compile.

Before we do that, let’s create some LESS and learn how to modularize your code and then how to bring it together at the end.

Creating A Few LESS Files

The absolute first LESS file I create in any project is simply style.less. This is the file that will be compiled to be style.css, and act as the master CSS file for my entire project.

It is important to remember that comments in LESS are double backslashes (//) and are not compiled in the final CSS. Normal CSS comments (*/ … /*) are compiled as comments and can be used for organizational or normal comments.

That said, let’s take a look at my starting point for style.less.

// Style.less for Project LESS // --------------------------- /* This is a project/blog for DeveloperDrive.com written by Alex Ball. Version 1.0.1 These are regular CSS comments that will be compiled normally. */

So, not much going on in that file … yet. Moving on to our next LESS file, I typically head to Andy Clark’s 320 and Up project and snag the LESS reset file he has developed.

// ========================================================== // 320 and Up by Andy Clarke // Version: 3.0 // URL: http://stuffandnonsense.co.uk/projects/320andup/ // Apache License: v2.0. http://www.apache.org/licenses/LICENSE-2.0 // ========================================================== /* Reset */ html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th,...

In part one of our post Up and Running With Custom Post Types, we covered the concept behind WordPress’s Custom Post Type feature, and how to get started by creating your own custom post type. We also covered ways to keep it modular by utilizing a separate PHP file, allowing you to port the post type from theme to theme.

In this post, we’ll cover creating Taxonomies for your custom post types, creating custom fields and meta boxes, saving your data and using it in your WordPress themes.

Let’s get rollin’!

Creating Taxonomies (To Categorize By)

The next step is to set up some taxonomies to categorize your custom post type by. These are effectively the same thing as Categories for posts, except we can make them whatever we want with just a few lines of code.

For this, we are using the WordPress function register_taxonomy();. As you can see below and on the Codex, the arguments it takes is the taxonomy, followed by the object type, and finally the $args. For our example here, we create two taxonomies – Skills and Club Level. We assign the taxonomies to the “athlete” post type, and then give it arguments including labels and rewrite privileges. Let’s take a look at the code.

register_taxonomy("Sport", array("athlete"), array("hierarchical" => true, "label" => "Sport", "singular_label" => "Sport", "rewrite" => true)); register_taxonomy("Club Level", array("athlete"), array("hierarchical" => true, "label" => "Club Level", "singular_label" => "Club Level", "rewrite" => true));

The registered taxonomies come through looking like this.

You can click on the post types and you will be presented with a screen that looks just like the Categories page, and the ability to add your custom taxonomies.

So we’re done, right?

Well, effectively, you do have a custom post type that works and functions. Although currently, it’s not any different than a regular post. Let’s dig in to creating custom fields in your posts that will allow you to get unique information and display them back in your theme.

Creating Custom Fields

To start off the true magic of custom post types, you have to first initialize a function to add the meta boxes. We’ll call ours admin_init() and call it like this:

add_action("admin_init", "admin_init"); function admin_init(){ add_meta_box("personal_info", "Personal Info", "personal_info", "athlete", "normal", "low"); }

The first part of that code initalizes the function admin_init(). Obviously the second part of that code is the actual function. Basically it’s telling your theme to create a new meta box called Personal Info, put it in the post type of “athlete” and give it a low priority (placement in the post type).

Cool! We’re done, right?

Nope. Close though. Let’s add a few custom fields to populate. This will dabble more in HTML than PHP.

Creating Fields In Your Meta Box

Now this is where the fun comes in. We’re going to create a personal info meta box (we’ll, we already created it above – now we’re going to fill it out) that will ask for a persons first name, last name, gender, email, phone number and birthday.

To do this, we create a function called personal_info(). This is the same function we called in our admin_init() function. Light bulbs going on now? The lines are starting to connect.

Within the function, we first set some variables. We declare variables for $custom, and then using that variable, we create variables for all of our fields. After that, we close out the php, and render the fields with some good ol’ HTML. I use tables just for ease of use and the ability to quickly and easily port this to other post types, but feel free to use div’s or whatever your personal preference is.

function personal_info() { global $post; $custom = get_post_custom($post->ID); $first_name = $custom["first_name"][0]; $last_name = $custom["last_name"][0]; $gender = $custom["gender"][0]; $email = $custom["email"][0]; $phone = $custom["phone"][0]; $birthday = $custom["birthday"][0];...

We continue on our journey of Learning LESS today as we take a look at Nested Rules in LESS, which will help you write extremely clean code. If you haven’t read our first three posts on the topic, check out the introduction, variables, mixins and nested rules posts.

Blog Series Roadmap

An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action

Time to get our hands dirty in some LESS functions, which will likely blow your mind that it can be done in CSS.

Operations

The first type of ‘functions’ I’ll cover are Operations. LESS kind of separates them from other functions, but for all intensive purposes, they can perform the same actions and thus why I grouped them with functions.

The short of operations is that they’re just math. The long, is that you can use them to quickly and dynamically change pixels, percentages, ems, colors, and more in just one line of code and keep it relative to a baseline example. Let’s set up a real world scenario.

You’re creating a WordPress website for a client, and you are working on styling a blockquote element where you want the font to change from Helvetica to Georgia, become italic and increase slightly in size. But, if your WordPress theme, you give your users the option of altering the font size in a options panel and you don’t want to give the option for users to edit the size of the blockquote element (because you want to maintain proper proportions between the two font sizes).

So to set the size, you end up using LESS to dynamically size your blockquote depending on your base font size. Let’s take a look at the LESS. [Note: In these LESS examples, I use aspects that we've previously covered on Developer Drive, including variables, mixins, and more. Please be sure to brush up on the other posts as well if any of this confuses you.]

// Variables for example // --------------------- @baseFontSize: 16px; @baseFontFamily: Helvetica, sans-serif; @quoteFontFamily: Georgia, serif; // LESS for Styling Paragraph and Blockquote // ----------------------------------------- p { font-family: @baseFontFamily; font-size: @baseFontSize; } blockquote { font-family: @quoteFontFamily; font-size: @baseFontSize + 4; }

Notice the font-size for the blockquote. We didn’t create a new variable for the blockquote font-size, we just took our @baseFontSize variable and added 4 to it! Four what, you say? LESS can correctly identify what unit of measurement is set, and then assign the number that same unit. So in this instance, LESS should add 4px to the font-size of the blockquote element. Let’s take a look at the compiled LESS:

p { font-family: Helvetica, sans-serif; font-size: 16px; } blockquote { font-family: Georgia, serif; font-size: 20px; }

Sure enough, LESS took the base font-size of 16px and added 4 units to it, making the blockquote element have a font-size of 20px.

You can also expand upon the basic math shown above to include more complicated calculations such as multiplication, division, subtraction, including paratheses using order of operations, and also setting new variables with operations. A few examples include:

@specialWidth: @baseWidth * 2; @megaFont: (@baseFontSize * 14) - 10;

Operations With Color

The operations we showed above can be used with colors as well as units of measurement. Colors can be created and manipulated with math as well. If you’re not super familiar with how hex colors are created and calculated, check out the W3Schools page on them. The calculation of hex colors can be complex, but can also be extremely powerful. Here is a simple example of manipulating hex colors:

// LESS // ---- @color: #888 - #222; h2 { color: @color; }

And the compiled CSS:

h2 { color: #666666; }

Pretty slick, eh?

But alas, that’s not all LESS does with colors. It gets real fancy with some built in color functions. Since I can’t explain the color functions better than the official LESS website, can, here is the various color functions that are build into LESS:

lighten(@color, 10%); // return a color which is 10% *lighter* than @color darken(@color, 10%); // return a color which is 10% *darker* than @color saturate(@color,...