Semantic pulls Web development up by its Bootstrap

Developers often complain that in Web UI frameworks, the labeling used for elements and styling are both hard to parse and hard to work with. Semantic, a new Web framework now in its 1.0 incarnation, is attempting to change that, provided the next generation of Bootstrap itself doesn’t get there first.

Semantic follows in roughly the same tradition as Bootstrap, but with a philosophy meant to make the framework more immediately useful to design-oriented developers. “Writing front-end code shouldn’t require learning the naming or programming conventions of a particular developer,” state its creators.

To that end, Semantic employs what is described as “simple, common language for parts of interface elements, and familiar patterns found in natural languages for describing elements.” For example, there’s the class syntax used to describe one of the elements on Semantic-ui.com’s home page: “ui stackable center aligned very relaxed page grid.”

All the components in the framework, according to the guide at LearnSematic.com, use the em and rem measurements for their sizes, so the element sizes are multiples of the metrics for the base font used on a given page. This makes it easier to resize elements for mobile use. Common Interface definitions, like “article” or “section” don’t affect the way elements render for display.

The CSS used for the framework is variable-controlled via LESS, and a UI API allows for the management of element state, among other controls. Also included is a way to have the URLs for submissions defined using variables and substituted automatically, so those URLs and their parameters don’t have to be hand-coded. Angular, Meteor, and other JavaScript frameworks are also supported.

Semantic UI’s approach to layout can be both more flexible and more verbose than Bootstrap’s. For instance, according to the examples provided for each framework, a breadcrumb navigation element in Bootstrap is implemented using an unordered list or ul HTML tag. In Semantic, it’s created with a div, with “section” and “divider” classes marking up the individual links in the breadcrumb list and the dividers between them. The plus side of Semantic’s approach is that it allows for more detailed inline customizations, but Bootstrap needs far less boilerplate to accomplish the same goal.

Semantic may be at a 1.0 release, but the site that provides documentation and examples for the framework is still raw. Usage examples for the API aren’t available yet, nor have the “themes” and “layouts” sections of the Semantic-ui.com been implemented. Bootstrap, by contrast, already has a full set of documentation and a slew of existing themes, for both its current 3.x and previous 2.0 incarnations.

Plus, some of the innovations touted in Semantic are already being rolled into the next generation of Bootstrap. Bootstrap’s 3.x incarnation doesn’t use em measurements, for instance, but the next version promises to be em-centric, to feature “a new approach to configuring global theming options,” a unified replacement for several existing display components such as panels and wells, and “hundreds more changes across the board.” Many of those changes are still in flux, so an alpha release hasn’t yet been offered, although it’s being promised “in the coming months.”