SCSS

Getting Sassy with WordPress Part 2 – Sprites

Posted in: Compass, SCSS, Websites, WordPress by koolkat on November 7, 2012 | No Comments

In Getting Sassy with WordPress Part 1, we discussed how to manage using Compass and SASS for your WordPress project. Now we can take our use of Compass one step further and start using image sprites.

Image sprites have been used in CSS for quite some time, lending efficiency to both our stylesheets and downloads. With Compass, you can take the labor out of creating images and let Compass do the work for you. Compass can take .png files and create a sprite file. You then use a mixin to reference which image you want to use.

In part 1, we discussed how to use the Compass generated stylsheets in WordPress. Images should also reside in your project directory. So, if your project is directory is “rotary-sass”, this is where your images directory should be located. Note that this is different from the typical WordPress implementation where the image directory appears immediately under the theme or stylesheet directory.

Once your image directory is in the correct location for Compass, create sub-directory for your .png images that will be “sprited” under the images directory. I called my directory, backgrounds. Here is what this directory structure looks like in my Compass project:

The next step is to copy all of your .png images to be sprited int to the backgrounds directory. In your SASS file, include the following:
@import "backgrounds/*.png";
Note: I put this import statement in my _bass.scss file.

Then, wherever you need one the background images, use the following mixin…
@include backgrounds-sprite("filename");
where backgrounds is your directory name and filename is the actual name of your original .png file without the extension. Compass will create a new sprite file in your images directory. It will have a name similar to:
backgrounds-sfc45308739.png
where backgrounds will be replaced by whatever name you used for your sprite directory. This file is referenced in your generated CSS file so be sure to upload it to your server along with the CSS file.

Getting Sassy with WordPress Part 1

Posted in: Compass, SCSS, Websites, WordPress by koolkat on October 22, 2012 | No Comments

For a while now, there has been a lot of talk about CSS pre-processors such as LESS and SASS.  As the the details of how such pre-processors work as well as their benefits and drawback have been discussed many places, I will not discuss that here. Instead, I will focus on how I use SASS on my WordPress sites.

First, I always want to use the Compass CSS Authoring Framework. This framework comes with its own mixins, making CSS3 easy – you never have to worry about vendor prefixes! And, it supports all of the standard SASS rules, variables and selector inheritance. To make life even easier, there is an app that even lets you avoid the command line.

Using the Compass App

I am going to step through the process of using the Compass app on a mac. After successfully installing compass.app, you will get a new icon in the top toolbar area.

1. Click the icon and select “Create compass project” and then “compass” and finally “project”
2. You will then see a finder window where you can select the location for your sass and css files.  I usually place my compass created project in the directory for my theme.
3. Let’s say you called your directory “rotary-sass”,  which for me resides in the directory “wp-content/themes/rotary”, you will end up with a file structure like this in your theme directory:



4. Now we can set some options. Click the compass icon again (which should now have turned orange, indicating an active project) and then click “Change Options”. My personal preference during development is for expanded CSS output, no line comments but debug checked. The reason for checking debug is that it will enable us to use the Firefox extension, FireSass. FireSass allows Firebug to display the original SASS filename and line numbers. Otherwise, you would just see the generated CSS line numbers making troubleshooting much more difficult. You can change the options once your project is finished so you can deliver compress CSS without the debug info.
5. Now that your project is set, all your changes to the SASS files will automatically change your CSS.
6. Next we need to tell WordPress where our new stylesheets reside.  The necessary code will both display the correct CSS rule for your project and return the correct directory and/or file for WordPress API calls such as get_stylesheet_uri().  You can add the following code to your functions.php file or a file included in your functions.php:
   /**
   * overwrite default theme stylesheet uri
   * filter stylesheet_uri
   * @see get_stylesheet_uri()
   */
   add_filter('stylesheet_uri','rotary_stylesheet_uri',10,2);
   function rotary_stylesheet_uri($stylesheet_uri, $stylesheet_dir_uri){

   return $stylesheet_dir_uri.'/rotary-sass/stylesheets/style.css';
}

7. Finally, make sure that you have both FireBug and FireSass installed as add-in in your Firefox browser. If all is working correctly, your CSS debug info should show the location of your code in the SASS files. Notice that any included files from Compass also show up.

Read Getting Sassy with WordPress Part 2 – Sprites

Natural Molecular Testing Corporation

Posted in: AJAX, Compass, HTML5, SCSS, Websites by koolkat on June 11, 2012 | No Comments

I have just completed development on a new site for Natural Molecular Testing Corporation. The site is based on a custom WordPress theme designed by Cognition Studio. One of the big challenges of working on this site was implementing the tabbed interface for the learning lounge. I used jQuery UI Tabs to create the interface and then AJAX calls to load the blog and other features. Other than the blog tab, the remaining tabs take advantage of custom post types. Doing all of this withing AJAX means that all links and searches must return the results within the tab. Here is a code snippet that accomplishes the link capture:
if (! jQuery(this).parents('.type-page').length ) {
jQuery(ui.panel).html('

Loading...

');
jQuery(ui.panel).load(this.href);
event.preventDefault();
}


The above code all goes into the load event of the tabs when they are initialize:
tabs = jQuery('#tabbedcontent').tabs({
cache: true,
ajaxOptions: {
error: function( xhr, status, index, anchor ) {
jQuery( anchor.hash ).html(
"Couldn't load this tab." );
}
},

load: function(event, ui) {
//code to capture the link goes here

Other interesting features of this site include the video libraries which will hopefully be expanding as time goes on. I also used Compass/SCSS to help generate the vendor prefix CSS3 implementations for gradients, rounded corners, etc.

Basically, the above code checks if the link has a type of page, and if not, just loads the result within the tab, preventing the default click behavior.