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

Add new doc examples

1.x
jlukic 10 years ago
parent
c36065de9c
commit
73c1dd0fc0
3 changed files with 89 additions and 39 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. 2
      server/documents/collections/grid.html.eco
  2. 91
      server/documents/elements/label.html.eco
  3. 35
      server/documents/modules/progress.html.eco

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

@ -924,7 +924,7 @@ themes : ['Default', 'Fixed-width']
<h4 class="ui header">Equal Width</h4>
<p>A row can automatically resize all undeclared elements to split the available width evenly</p>
<div class="ui ignored info message">
Equal width rows use a very new technology, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" target="_blank">flex-box</a> that is only supported by <a href="http://caniuse.com/#feat=flexbox">modern browsers</a>.
Equal width rows require <code>row</code> wrappers to work correctly. This variation uses a very new technology, <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" target="_blank">flex-box</a> that is only supported by <a href="http://caniuse.com/#feat=flexbox">modern browsers</a>.
</div>
<div class="ui equal width grid">
<div class="row">

91
server/documents/elements/label.html.eco
View File

@ -112,17 +112,23 @@ themes : ['Default']
<h4 class="ui header">Corner</h4>
<p>A label can position itself in the corner of an element</p>
<div class="yellow ui message">A corner label must be positioned inside a container with <b>position: relative</b> to display properly. If a container is rounded you will need to add <code>overflow:hidden</code> to the container to produce a rounded label.</div>
<div class="ui left floated medium image">
<a class="ui corner label">
<i class="save icon"></i>
</a>
<img src="/images/demo/highres2.jpg">
</div>
<div class="ui left floated medium image">
<a class="ui left red corner label">
<i class="heart icon"></i>
</a>
<img src="/images/demo/highres3.jpg">
<div class="ui two column grid">
<div class="column">
<div class="ui fluid image">
<a class="ui left red corner label">
<i class="heart icon"></i>
</a>
<img src="/images/wireframe/image.png">
</div>
</div>
<div class="column">
<div class="ui fluid image">
<a class="ui black corner label">
<i class="save icon"></i>
</a>
<img src="/images/wireframe/image.png">
</div>
</div>
</div>
</div>
@ -137,27 +143,48 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Ribbon</h4>
<p>A label can appear as a ribbon attaching itself to an element.</p>
<div class="ui raised segment">
<a class="ui ribbon label">Dogs</a>
<p>Pretty nice animals.</p>
<a class="ui teal ribbon label">Cats</a>
<p>Also pretty nice animals, but can prefer solitude.</p>
<a class="ui red ribbon label">Ogres and monsters</a>
<p>Never seen one as a pet before, but I imagine they'd make pretty terrible companions.</p>
<div class="ui two column grid">
<div class="column">
<div class="ui raised segment">
<a class="ui ribbon label">Label</a>
<span>Inline Text</span>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<a class="ui teal ribbon label">Label</a>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="column">
<div class="ui segment">
<a class="ui right ribbon label">Label</a>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<a class="ui teal right ribbon label">Label</a>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
</div>
</div>
<div class="another example">
<div class="ui segment">
<a class="ui right ribbon label">Dogs</a>
<p>Pretty nice animals.</p>
<a class="ui teal right ribbon label">Cats</a>
<p>Also pretty nice animals, but can prefer solitude.</p>
<a class="ui red right ribbon label">Ogres and monsters</a>
<p>Never seen one as a pet before, but I imagine they'd make pretty terrible companions.</p>
<div class="ui two column grid">
<div class="column">
<div class="ui fluid image">
<div class="ui black ribbon label">
<i class="hotel icon"></i> Hotel
</div>
<img src="/images/wireframe/image.png">
</div>
</div>
<div class="column">
<div class="ui fluid image">
<div class="ui blue ribbon label">
<i class="spoon icon"></i> Food
</div>
<img src="/images/wireframe/image.png">
</div>
</div>
</div>
</div>
<div class="example">
<div class="clearing example">
<h4 class="ui header">Attached</h4>
<p>A label can attach to a content segment</p>
<div class="ui ignored warning message">
@ -169,19 +196,19 @@ themes : ['Default']
<div class="column">
<div class="ui segment">
<div class="ui top attached label">HTML</div>
<p>This is some pretend content</p>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="column">
<div class="ui segment">
<div class="ui bottom attached label">CSS</div>
<p>This is some pretend content</p>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="column">
<div class="ui segment">
<div class="ui top right attached label">Code</div>
<p>This is some pretend content</p>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
</div>
@ -189,19 +216,19 @@ themes : ['Default']
<div class="column">
<div class="ui segment">
<div class="ui top left attached label">View</div>
<p>This is some pretend content</p>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="column">
<div class="ui segment">
<div class="ui bottom left attached label">User View</div>
<p>This is some pretend content</p>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="column">
<div class="ui segment">
<div class="ui bottom right attached label">Admin View</div>
<p>This is some pretend content</p>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
</div>

35
server/documents/modules/progress.html.eco
View File

@ -176,14 +176,37 @@ themes : ['Default', 'Classic', 'Basic', 'Striped']
<div class="example">
<h4 class="ui header">Attached</h4>
<p>A progress bar can show progress of an element</p>
<div class="ui top attached progress">
<div class="bar"></div>
</div>
<div class="ui attached segment">
<div class="ui segment">
<div class="ui top attached progress">
<div class="bar"></div>
</div>
<p>La la la la</p>
<div class="ui bottom attached progress">
<div class="bar"></div>
</div>
</div>
<div class="ui bottom attached progress">
<div class="bar"></div>
</div>
<div class="another example">
<div class="ui card">
<div class="image">
<img src="/images/wireframe/image.png">
</div>
<div class="content">
<a class="header">Project</a>
<div class="meta">
<span class="date">Started in 2014</span>
</div>
</div>
<div class="extra content">
<a>
<i class="user icon"></i>
22 Friends
</a>
</div>
<div class="ui bottom attached progress">
<div class="bar"></div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save