You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

278 lines
10 KiB

---
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/jlukic/Semantic-UI/blob/master/RELEASE%20NOTES.md">0.9.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" class="ui button"><i class="awesome download cloud icon"></i> Download</a>
</div>
<div class="inverted advertisement">
<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>
</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 ambivalent 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 grid">
<div class="two column row">
<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>
<div class="two column row">
<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>
<div class="two column row">
<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>
<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>
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 Everyday
<div class="sub header">New UI components are written everyday. 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/jlukic/Semantic-UI" class="item">Github</a>
<div class="item">
Made possibly 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>