Skip to content

Latest commit

 

History

History
117 lines (103 loc) · 2.92 KB

semantic-ui.md

File metadata and controls

117 lines (103 loc) · 2.92 KB
Raw

Semantic UI online editor

Write, Run & Share Semantic UI code online using OneCompiler's Semantic UI online editor for free. It's one of the robust, feature-rich online editor for Semantic UI. Getting started with the OneCompiler's Semantic UI online editor is really simple and pretty fast. The editor shows sample boilerplate code when you choose language as 'Semantic UI' and start writing code to learn and test online instantly.

About Semantic UI

Semantic UI is a modern framework for front end web development, powered by LESS and jQuery. It uses semantic class names for styling the elements and hence beginners find it very easy to use Semantic UI framework. It helps developers to develop websites faster and also provides light weight user experience. You can use built-in classes which are available hence you don't need to develop elements from scratch.

Syntax help

Button

<button class="ui primary basic button">Primary</button>
<button class="ui secondary basic button">Secondary</button>
<button class="ui positive basic button">Positive</button>
<button class="ui negative basic button">Negative</button>
<button class="ui purple basic button">Purple</button>

Icon

<!-- This is an icon -->
<i class="upload icon"></i>

Container

<div class="ui four column doubling stackable grid container">
  <div class="column">
    <p></p>
    <p></p>
  </div>
  <div class="column">
    <p></p>
    <p></p>
  </div>
  <div class="column">
    <p></p>
    <p></p>
  </div>
  <div class="column">
    <p></p>
    <p></p>
  </div>
</div>

Image

<div class="ui small image">
  <img src="/images/wireframe/image.png">
</div>

List

<div class="ui list">
  <div class="item">Apples</div>
  <div class="item">Pears</div>
  <div class="item">Oranges</div>
</div>

Grid

<div class="ui grid">
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="two wide column"></div>
  <div class="eight wide column"></div>
  <div class="six wide column"></div>
</div>

Breadcrumb

<div class="ui breadcrumb">
  <a class="section">Home</a>
  <div class="divider"> / </div>
  <a class="section">Store</a>
  <div class="divider"> / </div>
  <div class="active section">T-Shirt</div>
</div>

Form

<div class="ui form">
  <div class="field">
    <label>User Input</label>
    <input type="text">
  </div>
</div>

Dropdown

<div class="ui floating dropdown labeled search icon button">
  <i class="world icon"></i>
  <span class="text">Select Language</span>
  <div class="menu">
    <div class="item">English</div>
    <div class="item">French</div>
    <div class="item">German</div>
    <div class="item">Russian</div>
    </div>
</div>

Popup

<div class="ui icon button" data-content="Provide data">
  <i class="add icon"></i>
</div>