Semantic UI API

This project integrates Drupal with "Semantic UI":- Semantic empowers designers and developers by creating a language for sharing UI.

Core Components

Semantic UI currently comes with :- 12 - UI Elements, 6- UI Collections, 4- UI Views, 11- UI Modules
Documentation is available for all elements @ http://semantic-ui.com/

Requirements:

Libraries API

The common denominator for all Drupal modules/profiles/themes that integrate with external libraries.

Install using Drush:

$drush pm-enable semantic_ui_api
To download library:
$drush suidl
or 
$drush semantic-ui-download

Related

Icon API

This module provides integration for icon bundles and icon providers throughout Drupal, Font Awesome provides Integration of Icons for Icon API.

Existing Support

Icon API

This module provides integration for icon bundles and icon providers throughout Drupal.

How to use it?

Here are three quick ways for using this in Drupal:-

1. Stand Alone: Within HTML:-To use stand alone you can use HTML tag "i" with classes which are available in library. Documentation for these classes is available in Semantic UI website. E.g If you need "Flag" Icon within your Node body field (or any other HTML field), you can use it as < class="icon flag" > </i>
2. With Icon API: As a Icon Bundle for Icon API:To use as a Icon set with Icon API you will need to download and enable Icon API module. Once enabled Semantic UI bundle will be available to be used with Icon API.
3. use it in themes: (developers): Developers can use this library in their themes as they will need to assign proper classes for theme elements (e.g. buttons, textfields,tables, images etc..). I am planning to have a Omega 3/4 subtheme with semantic UI APi support.

   Example usage:-

   /**
    * @desc Implements hook_form_alter()
    * Providing better UI elements support for FORM elements.
    */
   function nws_omega_form_alter(&$form, &$form_state, $form_id) {
     $form['#attributes']['class'][] = 'ui form';
     if (isset($form['actions'])) {
       foreach ($form['actions'] as $action_key => $action) {
         if (isset($action['#type']) && $action['#type'] == 'submit') {
           $form['actions'][$action_key]['#attributes']['class'][] = 'ui teal button secondary';
         }
       }
     }
   }

How it is Different?

Semantic UI not only provides integration with Icon API but also provides a lot of other inbuilt components such as Popups, Form Elements, validations, Buttons, Classic dropdowns, Navigation/Breadcrumb, menus and much more..!

Bootstrap Vs Semantic-UI

Although Bootstrap also provides same things as Semantic UI do, Semantic UI is more like a collection of prepackaged UI elements that work pretty well together with semantic markup that's superior to Bootstrap/Foundation.

For example: <div class="ui large red labeled icon button"> just describes how it looks not how it functions. http://semantic-ui.com/ provides more examples about comparisons between these two.