SemanSemantic-UItic-UI/server/documents/index.html.eco

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

<% uiElements    = @getCollection("uiElements").toJSON() %>
<% uiCollections = @getCollection("uiCollections").toJSON() %>
<% uiViews       = @getCollection("uiViews").toJSON() %>
<% uiModules     = @getCollection("uiModules").toJSON() %>
<script src="/javascript/home.js"></script>
<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/share.png" class="logo">
      <a class="ui pointing left teal version label" href="https://github.com/semantic-org/Semantic-UI/blob/css/RELEASE%20NOTES.md">
        Version 1.0.0 Beta
      </a>
      <div class="ui large inverted right floated secondary menu">
        <div class="ui language top right pointing dropdown item" id="languages">
          <i class="world icon"></i>
          <div class="text">Language</div>
          <div class="menu">
            <div class="item" data-percent="100" data-value="en">English</div>
            <div class="item" data-percent="19" data-value="nl">Nederlands</div>
            <div class="item" data-percent="19" data-value="hu">Magyar</div>
            <div class="item" data-percent="8" data-value="ar">العربية</div>
            <div class="item" data-percent="0" data-value="pt_BR">Português</div>
            <div class="item" data-percent="0" data-value="tr">Türkçe</div>
            <div class="item" data-percent="0" data-value="es">Español</div>
            <div class="item" data-percent="0" data-value="ru">Русский</div>
            <div class="item" data-percent="0" data-value="de">Deutsch</div>
            <div class="item" data-percent="0" data-value="fr">Français</div>
            <div class="item" data-percent="0" data-value="ja">日本語</div>
            <div class="item" data-percent="0" data-value="zh">简体中文</div>
            <div class="item" data-percent="0" data-value="kr">한국어</div>
            <div class="item" data-percent="0" data-value="it">Italiano</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="masthead segment">
  <div class="ui page grid">
    <div class="column">
      <div class="introduction">
        <h1 class="ui inverted header">
          <b>UI</b>
          <span class="text">is the DNA 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="feature stripe">
  <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/Brush.png">
        3000+ CSS Variables
      </h2>
      <p>The only dogma from this framework: everything arbitrary is mutable.</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-2.png">
        50+ UI Definitions
      </h2>
      <p>Build your entire site with one UI stack. Extend using a common style.</p>
      <div class="ui primary 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>Developed over several years. Already used in multiple large scale production environments you <a href="http://www.quirky.com" target="_blank">may</a> have <a href="http://www.newrepublic.com" target="_blank">heard</a> of.</p>
      <a href="https://github.com/Semantic-Org/Semantic-UI/issues" class="ui button">Visit GitHub</a>
    </div>
  </div>
</div>
<div class="alternate stripe">
  <div class="ui stackable very relaxed two column page grid">
    <div class="column">
      <h1 class="ui icon header">
        <img src="/images/icons/Love.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 theme dropdown 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="Classic" class="item">Classic</div>
          <div data-value="Basic" class="item">Basic</div>
          <div data-value="Raised" class="item">Raised</div>
          <div data-value="Chubby" class="item">Chubby</div>
          <div data-value="Round" class="item">Round</div>
          <div data-value="Amazon" class="item">Amazon</div>
          <div data-value="GitHub" class="item">GitHub</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="email stripe">
  <div class="ui center aligned page grid">
    <div class="column">
      <h2 class="ui header">
        Get Updates
      </h2>
      <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="inverted stripe">
  <div class="ui stackable one column center aligned very relaxed page grid">
    <div class="column">
      <h1 class="ui inverted icon header">
        <i class="conversation icon"></i>
        Code Intuitively
      </h1>
      <p>Semantic uses concepts similar to nouns, adjectives , and tense to create UI definitions. Making your code highly scannable.</p>
      <div class="code" data-type="html">
        <div class="ui stackable one column center aligned very relaxed page grid">
          <div class="column">
            <h1 class="ui inverted icon header">
              <i class="conversation icon"></i>
              Code Intuitively
            </h1>
            <p>
              Semantic uses concepts like nouns (types), adjectives (variations), and tense (states) to create UI definitions
            </p>
            <!-- Recursion Omitted (Turtles all the way down) !-->
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="stripe">
  <div class="ui stackable center aligned page grid">
    <div class="ten wide column">
      <h1 class="ui icon header">
        <img class="ui inline icon image" src="/images/icons/Spaceship.png">
        Liberate your Development
      </h1>
      <div class="ui two column 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 button">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 button">View Basic Guide</a>
        </div>
      </div>
    </div>
  </div>
</div>