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.
72 lines
3.7 KiB
72 lines
3.7 KiB
---
|
|
layout : 'default'
|
|
css : 'guide'
|
|
title : "What's Different"
|
|
description : 'Separating Semantic from the pack'
|
|
type : 'UI Introduction'
|
|
---
|
|
<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 header">
|
|
Build Responsive Layouts Easier
|
|
<div class="sub header">Designed Completely with EM</div>
|
|
</h2>
|
|
<p>Every component is defined using <code>em</code> and <code>rem</code> so that components can be resized simply on the fly. Want a menu to get smaller on mobile? Simply have it's font-size change using a media query.</p>
|
|
|
|
<h2 class="ui header">
|
|
Self Explanatory
|
|
<div class="sub header">Descriptive not Prescriptive</div>
|
|
</h2>
|
|
<p> Writing front end code shouldn't require learning the naming or programming conventions of a particular developer.</p>
|
|
<p>Instead of using short-hand, or codifying naming conventions, Semantic uses simple, common language for parts of interface elements, and familiar patterns found in natural languages for describing elements.</p>
|
|
|
|
<h2 class="ui header">
|
|
Tag ambivalent
|
|
<div class="sub header">Use whatever html tags you please.</div>
|
|
</h2>
|
|
<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>
|
|
|
|
<h2 class="ui header">
|
|
Powerful tools for expressing groups and collections.
|
|
<div class="sub header">Don't repeat yourself</div>
|
|
</h2>
|
|
<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>
|
|
|
|
<h2 class="ui header">
|
|
Portable and self-contained.
|
|
<div class="sub header">Using Semantic doesn't mean adopting an entire framework, or rewriting your code base</div>
|
|
</h2>
|
|
<p>Semantic components are written in a singular style, but are not part of mandated overarching library. Only like a couple components? No problem, use only what you need.</p>
|
|
<p>UI components in Semantic also define optional and required couplings with other components where their usage intersect. That means for example, a popup can check for the existence of CSS animation component before using the fallback javascript animations.</p>
|
|
|
|
<h2 class="ui header">
|
|
Shared language, different implementations
|
|
<div class="sub header">Restyle your site without Restructuring it</div>
|
|
</h2>
|
|
|
|
<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>
|
|
|
|
<h2 class="ui header">
|
|
Only the important stuff
|
|
<div class="sub header">Not the kitchen sink</div>
|
|
</h2>
|
|
<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 with optional features you will most likely never use, just the stuff to get you going.</p>
|
|
|
|
<div class="ui horizontal divider"><i class="circular heart icon"></i></div>
|
|
|
|
<a class="ui large right labeled teal icon button" href="/introduction/definitions.html">
|
|
Next: UI Definitions
|
|
<i class="right arrow icon"></i>
|
|
</a>
|
|
|
|
</div>
|