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>

<div class="masthead segment">
  <div class="ui page grid">
    <div class="column">
      <div class="introduction">
        <h1 class="ui header">Semantic UI <a class="ui black label" href="https://github.com/semantic-org/Semantic-UI/blob/master/RELEASE%20NOTES.md">0.13.0</a></h1>
        <h2 class="ui header">UI is the vocabulary of the web.</h2>
        <p>Semantic empowers designers and developers by creating a language for sharing UI.</p>
        <a class="ui black large labeled launch icon button"><i class="icon list layout"></i> View UI</a>
        <a class="ui red large labeled icon button" href="build/semantic.zip"><i class="awesome download cloud icon"></i> Download</a>
      </div>
      <div class="inverted advertisement">
        <% unless 'development' 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="stripe">
  <div class="ui page grid">
    <div class="ui column">
      <h2 class="ui header">
        <i class="circular emphasized book icon"></i>
        <div class="content">
          Lose the Hieroglyphics
          <div class="sub header">Semantic is structured around natural language conventions to make development more intuitive.
          </div>
        </div>
      </h2>
      <div class="ui message">
        Semantic is tag agnostic meaning you can use <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list" target="_blank">any html tags</a> with UI elements.
      </div>
      <div class="ui stackable two column grid">
        <div class="column">
          <a class="ui teal label" href="/collections/grid.html">Semantic</a>
          <div class="code" data-type="html">
          <main class="ui three column grid">
            <aside class="column">1</aside>
            <section class="column">2</section>
            <section class="column">3</section>
          </main>
          </div>
        </div>
        <div class="column">
          <div class="ui black label">Bootstrap</div>
          <div class="code" data-type="html">
          <div class="row">
            <div class="col-lg-4">1</div>
            <div class="col-lg-4">2</div>
            <div class="col-lg-4">3</div>
          </div>
          </div>
        </div>
        <div class="column">
          <a class="ui teal label" href="/collections/menu.html">Semantic</a>
          <div class="code" data-type="html">
          <nav class="ui menu">
            <h3 class="header item">Title</h3>
            <a class="active item">Home</a>
            <a class="item">Link</a>
            <a class="item">Link</a>
            <span class="right floated text item">
              Signed in as <a href="#">user</a>
            </span>
          </nav>
          </div>
        </div>
        <div class="column">
          <div class="ui black label">Bootstrap</div>
          <div class="code" data-type="html">
          <div class="navbar">
            <a class="navbar-brand" href="#">Title</a>
            <ul class="nav navbar-nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">User</a></p>
            </ul>
          </div>
          </div>
        </div>
        <div class="column">
          <a class="ui teal label" href="/elements/button.html">Semantic</a>
          <div class="code" data-type="html">
          <button class="large ui button">
            <i class="heart icon"></i>
            Like it
          </button>
          </div>
        </div>
        <div class="column">
          <div class="ui black label">Bootstrap</div>
          <div class="code" data-type="html">
          <button type="button" class="btn btn-primary btn-lg">
            <span class="glyphicon glyphicon-heart"></span>
            Like
          </button>
          </div>
        </div>
    </div>
    </div>
  </div>
</div>
<div class="dark stripe">
  <div class="ui page grid">
    <div class="column">
      <h2 class="ui huge inverted center aligned icon header">
        <i class="circular emphasized inverted teal chat outline icon"></i>
        <div class="content">Have a conversation with your components<div class="sub header">Semantic gives you a variety of UI components with real-time debug output, letting your code tell you what its doing.</div>
        </div>
      </h2>
      <div class="ui inverted horizontal section divider">
        <i class="circular heart icon"></i>
      </div>
      <div class="ui stackable grid" data-demo="true">
        <div class="row">
          <div class="ten wide column">
          <div class="ui teal header">Open up your web console.</div>
          <p>Semantic provides tracing for javascript behavior so your components can tell you what they're doing as they do it.</p>
          <div class="code" data-type="javascript" data-demo="true">
          $('.kitten.image')
            .transition('scale in')
            .transition('tada', '800ms')
          ;
          </div>
<!--           <div class="ui raised segment">
            <div class="ui black top attached label">Console</div>
            <pre class="console"></pre>
          </div> -->
          <a href="module.html" class="ui teal right labeled button">Learn about modules <i class="right arrow icon"></i></a>
          </div>
          <div class="five wide right floated column">
            <img src="/images/cat.png" class="ui kitten image">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="stripe" style="display:none">
  <h2 class="ui center aligned icon header">
    <i class="circular emphasized lab icon"></i>
    <div class="content">
      Alter Designs Effortlessly
      <div class="sub header">Redesign without lifting a finger
      </div>
    </div>
  </h2>
<div class="ui page grid">
  <div class="column">
    <h3 class="ui header">Let's create some tabs</h3>
    <div class="code" data-preview="true" data-type="html">
    <div class="ui menu">
      <div class="header item">Site.com</div>
      <a class="item">Browse</a>
      <a class="active item">Search</a>
      <a class="item">Help</a>
    </div>
    <div class="ui segment">
      <p>Tab content</p>
    </div>
    </div>
    <div class="ui divider"></div>
    <h3 class="ui header">Hmm maybe it should point to the content below it</h3>
    <div class="code" data-preview="true" data-type="html">
    <div class="ui pointing menu">
      <div class="header item">Site.com</div>
      <a class="item">Home</a>
      <a class="active item">About</a>
      <a class="item">Contact</a>
    </div>
    <div class="ui segment">
      <p>Tab content</p>
    </div>
    </div>
  </div>
</div>
</div>
<div class="final stripe" >
  <div class="ui page grid">
    <div class="column">
      <h2 class="ui center aligned icon header">
        <i class="circular emphasized users icon"></i>
        <div class="content">Growing Every Day
          <div class="sub header">New UI components are written every day. Check back soon to see more.</div>
        </div>
      </h2>
      <div class="ui horizontal divider">
        <i class="circular heart icon"></i>
      </div>
      <div class="ui stackable grid" data-demo="true">
        <div class="four column center aligned row">
          <div class="column">
            <div class="ui stacked segment">
              <div class="ui statistic">
                <div class="number"><%= uiElements.length %></div>
                <div class="description">UI Elements</div>
              </div>
              <div class="ui divided selection list">
                <% for element in uiElements: %>
                  <a class="item" href="<%= element.url %>"><%= element.title %></a>
                <% end %>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="ui stacked segment">
              <div class="ui statistic">
                <div class="number"><%= uiCollections.length %></div>
                <div class="description">UI Collections</div>
              </div>
              <div class="ui divided selection list">
                <% for element in uiCollections: %>
                  <a class="item" href="<%= element.url %>"><%= element.title %></a>
                <% end %>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="ui stacked segment">
              <div class="ui statistic">
                <div class="number"><%= uiViews.length %></div>
                <div class="description">UI Views</div>
              </div>
              <div class="ui divided selection list">
                <% for element in uiViews: %>
                  <a class="item" href="<%= element.url %>"><%= element.title %></a>
                <% end %>
              </div>
            </div>
          </div>
          <div class="column">
            <div class="ui stacked segment">
              <div class="ui statistic">
                <div class="number"><%= uiModules.length %></div>
                <div class="description">UI Modules</div>
              </div>
              <div class="ui divided selection list">
                <% for element in uiModules: %>
                  <a class="item" href="<%= element.url %>"><%= element.title %></a>
                <% end %>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="ui divider"></div>

<div class="ui divided horizontal footer link list">
  <div class="item">jack lukic 2013</div>
  <a href="https://github.com/semantic-org/Semantic-UI" class="item">Github</a>
  <div class="item">
    Made possible by <a href="http://www.quirky.com" target="_blank">Quirky.com</a>
  </div>
  <div class="item">
    Tested with <a href="http://www.browserstack.com" target="_blank">Browser Stack</a>
  </div>
</div>