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.
48 lines
2.7 KiB
48 lines
2.7 KiB
---
|
|
layout : 'default'
|
|
css : 'guide'
|
|
|
|
title : 'Introduction'
|
|
description : 'Getting to know Semantic UI'
|
|
type : 'Semantic'
|
|
---
|
|
<script src="/javascript/intro.js"></script>
|
|
|
|
<%- @partial('header') %>
|
|
|
|
<div class="main container">
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Philosophy</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">What's Different?</h2>
|
|
|
|
<h3 class="ui header">Descriptive not Prescriptive</h3>
|
|
<p> Writing front end code shouldn't require learning the naming or programming conventions of a particular developer. Instead of using short-hand, or codified naming conventions, Semantic uses simple, common language for parts of interface elements, and familiar patterns found in natural languages for describing elements.</p>
|
|
|
|
<h3 class="ui header">Tag ambivalent.</h3>
|
|
<p>Interface definitions in Semantic are tag ambivalent. That means you can use div, article, section, span without affecting the display of the element. Special tags like a, table, td still carry special meaning in certain circumstances however.</p>
|
|
|
|
<h3 class="ui header">Powerful tools for expressing groups and collections.</h3>
|
|
<p>In English it's much easier to say "There are three tall men" than "There is a tall man, a tall man and a tall man".</p>
|
|
<p>In Semantic element definitions can be expressed in groups have shared attributes like size, color, type avoiding repetitive declarations.</p>
|
|
|
|
<h3 class="ui header">Portable and self-contained.</h3>
|
|
<p>UI components in Semantic can be used individually, defining optional couplings with other components where their usage intersect. That means choosing to use semantic doesn't mean adopting an entire framework, or rewriting your codebase. You can pick and choose what elements you want to use.</p>
|
|
|
|
<h3 class="ui header">Shared language, different implementations</h3>
|
|
<p>Describing your site's content using a common language like Semantic allows other developers to create UI definitions to match one shared vocabulary. This means you can redesign your website without retooling your html. Simply alter the look and feel of your UI using a different UI style definition.</p>
|
|
|
|
<h3 class="ui header">Only the important stuff</h3>
|
|
<p>Instead of giving every possible variation, or behavior under the sun, element definitions are designed to be a starting off point. No oversized downloads, or kitchen sink, just the stuff to get you started.</p>
|
|
|
|
<div class="ui horizontal divider"><i class="circular heart icon"></i></div>
|
|
|
|
<a class="ui huge right labeled teal icon button" href="/introduction/getting-started.html">
|
|
Next: Getting Started
|
|
<i class="right arrow icon"></i>
|
|
</a>
|
|
|
|
</div>
|