Browse Source

Start of rewrite of grid docs to remove page grids

mobile
jlukic 10 years ago
parent
commit
718b101b65
  1. 20
      server/documents/collections/grid.html.eco
  2. 14
      server/documents/elements/container.html.eco

20
server/documents/collections/grid.html.eco

@ -226,14 +226,14 @@ themes : ['Default']
</div>
<div class="ui right aligned grid">
<div class="right floated left aligned six wide column">
<div class="left floated right aligned six wide column">
<div class="ui segment">
Right floated left aligned column
Left floated right aligned column
</div>
</div>
<div class="left floated right aligned six wide column">
<div class="right floated left aligned six wide column">
<div class="ui segment">
Left floated right aligned column
Right floated left aligned column
</div>
</div>
<div class="center aligned two column row">
@ -268,10 +268,10 @@ themes : ['Default']
</div>
</div>
<div class="ui grid">
<div class="twelve wide column"></div>
<div class="eight wide column"></div>
<div class="four column row">
<div class="right floated column"></div>
<div class="left floated column"></div>
<div class="right floated column"></div>
</div>
<div class="row">
<div class="three wide column"></div>
@ -287,6 +287,8 @@ themes : ['Default']
<div class="highlighted example">
<h4 class="ui header">Using Containers</h4>
<p>a <a href="/elements/container.html">container</a> can be used alongside a grid to provide a responsive, fixed width container for wrapping the entire contents of your page.</p>
<div class="ui ignored info message"><code>page grid</code>, which used percentage based gutters have been deprecated to allow for a single, simple fixed size container for ui.
</div>
<div class="ui grid container">
<div class="four wide column"></div>
<div class="four wide column"></div>
@ -301,14 +303,14 @@ themes : ['Default']
<div class="no example">
<h4 class="ui header">Container Breakpoints</h4>
<p>Containers . This means your page container will <b>constantly adjust</b> as the browser width changes, giving you the largest possible space for each breakpoint.</p>
<p>Containers are fixed widths for each breakpoint.</p>
<p>Grids, rows, and columns can receive responsive classes to make them appear only on a particular device.</p>
<table class="ui celled definition table">
<thead>
<tr>
<th>Name</th>
<th>Breakpoint</th>
<th>Page Gutter</th>
<th>Container Width</th>
<th>Responsive Class</th>
<th>Variable</th>
</tr>
@ -317,7 +319,7 @@ themes : ['Default']
<tr>
<td>Mobile</td>
<td>Below 768px</td>
<td>1rem</td>
<td>100% + <code>1rem</code> gutters</td>
<td>mobile only, (x) wide mobile</td>
<td>$mobileBreakpoint</td>
</tr>

14
server/documents/elements/container.html.eco

@ -236,7 +236,7 @@ themes : ['Default']
<h4 class="ui header">Text Container</h4>
<p>A container can reduce its maximum width to more naturally accomodate a single column of text</p>
<div class="ui info message">
A text container is a simpler markup alternative to using a grid with a single column.
A text container is a simpler markup alternative to using a grid with a single column, and is designed specifically
</div>
</div>
@ -291,10 +291,9 @@ themes : ['Default']
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<h4 class="ui header">Text Alignment</h4>
<p>A container can specify its text alignment</p>
<div class="ui ignored code">
<div class="ui left aligned container">
Left Aligned
</div>
@ -306,19 +305,24 @@ themes : ['Default']
</div>
</div>
<div class="example">
<h4 class="ui header">Fluid</h4>
<p>A fluid container has no maximum width</p>
<div class="ui info message">Fluid containers are useful for setting text alignment, or other variations on unstyled content</div>
<div class="ui ignored code">
<div class="ui fluid container">
Fluid
</div>
</div>
</div>
</div>
<div class="ui fluid container">
Fluid
<h2 class="ui header">Dogs Roles with Humans</h2>
<p>Domestic dogs inherited complex behaviors, such as bite inhibition, from their wolf ancestors, which would have been pack hunters with complex body language. These sophisticated forms of social cognition and communication may account for their trainability, playfulness, and ability to fit into human households and social situations, and these attributes have given dogs a relationship with humans that has enabled them to become one of the most successful species on the planet today.</p>
<p>The dogs' value to early human hunter-gatherers led to them quickly becoming ubiquitous across world cultures. Dogs perform many roles for people, such as hunting, herding, pulling loads, protection, assisting police and military, companionship, and, more recently, aiding handicapped individuals. This impact on human society has given them the nickname "man's best friend" in the Western world. In some cultures, however, dogs are also a source of meat.</p>
</div>
<div class="ui main container"></div>
@ -487,7 +491,6 @@ themes : ['Default']
<a class="item"><i class="settings icon"></i> Account Settings</a>
</div>
</div>
<div class="right menu">
<div class="item">
<div class="ui input"><input type="text" placeholder="Search..."></div>
</div>
@ -495,7 +498,6 @@ themes : ['Default']
</div>
</div>
</div>
</div>
<div class="ui attached menu">
<div class="ui text container">

Loading…
Cancel
Save