Code Grid

CSS is a simple, structured language which fits quite naturally into a grid. The Stylizer code grid is designed specifically for CSS, providing access to real source code while delivering significant productivity gains over a general-purpose text editor.

CSS syntax, though simple, often leads to invisible speed bumps in your workflow. Missing semi-colons and misplaced brackets are common error culprits, and committing to a formatting standard to keep source code clean and readable can be time consuming—especially if different projects mandate different formatting. The code grid allows you to enter CSS at full throttle without considering syntax, while being assured that the code you create will be valid, clean, and correctly formatted. And since the grid uses common CSS syntax characters as shortcut keys, you could literally close your eyes and type CSS as you would in a text editor to enter it into the grid.

Accelerated Input

But the code grid offers productivity wins far and beyond basic CSS syntax handling. For example, you can:

• Receive immediate feedback if CSS is entered incorrectly; each selector, property, and value is verified before it is committed.
• Drill-down into sub-values of shorthand properties, expanding “margin”, “border”, “background” and other shorthands into the sub-properties they encompass.
• Visualize colors in your style sheet with inline color swatches—which, when used in union with the Color picker make for an outstanding combination.
• Turn off certain CSS using the dedicated one-touch disable feature—in Stylizer, comments are used only for commentary.
• Target specific media types and browser versions without needing to know the latest CSS hacks.

Organization

“Visual” CSS editors typically provide a rigid, designer-centric approach to styling, enabling people uncomfortable editing source code to use CSS. Unfortunately, even best-of-breed visual editors are routinely hammered by CSS experts for two primary reasons. First, surrendering control over a style sheet seriously hampers advanced techniques involving layout, positioning and cascading. And second, the more CSS features a visual editor provides access to, the more complicated its UI tends to become. Many require switching between tabs or opening dialogs to make common edits, virtually slaughtering productivity.

The code grid lets you create CSS visually without taking away your freedom to order properties and rules, add comments, or use rare properties in unconventional ways. Its unified concept of “design” and “code” saves time otherwise lost switching between views, and paves the way for Stylizer to temporarily filter and reorder CSS rules at key moments to improve productivity—a feature used by both Bullseye to reveal the priority of rules, and Live Search for spotlight-style searching.

Real-time Preview →