Skip to content

Commit

Permalink
Merged in relevant changes from pull request #594.
Browse files Browse the repository at this point in the history
  • Loading branch information
Paul Jackson authored and Paul Jackson committed Oct 23, 2012
1 parent 3095a90 commit 04574a4
Show file tree
Hide file tree
Showing 6 changed files with 215 additions and 42 deletions.
31 changes: 31 additions & 0 deletions demos/grids/grid-module-eng.html
View file
Expand Up @@ -442,6 +442,7 @@ <h4>Laura and Martha</h4>
<p>UxWG conference</p>
</div>
</div>



<details>
Expand All @@ -459,6 +460,36 @@ <h4>Laura and Martha</h4>
</details>
</div>
<div class="clear"></div>
<p>Layer this module with other CSS to achieve new effects</p>
<div class="span-1"></div>
<div class="span-5">
<div class="span-2 row-start">
<div class="module-poster">
<a href="#">
<img src="images/poster.jpg" alt="Laura and Martha - UxWG conference" />
<p class="position-top-medium position-left background-dark">
Link text goes here
</p>
</a>
</div>
</div>
<details>
<summary>View code</summary>
<pre>
&lt;div class=&quot;span-2&quot;&gt;
&lt;div class=&quot;module-poster&quot;&gt;
&lt;a href=&quot;#&quot;&gt;
&lt;img src=&quot;images/poster.jpg&quot; alt=&quot;Laura and Martha - UxWG conference&quot; /&gt;
&lt;p class=&quot;position-top-medium position-left background-dark&quot;&gt;
Link text goes here
&lt;/p&gt;
&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</details>

</div>
<div class="clear"></div>

<h2 id="contact"><code>module-contact</code> style</h2>
<p>Use the <code>module-contact</code> to feature <strong>basic contact information</strong> (complex information should use a regular table instead of this <abbr title="Cascading Style Sheet">CSS</abbr> module).</p>
Expand Down
Binary file added demos/tabs/images/demo-1.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/tabs/images/demo-2.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added demos/tabs/images/demo-3.jpg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
113 changes: 92 additions & 21 deletions demos/tabs/tabs-eng.html
View file
Expand Up @@ -171,6 +171,8 @@ <h1 id="wb-cont">Tabbed interface</h1>
<li><code>animate-fast</code></li>
<li><code>animate-slow</code></li>
<li><code>animate</code></li>
<li><code>slide-horz</code></li>
<li><code>slide-vert</code></li>
</ul>
</section></div>
<div class="clear"></div>
Expand Down Expand Up @@ -245,27 +247,48 @@ <h1 id="wb-cont">Tabbed interface</h1>
</div><div class="clear"></div></section>

<section><div class="span-4"><h3 class="background-dark margin-bottom-medium"><code>tabs-style-2</code> design</h3>
<p><strong>Demo includes:</strong> <code>cycle-slow</code> and <code>animate</code></p>
<div class="wet-boew-tabbedinterface tabs-style-2 cycle-slow animate">
<p><strong>Demo includes:</strong> <code>cycle-slow</code>, <code>animate</code> and <code>slide-horz</code></p>
<div class="wet-boew-tabbedinterface tabs-style-2 cycle-slow animate slide-horz">
<div class="tabs-panel">
<div id="tab7" class="tabs-content-pad"><section><h4>Tab 7</h4>
<p><a href="#">fake link</a></p>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
</section></div>
<div id="tab8" class="tabs-content-pad"><section><h4>Tab 8</h4>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
<p><a href="#">fake link</a></p>
</section></div>
<div id="tab9" class="tabs-content-pad"><section><h4>Tab 9</h4>
<p><a href="#">fake link</a></p>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
<div class="clear"></div>
<p><a href="#"><img src="../grids/images/photo.jpg" width="60" height="60" class="image-actual float-left" alt="photo" />X heading</a><br />
Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
</section></div>
<div id="tab7">
<section>
<div class="span-2 row-start margin-bottom-none">
<div class="tabs-content-pad">
<h2 class="margin-top-none">Tab 7</h2>
<p>Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
<p><a href="#" class="button button-accent">Continue reading<span class="wb-invisible">: Descriptive link text 1</span></a></p>
</div>
</div>
<div class="span-2 margin-right-none row-end margin-bottom-none"><img src="images/demo-1.jpg" alt="description 1" class="margin-bottom-none" /></div>
<div class="clear"></div>
</section>
</div>
<div id="tab8">
<section>
<div class="span-2 row-start margin-bottom-none">
<div class="tabs-content-pad">
<h2 class="margin-top-none">Tab 8</h2>
<p>Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
<p><a href="#" class="button button-accent">Continue reading<span class="wb-invisible">: Descriptive link text 2</span></a></p>
</div>
</div>
<div class="span-2 margin-right-none row-end margin-bottom-none"><img src="images/demo-2.jpg" alt="description 1" class="margin-bottom-none" /></div>
<div class="clear"></div>
</section>
</div>
<div id="tab9">
<section>
<div class="span-2 row-start margin-bottom-none">
<div class="tabs-content-pad">
<h2 class="margin-top-none">Tab 9</h2>
<p>Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content. Fake content.</p>
<p><a href="#" class="button button-accent">Continue reading<span class="wb-invisible">: Descriptive link text 3</span></a></p>
</div>
</div>
<div class="span-2 margin-right-none row-end margin-bottom-none"><img src="images/demo-3.jpg" alt="description 1" class="margin-bottom-none" /></div>
<div class="clear"></div>
</section>
</div>
</div>
<ul class="tabs">
<li><a href="#tab7">Tab 7</a></li>
Expand Down Expand Up @@ -347,14 +370,62 @@ <h1 id="wb-cont">Tabbed interface</h1>
</div>
</div></section>
<div class="clear"></div>

<section><div class="span-8"><h3 class="background-dark margin-bottom-medium"><code>tabs-style-6</code> design (v3.1 Alpha)</h3>
<p><strong>Demo includes:</strong> <code>embedded-grid</code>, <code>animate</code>, <code>cycle</code> and <code>slide-horz</code>.</p>
<div class="wet-boew-tabbedinterface embedded-grid tabs-style-6 animate cycle slide-horz">
<div class="tabs-panel">
<div id="tab23" class="span-8 margin-bottom-none"><section><h4 class="wb-invisible">Tab 23</h4>
<img height="190" width="700" alt="" src="../grids/images/position.png" class="margin-bottom-none" />
<div class="span-3 position-top position-right align-center font-small opacity-90">
<div class="span-1 row-start background-light">
<a href="#"><img height="50" width="100" src="../grids/images/position-mini-3.png" class="margin-bottom-none" alt="" />Lorem ipsum</a>
</div>
<div class="span-1 background-light">
<a href="#"> <img height="50" width="100" src="../grids/images/position-mini-2.png" class="margin-bottom-none" alt="" />Dolor sit amet</a>
</div>
<div class="span-1 background-light row-end">
<a href="#"><img height="50" width="100" src="../grids/images/position-mini-1.png" class="margin-bottom-none" alt="" />Nam sagittis</a>
</div>
<div class="clear"></div>
</div>
</section></div>
<div id="tab24" class="span-8 margin-bottom-none"><section><h4 class="wb-invisible">Tab 24</h4>
<img height="190" width="700" src="../grids/images/position.png" class="margin-bottom-none" alt="" />
<div class="span-8 position-left position-bottom opacity-90 background-dark">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section></div>
<div id="tab25" class="span-8 margin-bottom-none"><section><h4 class="wb-invisible">Tab 25</h4>
<img height="190" width="700" src="../grids/images/position.png" class="margin-bottom-none" alt="" />
<div class="span-4 position-right position-top-large opacity-90 background-accent">
<p>Nam sagittis, eros bibendum vestibulum ultricies, mi elit luctus lectus, non tincidunt felis lectus ut dolor. Curabitur porttitor felis vel lorem malesuada non tristique enim pellentesque. </p>
</div>
</section></div>
<div id="tab26" class="span-8 margin-bottom-none"><section><h4 class="wb-invisible">Tab 26</h4>
<img height="190" width="700" src="../grids/images/position.png" class="margin-bottom-none" alt="" />
<div class="span-8 position-left position-bottom opacity-90 background-dark">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</section></div>
</div>
<ul class="tabs">
<li class="img"><a href="#tab23"><span class="wb-invisible">Tab 23</span><img src="../grids/images/position-mini-3.png" width="100" height="50" class="image-actual" alt="" /></a></li>
<li class="img"><a href="#tab24"><span class="wb-invisible">Tab 24</span><img src="../grids/images/position-mini-2.png" width="100" height="50" class="image-actual" alt="" /></a></li>
<li class="img"><a href="#tab25"><span class="wb-invisible">Tab 25</span><img src="../grids/images/position-mini-1.png" width="100" height="50" class="image-actual" alt="" /></a></li>
<li><a href="#tab26">Tab 26</a></li>
</ul>
</div>
</div></section>

</section>

<section><h3 id="complex">Complex examples</h3>
<section><h4>Example 1</h4>
<p>When creating parent/child grids, you must use <code>row-start</code> and <code>row-end</code>. There are rare times where this may not be desirable. For example, with drag and drop widgets each grid cell must be the same size so the addition of
<code>row-start</code> or <code>row-end</code> on some of them may cause layout problems when the box is moved from one column to another. In such a case, you can use the class
<code>embedded-grid</code>. This CSS acts as a container for the tabs and you do not need to put them in a grid cell. It also removes the borders so the full with of the space is available.</p>
<div class="wet-boew-tabbedinterface embedded-grid">
<div class="wet-boew-tabbedinterface embedded-grid animate slide-vert">
<ul class="tabs">
<li><a href="#tab30">National events</a></li>
<li><a href="#tab31">Regional events</a></li>
Expand Down

0 comments on commit 04574a4

Please sign in to comment.