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

Fixes some formatting on grid/list

pull/329/head
jlukic 11 years ago
parent
a624771152
commit
e14b9c3369
3 changed files with 155 additions and 158 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 298
      server/documents/collections/grid.html.eco
  2. 10
      server/documents/views/list.html.eco
  3. 5
      server/files/404.html

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

@ -47,6 +47,153 @@ type : 'UI Collection'
</div>
</div>
<div class="example">
<h4 class="ui header">Page Grid</h4>
<p>A page grid is used to layout page contents into a grid system. Page grids exists on the top level of a web site. A page grid has gutters to the left and right of its columns to center content on a page.</p>
<div class="ui text message info ignore">
<i class="icon heart"></i> Semantic UI's page grid by default will change the page gutters to increase at 250pixel intervals.
</div>
<div class="ui two column page grid">
<div class="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>
</div>
<div class="column">
<div class="ui segment">
<b>Inbox</b>
<p>Welcome to your inbox. Would you like to see more information?</p>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Divided Grid</h4>
<p>A grid can have dividers between its columns</p>
<div class="ui six column divided grid">
<div class="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>
</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>
</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>
<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 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>
</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>
</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>
<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="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>
</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>
</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>
<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 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>
</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>
</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>
<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">Vertically Divided Grid</h4>
<p>A grid can have dividers between rows</p>
<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>
</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>
</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>
</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>
</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>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Celled Grid</h4>
<p>A grid can have rows divided into cells</p>
<div class="ui celled grid">
<div class="row">
<div class="two wide column" style="">
<p>Lorem ipsum do</p>
</div>
<div class="three wide column" style="">
<p>Lorem ipsum dolor </p>
</div>
<div class="seven wide column">
<p>Lorem ipsum dolor sitos. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
<div class="row">
<div class="five wide 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>
</div>
<div class="three wide 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>
<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 class="two wide 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>
</div>
<div class="two wide 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>
</div>
</div>
</div>
</div>
<h2 class="ui dividing header">Elements</h2>
<div class="highlighted example">
@ -246,155 +393,6 @@ type : 'UI Collection'
</div>
</div>
<h2 class="ui dividing header">Types</h2>
<div class="example">
<h4 class="ui header">Page Grid</h4>
<p>A page grid exists on the top level of a web site. It can change its left and right gutter size to be responsive to a browser's width. This means the gutters to left and right of grid columns will alter in size as a browser's resolution increases.</p>
<div class="ui text message info ignore">
<i class="icon heart"></i> Semantic UI's page grid by default will change the page gutters to increase at 250pixel intervals.
</div>
<div class="ui two column page grid">
<div class="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>
</div>
<div class="column">
<div class="ui segment">
<b>Inbox</b>
<p>Welcome to your inbox. Would you like to see more information?</p>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Divided Grid</h4>
<p>A grid can have dividers between columns</p>
<div class="ui six column divided grid">
<div class="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>
</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>
</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>
<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 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>
</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>
</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>
<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="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>
</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>
</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>
<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 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>
</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>
</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>
<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">Vertically Divided Grid</h4>
<p>A grid can have dividers between rows</p>
<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>
</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>
</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>
</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>
</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>
</div>
</div>
</div>
</div>
<div class="example">
<h4 class="ui header">Celled Grid</h4>
<p>A grid can have rows divided into cells</p>
<div class="ui celled grid">
<div class="row">
<div class="two wide column" style="">
<p>Lorem ipsum do</p>
</div>
<div class="three wide column" style="">
<p>Lorem ipsum dolor </p>
</div>
<div class="seven wide column">
<p>Lorem ipsum dolor sitos. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
</div>
</div>
<div class="row">
<div class="five wide 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>
</div>
<div class="three wide 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>
<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 class="two wide 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>
</div>
<div class="two wide 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>
</div>
</div>
</div>
</div>
<h2 class="ui dividing header">Variations</h2>
<h3 class="ui header">Grid</h3>
@ -604,7 +602,7 @@ type : 'UI Collection'
<h4 class="ui header">Responsive to Device</h4>
<p>A grid can have its columns, or rows only show content for computer, tablet, or mobile.</p>
<div class="ui text message info ignore">
<i class="icon heart"></i> Breakpoints are 768 for mobile, 768-998 for tablet and 998 for pc</i>
<i class="icon heart"></i> Breakpoints are 768px and below for mobile, 768-998px for tablet and 998px+ for pc</i>
</div>
<div class="ui grid">
<div class="two column mobile only row">

10
server/documents/views/list.html.eco
View File

@ -22,7 +22,7 @@ type : 'UI View'
<div class="example">
<h4 class="ui header">List</h4>
<p>A standard list</p>
<div class="ui divided list">
<div class="ui list">
<div class="item">
<img src="/images/demo/avatar2.jpg">
<div class="content">
@ -242,28 +242,28 @@ type : 'UI View'
<p>A list item can contain a description</p>
<div class="ui divided list">
<div class="item">
<i class="circular map marker icon"></i>
<i class="map marker icon"></i>
<div class="content">
<a class="header">New York City</a>
<div class="description">A lovely city</div>
</div>
</div>
<div class="item">
<i class="circular map marker icon"></i>
<i class="map marker icon"></i>
<div class="content">
<a class="header">Chicago</a>
<div class="description">A lovely city</div>
</div>
</div>
<div class="item">
<i class="circular map marker icon"></i>
<i class="map marker icon"></i>
<div class="content">
<a class="header">Los Angeles</a>
<div class="description">A lovely city</div>
</div>
</div>
<div class="item">
<i class="circular map marker icon"></i>
<i class="map marker icon"></i>
<div class="content">
<a class="header">San Francisco</a>
<div class="description">A lovely city</div>

5
server/files/404.html
View File

@ -9,7 +9,7 @@
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/button.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/divider.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/header.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/icons.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/icon.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/label.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/progress.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/elements/segment.css">
@ -23,14 +23,13 @@
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/views/comment.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/views/feed.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/views/items.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/views/item.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/checkbox.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/dropdown.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/popup.css">
<link rel="stylesheet" type="text/css" class="ui" href="/build/uncompressed/modules/shape.css">
<link rel="stylesheet" type="text/css" class="ui" href="/overrides/fonts/sketchy.icons.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/library/sidr.css">
<link rel="stylesheet" type="text/css" href="/stylesheets/semantic.css">

Write Preview
Loading…
Cancel
Save