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.
87 lines
3.1 KiB
87 lines
3.1 KiB
---
|
|
layout : 'default'
|
|
css : 'index'
|
|
title : 'Introduction'
|
|
type : 'Semantic'
|
|
---
|
|
|
|
<div class="masthead segment">
|
|
<div class="container">
|
|
<h1><i class="icon th-alt"></i>Semantic UI</h1>
|
|
<h2><strike>HTML</strike> UI is the language of the web.</h2>
|
|
<p>Semantic empowers designers and developers by creating a shared vocabulary for user interfaces.</p>
|
|
|
|
<div class="ui two fluid black buttons">
|
|
<a href="#" class="ui button"><i class="icon cloud"></i> Download</a>
|
|
<a href="#" class="ui button"><i class="icon terminal"></i> Customize</a>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="solid">
|
|
<div class="container ui three column grid">
|
|
<div class="column">
|
|
<h1 class="ui icon header">
|
|
<i class="icon users"></i>
|
|
Learn HTML
|
|
</h1>
|
|
<p>Semantic code is designed to be human readable, so front end code can be understood by anyone.</p>
|
|
</div>
|
|
<div class="column">
|
|
<h1 class="ui icon header">
|
|
<i class="icon easel"></i>
|
|
Swap Designs
|
|
</h1>
|
|
<p>Semantic provides 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 terminal"></i>
|
|
Build Smarter
|
|
</h1>
|
|
<p>Semantic UI is developed around the semantic standard which seeks to make front end decisions less arbitrary.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="stripe">
|
|
<div class="container ui grid">
|
|
<div class="row">
|
|
<div class="seven wide column">
|
|
<div class="ui message">
|
|
<h2 class="ui header"><i class="icon info-circle"></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 fluid teal button">Learn more <i class="icon right-open"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="five wide column">
|
|
<div class="ui message">
|
|
<h2 class="ui header"><i class="icon easel"></i> See UI elements</h2>
|
|
<p>See some of the UI elements that the Semantic library has to offer.</p>
|
|
<div class="ui fluid red button">View Library <i class="icon right-open"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="five wide column">
|
|
<div class="ui message">
|
|
<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 fluid green button">Authoring Guide <i class="icon right-open"></i></div>
|
|
</div>
|
|
</div>
|
|
<div class="seven wide column">
|
|
<div class="ui message">
|
|
<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 fluid blue button">Contribute <i class="icon right-open"></i></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|