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

updates docs for button/grid 

Former-commit-id: 7204d2c63a
Former-commit-id: 12c5cc6fdf
pull/258/head
jlukic 11 years ago
parent
0e44f925b3
commit
aa93191dae
2 changed files with 148 additions and 108 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 178
      node/src/documents/collections/grid.html
  2. 78
      node/src/documents/elements/button.html

178
node/src/documents/collections/grid.html
View File

@ -10,7 +10,7 @@ type : 'UI Collection'
<div class="ui main responsive grid">
<div class="column">
<h1 class="ui dividing header">Grid</h1>
<p>A grid is a set of elements without a visual definition, that creates a structure to harmonize negative space in a layout.</p>
<p>A grid is a structure used to harmonize negative space in a layout.</p>
</div>
</div>
</div>
@ -77,6 +77,95 @@ type : 'UI Collection'
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Divided Grid</h4>
<p>A grid can show a division between its columns</p>
<div class="ui six divided column grid">
<div class="row">
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
<div class="row">
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Celled Grid</h4>
<p>A grid can have rows divided into cells</p>
<div class="ui celled grid">
<div class="row">
<div class="two wide column" style="">
<p>Lorem ipsum do</p>
</div>
<div class="three wide column" style="">
<p>Lorem ipsum dolor </p>
</div>
<div class="seven wide column">
<p>Lorem ipsum dolor sitos. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
<div class="row">
<div class="five wide column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="three wide column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="two wide column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="two wide column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
</div>
</div>
<h2 class="ui dividing header">Elements</h2>
<div class="highlighted example">
<h4 class="ui header">Rows</h4>
@ -473,7 +562,7 @@ type : 'UI Collection'
<div class="example">
<h4 class="ui header">Stackable Grid</h4>
<p>A grid can have its columns take a full column width when below a threshold to allow for content to display properly at small sizes</p>
<p>A grid can have its columns stack on-top of each other after reaching mobile breakpoints</p>
<div class="ui text message info ignore">
<i class="icon heart"></i> To see a grid stack, try resizing your browser to a small width
</div>
@ -492,91 +581,6 @@ type : 'UI Collection'
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Divided</h4>
<p>A grid can show a division between its columns</p>
<div class="ui six divided column grid">
<div class="row">
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
<div class="row">
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Celled</h4>
<p>A grid can have rows divided into cells</p>
<div class="ui celled grid">
<div class="row">
<div class="two wide column" style="">
<p>Lorem ipsum do</p>
</div>
<div class="three wide column" style="">
<p>Lorem ipsum dolor </p>
</div>
<div class="seven wide column">
<p>Lorem ipsum dolor sitos. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
<div class="row">
<div class="five wide column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="three wide column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="two wide column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
<div class="two wide column">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
</div>
</div>
<div class="example">

78
node/src/documents/elements/button.html
View File

@ -29,9 +29,12 @@ type : 'UI Element'
<div class="example">
<h4 class="ui header">Basic:</h4>
<p>A standard button</p>
<div class="ui button"><i class="icon add user"></i> Follow</div>
<div class="ui button">
<i class="icon add user"></i>
Follow
</div>
</div>
<div class="example">
<h4 class="ui header">Icon</h4>
<p>Icon only button</p>
@ -44,7 +47,8 @@ type : 'UI Element'
<h4 class="ui header">Labeled Icon</h4>
<p>An icon and a label</p>
<div class="ui labeled icon button">
<i class="icon pause"></i> Pause
<i class="icon pause"></i>
Pause
</div>
</div>
@ -54,25 +58,37 @@ type : 'UI Element'
<div class="example">
<h4 class="ui header">Hover</h4>
<p>Changes when a user moves their cursor over it</p>
<div class="ui hover button"><i class="icon add user"></i> Follow</div>
<div class="ui hover button">
<i class="icon add user"></i>
Follow
</div>
</div>
<div class="example">
<h4 class="ui header">Down</h4>
<p>Changes when pressed using touch or mouse events</p>
<div class="ui down button"><i class="icon add user"></i> Follow</div>
<div class="ui down button">
<i class="icon add user"></i>
Follow
</div>
</div>
<div class="example">
<h4 class="ui header">Active</h4>
<p>Changes to show it is currently the selected user action</p>
<div class="ui active button"><i class="icon add user"></i> Follow</div>
<div class="ui active button">
<i class="icon add user"></i>
Follow
</div>
</div>
<div class="example">
<h4 class="ui header">Disabled</h4>
<p>Changes to show it is currently unable to be interacted with</p>
<div class="ui disabled button"><i class="icon add user"></i> Followed</div>
<div class="ui disabled button">
<i class="icon add user"></i>
Followed
</div>
</div>
<div class="example">
@ -85,7 +101,9 @@ type : 'UI Element'
<h4 class="ui header">Success</h4>
<p>Can alert to a succesful action:</p>
<div class="ui success button">
<i class="icon add user"></i> Follow User
<i class="icon add user"></i>
Follo
w User
</div>
</div>
<div class="example">
@ -102,8 +120,14 @@ type : 'UI Element'
<div class="example">
<h4 class="ui header">Ordinality</h4>
<p>A button can be formatted to appear more or less noticable</p>
<div class="ui secondary button"><i class="icon user"></i> Add Friend</div>
<div class="ui secondary teal button"><i class="icon desk globe"></i>Change Language</div>
<div class="ui secondary button">
<i class="icon user"></i>
Add Friend
</div>
<div class="ui secondary teal button">
<i class="icon desk globe"></i>
Change Language
</div>
<div class="ui secondary purple button">Secondary</div>
<div class="ui secondary red button">Secondary</div>
</div>
@ -152,11 +176,10 @@ type : 'UI Element'
<a class="ui green button">Green BUtton</a>
<a class="ui red button">Red Button</a>
<a class="ui blue button">Blue Button</a>
<br><br>
<a class="ui purple button">Purple Button</a>
<a class="ui teal button">Teal Button</a>
</div>
<div class="example">
<h4 class="ui header">Toggle</h4>
<p>Can be formatted to toggle on and off</p>
@ -164,7 +187,7 @@ type : 'UI Element'
Vote
</div>
</div>
<h4 class="ui header">Feedback</h4>
<div class="example">
<p>Can be positive or negative:</p>
@ -182,7 +205,8 @@ type : 'UI Element'
<h4 class="ui header">Circular</h4>
<p>Can be circular:</p>
<div class="circular ui button">Rounded</div>
<div class="circular ui icon button"><i class="icon settings"></i></div>
<div class="circular ui icon button">
<i class="icon settings"></i></div>
</div>
<div class="example">
@ -244,9 +268,12 @@ type : 'UI Element'
<h4 class="ui header">Icon</h4>
<p>Groups can be formatted as icons</p>
<div class="ui icon buttons">
<div class="ui button"><i class="icon pause"></i></div>
<div class="ui button"><i class="icon play"></i></div>
<div class="ui button"><i class="icon shuffle"></i></div>
<div class="ui button">
<i class="icon pause"></i></div>
<div class="ui button">
<i class="icon play"></i></div>
<div class="ui button">
<i class="icon shuffle"></i></div>
</div>
</div>
@ -254,9 +281,18 @@ type : 'UI Element'
<h4 class="ui header">Labeled Icon</h4>
<p>Groups can be formatted as labeled icons</p>
<div class="ui vertical labeled icon buttons">
<div class="ui button"><i class="icon pause"></i> Pause</div>
<div class="ui button"><i class="icon play"></i> Play</div>
<div class="ui button"><i class="icon shuffle"></i> Shuffle</div>
<div class="ui button">
<i class="icon pause"></i>
Pause
</div>
<div class="ui button">
<i class="icon play"></i>
Play
</div>
<div class="ui button">
<i class="icon shuffle"></i>
Shuffle
</div>
</div>
</div>
@ -292,7 +328,7 @@ type : 'UI Element'
<div class="ui button">Three</div>
</div>
</div>
<div class="another example">
<div class="ui red tertiary buttons">
<div class="ui button">One</div>

Write Preview
Loading…
Cancel
Save