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.
279 lines
10 KiB
279 lines
10 KiB
---
|
|
layout : 'default'
|
|
css : 'index'
|
|
title : 'Getting Started'
|
|
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.8.1</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" class="item">Quirky.com</a>
|
|
</div>
|
|
<div class="item">
|
|
Tested with <a href="http://www.browserstack.com" target="_blank" class="item">Browser Stack</a>
|
|
</div>
|
|
</div>
|