Using Native Xaraya CSS Classes

Many of the 3rd party themes and modules available, regardless of platform but including Xaraya, make use of substantial inline CSS. I'm probably just as guilty of it as anyone else, to be perfectly frank.

Xaraya, however, comes equipped with a seldom used resource that can make site design a little more simple to perform. The Base module, home of many other wondrous gateways into core functionality, includes a CSS file (xarcore-xhtml1-strict.css) that contains standard CSS class names for a LOT of the standard CSS features used.

Just be sure that you do not modify the copy of this file that exists in the Base module itself! Always make a copy in your theme (themes/[your-theme]/modules/base/xarstyles/xarcore-xhtml1-strict.css) and then modify the copy instead.

Keep reading to find out about some of the standard classes that I find myself using repeatedly. And remember: inline CSS is a privilege, not a right.

The classes available follow certain patterns that helps with turning their use into a good habit to follow, once you get acclimated. I've included a brief note regarding what each is used for, by me anyway.

• xar-align-right - tabular data fields containing financial information (ie: $) should be right-aligned
• xar-nowrap - some tabular data fields need to wrap, others shouldn't, like dates and line-item options
• xar-floatleft & xar-floatright - if you don't see the value, it is time to stop using tables...
• xar-clearboth - don't forget to follow your floated sections with this to avoid jacking up the layout
• xar-form-text[short|medium|long|xlong|xxlong] - I hate using the EM for units, so I almost always change this in my theme copy to pixel values
• xar-padding-[none|thin|medium|thick] - a simple solution for keeping content away from the edges
• xar-form-label, xar-form-input-wrapper, xar-form-container-after - these you'll find used repeatedly as the default form element wrappers by Xaraya. rather than changing every instance where they are used, try just changing the class definitions for these in your theme; that's what CSS is for.

Once you get familiar with using these, you can also try modifying the navtabs.css file for the Base module (again, in your theme, please) to create a custom menu system that will be re-used throughout the site by Xaraya.

It's all about saving time, because, as developers, none of us really wants to be spending all of our time trying to force designs to fit site templates. After all, that is what designers are supposed to be for, right? Well, until web design becomes regulated in some fashion, we're going to be stuck with web designs created by print designers. If you want to avoid having your project go over budget due to design, it's best to learn every trick you can find for saving time.