Every component is defined using
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 input may improve upon the standard input styled inside
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.
Next: Download Semantic