|
|
---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.7.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>
|
