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

<div class="masthead segment">
  <div class="container">
    <h1 class="ui header"><i class="icon book"></i>Semantic UI</h1>
    <h2 class="ui header">UI is the DNA of the web.</h2>
    <p>Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.</p>
    
      <a class="ui red large labeled icon button" href="download.html" class="ui button"><i class="icon upload"></i> Download</a>
      <a class="ui black large labeled icon button" href="#" class="ui button"><i class="icon terminal"></i> Try it out</a>
    
  </div>
</div>

<div class="solid">
  <div class="container ui three divided column stackable grid">
    <div class="column"> 
      <h1 class="ui icon header">
        <i class="icon emphasized inverted red circular community"></i> 
        Made for Everyone
      </h1>
      <p>Code written in Semantic is based on natural language, making it easy to understand and learn.</p>
    </div>
    <div class="column">
      <h1 class="ui icon header">
        <i class="icon emphasized inverted circular paint"></i> 
        Design Portably
      </h1>
      <p>Semantic defines an exchange format for UI, so swapping out designs doesn't mean rewriting your site's codebase.</p>
    </div>
    <div class="column">
      <h1 class="ui icon header">
        <i class="icon emphasized inverted teal circular terminal"></i> 
        Pro Tools
      </h1>
      <p>UI Modules all come with debugging and performance tools to help make sure they perform lightning fast.</p>
    </div>
  </div>
</div>
<div class="stripe">
  <div class="container ui stackable grid">
      <div class="row">
        <div class="seven wide column">
          <h2 class="ui header"><i class="icon info"></i> Get Started</h2>
          <p>Learn about how to get started with Semantic UI, and best practices for using the Semantic standard in your project.</p>
          <div class="ui small secondary button">Learn more <i class="right arrow icon"></i></div>
        </div>
        <div class="seven wide column">
          <h2 class="ui header"><i class="icon paint"></i> See UI elements</h2>
          <p>See some of the UI elements that the Semantic library has to offer.</p>
          <div class="ui small secondary button">View Library <i class="right arrow icon"></i></div>
        </div>
      </div>
    <div class="row">
      <div class="seven wide column">
        <h2 class="ui header"><i class="icon terminal"></i> Author Elements </h2>
        <p>Learn about developing and releasing your own skins UI skins.</p>
        <div class="ui small secondary button">Authoring Guide <i class="right arrow icon"></i></div>
      </div>
      <div class="seven wide column">
        <h2 class="ui header"><i class="icon edit"></i> Help Write the Spec </h2>
        <p>Semantic is a living spec. We need the communitys help to reach our full potential. Help Semantic develop specifications for missing UI elements.</p>
        <div class="ui small secondary button">Contribute <i class="right arrow icon"></i></div>
      </div>
    </div>
  </div>
</div>


</body>

</html>