Build Responsive Layouts Easier
Designed Completely with EM
Every component is defined using em and rem so that components can be resized simply on the fly. Want a menu to get smaller on mobile? Simply have it's font-size change using a media query.
Self Explanatory
Descriptive not Prescriptive
Writing front end code shouldn't require learning the naming or programming conventions of a particular developer.
Instead of using short-hand, or codifying naming conventions, Semantic uses simple, common language for parts of interface elements, and familiar patterns found in natural languages for describing elements.
Tag ambivalent
Use whatever html tags you please.
Interface definitions in Semantic are tag ambivalent. That means you can use div, article, section, span without affecting the display of the element. Special tags like a, table, td still carry special meaning in certain circumstances however.
Powerful tools for expressing groups and collections.
Don't repeat yourself
In English it's much easier to say "There are three tall men" than "There is a tall man, a tall man and a tall man".
In Semantic element definitions can be expressed in groups have shared attributes like size, color, type avoiding repetitive declarations.
Portable and self-contained.
Using Semantic doesn't mean adopting an entire framework, or rewriting your code base
Semantic components are written in a singular style, but are not part of mandated overarching library. Only like a couple components? No problem, use only what you need.
UI components in Semantic also define optional and required couplings with other components where their usage intersect. That means for example, a popup can check for the existence of CSS animation component before using the fallback javascript animations.
Shared language, different implementations
Restyle your site without Restructuring it
Describing your site's content using a common language like Semantic allows other developers to create UI definitions to match one shared vocabulary. This means you can redesign your website without retooling your html. Simply alter the look and feel of your UI using a different UI style definition.
Only the important stuff
Not the kitchen sink
Instead of giving every possible variation or behavior under the sun, element definitions are designed to be a starting off point. No oversized downloads with optional features you will most likely never use, just the stuff to get you going.