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.
77 lines
3.1 KiB
77 lines
3.1 KiB
---
|
|
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>
|