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

Updates to docs

1.x
jlukic 10 years ago
parent
e2c144c711
commit
d0cdc623a8
4 changed files with 202 additions and 105 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. 17
      server/documents/elements/input.html.eco
  2. 80
      server/documents/elements/segment.html.eco
  3. 208
      server/documents/views/card.html.eco
  4. 2
      server/files/stylesheets/docs.css

17
server/documents/elements/input.html.eco
View File

@ -136,36 +136,35 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Action</h4>
<p>An input can be formatted to alert the user to an action they may perform</p>
<div class="ui ignored info message">
Action input do not support <code>&#x3C;button&#x3E;</code> because browsers <a href="http://stackoverflow.com/questions/12414573/display-table-cell-border-spacing-dont-work-with-buttons"> do not implement</a> all display modes for button elements. See <a href="https://code.google.com/p/chromium/issues/detail?id=335040">chromium</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=960512">mozilla</a> bug reports for progress on browser implementation.
</div>
<div class="ui action input">
<input type="text" placeholder="Search...">
<div class="ui button">Search</div>
<button class="ui button">Search</button>
</div>
</div>
<div class="another example">
<div class="ui left action input">
<div class="ui teal labeled icon button">
<button class="ui teal labeled icon button">
<i class="cart icon"></i>
Checkout
</div>
</button>
<input type="text" value="$52.03">
</div>
</div>
<div class="another example">
<div class="ui action input">
<input type="text" value="http://ww.short.url/c0opq">
<div class="ui teal right labeled icon button">
<button class="ui teal right labeled icon button">
<i class="copy icon"></i>
Copy
</div>
</button>
</div>
</div>
<div class="another example">
<div class="ui action input">
<input type="text" placeholder="Search...">
<div class="ui icon button"><i class="search icon"></i></div>
<button class="ui icon button">
<i class="search icon"></i>
</button>
</div>
</div>

80
server/documents/elements/segment.html.eco
View File

@ -1,6 +1,7 @@
---
layout : 'default'
css : 'segment'
standalone : true
element : 'segment'
elementType : 'element'
@ -190,43 +191,43 @@ themes : ['default', 'GitHub']
<h4 class="ui header">Colored</h4>
<p>A segment can be colored</p>
<div class="ui blue segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui orange segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui green segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui red segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui purple segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui teal segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
</div>
</div>
</div>
Blue
</div>
<div class="ui orange segment">
Orange
</div>
<div class="ui green segment">
Green
</div>
<div class="ui red segment">
Red
</div>
<div class="ui purple segment">
Purple
</div>
<div class="ui teal segment">
Teal
</div>
</div>
<div class="another example">
<p>These colors can be inverted</p>
<div class="ui blue inverted segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
Blue
</div>
<div class="ui orange inverted segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
Orange
</div>
<div class="ui green inverted segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
Green
</div>
<div class="ui red inverted segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
Red
</div>
<div class="ui purple inverted segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
Purple
</div>
<div class="ui teal inverted segment">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
Teal
</div>
</div>
@ -322,4 +323,39 @@ themes : ['default', 'GitHub']
</div>
</div>
<h2 class="ui dividing header">Groups</h2>
<div class="example">
<h4 class="ui header">Segment Group</h4>
<p>A group of segments can be formatted to appear together</p>
<div class="ui segments">
<div class="ui segment">
<p>Top</p>
</div>
<div class="ui segment">
<p>Middle</p>
</div>
<div class="ui segment">
<p>Middle</p>
</div>
<div class="ui segment">
<p>Middle</p>
</div>
<div class="ui segment">
<p>Bottom</p>
</div>
</div>
</div>
<div class="another example">
<div class="ui segments">
<div class="ui segment">
<p>Top</p>
</div>
<div class="ui secondary segment">
<p>Secondary Content</p>
</div>
</div>
</div>
</div>

208
server/documents/views/card.html.eco
View File

@ -51,80 +51,58 @@ themes : ['Default', 'Basic', 'Classic']
<h4 class="ui header">Cards</h4>
<p>A group of cards. </p>
<div class="ui ignored info message">
<h3 class="header">Customizing your views</h3>
<p>Cards are designed to be flexible to your content. Meta content can include custom elements related to your content. Each child element inside the <code>extra content</code> or <code>meta</code> group will be automatically formatted to be spaced appropriately.</p>
<p>This example includes a category group, a sign-up date, and a friend count which are arbitrary class names used to format users as cards.</p>
Cards use <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes" target="_blank">flex-box</a> to make sure rows of content stretch to be equal height.
</div>
<div class="ui ignored message">
<p>Cards are designed to be flexible to your content. <code>content</code> blocks can include any custom elements related to your content.</p>
</div>
<div class="ui cards">
<div class="card">
<div class="image">
<a class="image">
<img src="/images/avatar/large/elliot.jpg">
</div>
</a>
<div class="content">
<div class="header">Elliot Fu</div>
<a class="header">Elliot Fu</a>
<div class="meta">
<a class="group">Friends</a>
<a>Friends</a>
</div>
<div class="description">
Elliot Fu is a film-maker from New York.
</div>
</div>
<div class="extra content">
<a class="right floated created">
Joined in 2011
</a>
<a class="friends">
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
<div class="card">
<div class="image">
<a class="image">
<img src="/images/avatar/large/helen.jpg">
</div>
</a>
<div class="content">
<div class="header">Helen Troy</div>
<a class="header">Helen Troy</a>
<div class="meta">
<a class="group">Friends</a>
<a>Friends</a>
</div>
<div class="description">
Helen Troy is an archivist living in New York, who enjoys cooking, fine art, and gardening.
</div>
</div>
<div class="extra content">
<a class="right floated created">
Joined in 2013
</a>
<a class="friends">
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
<div class="card">
<div class="image">
<a class="image">
<img src="/images/avatar/large/jenny.jpg">
</div>
</a>
<div class="content">
<div class="header">Jenny Hess</div>
<a class="header">Jenny Hess</a>
<div class="meta">
<a class="group">Friends</a>
<a>Friends</a>
</div>
<div class="description">
Jenny is a student studying Media Management at the New School.
</div>
</div>
<div class="extra content">
<a class="right floated created">
Joined in 2012
</a>
<a class="friends">
<i class="user icon"></i>
22 Friends
</a>
</div>
</div>
</div>
</div>
<div class="another example">
<div class="ui link cards">
<div class="card">
<div class="image">
<img src="/images/avatar/large/veronika.jpg">
@ -132,20 +110,20 @@ themes : ['Default', 'Basic', 'Classic']
<div class="content">
<div class="header">Veronika Ossi</div>
<div class="meta">
<a class="group">Friends</a>
<a>Friends</a>
</div>
<div class="description">
Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.
</div>
</div>
<div class="extra content">
<a class="right floated created">
<span class="right floated">
Joined in 2013
</a>
<a class="friends">
</span>
<span>
<i class="user icon"></i>
22 Friends
</a>
75 Friends
</span>
</div>
</div>
<div class="card">
@ -153,7 +131,7 @@ themes : ['Default', 'Basic', 'Classic']
<img src="/images/avatar/large/stevie.jpg">
</div>
<div class="content">
<a class="header">Stevie Feliciano</a>
<div class="header">Stevie Feliciano</div>
<div class="meta">
<span class="date">Joined in 2014</span>
</div>
@ -162,10 +140,13 @@ themes : ['Default', 'Basic', 'Classic']
</div>
</div>
<div class="extra content">
<a>
<span class="right floated">
Joined in 2011
</span>
<span>
<i class="user icon"></i>
22 Friends
</a>
35 Friends
</span>
</div>
</div>
<div class="card">
@ -175,20 +156,20 @@ themes : ['Default', 'Basic', 'Classic']
<div class="content">
<div class="header">Steve Jobes</div>
<div class="meta">
<a class="group">Acquaintances</a>
<a>Acquaintances</a>
</div>
<div class="description">
Steve Jobes is a fictional character designed to resemble someone familiar to readers.
</div>
</div>
<div class="extra content">
<a class="right floated created">
<span class="right floated">
Joined in 2014
</a>
<a class="friends">
</span>
<span>
<i class="user icon"></i>
22 Friends
</a>
151 Friends
</span>
</div>
</div>
</div>
@ -314,6 +295,7 @@ themes : ['Default', 'Basic', 'Classic']
<div class="example">
<h4 class="ui header">Metadata</h4>
<p>A card can contain content metadata</p>
<div class="ui ignored info message">
<i class="info icon"></i>
You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
@ -322,10 +304,10 @@ themes : ['Default', 'Basic', 'Classic']
<div class="content">
<div class="header">Cute Dog</div>
<div class="meta">
<span class="time">2 days ago</span>
<span class="category">Animals</span>
<a>Link</a>
<span>2 days ago</span>
<a>Animals</a>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
</div>
@ -342,7 +324,7 @@ themes : ['Default', 'Basic', 'Classic']
<div class="content">
<a class="header" href="#">Steve Jobes</a>
<div class="meta">
<a class="time">Last Seen 2 days ago</a>
<a>Last Seen 2 days ago</a>
</div>
</div>
</div>
@ -398,23 +380,26 @@ themes : ['Default', 'Basic', 'Classic']
<i class="right floated like icon"></i>
<i class="right floated star icon"></i>
<div class="header">Cute Dog</div>
<div class="extra content">
<span class="like">
<i class="like icon"></i>
Like
</span>
<span class="star">
<i class="star icon"></i>
Favorite
</span>
<div class="description">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="extra content">
<span class="left floated like">
<i class="like icon"></i>
Like
</span>
<span class="right floated star">
<i class="star icon"></i>
Favorite
</span>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Description</h4>
<p>A card can contain a description with a single or multiple paragraphs</p>
<p>A card can contain a description with one or more paragraphs</p>
<div class="ui card">
<div class="content">
<div class="header">Cute Dog</div>
@ -551,7 +536,84 @@ themes : ['Default', 'Basic', 'Classic']
</div>
<div class="example">
<h4 class="ui header">Column count</h4>
<h4 class="ui header">Text Alignment</h4>
<p>Any element inside a card can have its text alignment specified</p>
<div class="ui ignored info message">
<i class="info icon"></i>
You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced
</div>
<div class="ui card">
<div class="content">
<div class="header">Cute Dog</div>
<div class="meta">
<span class="right floated time">2 days ago</span>
<span class="category">Animals</span>
</div>
<div class="description">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="extra content">
<div class="right floated author">
<img class="ui avatar image" src="/images/avatar/small/matt.jpg"> Matt
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Colors</h4>
<p>A card can specify a color</p>
<div class="ui four cards">
<a class="black card">
<div class="image">
<img class="ui wireframe image" src="/images/wireframe/white-image.png">
</div>
</a>
<a class="blue card">
<div class="image">
<img class="ui wireframe image" src="/images/wireframe/white-image.png">
</div>
</a>
<a class="green card">
<div class="image">
<img class="ui wireframe image" src="/images/wireframe/white-image.png">
</div>
</a>
<a class="orange card">
<div class="image">
<img class="ui wireframe image" src="/images/wireframe/white-image.png">
</div>
</a>
<a class="pink card">
<div class="image">
<img class="ui wireframe image" src="/images/wireframe/white-image.png">
</div>
</a>
<a class="purple card">
<div class="image">
<img class="ui wireframe image" src="/images/wireframe/white-image.png">
</div>
</a>
<a class="red card">
<div class="image">
<img class="ui wireframe image" src="/images/wireframe/white-image.png">
</div>
</a>
<a class="teal card">
<div class="image">
<img class="ui wireframe image" src="/images/wireframe/white-image.png">
</div>
</a>
<a class="yellow card">
<div class="image">
<img class="ui wireframe image" src="/images/wireframe/white-image.png">
</div>
</a>
</div>
</div>
<div class="example">
<h4 class="ui header">Column Count</h4>
<p>A group of cards can set how many cards should exist in a row</p>
<div class="ui four cards">
<div class="card">

2
server/files/stylesheets/docs.css
View File

@ -789,7 +789,7 @@ body#example {
top: 0.4em;
}
#example .another.example i.code {
top: 1em;
top: 0.5em;
}
/* Spaced */

Write Preview
Loading…
Cancel
Save