Tech notes: Radiant CMS 0.9.0 RC1

The Blade Inteface

On Friday of last week we did a release candidate for the next version of Radiant. Radiant 0.9 is the most significant overhaul of the adimin interface since Radiant was first released back in 2006.

Apart from the obvious interface improvements, there have been a number of technology changes on the frontend that are worth talking about.

We’ve Climbed Aboard The SASS Bandwagon

SASS is a new framework to build the cascading stylesheets. It’s the sister of HAML (the indentation cousin of ERB), but in many ways it is much more revolutionary than HAML. SASS gives a designer many of the same tools to keep stylesheets clean, that programmers have used for decades for their own code. It has support for variables, functions (called modules), and basic conditionals.

For Radiant we are just begining to tap in to the power that SASS provides, but I can show you a couple of code snippets that show exactly how it can make stylesheet development easier.

For example, here is a SASS module that makes declaring opacity for an element easier:

=opacity(!opacity)
  opacity= !opacity
  -moz-opacity= !opacity
  -khtml-opacity= !opacity
  -webkit-opacity= !opacity
  filter= "alpha(opacity=" + round(!opacity*100) + ")"
  -ms-filter= "progid:DXImageTransform.Microsoft.Alpha(Opacity=" + round(!opacity*100) + ")"

Then, in the actual stylesheet I can reference the module like this:


#transparent
  +opacity(0.5)

Which will output the following when it is compiled to CSS:

#transparent {
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  -webkit-opacity: 0.5;
  filter:alpha(opacity=50);
  -ms-filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50)
}

Effecively making a div with an ID of “transparent” 50% transparent in a browser compatible way.

The great thing about this is I can use the opacity mixin as many times as I want across my stylesheets. If I then need to update the technique that I used for creating opacity (say, to use transparent PNGs instead) I can redefine the opacity module and all of the code that uses it will get updated with the new rules.

Apart from the opacity module, I have also written or found modules for rounding corners, and adding drop shadows. We still have a long way to go in leveraging the power of SASS for Radiant, but I am excited about the possibilities that it opens up, particularly for extensions.

I am finding that SASS, when used appropriately, makes CSS much easier to maintain and refactor.

If you are interested in learning more about SASS, the Compass project on GitHub is a great one to explore.

The New Javascript Sauce: LowPro + Prototype

A PopupJS Window

Another major change in this release is the introduction of LowPro behaviors. Most of the core Javascript has been repurposed to leverage this technology. LowPro make it easy to attach objects (called behaviors) to the DOM that respond to events. LowPro does all of this unobtrusively which also encourages code reuse.

One example of this is the Popup.TriggerBehavior. The Popup.TriggerBehavior makes it possible for extension developers to pop up Facebook-like windows without writing a single line of Javascript. LowPro automatically attaches the Popup.TriggerBehavior to links with the “popup” class, like this:

<a class="popup" href="#reference_window">Reference</a>
<div id="reference_window" style="display: none">
  ... contents of window ...
</div>

The href in the code above specifies the ID of the div that should be wrapped in a popup window. When the behavior is attached, it removes the div from the DOM and wraps it in the chrome of a popup window. Then when the link is clicked the window is centered within the view port and shown. All of this without writing a single line of javascript.

Another very cool example of LowPro behaviors in action is the Status.FormBehavior. This behavior is attached to every form and works using a custom attribute.

<form action="..." onsubmit_status="Saving Changes...">
  ... contents of form ...
</form>

Saving Changes

In the code above the status message “Saving Changes…” will be displayed whenever the form is submitted. This serves to let the user know that they clicked the right button and also gives them a small progress pinwheel so that they know work is being done.

Both of the behaviors metioned in this article ship with Radiant and are also separate projects on GitHub. The first is called Popup.js and the second Status.js.

© 2013 John W. Long