What's Different

Separating Semantic from the pack

Key Features

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 its font-size change using a media query.

Easy to Learn

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 agnostic

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.

Concise and Expressive

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.

High-Level Theming

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.

Componentized UI

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.

Develop Once, Redesign Infinitely

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.

Only the important stuff

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

Dimmer Message
Dimmer sub-header