lukechilds
/
Semantic-UI-Docs
mirror of https://github.com/lukechilds/Semantic-UI-Docs.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

fix to floated items in menu, other fixes to docs 

Former-commit-id: 8a81bd42f0b48780bc00067c8dc4e8227124230a
Former-commit-id: 77fb39a638f8ce37215fe72e7f1019944d79029d
beta
Jack Lukic 11 years ago
parent
a4033eeeb0
commit
8ed2b7c2d5
4 changed files with 274 additions and 153 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 165
      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

165
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 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>
<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 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="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 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