I love seeing our clients get excited about the new features that come with each release of the Titan CMS Content Management System. Just now, they’re amped up about the new Drag and Drop File Uploads and ReFlex, our stunning new responsive template.
They generally don’t get so fired up about the 40+ bug fixes and API improvements that come along for the ride. But we do. Stay with me, here; you really do want to know about five huge back-end improvements.
For several years, we’ve produced striped designs, which create visual separation in the sections of long content pages. Typically, stripes take the form of a solid color or background image that stretches the full width of the browser as page content stays within a set boundary.
Figure 1 The Northwoods website uses a striped design with a textured background image to segment content
The CSS float property is widely used for building multi-column responsive layouts. While floats were never intended for this task, browser support for floats goes back to Internet Explorer 4. Front-end designers have gobs of experience working around the “nuances” of clearing floats, calculating widths and equalizing container heights. The future is bright; modern browsers are adopting Flexible Box layout mode. But until adoption is complete, we continue to push forward with our tried and true methods.
When we started building responsive designs for Titan CMS, we established a practice of using CSS classes that define specific percentage widths to give authors and editors the ability to establish their own two-, three- and four-column layouts. If you want three equal columns, each block gets the Float33 class and you’re done. If you want to switch things up and have a two-column stripe, each block gets Float50 and you’re done. Easy, right?
Figure 2 Create a 3-column display using the Float33 class on blocks
3. CSS Preprocessing and CSS Custom Properties
CSS Preprocessors, such as Sass and Less, exist to extend the CSS language to give developers the ability to write more maintainable CSS code. They have become very popular among front-end developers. While CSS Preprocessors vary in their functionality, all can establish variables.
In a typical design, you might have the RGB or HEX values of your primary and secondary brand colors in a dozen places. You might have the main font specified in several places. You might have a smattering of light grays here and a slew of dark grays there. In these situations, variables in CSS would be immensely helpful. The ability to define a property once and reuse it throughout your code could save hours of work when the time comes to rebrand your site and change those colors and fonts.
The widespread use of CSS Preprocessors has impacted the Standards Community and Browser developers, and that’s good. CSS Custom Properties (also called CSS Variables) are now a native feature of CSS in modern desktop and mobile browsers, including Microsoft Edge.
But they aren’t supported in any version of Internet Explorer, and that’s bad. I’m not here to badmouth IE. I simply want you to understand the future is bright, and that bright future means Titan CMS has a lot to offer CSS programmers.
Until the day when all browsers handle CSS Custom Properties natively, Titan CMS has your back. Through a simple back-end preprocessor, Titan CMS handles variable substitution in CSS files by using the syntax prescribed by the working draft of the specification. In fact, we use variables heavily in ReFlex, our new responsive theme, so that we can offer it as a Variable Color theme. That means you can spin up your own version of ReFlex, with different colors, in a matter of minutes.
Figure 3 Using CSS Custom Properties and the var() function in CSS code
4. CSS Minification and High Performance
We have integrated a minification routine into Titan CMS’s CSS Preprocessor. The routine removes comments and extra whitespace to produce an optimized CSS file at the time the browser requests the resource. The minified code is cached in server memory for faster delivery on subsequent requests by other site visitors.
Figure 4 This sample CSS code is easier to maintain and understand given the formatting and comments
Figure 5 The same CSS minified is faster to download and parse and functions the same
Beyond the speed improvement, our approach to on-the-fly optimization in Titan CMS makes it possible to keep the original formatting of the CSS code. This matters to Titan CMS users who view or modify theme CSS code through the workstation. Readability and inline comments are essential for anyone maintaining code.
This and every release of Titan CMS offers more than meets the eye. Thanks for taking a moment to look under the hood with me, to see the hidden improvements that make Titan CMS an ever more powerful tool.
Originally Published: Wed, August 02, 2017