HSS and YUI Compressor in AYM CMS

aym-cms (4)

A while back I posted about AYM CMS, which is a Django-based project for generating complex static websites (incidentally, it is also what powers the Resume Interactivity Provider). I've ended up using it on a regular basis for both work and pleasure, and have made a few helpful enhancements.

You can get the newest version on Github.

YUI Compressor Integration

All .js and .css files are now compressed via the YUI Compressor if you specify a path for the YUI_COMPRESSOR value in your settings.py file. If you have the jar in the same directory as the build.py script, just add this setting:

YUI_COMPRESSOR = u"yuicompressor-2.3.6.jar"

If you don't want to compress your files, just leave it set to None.

YUI_COMPRESSOR = None

HSS Integration

When I write long CSS files, I frequently wish I had variables to work with, and leveraging this neat little project, now I do. (And so do you.)

Using HSS with AYM CMS is easy:

  1. Download the HSS program.

  2. Make hss executable.

    chmod +x hss

  3. Set the HSS_PATH value in settings.py to lead to hss. If you move hss to the same directory as your project, the setting looks like this:

    HSS_PATH = "./hss"

  4. Write as many .hss files as you want in your static/ directory.

  5. When you run python build.py, those files will be compiled into .css files with the same pre-extension name.

    For example my_style.hss becomes my_style.css.

My brief plug why you'd want to use HSS, is because it allows you to write this:

var colorOne = #AAAAAA;
var colorTwo = #FFFFFF;
var titleCSS = { font-size: 2.5em; color: #ABACAD; }

var colorThree = #BBBBBB;
var font = "Georgia";


body {
font-family: $font;
}


#head {
color: $colorOne;
.title {
$titleCSS;
}
a {
color: $colorTwo;
}
}
#foot {
color: $colorOne;
.title {
$titleCSS;
}
a {
color: $colorThree;
}
}

That above code will be compiled into the CSS file that you would reasonably expect.

If you don't want to use HSS, just leave the value in settings.py set to None.

HSS_PATH = None

Using CleverCSS with AYM CMS

I also hooked up AYM CMS to convert CleverCSS files in the static/ directory into proper .css files in the deploy/static/ directory after running the build script.

CleverCSS is similar to HSS, but tries to be Pythonic, and has some other neat things that it does. You'll probably like one more than the other, so take your pick. The nicest thing about CleverCSS is that it installs more easily than HSS does:

sudo easy_install CleverCSS

Configuration involves two settings in settings.py:

USE_CLEVER_CSS = True
CLEVER_CSS_EXT = ".ccss"

By default it treats only .ccss files as CleverCSS, because the script will break if you run CleverCSS on normal CSS files, but if you only used CleverCSS, then you might want to change that value to .css instead.

Note that the files created from the build script will have the file extension .css, regardless of the extention that they originally held.

Ignoring Silly Files

This isn't really a feature as much as a fixing of previous oversight. It wasn't rare for unwanted files of the something.css~ or .#tmfile.css# varieties to sneak into the deploy/static/ directory, and that won't happen anymore.

Building a Project

Building AYM CMS projects still works the same way, but has more varied output.

wills-macbook:aym_cms will$ python build.py 
Removing existing deploy dir, if any...
Creating temp directory at '/Users/will/git/aym_cms/aym_tmp_files'...
Creating deploy/ dir...
Copying contents of static/ into deploy/static...
Ignored '.DS_Store'
Compiling, compressing and copying aym.hss to deploy/static
Compressing and copying 'pygments.css' to deploy/static/
Compressing and copying 'style.css' to deploy/static/
Ignored 'style.css~'
Copying and creating thumbnails for files in images/...
Copying and thumbnailing ice.png...
Rendering pages...
Rendering index.html...
Removing temp directory...
Done running build.py.

Let me know if there are any problems, or if you have ideas for other helpful tools to be integrated. Of course, AYM CMS is all about making a reusable toolkit personalized to your tastes, so feel free to just hack things into your copy as well.