Tech Notes: Radiant 0.9.0 RC1

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

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>

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 PopupJS and the second StatusJS.