--- layout : 'default' css : 'index' title : 'Introduction' type : 'Semantic' --- <% uiElements = @getCollection("uiElements").toJSON() %> <% uiCollections = @getCollection("uiCollections").toJSON() %> <% uiViews = @getCollection("uiViews").toJSON() %> <% uiModules = @getCollection("uiModules").toJSON() %>

Semantic UI 0.9.0

UI is the vocabulary of the web.

Semantic empowers designers and developers by creating a language for sharing UI.

View UI Download

Lose the Hieroglyphics
Semantic is structured around natural language conventions to make development more intuitive.

Semantic is tag ambivalent meaning you can use any html tags with UI elements.
Semantic
2
3
Bootstrap
1
2
3
Semantic
Bootstrap
Semantic
Bootstrap

Have a conversation with your components
Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.

Open up your web console.
Semantic provides tracing for javascript behavior so your components can tell you what they're doing as they do it.

$('.kitten.image') .transition('scale in') .transition('tada', '800ms') ;
Learn about modules

Growing Everyday
New UI components are written everyday. Check back soon to see more.

<%= uiElements.length %>
UI Elements
<% for element in uiElements: %> <%= element.title %> <% end %>
<%= uiCollections.length %>
UI Collections
<% for element in uiCollections: %> <%= element.title %> <% end %>
<%= uiViews.length %>
UI Views
<% for element in uiViews: %> <%= element.title %> <% end %>
<%= uiModules.length %>
UI Modules
<% for element in uiModules: %> <%= element.title %> <% end %>