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

redesign
jlukic 10 years ago
parent
128c2d7ab6
commit
fa6306c00c
4 changed files with 134 additions and 39 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. 6
      server/documents/collections/grid.html.eco
  2. 162
      server/documents/elements/container.html.eco
  3. 2
      server/documents/index.html.eco
  4. 3
      server/raw/stylesheets/home.css

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

@ -234,21 +234,21 @@ themes : ['Default']
<tr>
<td>Tablet</td>
<td>Above 768px and below 992px</td>
<td>8%</td>
<td>4em</td>
<td>tablet only, (x) wide tablet</td>
<td>$tabletBreakpoint</td>
</tr>
<tr>
<td>Computer</td>
<td>Above 992px</td>
<td>13%</td>
<td>3%</td>
<td>computer only, (x) wide computer</td>
<td>$computerBreakpoint</td>
</tr>
<tr>
<td>Large Screen</td>
<td>Above 1400px</td>
<td>18%</td>
<td>15%</td>
<td>(x) wide large screen</td>
<td>$largeMonitorBreakpoint</td>
</tr>

162
server/documents/elements/container.html.eco
View File

@ -54,7 +54,7 @@ themes : ['Default']
</td>
<td>
<ul class="ui list">
<li>Layouts that use full width backgrounds, negative space and do not heavily use segmented content</li>
<li>Layouts that use full width backgrounds, and prefer white space to segmented content</li>
<li>Scalable, graphic-heavy content like homepages, or product list pages.</li>
<li>Web application with several columns using fluid components</li>
</ul>
@ -90,6 +90,7 @@ themes : ['Default']
</td>
<td>
<ul class="ui list">
<li>Page gutters are optimized for specific breakpoints like 1080p and 1440p, which means at "in-between" resolutions they may not take up as much space</li>
<li>Content columns may flow too wide on large devices</li>
<li>Percentage layouts can have longer browser reflow times</li>
</ul>
@ -292,12 +293,83 @@ themes : ['Default']
<div class="ui tab" data-tab="examples">
<div class="ui main container">
<h2 class="ui dividing header">Examples</h2>
<div class="no example">
<h4 class="ui header">Containers with grids</h4>
<h4 class="ui header">Comparing Page Grids to Grid Containers</h4>
<p>The following shows a side-by-side comparison of using both containers and page grids to achieve a four column layout.</p>
<p>These grids use the <code>equal width</code> variation which splits all undeclared column widths evenly in size.</p>
</div>
<div class="ui ignored code">
<div class="ui equal width grid container">
<div class="column">
<img>
</div>
<div class="seven wide column">
<p></p>
<p></p>
<p></p>
</div>
<div class="column">
<img>
</div>
</div>
</div>
<div class="ui ignored code">
<div class="ui equal width page grid">
<div class="column">
<img>
</div>
<div class="seven wide column">
<p></p>
<p></p>
<p></p>
</div>
<div class="column">
<img>
</div>
</div>
</div>
</div>
<h3 class="ui center aligned header">Container</h3>
<div class="ui equal width grid container">
<div class="column">
<img src="/images/wireframe/white-image.png" class="ui bordered wireframe image">
</div>
<div class="seven wide column">
<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="column">
<img src="/images/wireframe/white-image.png" class="ui bordered wireframe image">
</div>
</div>
<h3 class="ui center aligned header">Page Grid</h3>
<div class="ui equal width page grid">
<div class="column">
<img src="/images/wireframe/white-image.png" class="ui bordered wireframe image">
</div>
<div class="seven wide column">
<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="column">
<img src="/images/wireframe/white-image.png" class="ui bordered wireframe image">
</div>
</div>
<div class="ui main container">
<div class="no example">
<h4 class="ui header">Containers Using Grids</h4>
<p>A container can be combined with a grid allowing you to use all of the layout and alignment available for <a href="/collections/grid.html">grids</a> including responsive patterns.</p>
</div>
@ -321,7 +393,6 @@ themes : ['Default']
</div>
</div>
</div>
</div>
<div class="ui four column doubling stackable grid container">
@ -355,45 +426,45 @@ themes : ['Default']
</div>
</div>
<div class="ui main container">
<div class="no example">
<h4 class="ui header">Container Segment</h4>
<p>A container can be used with a <a href="/elements/segment.html">segment</a></p>
</div>
<div class="ui ignored code">
<div class="ui raised text container segment">
<h2 class="ui header">Dogs Roles with Humans</h2>
<p></p>
<p></p>
</div>
</div>
</div>
<div class="ui raised text container segment">
<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 class="no example">
<h4 class="ui header">Centered Menu</h4>
<p>A container can be used inside of a menu to make sure menu contents appear in line with page contents</p>
<p>A container can be used inside of a menu to make sure menu items appear inline with page contents</p>
</div>
<div class="ui ignored code">
<div class="ui attached menu">
<div class="ui text container">
<a class="item">
<i class="home icon"></i> Home
</a>
<a class="item">
<i class="grid layout icon"></i> Browse
</a>
<a class="item">
<i class="mail icon"></i> Messages
</a>
<div class="ui simple dropdown item">
More
<i class="dropdown icon"></i>
<div class="menu">
<a class="item"><i class="edit icon"></i> Edit Profile</a>
<a class="item"><i class="globe icon"></i> Choose Language</a>
<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>
</div>
</div>
</div>
</div>
</div>
<div class="ui attached black menu">
<div class="ui attached menu">
<div class="ui text container">
<div class="right menu">
<div class="item">
<div class="ui input"><input type="text" placeholder="Search..."></div>
</div>
</div>
<a class="item">
<i class="home icon"></i> Home
</a>
@ -412,9 +483,36 @@ 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>
</div>
</div>
</div>
<div class="ui main container">
<div class="no example">
<h4 class="ui header">Container Segment</h4>
<p>A container can be used with a <a href="/elements/segment.html">segment</a></p>
</div>
<div class="ui ignored code">
<div class="ui raised very padded text container segment">
<h2 class="ui header">Dogs Roles with Humans</h2>
<p></p>
<p></p>
</div>
</div>
</div>
<div class="ui raised very padded text container segment">
<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="main container"></div>
</div>

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

@ -42,7 +42,7 @@ standalone : true
<a class="view-ui item">
<i class="sidebar icon"></i> Menu
</a>
<a href="http://www.learnsemantic.com" data-site="learn" class="additional item">Learn</a>
<a href="http://www.learnsemantic.com" data-site="learn" class="transition hidden additional item">Learn</a>
<!-- <span class="additional item" data-site="themes" data-content="Coming Soon">Themes</span>
<span class="additional item" data-site="layout" data-content="Coming Soon">Layouts</span> -->
</div>

3
server/raw/stylesheets/home.css
View File

@ -414,9 +414,6 @@
#example.index.pushed .following.bar {
transition: none;
}
#example.index .following.bar .additional.item {
display: none;
}
#example.index .following.bar .additional.item[data-site="learn"]:hover {
color: #D9499A;
}

Write Preview
Loading…
Cancel
Save