Separating Semantic from the pack
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 its font-size change using a media query.
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.
Interface definitions in Semantic are, with some small exceptions, tag agnostic. 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.
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".
Semantic elements use principles of plurality to express similarities across groups to avoid repetitive declarations.
All UI components share site-wide defaults which let you quickly change the look and feel of components. High level variables make sure you aren't specifying one to one matches with CSS properties.
Semantic components are written in a singular style, but are not part of mandated overarching library. Only like a couple components? No problem. Using our built in build tools you can rebuild on the fly while trying out different themes, or adjust your compiled release to only contain certain components.
UI components in Semantic also are loosely coupled, meaning using several similar components together might also reap additional benefits where their usage intersect. A popup will check for the existence of CSS transition component before using a fallback javascript animations, or including ui input may improve upon the standard input styled inside ui form.
Creating a site in Semantic means you never have to rewrite your codebase from scratch. Redesigning means retooling your UI toolkit, adjusting UI definitions, not creating entirely new HTML layouts.
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.
Have custom UI specific to your company? Add additional element extensions to fit your custom business needs and get the added benefit of a built-in style guide.
This translation is only % complete!
We need your help to make Semantic available to people who speak your language.
Our translation tools are easy to use and allow you to translate text without having to leave the site. If you are interested in joining our translation team please e-mail me for access to our translation hub.
