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.
280 lines
11 KiB
280 lines
11 KiB
---
|
|
layout : 'default'
|
|
css : 'index'
|
|
title : 'Introduction'
|
|
type : 'Semantic'
|
|
---
|
|
|
|
<script src="/javascript/home.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="/stylesheets/home.css">
|
|
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/button.less" />
|
|
|
|
<div class="following bar">
|
|
<div class="ui page grid">
|
|
<div class="column">
|
|
<img src="images/logo.png" class="logo">
|
|
<div class="ui large inverted right floated secondary menu">
|
|
<div class="ui language floating dropdown item" id="languages">
|
|
<i class="world icon"></i>
|
|
<div class="text">Select Language</div>
|
|
<%- @partial('languages') %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="zoomed masthead segment">
|
|
<div class="ui page grid">
|
|
<div class="column">
|
|
<div class="introduction">
|
|
<a class="ui black version label" href="https://github.com/semantic-org/Semantic-UI/blob/1.0/RELEASE%20NOTES.md">
|
|
1.0.0 Beta
|
|
</a>
|
|
<h1 class="ui inverted header">
|
|
<span class="library">
|
|
Semantic UI
|
|
</span>
|
|
<b data-text="User Interface">HTML</b>
|
|
<span class="typed-cursor">|</span>
|
|
<span class="text">is the vocabulary of the web.</span>
|
|
</h1>
|
|
<div class="ui hidden divider"></div>
|
|
<a href="/build/semantic.zip" class="ui huge basic inverted teal download button">
|
|
Download Now
|
|
<i class="right chevron icon"></i>
|
|
</a>
|
|
</div>
|
|
<div class="inverted advertisement">
|
|
<% unless 'developments' 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="ui vertical stripe segment">
|
|
<div class="ui stackable very relaxed two column page grid">
|
|
<div class="column">
|
|
<h1 class="ui icon header">
|
|
<img src="/images/icons/theming.png" class="ui icon image">
|
|
Unbelievable Theming
|
|
</h1>
|
|
<p>Semantic provides true design freedom. Change the look and feel of your components with just a few variables.</p>
|
|
</div>
|
|
<div class="column">
|
|
<div data-type="element" data-element="button" class="ui large floating dropdown theme button">
|
|
<span class="text">Select Theme</span>
|
|
<i class="dropdown icon"></i>
|
|
<div class="menu ui transition hidden" tabindex="-1">
|
|
<div data-value="Default" class="item">Default</div>
|
|
<div data-value="Amazon" class="item">Amazon</div>
|
|
<div data-value="GitHub" class="item">GitHub</div>
|
|
<div data-value="Raised" class="item">Raised</div>
|
|
<div data-value="Chubby" class="item">Chubby</div>
|
|
<div data-value="Classic" class="item">Classic</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui divider"></div>
|
|
<div class="ui button">
|
|
View
|
|
</div>
|
|
<div class="ui primary button">
|
|
<i class="shop icon"></i> Add to Cart
|
|
</div>
|
|
<div class="ui secondary button">
|
|
<i class="save icon"></i> Save for Later
|
|
</div>
|
|
<div class="ui labeled icon button">
|
|
<i class="star icon"></i>
|
|
Rate
|
|
</div>
|
|
<div class="ui buttons">
|
|
<div class="ui button">1</div>
|
|
<div class="ui button">2</div>
|
|
<div class="ui button">3</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="feature alternate ui vertical stripe segment">
|
|
<div class="ui three column equal height center aligned divided relaxed stackable page grid">
|
|
<div class="column">
|
|
<h2 class="ui icon header">
|
|
<img class="ui icon image" src="/images/icons/paint.png">
|
|
3000+ CSS Variables
|
|
</h2>
|
|
<p>The only dogma from this framework: <em>everything arbitrary is mutable</em>.</p>
|
|
<div class="ui disabled button">View Themes</div>
|
|
</div>
|
|
<div class="column">
|
|
<h2 class="ui icon header">
|
|
<img class="ui icon image" src="/images/icons/book.png">
|
|
50+ UI Definitions
|
|
</h2>
|
|
<p>Build your entire site with one UI stack. Share your UI between multiple projects.</p>
|
|
<div class="ui primary view-ui button">Browse UI</div>
|
|
</div>
|
|
<div class="column">
|
|
<h2 class="ui icon header">
|
|
<img class="ui icon image" src="/images/icons/glasses.png">
|
|
2200+ Commits
|
|
</h2>
|
|
<p>
|
|
Semantic UI is a <b>free open source</b> project already used in multiple <a href="http://www.quirky.com" target="_blank">large</a> scale <a href="http://www.newrepublic.com" target="_blank">production</a> environments.
|
|
</p>
|
|
<a href="https://github.com/Semantic-Org/Semantic-UI/issues" class="ui button">Visit GitHub</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui vertical stripe segment">
|
|
<div class="ui stackable very relaxed page grid">
|
|
<div class="twelve wide center aligned centered column">
|
|
<h1 class="ui icon header">
|
|
<img src="/images/icons/toolbox.png" class="ui icon image">
|
|
Unbelievable Breadth
|
|
</h1>
|
|
<p>Definitions aren't limited to just buttons on a page. Semantic's components fall into four categories, elements, collections, modules, and views which cover the gamut of interface design.</p>
|
|
</div>
|
|
<div class="three column demo row">
|
|
<div class="column">
|
|
<div class="no example">
|
|
<h4 class="ui header">
|
|
<a href="/modules/accordion.html">Accordion</a>
|
|
</h4>
|
|
<%- @partial('examples/accordion') %>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">
|
|
<a href="/elements/step.html">Step</a>
|
|
</h4>
|
|
<%- @partial('examples/step') %>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">
|
|
<a href="/elements/input.html">Input</a>
|
|
</h4>
|
|
<%- @partial('examples/input') %>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">
|
|
<a href="/elements/label.html">Label</a>
|
|
</h4>
|
|
<%- @partial('examples/label') %>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">
|
|
<a href="/collections/message.html">Message</a>
|
|
</h4>
|
|
<%- @partial('examples/message') %>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="no example">
|
|
<h4 class="ui header">
|
|
<a href="/views/card.html">Card</a>
|
|
</h4>
|
|
<%- @partial('examples/card') %>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">
|
|
<a href="/views/feed.html">Feed</a>
|
|
</h4>
|
|
<%- @partial('examples/feed') %>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="no example">
|
|
<h4 class="ui header">
|
|
<a href="/modules/dropdown.html">Dropdown</a>
|
|
</h4>
|
|
<%- @partial('examples/dropdown') %>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">
|
|
<a href="/elements/segment.html">Segment</a>
|
|
</h4>
|
|
<%- @partial('examples/segment') %>
|
|
</div>
|
|
<div class="no example">
|
|
<h4 class="ui header">
|
|
<a href="/modules/checkbox.html">Checkbox</a>
|
|
</h4>
|
|
<%- @partial('examples/checkbox') %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- <div class="ui vertical email stripe segment">
|
|
<div class="ui center aligned page grid">
|
|
<div class="column">
|
|
<p>
|
|
Semantic is growing fast. Want to see just how much? Sign up and we'll let you know</p>
|
|
<form method="post" action="http://www.nogo.com">
|
|
<div class="ui huge input" style="margin:0 auto">
|
|
<input type="text" placeholder="E-mail">
|
|
</div>
|
|
<button type="submit" class="ui huge secondary submit button">
|
|
Sign-up
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<div class="ui vertical inverted stripe segment">
|
|
<div class="ui stackable center aligned very relaxed page grid">
|
|
<div class="twelve wide column">
|
|
<h1 class="ui inverted icon header">
|
|
<img src="/images/icons/pen.png" class="icon image">
|
|
Simplify Your Codebase
|
|
</h1>
|
|
<p>Semantic's design is based around <a target="_blank" href="https://www.princeton.edu/~achaney/tmve/wiki100k/docs/Descriptive_linguistics.html"><em>common usage</em></a>, using features of natural language like, plurality, tense, and word order to make your code self-explanatory.</p>
|
|
<div class="hidden code" data-type="html">
|
|
<div class="ui stackable center aligned very relaxed page grid">
|
|
<div class="twelve wide column">
|
|
<h1 class="ui inverted icon header">
|
|
<img src="/images/icons/pen.png" class="icon image">
|
|
Simplify Your Codebase
|
|
</h1>
|
|
<p>Semantic's design is based around <a target="_blank"><em>common usage</em></a>, using features of natural language like, plurality, tense, and word order to make your code self-explanatory.
|
|
</p>
|
|
<!-- Recursion Omitted (Turtles all the way down) !-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui vertical stripe segment">
|
|
<div class="ui stackable center aligned page grid">
|
|
<div class="twelve wide column">
|
|
<h1 class="ui icon header">
|
|
<img class="ui inline icon image" src="/images/icons/rocket.png">
|
|
Liberate your Development
|
|
</h1>
|
|
<div class="ui two column stackable center aligned vertically padded grid">
|
|
<div class="column">
|
|
<h3 class="ui header">Enterprise Ready</h3>
|
|
<p>Build tools, performance logging, support for custom definitions, multiple-levels of theme inheritanceance—a developer's wet dream.</p>
|
|
<a class="ui large right disabled labeled icon button">
|
|
<i class="right chevron icon"></i>
|
|
View Expert Guide
|
|
</a>
|
|
</div>
|
|
<div class="column">
|
|
<h3 class="ui header">Beginner Friendly</h3>
|
|
<p>Don't feel comfortable tweaking everything? Download free community designed themes and use our customizer to build a package fit for your needs.</p>
|
|
<a class="ui large right disabled labeled icon button">
|
|
<i class="right chevron icon"></i>
|
|
View Basic Guide
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|