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

Update grid/accordion docs

1.x
jlukic 10 years ago
parent
18d114818e
commit
9c891c6859
3 changed files with 117 additions and 67 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. 62
      server/documents/collections/grid.html.eco
  2. 92
      server/documents/hotfix.html.eco
  3. 30
      server/documents/modules/accordion.html.eco

62
server/documents/collections/grid.html.eco
View File

@ -8,6 +8,7 @@ elementType : 'collection'
title : 'Grid'
description : 'A grid is used to harmonize negative space in a layout'
type : 'UI Collection'
standalone : true
themes : ['Default', 'Fixed-width']
---
@ -113,6 +114,18 @@ themes : ['Default', 'Fixed-width']
</div>
</div>
</div>
<div class="highlighted example">
<h4 class="ui header">Centering Content</h4>
<p>If a row does not take up all sixteen grid columns, you can use a <code>ui centered grid</code>, <code>centered row</code>, or <code>centered column</code> to center the column contents inside the grid.
</p>
<div class="ui two column centered grid">
<div class="column"></div>
<div class="four column centered row">
<div class="column"></div>
<div class="column"></div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Specifying Alignment</h4>
@ -771,6 +784,40 @@ themes : ['Default', 'Fixed-width']
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Centered</h4>
<p>A grid can have its columns centered</p>
<div class="ui two column centered grid">
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="four column centered row">
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
</div>
<div class="four column row">
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Doubling</h4>
@ -781,32 +828,27 @@ themes : ['Default', 'Fixed-width']
<div class="five column doubling ui grid">
<div class="column">
<div class="ui segment">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
</div>
<div class="column">
<div class="ui segment">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
</div>
<div class="column">
<div class="ui segment">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
</div>
<div class="column">
<div class="ui segment">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
</div>
<div class="column">
<div class="ui segment">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
</div>
</div>

92
server/documents/hotfix.html.eco
View File

@ -11,6 +11,7 @@ standalone : true
<!-- TEST JS HERE !-->
<script>
$(document).ready(function() {
$('.ui.accordion').accordion();
$('.ui.dropdown').dropdown();
});
</script>
@ -19,63 +20,40 @@ $(document).ready(function() {
<style type="text/css">
</style>
<div class="main container" style="width: 1000px; margin: 0 auto;">
<table class="ui celled complex table">
<thead>
<tr>
<th rowspan="2">One</th>
<th>Two</th>
</tr>
<tr>
<th>Three (missing left border)</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3"></td>
<td></td>
</tr>
<tr>
<td>(missing left border)</td>
</tr>
<tr>
<td>(missing left border)</td>
</tr>
</tbody>
</table>
<div class="ui section divider"></div>
<table class="resources ui striped celled complex table">
<colgroup class="basics">
<col /><col /><col /><col />
</colgroup>
<colgroup class="languages">
<col /><col /><col />
</colgroup>
<thead>
<tr>
<th class="name" rowspan=2>Name</th>
<th class="type" rowspan=2>Type</th>
<th class="file-count" rowspan=2>Files</th>
<th class="languages" colspan=3>Languages</th>
</tr>
<tr>
<th class="language">Ruby</th>
<th class="language">JavaScript</th>
<th class="language">Python</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ongoing Sum</td>
<td>Small Exercise</td>
<td>2</td>
<td><i class="large green checkmark icon"></i></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<div class="main container" style="width: 1000px; margin: 0 auto;">
</div>
<div class="ui vertical inverted borderless sidebar menu left overlay visible">
<div class="item">
<a class="ui logo icon image" href="/">
<img src="http://placehold.it/40/cc095c/000000">
</a>
<a href="/"><b>Acme Inc.</b></a>
</div>
<div class="ui inverted accordion item">
<h4 class="ui dividing inverted header">Content Menu</h4>
<a class="active title"><i class="dropdown icon"></i> Entry</a>
<div class="active content">
<form class="ui inverted form vertical segment" method="post">
<div class="field">
<label>Group</label>
<select class="ui fluid dropdown" id="test1" name="test"><option value="">Select...</option><option value="1">Global</option></select>
</div>
<div class="field">
<label>Type</label>
<select class="ui fluid dropdown" id="test2" name="test2">
<option value="">Select...</option><option value="1">Text</option>
<option value="2">String</option>
<option value="3">Boolean</option>
</select>
</div>
<div class="field">
<button class="right labeled blue ui icon button" name="Commit" type="submit" value="Add">Add
<i class='add circle icon'></i>
</button>
</div>
</form>
</div>
</div>
</div>

30
server/documents/modules/accordion.html.eco
View File

@ -108,6 +108,36 @@ themes : ['Default', 'Chubby']
</div>
</div>
<div class="example">
<h4 class="ui header">Inverted</h4>
<p>An accordion can be formatted to appear on dark backgrounds</p>
<div class="ui inverted accordion">
<div class="active title">
<i class="dropdown icon"></i>
What is a dog?
</div>
<div class="active content">
<p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
What kinds of dogs are there?
</div>
<div class="content">
<p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
</div>
<div class="title">
<i class="dropdown icon"></i>
How do you acquire a dog?
</div>
<div class="content">
<p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
<p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
</div>
</div>
</div>
</div>
<div class="ui tab" data-tab="examples">

Write Preview
Loading…
Cancel
Save