3.8 KiB
Semantic
Semantic is a set of specifications for sharing UI elements between developers. Semantic is also a UI library, like Bootstrap, made to make front end development simpler.
About
Semantic's goal is to create conventions for html structures and class names of interface elements so that developers can exchange designs for UI components without restructuring their codebase.
Semantic also tries to make web development more easy to learn, by reducing the complexity of html, and providing syntax based on natural language making it easier to define relationships like, singular and plural definitions. nouns and adjectives.
For example here is Semantic's definition of a button
<div class="ui button"></div>
A button can sometimes be active, or selected by the user
<div class="ui active button">
A button may sometimes look different than a simple button.
<div class="ui large blue icon button">
<i class="ui icon heart"></i>
</div>
A button can sometimes exist in a group of buttons
<div class="ui large blue buttons">
<div class="ui button">
I am blue
</div>
<div class="ui button">
I am blue too
</div>
</div>
UI components are split into four categories:
- UI elements
- UI Collections
- UI VIews
- UI Modules
All UI definitions are made of a neutral prototypical definition, a list of states it can occupy, and a set of common variations or "types" of that element.
UI Elements
UI Elements are design elements are most useful to define on a singular level. They may also may be useful sometimes to define in plural. Groups of UI elements are always homogenous.
For example in this case each button does not have to separately be defined as "large":
html <div class="large buttons"> <div class="ui button">Cancel</div> <div class="ui positive button">Continue</div> </div>
Examples of UI elements:
- Buttons
- Labels
- Headers
- Progress bars
UI Collections
UI Collections are groups of heteregeneous UI elements which are usually found together. UI collections do not usually require all elements to be found, but they describe a list of the "usual suspects".Collections are not typically useful to define in plural.
Examples of UI collections:
- Forms
- Tables
- Grids (Layout)
- Menus
UI Views
UI Views are common ways that UI elements are grouped together to display lists of site content. These might be slightly prescriptive, but
UI Modules
UI modules are UI elements where it's behavior is a fundamental part of its definition.
Examples of UI modules:
- Popups
- Modals
- Chatrooms
- Calendar Pickers
Views consist of things like: activity feeds, user lists, product lists.
Semantic is also a UI library, written to match the specification.
Usage
Specification
I want to contribute to the spec
Semantic is very new. Semantic aims to provide class name and structural definitions of all common UI tropes, and there are still lots of components which do not have standards written.
First, look at [foo]zzz
We're currently working to figure ouin coding guidelines.
I want to code a UI component using the semantic standard
Great! It's nice to meet you. Ju
###Library
You can use our build tool to select only the components you want http://semantic-ui.com/download
Or download the whole kit and kaboodle http://semantic-ui.com/ui/semantic.min.css http://semantic-ui.com/ui/semantic.min.js
- Designers: Semantic, provides a standard set of des
- Authors: If you'd like to design elements to be available for other developers, download the author's distribution pack which includes a definition pack to help you start writing custom designs for Semantic.
Why Semantic
HTML is developed by committee. Seman