---
layout : 'default'
css    : 'index'
title  : 'Introduction'
type   : 'Semantic'
---

<script src="/javascript/home.js"></script>
<link rel="stylesheet" type="text/css" href="/stylesheets/home.css">
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/button.less" />

<div class="following bar">
  <div class="ui page grid">
    <div class="column">
      <img src="/images/logo.png" class="logo">
      <div class="ui large inverted right floated secondary menu">
        <div class="ui language floating dropdown item" id="languages">
          <i class="world icon"></i>
          <div class="text">Select Language</div>
          <%- @partial('languages') %>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="zoomed masthead segment">
  <div class="ui page grid">
    <div class="column">
      <div class="introduction">
        <a class="ui black version label" href="https://github.com/semantic-org/Semantic-UI/blob/1.0/RELEASE%20NOTES.md">
          1.0.0 Beta
        </a>
        <h1 class="ui inverted header">
          <span class="library">
            Semantic UI
          </span>
          <b data-text="User Interface">HTML</b>
          <span class="typed-cursor">|</span>
          <span class="text">is the vocabulary of the web.</span>
        </h1>
        <div class="ui hidden divider"></div>
        <a href="/build/semantic.zip" class="ui huge basic inverted teal download button">
          Download Now
          <i class="right chevron icon"></i>
        </a>
      </div>
      <div class="inverted advertisement">
        <% unless 'developments' in @getEnvironments(): %>
        <div id="carbonads-container">
          <div class="carbonad">
            <div id="azcarbon"></div>
            <script type="text/javascript">var z = document.createElement("script"); z.type = "text/javascript"; z.async = true; z.src = "http://engine.carbonads.com/z/51619/azcarbon_2_1_0_VERTDARK"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script>
          </div>
        </div>
        <% end %>
      </div>
    </div>
  </div>
</div>
<div class="ui vertical stripe segment">
  <div class="ui stackable very relaxed two column page grid">
    <div class="column">
      <h1 class="ui icon header">
        <img src="/images/icons/theming.png" class="ui icon image">
        Unbelievable Theming
      </h1>
      <p>Semantic provides true design freedom. Change the look and feel of your components with just a few variables.</p>
    </div>
    <div class="column">
      <div data-type="element" data-element="button" class="ui large floating dropdown theme button">
        <span class="text">Select Theme</span>
        <i class="dropdown icon"></i>
        <div class="menu ui transition hidden" tabindex="-1">
          <div data-value="Default" class="item">Default</div>
          <div data-value="Amazon" class="item">Amazon</div>
          <div data-value="Google" class="item">Google</div>
          <div data-value="GitHub" class="item">GitHub</div>
          <div data-value="Raised" class="item">Raised</div>
          <div data-value="Chubby" class="item">Chubby</div>
          <div data-value="Classic" class="item">Classic</div>
        </div>
      </div>
      <div class="ui divider"></div>
      <div class="ui button">
        View
      </div>
      <div class="ui primary button">
        <i class="shop icon"></i> Add to Cart
      </div>
      <div class="ui secondary button">
        <i class="save icon"></i> Save for Later
      </div>
      <div class="ui labeled icon button">
        <i class="star icon"></i>
        Rate
      </div>
      <div class="ui buttons">
        <div class="ui button">1</div>
        <div class="ui button">2</div>
        <div class="ui button">3</div>
      </div>
    </div>
  </div>
</div>
<div class="feature alternate ui vertical stripe segment">
  <div class="ui three column equal height center aligned divided relaxed stackable page grid">
    <div class="column">
      <h2 class="ui icon header">
        <img class="ui icon image" src="/images/icons/paint.png">
        3000+ CSS Variables
      </h2>
      <p>The only dogma from this framework: <em>everything arbitrary is mutable</em>.</p>
      <div class="ui disabled button">View Themes</div>
    </div>
    <div class="column">
      <h2 class="ui icon header">
        <img class="ui icon image" src="/images/icons/book.png">
        50+ UI Definitions
      </h2>
      <p>Build your entire site with one UI stack. Share your UI between multiple projects.</p>
      <div class="ui primary view-ui button">Browse UI</div>
    </div>
    <div class="column">
      <h2 class="ui icon header">
        <img class="ui icon image" src="/images/icons/glasses.png">
        2200+ Commits
      </h2>
      <p>
        Semantic UI is a <b>free open source</b> project already used in multiple <a href="http://www.quirky.com" target="_blank">large</a> scale <a href="http://www.newrepublic.com" target="_blank">production</a> environments.
      </p>
      <a href="https://github.com/Semantic-Org/Semantic-UI/issues" class="ui button">Visit GitHub</a>
    </div>
  </div>
</div>
<div class="ui vertical stripe segment">
  <div class="ui stackable very relaxed page grid">
    <div class="twelve wide center aligned centered column">
      <h1 class="ui icon header">
        <img src="/images/icons/toolbox.png" class="ui icon image">
        Unbelievable Breadth
      </h1>
      <p>Definitions aren't limited to just buttons on a page. Semantic's components fall into four categories, elements, collections, modules, and views which cover the gamut of interface design.</p>
    </div>
    <div class="three column demo row">
      <div class="column">
        <div class="no example">
          <h4 class="ui header">
            <a href="/collections/menu.html">Menu</a>
          </h4>
          <%- @partial('examples/menu') %>
        </div>
        <div class="no example">
          <h4 class="ui header">
            <a href="/modules/accordion.html">Divider</a>
          </h4>
          <%- @partial('examples/divider') %>
        </div>
        <div class="no example">
          <h4 class="ui header">
            <a href="/modules/accordion.html">Accordion</a>
          </h4>
          <%- @partial('examples/accordion') %>
        </div>
        <div class="no example">
          <h4 class="ui header">
            <a href="/collections/message.html">Message</a>
          </h4>
          <%- @partial('examples/message') %>
        </div>
      </div>
      <div class="column">
        <div class="no example">
          <h4 class="ui header">
            <a href="/views/card.html">Card</a>
          </h4>
          <%- @partial('examples/card') %>
        </div>
        <div class="no example">
          <h4 class="ui header">
            <a href="/views/feed.html">Feed</a>
          </h4>
          <%- @partial('examples/feed') %>
        </div>
        <div class="no example">
          <h4 class="ui header">
            <a href="/elements/label.html">Label</a>
          </h4>
          <%- @partial('examples/label') %>
        </div>
        <div class="no example">
          <h4 class="ui header">
            <a href="/elements/step.html">Step</a>
          </h4>
          <%- @partial('examples/step') %>
        </div>
      </div>
      <div class="column">
        <div class="no example">
          <h4 class="ui header">
            <a href="/modules/dropdown.html">Dropdown</a>
          </h4>
          <%- @partial('examples/dropdown') %>
        </div>
        <div class="no example">
          <h4 class="ui header">
            <a href="/elements/progress.html">Progress</a>
          </h4>
          <%- @partial('examples/progress') %>
        </div>
        <div class="no segment example">
          <h4 class="ui header">
            <a href="/elements/segment.html">Segment</a>
          </h4>
          <%- @partial('examples/segment') %>
        </div>
        <div class="no example">
          <h4 class="ui header">
            <a href="/elements/input.html">Input</a>
          </h4>
          <%- @partial('examples/input') %>
        </div>
        <div class="no example">
          <h4 class="ui header">
            <a href="/modules/checkbox.html">Checkbox</a>
          </h4>
          <%- @partial('examples/checkbox') %>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- <div class="ui vertical email stripe segment">
  <div class="ui center aligned page grid">
    <div class="column">
      <p>
        Semantic is growing fast. Want to see just how much? Sign up and we'll let you know</p>
      <form method="post" action="http://www.nogo.com">
        <div class="ui huge input" style="margin:0 auto">
          <input type="text" placeholder="E-mail">
        </div>
        <button type="submit" class="ui huge secondary submit button">
          Sign-up
        </button>
      </form>
    </div>
  </div>
</div> -->
<div class="ui vertical inverted stripe segment">
  <div class="ui stackable center aligned very relaxed page grid">
    <div class="twelve wide column">
      <h1 class="ui inverted icon header">
        <img src="/images/icons/pen.png" class="icon image">
        Simplify Your Codebase
      </h1>
      <p>Semantic's design is based around <a target="_blank" href="https://www.princeton.edu/~achaney/tmve/wiki100k/docs/Descriptive_linguistics.html"><em>common usage</em></a>, using features of natural language like, plurality, tense, and word order to make your code self-explanatory.</p>
      <div class="hidden code" data-type="html">
        <div class="ui stackable center aligned very relaxed page grid">
          <div class="twelve wide column">
            <h1 class="ui inverted icon header">
              <img src="/images/icons/pen.png" class="icon image">
              Simplify Your Codebase
            </h1>
            <p>Semantic's design is based around <a target="_blank"><em>common usage</em></a>, using features of natural language like, plurality, tense, and word order to make your code self-explanatory.
            </p>
            <!-- Recursion Omitted (Turtles all the way down) !-->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="ui vertical stripe segment">
  <div class="ui stackable center aligned page grid">
    <div class="twelve wide column">
      <h1 class="ui icon header">
        <img class="ui inline icon image" src="/images/icons/rocket.png">
        Liberate your Development
      </h1>
      <div class="ui two column stackable center aligned vertically padded grid">
        <div class="column">
          <h3 class="ui header">Enterprise Ready</h3>
          <p>Build tools, performance logging, support for custom definitions, multiple-levels of theme inheritanceance—a developer's wet dream.</p>
          <a class="ui large right disabled labeled icon button">
            <i class="right chevron icon"></i>
            View Expert Guide
          </a>
        </div>
        <div class="column">
          <h3 class="ui header">Beginner Friendly</h3>
          <p>Don't feel comfortable tweaking everything? Download free community designed themes and use our customizer to build a package fit for your needs.</p>
          <a class="ui large right disabled labeled icon button">
            <i class="right chevron icon"></i>
            View Basic Guide
          </a>
        </div>
      </div>
    </div>
  </div>
</div>