richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix to floated items in menu, other fixes to docs

pull/13/head
Jack Lukic 11 years ago
parent
7e2a4dfdbe
commit
8a81bd42f0
4 changed files with 274 additions and 153 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 173
      node/src/documents/index.html
  2. 166
      node/src/documents/index_old.html
  3. 77
      node/src/documents/introduction.html
  4. 11
      node/src/files/components/semantic/collections/menu.css

173
node/src/documents/index.html
View File

@ -13,153 +13,42 @@ type : 'Semantic'
<h2 class="ui header">UI is the vocabulary of the web.</h2>
<p>Semantic empowers designers and developers by creating a shared language for user interfaces.</p>
<a class="ui black huge labeled sidebar icon button"><i class="icon list layout"></i> View UI</a>
<a class="ui red huge right labeled icon button" href="intro/getting-started.html" class="ui button">Get Started <i class="icon right arrow"></i> </a>
</div>
</div>
</div>
<div class="solid">
<div class="ui three column stackable responsive grid">
<div class="column">
<h1 class="ui header">
<i class="circular community icon"></i>
<div class="content">
Intuitive
<div class="sub header">Easy to learn</div>
</div>
</h1>
<p>Web development doesn't have to be hieroglyphics. Semantic lets you develop websites by describing what you want on a page.</p>
</div>
<div class="column">
<h1 class="ui header">
<i class="circular lightning icon"></i>
<div class="content">
Built Lean
<div class="sub header">Take only what you need.</div>
</div>
</h1>
<p>No need to buy into a framework, just use the bits you need. Need to redesign? Simply swap out your definition of what a menu is, or a button, no need to recode everything.</p>
</div>
<div class="column">
<h1 class="ui header">
<i class="circular settings icon"></i>
<div class="content">
Made to Grow
<div class="sub header">Define your own language.</div>
</div>
</h1>
<p>Semantic provides a rubric for developing re-usable UI that you can share with others, and re-use yourself between projects.</p>
<a class="ui red huge right labeled icon button" href="introduction.html" class="ui button">Get Started <i class="icon right arrow"></i> </a>
</div>
</div>
</div>
<div class="stripe">
<div class="stackable responsive demo ui grid">
<div class="equal row">
<div class="sixteen wide column">
<p>
</div>
</div>
<div class="equal row">
<div class="ten wide column">
<h3 class="ui header">Definitions</h3>
<p>HTML elements are nouns.</p>
<div class="code" data-type="html">
<div class="ui button">Submit</div>
</div>
</div>
<div class="six wide column">
<div class="ui button">Submit</div>
</div>
</div>
<div class="equal row">
<div class="ten wide column">
<h3 class="ui header">Variations</h3>
<p>HTML elements can have variations which modify the way they look or behave.</p>
<p>Variations are mutually exclusive and can be used freedly together in any combination</p>
<div class="code" data-type="html">
<div class="ui large button">Add User</div>
<div class="ui icon button"><i class="add user icon"></i></div>
<div class="ui red button">Add User</div>
<div class="ui large red labeled icon button">
<i class="add user icon"></i>
Add User
</div>
</div>
</div>
<div class="six wide column">
<div class="ui large button">Add User</div> <br><br>
<div class="ui icon button"><i class="add user icon"></i></div> <br><br>
<div class="ui red button">Add User</div> <br><br>
<div class="ui large red labeled icon button">
<i class="add user icon"></i>
Add User
</div>
</div>
</div>
<div class="equal row">
<div class="ten wide column">
<h3 class="ui header">Plurality</h3>
<p>HTML elements can share qualities as a group to avoid having to define them redundantly.</p>
<div class="code" data-type="html">
<div class="blue ui icon buttons">
<div class="ui button"><i class="grid layout icon"></i></div>
<div class="ui button"><i class="block layout icon"></i></div>
<div class="ui button"><i class="list layout icon"></i></div>
</div>
</div>
</div>
<div class="six wide column">
<div class="blue ui icon buttons">
<div class="ui button"><i class="grid layout icon"></i></div>
<div class="ui button"><i class="block layout icon"></i></div>
<div class="ui button"><i class="list layout icon"></i></div>
</div>
</div>
</div>
<div class="equal row">
<div class="ten wide column">
<h3 class="ui header">Behavior</h3>
<p>Elements with behaviors give you an api of verbs and direct objects.</p>
<p>Trigger an action using simple sentences</p>
<div class="code" data-type="html" data-label="true">
<div class="ui pointing secondary menu">
<div class="active red item" data-tab="first">First</div>
<div class="blue item" data-tab="second">Second</div>
<div class="green item" data-tab="third">Third</div>
<div class="right menu">
<div class="oddball item">Open third</div>
</div>
</div>
<div class="ui active tab segment" data-tab="first">First</div>
<div class="ui tab segment" data-tab="second">Second</div>
<div class="ui tab segment" data-tab="third">Third</div>
</div>
<div class="code" data-type="javascript" data-label="true">
$('.ui.navigation .item')
.tab()
;
$('.ui.navigation .oddball.item')
.on('click', function() {
$(this)
.tab('deactivate all')
.tab('activate tab', 'third')
.tab('activate navigation', 'third')
;
})
;
</div>
</div>
<div class="six wide column">
<div class="ui pointing menu">
<a class="active red item" data-tab="first">First</a>
<a class="blue item" data-tab="second">Second</a>
<a class="green item" data-tab="third">Third</a>
<div class="right menu">
<a class="oddball item">Open third</a>
</div>
<div class="ui responsive grid">
<div class="ui column">
<p>Semantic UI is a framework designed to simplify front end development by removing the arbitrary bits.</p>
<h3 class="ui header">Comparing frameworks</h3>
<div class="ui bottom pointing label">Bootstrap</div>
<div class="code" data-type="html">
<div class="row">
<div class="col-lg-4">1</div>
<div class="col-lg-4">2</div>
<div class="col-lg-4">3</div>
</div>
</div>
<div class="ui bottom pointing label">YUI</div>
<div class="code" data-type="html">
<div class="yui-3-g">
<div class="yui3-u-1-3">1</div>
<div class="yui3-u-1-3">2</div>
<div class="yui3-u-1-3">3</div>
</div>
</div>
<div class="ui bottom pointing label">Semantic</div>
<div class="code" data-type="html">
<div class="ui three column grid">
<div class="column">1</div>
<div class="column">2</div>
<div class="column">3</div>
</div>
<div class="ui active tab segment" data-tab="first">First</div>
<div class="ui tab segment" data-tab="second">Second</div>
<div class="ui tab segment" data-tab="third">Third</div>
</div>
</div>
</div>

166
node/src/documents/index_old.html
View File

@ -0,0 +1,166 @@
---
layout : 'default'
css : 'index'
title : 'Introduction'
type : 'Semantic'
---
<script src="/javascript/home.js"></script>
<div class="masthead segment">
<div class="ui responsive grid">
<div class="column">
<h1 class="ui header">Semantic UI</h1>
<h2 class="ui header">UI is the vocabulary of the web.</h2>
<p>Semantic empowers designers and developers by creating a shared language for user interfaces.</p>
<a class="ui black huge labeled sidebar icon button"><i class="icon list layout"></i> View UI</a>
<a class="ui red huge right labeled icon button" href="intro/getting-started.html" class="ui button">Get Started <i class="icon right arrow"></i> </a>
</div>
</div>
</div>
<div class="solid">
<div class="ui three column stackable responsive grid">
<div class="column">
<h1 class="ui header">
<i class="circular community icon"></i>
<div class="content">
Intuitive
<div class="sub header">Easy to learn</div>
</div>
</h1>
<p>Web development doesn't have to be hieroglyphics. Semantic lets you develop websites by describing what you want on a page.</p>
</div>
<div class="column">
<h1 class="ui header">
<i class="circular lightning icon"></i>
<div class="content">
Built Lean
<div class="sub header">Take only what you need.</div>
</div>
</h1>
<p>No need to buy into a framework, just use the bits you need. Need to redesign? Simply swap out your definition of what a menu is, or a button, no need to recode everything.</p>
</div>
<div class="column">
<h1 class="ui header">
<i class="circular settings icon"></i>
<div class="content">
Made to Grow
<div class="sub header">Define your own language.</div>
</div>
</h1>
<p>Semantic provides a rubric for developing re-usable UI that you can share with others, and re-use yourself between projects.</p>
</div>
</div>
</div>
<div class="stripe">
<div class="stackable responsive demo ui grid">
<div class="equal row">
<div class="sixteen wide column">
<p>
</div>
</div>
<div class="equal row">
<div class="ten wide column">
<h3 class="ui header">Definitions</h3>
<p>HTML elements are nouns.</p>
<div class="code" data-type="html">
<div class="ui button">Submit</div>
</div>
</div>
<div class="six wide column">
<div class="ui button">Submit</div>
</div>
</div>
<div class="equal row">
<div class="ten wide column">
<h3 class="ui header">Variations</h3>
<p>HTML elements can have variations which modify the way they look or behave.</p>
<p>Variations are mutually exclusive and can be used freedly together in any combination</p>
<div class="code" data-type="html">
<div class="ui large button">Add User</div>
<div class="ui icon button"><i class="add user icon"></i></div>
<div class="ui red button">Add User</div>
<div class="ui large red labeled icon button">
<i class="add user icon"></i>
Add User
</div>
</div>
</div>
<div class="six wide column">
<div class="ui large button">Add User</div> <br><br>
<div class="ui icon button"><i class="add user icon"></i></div> <br><br>
<div class="ui red button">Add User</div> <br><br>
<div class="ui large red labeled icon button">
<i class="add user icon"></i>
Add User
</div>
</div>
</div>
<div class="equal row">
<div class="ten wide column">
<h3 class="ui header">Plurality</h3>
<p>HTML elements can share qualities as a group to avoid having to define them redundantly.</p>
<div class="code" data-type="html">
<div class="blue ui icon buttons">
<div class="ui button"><i class="grid layout icon"></i></div>
<div class="ui button"><i class="block layout icon"></i></div>
<div class="ui button"><i class="list layout icon"></i></div>
</div>
</div>
</div>
<div class="six wide column">
<div class="blue ui icon buttons">
<div class="ui button"><i class="grid layout icon"></i></div>
<div class="ui button"><i class="block layout icon"></i></div>
<div class="ui button"><i class="list layout icon"></i></div>
</div>
</div>
</div>
<div class="equal row">
<div class="ten wide column">
<h3 class="ui header">Behavior</h3>
<p>Elements with behaviors give you an api of verbs and direct objects.</p>
<p>Trigger an action using simple sentences</p>
<div class="code" data-type="html" data-label="true">
<div class="ui pointing secondary menu">
<div class="active red item" data-tab="first">First</div>
<div class="blue item" data-tab="second">Second</div>
<div class="green item" data-tab="third">Third</div>
<div class="right menu">
<div class="oddball item">Open third</div>
</div>
</div>
<div class="ui active tab segment" data-tab="first">First</div>
<div class="ui tab segment" data-tab="second">Second</div>
<div class="ui tab segment" data-tab="third">Third</div>
</div>
<div class="code" data-type="javascript" data-label="true">
$('.ui.navigation .item')
.tab()
;
$('.ui.navigation .oddball.item')
.on('click', function() {
$(this)
.tab('deactivate all')
.tab('activate tab', 'third')
.tab('activate navigation', 'third')
;
})
;
</div>
</div>
<div class="six wide column">
<div class="ui pointing menu">
<a class="active red item" data-tab="first">First</a>
<a class="blue item" data-tab="second">Second</a>
<a class="green item" data-tab="third">Third</a>
<div class="right menu">
<a class="oddball item">Open third</a>
</div>
</div>
<div class="ui active tab segment" data-tab="first">First</div>
<div class="ui tab segment" data-tab="second">Second</div>
<div class="ui tab segment" data-tab="third">Third</div>
</div>
</div>
</div>
</div>

77
node/src/documents/introduction.html
View File

@ -2,12 +2,13 @@
layout : 'default'
css : 'guide'
title : 'Getting Started'
title : 'Introduction'
type : 'Semantic'
---
<script src="/javascript/intro.js"></script>
<div class="segment">
<div class="container">
<h1 class="ui header">Getting Started</h1>
<h1 class="ui header">Introduction</h1>
</div>
</div>
<div class="main container">
@ -19,11 +20,12 @@ type : 'Semantic'
</div>
</div>
<h2 class="ui header">Philosophy</h2>
<p> Writing front end code shouldn't require learning the naming or programming conventions of a particular developer. Semantic is an attempt to design a front end library built around common usage and convention to make adopting and sharing code with others easier.</p>
<p>The semantic framework is an attempt to create a less prescriptive front end library which others can extend and modify to enhance their projects.</p>
<p> Writing front end code shouldn't require learning the naming or programming conventions of a particular developer. Semantic is a methodology for coding front end designed to make adopting and sharing code with others easier.</p>
<p>Semantic is tag ambivalent. That means you can use it with div, article, section, span, whichever you please. However, some elements still have special meeting like anchor and table tags.</p>
<h2 class="ui header">Getting Started</h2>
<p>UI definitions in Semantic are namespaced with the class name <b>ui</b>. This is to help differentiate between parts of a UI element, and the element itself. In the example below you can see that item must be a part of a menu definition.</p>
<p>UI definitions in Semantic are namespaced with the class name <b>ui</b>. This is to help differentiate between parts of an element, and the element itself. For example a menu may have menu items inside of it. These items are contained as part of the menu definition.</p>
<div class="code" data-type="html" data-label="true">
<div class="ui menu">
@ -36,10 +38,13 @@ type : 'Semantic'
<div class="item">Inbox</div>
</div>
<div class="ui divider"></div>
<h3 class="ui header">Combining elements</h3>
<p>All UI definitions in semantic are stand-alone, and do not require other components to function. However, components can choose to have optional couplings with other components.</p>
<p>For example you might want to include a badge inside a menu. A label inside of a menu will automatically function as a badge.</p>
<div class="code" data-type="html" data-label="true">
<div class="ui menu">
<div class="item">Home</div>
@ -57,15 +62,65 @@ type : 'Semantic'
</div>
</div>
<div class="ui divider"></div>
<p>Class names in semantic always use single english words. If a class name is an adjective it is a <b>type</b> or <b>variation</b> of an element. A <b>type</b> is a mutually exclusive change to an element, while a <b>variation</b> can be used together with other variations.</p>
<p>Semantic has five different ways UI elements can be defined. As an element, collection, view, module, or behavior.</p>
<h3 class="ui header">Altering Designs</h3>
<p>Class names in semantic always use single english words. If a class name is an adjective it is either a <b>type</b> of element or <b>variation</b> of an element.
<h4 class="ui header">Types</h4>
<p>A <b>type</b> is a mutually exclusive change to an element. It may require slightly different html structures or expect different content.</p>
<div class="code" data-type="html" data-label="true">
<div class="ui tiered menu">
<div class="menu">
<div class="active item">
<i class="home icon"></i>
Home
</div>
<div class="item">
<i class="mail icon"></i>
Mail
<div class="ui label">22</div>
</div>
</div>
<div class="sub menu">
<div class="active item">Activity</div>
<div class="item">Profile</div>
</div>
</div>
</div>
<div class="ui tiered menu">
<div class="menu">
<div class="active item">
<i class="home icon"></i>
Home
</div>
<div class="item">
<i class="mail icon"></i>
Mail
<div class="ui label">22</div>
</div>
</div>
<div class="sub menu">
<div class="active item">Activity</div>
<div class="item">Profile</div>
</div>
</div>
<h4 class="ui header">Variation</h4>
<p>A <b>variation</b> alters the design of an element but is not mutually exclusive. Variations can be stacked together, or be used along with altering an element's type.</p>
<h2 class="ui header">Types of UI</h2>
<p>Semantic has five different definition types. These are useful patterns for describing re-usable parts of a website.</p>
<ul class="ui list">
<li><b>Element</b> - a basic building block of a website, exists alone or in homogenous groups</li>
<li><b>Colleciton</b> - a group of several elements which are usually found together</li>
<li><b>Module</b> - an element where its behavior is included as part of its definition</li>
<li><b>Behavior</b> - a definition of behavior that exists without any physical description</li>
<li><b>View</b> - a way to present specific website content</li>
<li><b>Collection</b> - a heterogeneous group of several elements which are usually found together</li>
<li><b>View</b> - a way to present common website content</li>
<li><b>Module</b> - an element that also includes behavior as part of its definition</li>
<li><b>Behavior</b> - a set of behaviors not specfically tied to a design</li>
</ul>
</div>

11
node/src/files/components/semantic/collections/menu.css
View File

@ -178,6 +178,10 @@
/*--------------
Form Content
---------------*/
.ui.menu .input,
.ui.menu .input input {
width: 100%;
}
.ui.menu input {
margin: 0.25em 0em;
padding-top: 0.55em;
@ -461,6 +465,13 @@
-moz-box-shadow: none;
box-shadow: none;
}
/* Tiered pointing */
.ui.pointing.tiered.menu > .menu > .item:after {
display: none;
}
.ui.pointing.tiered.menu > .sub.menu > .item:after {
display: block;
}
/*--------------
Colors
---------------*/

Write Preview
Loading…
Cancel
Save