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.
90 lines
3.2 KiB
90 lines
3.2 KiB
---
|
|
layout : 'default'
|
|
css : 'index'
|
|
title : 'Introduction'
|
|
type : 'Semantic'
|
|
---
|
|
|
|
<div class="masthead segment">
|
|
<div class="ui responsive center aligned grid">
|
|
<div class="column">
|
|
<h1 class="ui header">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 huge labeled icon button" href="download.html" class="ui button"><i class="icon upload"></i> Download</a>
|
|
<a class="ui black huge labeled sidebar icon button"><i class="icon list layout"></i> View UI</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="solid">
|
|
<div class="ui two column divided stackable responsive grid">
|
|
<div class="column">
|
|
<h1 class="ui purple header">
|
|
<i class="inverted purple circular community icon"></i>
|
|
Code Like You Think
|
|
</h1>
|
|
<p><b>Designing pages be as easy as describing them.</b>
|
|
<br>Semantic creates a re-usable vocabulary for user interface. Semantic lets </p>
|
|
</div>
|
|
<div class="column">
|
|
<h1 class="ui teal header">
|
|
<i class="inverted teal circular terminal icon"></i>
|
|
Expert Tools
|
|
</h1>
|
|
<p><b>Not happy with off the shelf plugins?</b><br>Semantic modules are written to be easy to read and extensible. Every plugin provides out of the box debug tools so you can monitor performance without breakpoints.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="stripe">
|
|
<div class="two column stackable responsive ui grid">
|
|
<div class="column">
|
|
<div class="large inverted purple center aligned ui block header">
|
|
<i class="book icon"></i> HTML
|
|
<div class="sub header">Sometimes it is easier to just see the code</div>
|
|
</div>
|
|
<p>This code example shows the code powering the code example.</p>
|
|
<div class="code" data-type="html">
|
|
<div class="two column stackable responsive ui grid">
|
|
<div class="column">
|
|
<div class="large inverted purple center aligned ui block header">
|
|
<i class="book icon"></i> HTML
|
|
<div class="sub header">Sometimes it is easier to just see the code</div>
|
|
</div>
|
|
<p>This code example shows the code powering the code example.</p>
|
|
<div class="code">
|
|
<!-- Recursion Narrowly Avoided !-->
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="large inverted teal center aligned ui block header">
|
|
<i class="terminal icon"></i> Javascript
|
|
<div class="sub header">Not everything is static</div>
|
|
</div>
|
|
<p>Javascript modules use verbs to show actions</p>
|
|
<div class="code">
|
|
<!-- Once more unto the breach, dear friends, once more; !-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="column">
|
|
<div class="large inverted teal center aligned ui block header">
|
|
<i class="terminal icon"></i> Javascript
|
|
<div class="sub header">Not everything is static</div>
|
|
</div>
|
|
<p>Javascript modules use verbs to show actions</p>
|
|
<div class="code">
|
|
$('.ui.tab')
|
|
.tab('activate.tab', 'help')
|
|
;
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</body>
|
|
|
|
</html>
|