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

Adds docs for doubling grid, grid changes

pull/410/head
jlukic 11 years ago
parent
5c1cc21d83
commit
06bd65f441
2 changed files with 78 additions and 44 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 40
      server/documents/collections/grid.html.eco
  2. 82
      server/documents/index.html.eco

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

@ -501,6 +501,46 @@ type : 'UI Collection'
</div>
</div>
<div class="example">
<h4 class="ui header">Doubling Grid</h4>
<p>A grid can double its</p>
<div class="ui text message info ignore">
<i class="icon heart"></i> A grid will round its columns to the closest reasonable value when doubling, for example a <code>five column grid</code> will double <code>1 mobile, 3 tablet, 5 desktop</code>
</div>
<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>
</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>
</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>
</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>
</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>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Stackable Grid</h4>
<p>A grid can have its columns stack on-top of each other after reaching mobile breakpoints</p>

82
server/documents/index.html.eco
View File

@ -15,7 +15,7 @@ type : 'Semantic'
<div class="ui page grid">
<div class="column">
<div class="introduction">
<h1 class="ui header">Semantic UI <a class="ui black label" href="https://github.com/jlukic/Semantic-UI/blob/master/RELEASE%20NOTES.md">0.9.6</a></h1>
<h1 class="ui header">Semantic UI <a class="ui black label" href="https://github.com/jlukic/Semantic-UI/blob/master/RELEASE%20NOTES.md">0.<9 class="6"></9></a></h1>
<h2 class="ui header">UI is the vocabulary of the web.</h2>
<p>Semantic empowers designers and developers by creating a language for sharing UI.</p>
<a class="ui black large labeled launch icon button"><i class="icon list layout"></i> View UI</a>
@ -43,79 +43,73 @@ type : 'Semantic'
<div class="ui message">
Semantic is tag ambivalent meaning you can use <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list" target="_blank">any html tags</a> with UI elements.
</div>
<div class="ui stackable grid">
<div class="two column row">
<div class="ui stackable two column grid">
<div class="column">
<a class="ui teal label" href="/collections/grid.html">Semantic</a>
<div class="code" data-type="html">
<main class="ui three column grid">
<aside class="column">1</aside>
<section class="column">2</section>
<section class="column">3</section>
</main>
<main class="ui three column grid">
<aside class="column">1</aside>
<section class="column">2</section>
<section class="column">3</section>
</main>
</div>
</div>
<div class="column">
<div class="ui black label">Bootstrap</div>
<div class="code" data-type="html">
<div class="row">
<div class="col-lg-4">1</div>
<div class="col-lg-4">2</div>
<div class="col-lg-4">3</div>
</div>
<div class="row">
<div class="col-lg-4">1</div>
<div class="col-lg-4">2</div>
<div class="col-lg-4">3</div>
</div>
</div>
</div>
</div>
<div class="two column row">
<div class="column">
<a class="ui teal label" href="/collections/menu.html">Semantic</a>
<div class="code" data-type="html">
<nav class="ui menu">
<h3 class="header item">Title</h3>
<a class="active item">Home</a>
<a class="item">Link</a>
<a class="item">Link</a>
<span class="right floated text item">
Signed in as <a href="#">user</a>
</span>
</nav>
<nav class="ui menu">
<h3 class="header item">Title</h3>
<a class="active item">Home</a>
<a class="item">Link</a>
<a class="item">Link</a>
<span class="right floated text item">
Signed in as <a href="#">user</a>
</span>
</nav>
</div>
</div>
<div class="column">
<div class="ui black label">Bootstrap</div>
<div class="code" data-type="html">
<div class="navbar">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">User</a></p>
</ul>
</div>
<div class="navbar">
<a class="navbar-brand" href="#">Title</a>
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<p class="navbar-text pull-right">Signed in as <a href="#" class="navbar-link">User</a></p>
</ul>
</div>
</div>
</div>
</div>
<div class="two column row">
<div class="column">
<a class="ui teal label" href="/elements/button.html">Semantic</a>
<div class="code" data-type="html">
<button class="large ui button">
<i class="heart icon"></i>
Like it
</button>
<button class="large ui button">
<i class="heart icon"></i>
Like it
</button>
</div>
</div>
<div class="column">
<div class="ui black label">Bootstrap</div>
<div class="code" data-type="html">
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-heart"></span>
Like
</button>
<button type="button" class="btn btn-primary btn-lg">
<span class="glyphicon glyphicon-heart"></span>
Like
</button>
</div>
</div>
</div>
</div>
</div>
</div>

Write Preview
Loading…
Cancel
Save