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

Add many new examples using wireframe content

pull/1177/head
jlukic 10 years ago
parent
3a00b9409b
commit
5bb7ae0ef4
8 changed files with 283 additions and 400 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 507
      server/documents/collections/grid.html.eco
  2. 25
      server/documents/elements/divider.html.eco
  3. 40
      server/documents/elements/header.html.eco
  4. 40
      server/documents/elements/segment.html.eco
  5. 2
      server/documents/views/card.html.eco
  6. 4
      server/files/javascript/header.js
  7. 30
      server/files/javascript/semantic.js
  8. 35
      server/files/stylesheets/semantic.css

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

@ -21,16 +21,15 @@ themes : ['Default']
<div class="ui active tab" data-tab="overview">
<h2 class="ui dividing header">Overview</h2>
<div class="ui toggle animation checkbox">
<input type="checkbox" name="animation" />
<label>Toggle Animation</label>
</div>
<div class="highlighted example">
<h4 class="ui header">Why Use Grids?</h4>
<div class="ignored">
<p>A grid is a structure, with a <a href="http://99designs.com/designer-blog/2013/03/21/history-of-the-grid-part-1/" target="_blank">very rich history</a> used to align negative space in your design.</p>
<p>Using a grid makes content appear to flow naturally on your page, and allows you to quickly adjust layouts without assigning specific sizes directly to content elements, letting you rapidly prototype and design your page.</p>
<div class="ui toggle animation checkbox">
<input type="checkbox" name="animation" />
<label>Toggle Animation</label>
</div>
</div>
<div class="ui ignored info message">
<p>All grid systems use an arbitrary column count. Semantic's default theme assumes <b>16 columns</b>. This number can be adjusted in your project by adjust the <code>@columnCount</code> value in <code>site.variables</code>.</p>
@ -456,26 +455,24 @@ themes : ['Default']
</div>
<div class="ui page grid">
<div class="sixteen wide column">
<img class="ui wireframe image" src="/images/wireframe/centered-paragraph.png">
</div>
<div class="eight wide column">
<div class="ui labeled vertical fluid inverted icon menu">
<a class="item">
<i class="icon mail"></i>
Mail
</a>
<a class="item">
<i class="icon lab"></i>
Lab
</a>
<a class="item">
<i class="icon star"></i>
Favorites
</a>
</div>
<img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
</div>
<div class="eight wide column">
<div class="ui segment">
<b>Inbox</b>
<p>Welcome to your inbox. Would you like to see more information?</p>
<img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
</div>
<div class="three 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>
</div>
@ -487,17 +484,13 @@ themes : ['Default']
<p>A grid can have dividers between its columns</p>
<div class="ui three column divided grid">
<div class="column">
<h5 class="ui header">How We Collect and Use Information</h5>
<p>We ask for certain information such as your username, real name, birthdate, address, phone number and e-mail address when you register for a Semantic UI account, or if you correspond with us. We may also retain any messages you send through the Service, and may collect information you provide in User Content you post to the Service. We use this information to operate, maintain, and provide to you the features and functionality of the Service. Your username and if you choose to disclose it, your real name, will be published publicly. Once published your username and / or real name may not be able to be removed.</p>
<img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
</div>
<div class="column">
<h5 class="ui header">
Information we may receive from third parties
</h5>
<p>We may receive information about you from third parties. For example, if you access our websites or Service through a third-party connection or log-in, for example, through Facebook Connect, by “following,” “liking,” adding the Semantic UI application, linking your account to the Semantic UI Service, etc., that third party may pass certain information about your use of its service to Semantic UI. This information could include, but is not limited to, the user ID associated with your account (for example, your Facebook UID), an access token necessary to access that service, any information that you have permitted the third party to share with us, and any information you have made public in connection with that service. </p>
<img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
</div>
<div class="column">
<p>Semantic UI may, in its sole discretion, develop a feature that allows you to invite third parties to the Service. If you choose to use our invitation service to invite a third party to the Service through our “Invite friends” feature, you may directly choose a friend to invite through your mobile device’s native contact list – but we do not require that you import your contacts list to the Service, and we do not retain the information contained in your contacts list. You understand that by inviting a friend to Semantic UI through the “Invite friends” feature, you are directly sending a text or email from your personal accounts and that we are not storing your contact list. In addition, you understand and agree that normal carrier charges apply to communications sent from you phone. Since this invitation is coming directly from your email or phone, we do not have access to or control this communication.</p>
<img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
</div>
</div>
</div>
@ -508,21 +501,21 @@ themes : ['Default']
<div class="ui vertically divided grid">
<div class="two column 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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="three column 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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
</div>
@ -535,25 +528,21 @@ themes : ['Default']
<div class="ui celled grid">
<div class="row">
<div class="three wide column">
<img src="/images/leaves/2.png" class="ui fluid image">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="thirteen wide column">
<h3 class="ui green header">What are Leaves?</h3>
<p>A leaf is an above-ground plant organ. Its main functions are photosynthesis and gas exchange. A leaf is often flat, so it absorbs the most light, and thin, so that the sunlight can get to the chloroplasts in the cells.</p>
<img class="ui wireframe image" src="/images/wireframe/centered-paragraph.png">
</div>
</div>
<div class="row">
<div class="three wide column">
<img src="/images/leaves/4.png" class="ui fluid image">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="ten wide column">
<h3 class="ui green header">Types of Leaves</h3>
<p>Leaves come in many shapes and sizes. The biggest undivided leaf is that of a giant edible aroid. This lives in marshy parts of the tropical rain forest of Borneo.</p>
<p> One of its leaves can be ten feet across and have a surface area of over 30 square feet.
</p>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="three wide column">
<img src="/images/leaves/7.png" class="ui fluid image">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
</div>
</div>
@ -564,28 +553,24 @@ themes : ['Default']
<div class="ui internally celled grid">
<div class="row">
<div class="three wide column">
<img src="/images/leaves/2.png" class="ui fluid image">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="ten wide column">
<h3 class="ui green header">What are Leaves?</h3>
<p>A leaf is an above-ground plant organ. Its main functions are photosynthesis and gas exchange. A leaf is often flat, so it absorbs the most light, and thin, so that the sunlight can get to the chloroplasts in the cells.</p>
<img class="ui wireframe image" src="/images/wireframe/centered-paragraph.png">
</div>
<div class="three wide column">
<img src="/images/leaves/6.png" class="ui fluid image">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
</div>
<div class="row">
<div class="three wide column">
<img src="/images/leaves/4.png" class="ui fluid image">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="ten wide column">
<h3 class="ui green header">Types of Leaves</h3>
<p>Leaves come in many shapes and sizes. The biggest undivided leaf is that of a giant edible aroid. This lives in marshy parts of the tropical rain forest of Borneo.</p>
<p> One of its leaves can be ten feet across and have a surface area of over 30 square feet.
</p>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="three wide column">
<img src="/images/leaves/7.png" class="ui fluid image">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
</div>
</div>
@ -599,19 +584,13 @@ themes : ['Default']
<div class="ui grid">
<div class="four column row">
<div class="column">
<div class="ui segment">
A
</div>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="column">
<div class="ui segment">
A
</div>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="column">
<div class="ui segment">
A
</div>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="column">
<div class="ui segment">
@ -621,29 +600,19 @@ themes : ['Default']
</div>
<div class="five column row">
<div class="column">
<div class="ui segment">
B
</div>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="column">
<div class="ui segment">
B
</div>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="column">
<div class="ui segment">
B
</div>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="column">
<div class="ui segment">
B
</div>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="column">
<div class="ui segment">
B
</div>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
</div>
@ -682,45 +651,47 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Column Count</h4>
<p>A grid can have a different number of columns per row</p>
<div class="ui two column grid">
<div class="column">
<div class="ui fluid form segment">
<h3 class="ui header">Log-in</h3>
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" id="remember" />
<label for="remember">Remember me</label>
</div>
</div>
<div class="ui submit button">Login</div>
<div class="ui grid">
<div class="three 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>
<div class="column">
<div class="ui fluid form segment">
<h3 class="ui header">Register</h3>
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" id="conditions" />
<label for="conditions">I agree to the terms and conditions</label>
</div>
</div>
<div class="ui blue submit button">Submit</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 class="five 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 class="column">
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
</div>
</div>
@ -730,35 +701,38 @@ themes : ['Default']
<h4 class="ui header">Padded</h4>
<p>A grid can preserve its vertical and horizontal gutters on first and last columns</p>
<p>This paragraph of text will not align with the edges of the first column below because the grid preserves its outter gutters</p>
<p>The following grid has vertical and horizontal gutters</p>
<div class="ui divider"></div>
<div class="ui two column padded grid">
<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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
</div>
<div class="another example">
<p>This paragraph of text will not align vertically with the edges of the first column below because the grid preserves its outter gutters</p>
<p>The following grid has vertical gutters.</p>
<div class="ui divider"></div>
<div class="ui two column vertically padded grid">
<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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
</div>
<div class="another example">
<p>This paragraph of text will not align horizontally with the edges of the first column below because the grid preserves its outter gutters</p>
<p>The following grid has horizontal gutters</p>
<div class="ui divider"></div>
<div class="ui two column horizontally padded grid">
<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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
</div>
@ -766,99 +740,34 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Relaxed</h4>
<p>A grid can increase its gutters to allow for more negative space</p>
<div class="ui two column relaxed grid">
<div class="ui four column relaxed grid">
<div class="column">
<div class="ui fluid form segment">
<h3 class="ui header">Log-in</h3>
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="ui blue submit button">Login</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="column">
<div class="ui fluid form segment">
<h3 class="ui header">Register</h3>
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" id="terms" />
<label for="terms">I agree to the terms and conditions</label>
</div>
</div>
<div class="ui blue submit button">Submit</div>
</div>
<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 class="another example">
<div class="ui two column very relaxed grid">
<div class="ui four column very relaxed grid">
<div class="column">
<div class="ui fluid form segment">
<h3 class="ui header">Log-in</h3>
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="ui blue submit button">Login</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/image.png">
</div>
<div class="column">
<div class="ui fluid form segment">
<h3 class="ui header">Register</h3>
<div class="two fields">
<div class="field">
<label>First Name</label>
<input placeholder="First Name" type="text">
</div>
<div class="field">
<label>Last Name</label>
<input placeholder="Last Name" type="text">
</div>
</div>
<div class="field">
<label>Username</label>
<input placeholder="Username" type="text">
</div>
<div class="field">
<label>Password</label>
<input type="password">
</div>
<div class="inline field">
<div class="ui checkbox">
<input type="checkbox" id="terms" />
<label for="terms"></label>
</div>
<label>I agree to the terms and conditions</label>
</div>
<div class="ui blue submit button">Submit</div>
</div>
<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>
@ -872,32 +781,32 @@ themes : ['Default']
<div class="five column doubling ui grid">
<div class="column">
<div class="ui segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="column">
<div class="ui segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="column">
<div class="ui segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="column">
<div class="ui segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="column">
<div class="ui segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
</div>
@ -912,14 +821,14 @@ themes : ['Default']
<div class="two column stackable ui grid">
<div class="column">
<div class="ui segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="column">
<div class="ui segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
</div>
@ -968,31 +877,14 @@ themes : ['Default']
<div class="ui middle aligned three column grid">
<div class="row">
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Cats
</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Dogs
</div>
<div class="item">
Poodle
</div>
<div class="item">
Cockerspaniel
</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Monkeys
</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
</div>
@ -1087,14 +979,30 @@ themes : ['Default']
<h4 class="ui header">Equal Height</h4>
<p>A row can specify that it is equal height so all of its columns appear the length of its longest column.</p>
<div class="ui three column grid">
<div class="equal height divided row">
<div class="column">
<p>This is a short row</p>
</div>
<div class="column">
<p>This is a short row</p>
</div>
<div class="column">
<p>This is a very long row with lots of text in it and way more text than the other rows</p>
<p>It might even span for multiple paragraphs.</p>
</div>
</div>
</div>
</div>
<div class="another example">
<div class="ui three column horizontally padded grid">
<div class="equal height row">
<div class="column" style="background-color:#F0F0FF;">
<div class="red column">
<p>This is a short row</p>
</div>
<div class="column" style="background-color:#F0F0FF;">
<div class="blue column">
<p>This is a short row</p>
</div>
<div class="column" style="background-color:#F0F0FF;">
<div class="green column">
<p>This is a very long row with lots of text in it and way more text than the other rows</p>
<p>It might even span for multiple paragraphs.</p>
</div>
@ -1107,94 +1015,43 @@ themes : ['Default']
<div class="ui three column grid">
<div class="top aligned row">
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Cats
</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Dogs
</div>
<div class="item">
Poodle
</div>
<div class="item">
Cockerspaniel
</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Monkeys
</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="justified row">
<div class="sixteen wide column">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit sagittis elit, nec pharetra justo lobortis vitae. Quisque sed libero ut lacus mattis lacinia. Pellentesque pharetra vel quam sed tristique. Aenean sit amet purus sed sapien suscipit rhoncus. Nunc vel pharetra elit. Integer eleifend in turpis vel suscipit. Mauris porttitor nunc ante, eu vestibulum augue facilisis lacinia. Curabitur blandit urna lorem, et ornare mi laoreet iaculis. Nunc volutpat ultrices libero quis molestie. Nunc ac porta odio. Quisque interdum sodales augue, quis facilisis sem elementum quis.</p>
<p>Justified content fits exactly inside the grid column, taking up the entire width from one side to the other.</p>
</div>
</div>
<div class="middle aligned row">
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Dogs
</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Dogs
</div>
<div class="item">
Poodle
</div>
<div class="item">
Cockerspaniel
</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Monkeys
</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
<div class="bottom aligned row">
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Cats
</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Dogs
</div>
<div class="item">
Poodle
</div>
<div class="item">
Cockerspaniel
</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="column">
<div class="ui vertical fluid menu">
<div class="header item">
Monkeys
</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
</div>
@ -1207,30 +1064,10 @@ themes : ['Default']
<p>A column can be "floated" to either the left or right of its row.</p>
<div class="ui grid">
<div class="left floated four wide column">
<div class="ui vertical fluid menu">
<div class="header item">
Dogs
</div>
<div class="item">
Poodle
</div>
<div class="item">
Cockerspaniel
</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="right floated four wide column">
<div class="ui vertical fluid menu">
<div class="header item">
Cats
</div>
<div class="item">
Abysinnian
</div>
<div class="item">
Sphynx
</div>
</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
</div>
@ -1239,13 +1076,13 @@ themes : ['Default']
<p>A column can vary in width taking up more than a single grid column.</p>
<div class="ui grid">
<div class="three wide column">
<div class="ui segment"><b>Column One</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum iaculis sapien.</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="six wide column">
<div class="ui segment"><b>Column Two</b> Aliquam lobortis commodo sem ac accumsan. Vestibulum non faucibus lorem. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sed lorem lorem. Nam augue erat, dignissim nec aliquam vel, congue et sapien. Integer viverra justo vel nibh suscipit commodo. Nullam ut turpis nibh, in luctus risus. Sed ut risus nec dui mattis porta. Nam nisi magna, ornare mollis congue a, suscipit at nisl.</div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="three wide column">
<div class="ui segment"><b>Column Three</b> Donec semper mollis condimentum. Aenean eget rutrum magna. Mauris ornare nibh scelerisque turpis lobortis dignissim. Etiam eleifend justo eget quam semper vulputate. Nulla et risus convallis velit molestie iaculis. Aliquam erat volutpat. </div>
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
</div>
</div>

25
server/documents/elements/divider.html.eco
View File

@ -22,15 +22,15 @@ themes : ['default']
<h4 class="ui header">Divider</h4>
<div class="ignored ui warning message">If you are looking to add a divider in between grid rows, you can use the <code>ui divided grid</code> variation. For more information check out <a href="/collections/grid.html">the grid definition</a></div>
<p>A standard divider</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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui divider"></div>
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="example">
<h4 class="ui header">Vertical Divider</h4>
<div class="ui info message">
If you use a vertical divider inside a <a href="/collections/grid.html">stackable grid</a> it will automatically adjust from a <code>vertical divider</code> to a <code>horizontal divider</code> at mobile resolutions.
<div class="ui info ignored message">
A vertical divider will automatically adjust to a horizontal divider at mobile resolutions when used inside a <a href="/collections/grid.html">stackable grid</a>
</div>
<p>A divider can segment content vertically</p>
<div class="ui two column middle aligned relaxed fitted stackable grid">
@ -127,9 +127,9 @@ themes : ['default']
<h4 class="ui header">Inverted</h4>
<p>A divider can have its colors inverted</p>
<div class="ui inverted segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui inverted divider"></div>
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
@ -147,30 +147,29 @@ themes : ['default']
<h4 class="ui header">Hidden</h4>
<p>A hidden divider divides content without creating a dividing line</p>
<h3 class="ui header">Section One</h3>
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui hidden divider"></div>
<h3 class="ui header">Section Two</h3>
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="example">
<h4 class="ui header">Section</h4>
<p>A divider can provide greater margins to divide sections of content</p>
<h3 class="ui header">Section One</h3>
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui section divider"></div>
<h3 class="ui header">Section Two</h3>
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="example">
<h4 class="ui header">Clearing</h4>
<p>A divider can clear the contents above it</p>
<div class="ui segment">
<h2 class="ui left floated header">Left Header</h2>
<h2 class="ui right floated header">Right Header</h2>
<h2 class="ui right floated header">Floated Content</h2>
<div class="ui clearing divider"></div>
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>

40
server/documents/elements/header.html.eco
View File

@ -26,7 +26,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
<h2 class="ui header">
Account Settings
</h2>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<div class="example">
@ -36,7 +36,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
Account Settings
<div class="sub header">Manage your account settings and set e-mail preferences.</div>
</h2>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="another example">
<h2 class="ui header">
@ -46,7 +46,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
<div class="sub header">Manage your account settings and set e-mail preferences.</div>
</div>
</h2>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="example">
@ -59,7 +59,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
<div class="sub header">Manage your account settings and set e-mail preferences.</div>
</div>
</h2>
<img class="ui disabled ignored image" src="/images/wireframe/centered-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/centered-paragraph.png">
</div>
@ -73,15 +73,15 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
</div>
<div class="sizer">
<h1 class="ui header">First header</h1>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<h2 class="ui header">Second header</h2>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<h3 class="ui header">Third header</h3>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<h4 class="ui header">Fourth header</h4>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<h5 class="ui header">Fifth header</h5>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
@ -95,15 +95,15 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
</div>
<div class="sizer">
<div class="ui huge header">Huge Header</div>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui large header">Large Header</div>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui medium header">Medium Header</div>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui small header">Small Header</div>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui tiny header">Tiny Header</div>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
@ -115,7 +115,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
<div class="ui disabled header">
Disabled Header
</div>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<h2 class="ui dividing header">Variations</h2>
@ -124,11 +124,11 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
<div class="example">
<h4 class="ui header">Dividing</h4>
<p>A header can be formatted to divide itself from the content below it</p>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<h3 class="ui dividing header">
Dividing Header
</h3>
<img class="ui disabled ignored image" src="/images/wireframe/short-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
@ -138,7 +138,7 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
<h3 class="ui black block header">
Block Header
</h3>
<img class="ui disabled ignored image" src="/images/wireframe/media-paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
</div>
@ -149,13 +149,13 @@ themes : ['Default', 'Classic', 'Bookish', 'Chubby']
Top Attached
</h3>
<div class="ui attached segment">
<img class="ui disabled ignored image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<h3 class="ui attached header">
Attached
</h3>
<div class="ui attached segment">
<img class="ui disabled ignored image" src="/images/wireframe/paragraph.png">
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
</div>
<h3 class="ui bottom attached header">
Bottom Attached

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

@ -21,7 +21,7 @@ themes : ['default', 'GitHub']
<h4 class="ui header">Segment</h4>
<p>A segment of content</p>
<div class="ui segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
@ -30,13 +30,13 @@ themes : ['default', 'GitHub']
<p>A vertical segment formats content to be aligned as part of a vertical group</p>
<div class="ui segment">
<div class="ui vertical segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="ui vertical segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="ui vertical segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
</div>
@ -52,17 +52,17 @@ themes : ['default', 'GitHub']
<div class="ui three column grid">
<div class="column">
<div class="ui horizontal segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
<div class="column">
<div class="ui horizontal segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
<div class="column">
<div class="ui horizontal segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
</div>
@ -104,7 +104,7 @@ themes : ['default', 'GitHub']
<h4 class="ui header">Disabled</h4>
<p>A segment may show its content is disabled
<div class="ui disabled segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
@ -182,17 +182,17 @@ themes : ['default', 'GitHub']
<h4 class="ui header">Colored</h4>
<p>A segment can be colored</p>
<div class="ui blue segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui orange segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui green segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui red segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui purple segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
<div class="ui teal segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>
</div>
@ -203,22 +203,22 @@ themes : ['default', 'GitHub']
<div class="another example">
<p>These colors can be inverted</p>
<div class="ui blue inverted segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="ui orange inverted segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="ui green inverted segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="ui red inverted segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="ui purple inverted segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
<div class="ui teal inverted segment">
<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>
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
</div>
</div>

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

@ -9,7 +9,7 @@ title : 'Card'
description : 'A card displays site content in a manner similar to a playing card'
type : 'UI View'
themes : ['Default', 'Basic', 'GitHub']
themes : ['Default', 'Basic', 'Classic']
---
<%- @partial('header') %>

4
server/files/javascript/header.js
View File

@ -18,7 +18,7 @@ semantic.header.ready = function() {
increase: function() {
var
$container = $(this).parent().next('.ui.segment'),
$container = $(this).parent().next('.sizer'),
fontSize = parseInt( $container.css('font-size'), 10)
;
$container
@ -27,7 +27,7 @@ semantic.header.ready = function() {
},
decrease: function() {
var
$container = $(this).parent().next('.ui.segment'),
$container = $(this).parent().next('.sizer'),
fontSize = parseInt( $container.css('font-size'), 10)
;
$container

30
server/files/javascript/semantic.js
View File

@ -585,15 +585,37 @@ semantic.ready = function() {
$annotation = $example.find('.annotation'),
$code = $annotation.find('.code'),
$header = $example.not('.another').children('.ui.header:first-of-type').eq(0).add('p:first-of-type'),
$ignored = $('i.code:last-child, .anchor, .code, .existing, .pointing.below.label, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
$ignored = $('i.code:last-child, .wireframe, .anchor, .code, .existing, .pointing.below.label, .instructive, .language.label, .annotation, br, .ignore, .ignored'),
$demo = $example.children().not($header).not($ignored),
code = ''
;
if( $code.size() === 0) {
$demo
.each(function(){
var $this = $(this).clone(false);
if($this.not('br')) {
.each(function() {
var
$this = $(this).clone(false),
$wireframe = $this.find('.wireframe').add($this.filter('.wireframe'))
;
$wireframe
.each(function() {
var
src = $(this).attr('src'),
image = (src.search('image') !== -1),
paragraph = (src.search('paragraph') !== -1)
;
if(paragraph) {
$(this).replaceWith('<p></p>')
}
else if(image) {
$(this).replaceWith('<img>');
}
})
;
// remove wireframe images
$this.find('.wireframe').remove();
if($this.not('br').not('.wireframe')) {
// allow inline styles only with this one class
if($this.is('.my-container')) {
code += $this.get(0).outerHTML + "\n";

35
server/files/stylesheets/semantic.css
View File

@ -91,6 +91,19 @@ h1 {
padding: 50px 0px 5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#example .example .wireframe.image {
opacity: 0.5;
}
#example .example .wireframe.image {
margin: 1em 0em;
}
#example .example .wireframe.image:first-child {
margin-top: 0em;
}
#example .example .wireframe.image:last-child {
margin-bottom: 0em;
}
#example .example .anchor + p {
margin: 0px 0px 1em;
}
@ -810,6 +823,10 @@ body#example.hide {
#example .highlighted.special.example .page.grid > .column:last-child:after {
display: none;
}
#example.animated .negative.example > .grid {
margin: -1rem !important;
background-color: #FFEEEE;
}
/* Animation */
#example.animated .highlighted.example > .grid,
@ -819,20 +836,19 @@ body#example.hide {
-moz-animation: grid 7s ease infinite;
animation: grid 7s ease infinite;
}
/* Grid Inside Grid */
#example.animated .highlighted.example .grid .grid,
#example.animated .animated.example .grid .grid {
#example.animated .negative.example > .grid {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
}
#example.animated .negative.example > .grid {
/* Grid Inside Grid */
#example.animated .highlighted.example .grid .grid,
#example.animated .animated.example .grid .grid {
-webkit-animation: none;
-moz-animation: none;
-ms-animation: none;
animation: none;
background-color: #FFEEEE;
}
@-webkit-keyframes grid {
@ -1403,6 +1419,15 @@ body.progress.animated .ui.progress .bar {
}
@media only screen and (max-width : 998px) {
#example .pusher > .page {
display: block;
width: 100%;
}
#example .pusher > .page > .full.height {
display: block;
height: 100%;
}
#example .following.menu {
display: none;
}

Write Preview
Loading…
Cancel
Save