Tabs
Horizontal Tabs / Collapsing Menu
Usually tabs convert to accordions on small screens. This component takes a different approach and converts to a collapsing menu, making it easy to quickly browse through tabs without losing sight of the tab entries themselves. You'd want to use this when users need to switch between tabs a lot.
Example
In adaptive grids, we define pixel-based dimensions. Hence we will have to adjust the widths and heights manually in certain device viewports. Since fluid grids flow naturally within the dimensions of its parent container, limited adjustments will be needed for various screen sizes and devices.
Mobile devices are getting smaller in size and people prefer using them in their personal work. On the other hand, desktop monitors are getting wider with higher resolutions. So we just cannot plan for smaller devices in responsive design. The advantage of fluid grid is that we can adjust the max-width and it will still work on larger screens due to the percentage based calculations.
First discovered by designer Richard Rutter, this one rule immediately provides an incredibly handy constraint for every image in our document. Now, our img element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the max-width: 100% directive forces the image’s width to match the width of its container. And as you can see, our image has snapped into place.
A media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Imports
- SASS:
@import "base"; @import "imports/modules/tab-nav"; - Javascript:
require(["tabcontroller"], function(TabController) { TabController.init(); });
Code
<section class="tabs" data-tab-group-parent>
<div class="tabs__toggle" data-collapse-target-group="tab-nav"><a><span data-tab-toggle-text>Fluid Grids</span> <i class="fa fa-chevron-down"></i></a></div>
<div class="collapse-bd" data-collapse-group="tab-nav">
<ul class="tabs__nav collapse-inner">
<li class="tabs__nav-item tabs__nav-item--is-active" data-tab-target-group="tab-example" data-tab-target-member="grid"><a>Fluid Grids</a></li>
<li class="tabs__nav-item" data-tab-target-group="tab-example" data-tab-target-member="img"><a>Flexible Images</a></li>
<li class="tabs__nav-item" data-tab-target-group="tab-example" data-tab-target-member="mq"><a>Media Queries</a></li>
<li class="tabs__nav-item tabs__nav-item--is-disabled"><a>Disabled</a></li>
</ul>
</div>
<section class="tabs__content is-shown" data-tab-group="tab-example" data-tab-member="grid">
<p>
In adaptive grids, we define pixel-based dimensions. Hence we will have to adjust the widths and heights manually in certain device viewports. Since fluid grids flow naturally within the dimensions of its parent container, limited adjustments will be needed for various screen sizes and devices.
</p>
<p>
Mobile devices are getting smaller in size and people prefer using them in their personal work. On the other hand, desktop monitors are getting wider with higher resolutions. So we just cannot plan for smaller devices in responsive design. The advantage of fluid grid is that we can adjust the max-width and it will still work on larger screens due to the percentage based calculations.
</p>
</section>
<section class="tabs__content" data-tab-group="tab-example" data-tab-member="img">
<p>
<a href="http://clagnut.com/sandbox/imagetest/">First discovered by designer Richard Rutter</a>, this one rule immediately provides an incredibly handy constraint for every image in our document. Now, our <code class="language-markup">img</code> element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the <code class="language-css">max-width: 100%</code> directive forces the image’s width to match the width of its container. And as you can see, our image has snapped into place.
</p>
</section>
<section class="tabs__content" data-tab-group="tab-example" data-tab-member="mq">
<p>
A media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
</p>
</section>
</section>Horizontal Tabs / Accordion
This is the classical responsive tab component that converts to an accordion on small screens. Use when users are not likely to switch between tabs often or when going through tabs sequentially makes sense.
Example
First discovered by designer Richard Rutter, this one rule immediately provides an incredibly handy constraint for every image in our document. Now, our img element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the max-width: 100% directive forces the image’s width to match the width of its container. And as you can see, our image has snapped into place.
A media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Imports
- SASS:
@import "base"; @import "imports/modules/tab-nav"; - Javascript:
require(["tabacccontroller", "collapse"], function(TabAccController, Collapse) { TabAccController.init(); Collapse.init(); });
Code
<section class="js-tabs--acc tabs--acc" data-tab-group-parent>
<ul class="tabs--acc__strip">
<li class="tabs--acc__strip-item tabs--acc__strip-item--is-active" data-tab-target-group="tab4-example" data-tab-target-member="fluid4" role="tab"><a>Fluid Grids</a></li>
<li class="tabs--acc__strip-item" data-tab-target-group="tab4-example" data-tab-target-member="img4" role="tab"><a>Flexible Images</a></li>
<li class="tabs--acc__strip-item" data-tab-target-group="tab4-example" data-tab-target-member="mq4" role="tab"><a>Media Queries</a></li>
</ul>
<div class="tabs--acc__acc-container">
<div class="collapse-bd is-expanded" data-collapse-group="acctabs" data-collapse-member="fluid4" >
<section class="tabs--acc__content collapse-inner" data-tab-group="tab4-example" data-tab-member="fluid4">
<p>
In adaptive grids, we define pixel-based dimensions. Hence we will have to adjust the widths and heights manually in certain device viewports. Since fluid grids flow naturally within the dimensions of its parent container, limited adjustments will be needed for various screen sizes and devices.
</p>
<p>
Mobile devices are getting smaller in size and people prefer using them in their personal work. On the other hand, desktop monitors are getting wider with higher resolutions. So we just cannot plan for smaller devices in responsive design. The advantage of fluid grid is that we can adjust the max-width and it will still work on larger screens due to the percentage based calculations.
</p>
</section>
</div>
<div class="collapse-bd" data-collapse-group="acctabs" data-collapse-member="img4" >
<section class="tabs--acc__content collapse-inner" data-tab-group="tab4-example" data-tab-member="img4">
<p>
<a href="http://clagnut.com/sandbox/imagetest/">First discovered by designer Richard Rutter</a>, this one rule immediately provides an incredibly handy constraint for every image in our document. Now, our <code class="language-markup">img</code> element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the <code class="language-css">max-width: 100%</code> directive forces the image’s width to match the width of its container. And as you can see, our image has snapped into place.
</p>
</section>
</div>
<div class="collapse-bd" data-collapse-group="acctabs" data-collapse-member="mq4" >
<section class="tabs--acc__content collapse-inner" data-tab-group="tab4-example" data-tab-member="mq4">
<p>
A media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
</p>
</section>
</div>
</div>
</section>Vertical Tabs Left
These tabs are perfectly suited for situations when you need them in a kind of sidebar. On small screens the convert to a collapsing menu.
Example
In adaptive grids, we define pixel-based dimensions. Hence we will have to adjust the widths and heights manually in certain device viewports. Since fluid grids flow naturally within the dimensions of its parent container, limited adjustments will be needed for various screen sizes and devices.
Mobile devices are getting smaller in size and people prefer using them in their personal work. On the other hand, desktop monitors are getting wider with higher resolutions. So we just cannot plan for smaller devices in responsive design. The advantage of fluid grid is that we can adjust the max-width and it will still work on larger screens due to the percentage based calculations.
First discovered by designer Richard Rutter, this one rule immediately provides an incredibly handy constraint for every image in our document. Now, our img element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the max-width: 100% directive forces the image’s width to match the width of its container. And as you can see, our image has snapped into place.
A media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Imports
- SASS:
@import "base"; @import "imports/modules/tab-nav"; - Javascript:
require(["tabcontroller"], function(TabController) { TabController.init(); });
Code
<section class="tabs tabs--left" data-tab-group-parent>
<div class="tabs__toggle" data-collapse-target-group="tab-nav2"><a><span data-tab-toggle-text="">Fluid Grids</span> <i class="fa fa-chevron-down"></i></a></div>
<div class="collapse-bd" data-collapse-group="tab-nav2">
<ul class="tabs__nav collapse-inner">
<li class="tabs__nav-item tabs__nav-item--is-active" data-tab-target-group="tab-example2" data-tab-target-member="grid2"><a>Fluid Grids</a></li>
<li class="tabs__nav-item" data-tab-target-group="tab-example2" data-tab-target-member="img2"><a>Flexible Images</a></li>
<li class="tabs__nav-item" data-tab-target-group="tab-example2" data-tab-target-member="mq2"><a>Media Queries</a></li>
</ul>
</div>
<section class="tabs__content is-shown" data-tab-group="tab-example2" data-tab-member="grid2">
<p>
In adaptive grids, we define pixel-based dimensions. Hence we will have to adjust the widths and heights manually in certain device viewports. Since fluid grids flow naturally within the dimensions of its parent container, limited adjustments will be needed for various screen sizes and devices.
</p>
<p>
Mobile devices are getting smaller in size and people prefer using them in their personal work. On the other hand, desktop monitors are getting wider with higher resolutions. So we just cannot plan for smaller devices in responsive design. The advantage of fluid grid is that we can adjust the max-width and it will still work on larger screens due to the percentage based calculations.
</p>
</section>
<section class="tabs__content" data-tab-group="tab-example2" data-tab-member="img2">
<p>
<a href="http://clagnut.com/sandbox/imagetest/">First discovered by designer Richard Rutter</a>, this one rule immediately provides an incredibly handy constraint for every image in our document. Now, our <code class=" language-markup">img</code> element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the <code class=" language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 100%</code> directive forces the image’s width to match the width of its container. And as you can see, our image has snapped into place.
</p>
</section>
<section class="tabs__content" data-tab-group="tab-example2" data-tab-member="mq2">
<p>
A media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
</p>
</section>
</section>Vertical Tabs Right
These tabs are perfectly suited for situations when you need them in a kind of sidebar. On small screens the convert to a collapsing menu. Also, they're on the right side ;)
Example
In adaptive grids, we define pixel-based dimensions. Hence we will have to adjust the widths and heights manually in certain device viewports. Since fluid grids flow naturally within the dimensions of its parent container, limited adjustments will be needed for various screen sizes and devices.
Mobile devices are getting smaller in size and people prefer using them in their personal work. On the other hand, desktop monitors are getting wider with higher resolutions. So we just cannot plan for smaller devices in responsive design. The advantage of fluid grid is that we can adjust the max-width and it will still work on larger screens due to the percentage based calculations.
First discovered by designer Richard Rutter, this one rule immediately provides an incredibly handy constraint for every image in our document. Now, our img element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the max-width: 100% directive forces the image’s width to match the width of its container. And as you can see, our image has snapped into place.
A media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Imports
- SASS:
@import "base"; @import "imports/modules/tab-nav"; - Javascript:
require(["tabcontroller"], function(TabController) { TabController.init(); });
Code
<section class="tabs tabs--right" data-tab-group-parent>
<div class="tabs__toggle" data-collapse-target-group="tab-nav3"><a><span data-tab-toggle-text="">Fluid Grids</span> <i class="fa fa-chevron-down"></i></a></div>
<div class="collapse-bd" data-collapse-group="tab-nav3">
<ul class="tabs__nav collapse-inner">
<li class="tabs__nav-item tabs__nav-item--is-active" data-tab-target-group="tab-example3" data-tab-target-member="grid3"><a>Fluid Grids</a></li>
<li class="tabs__nav-item" data-tab-target-group="tab-example3" data-tab-target-member="img3"><a>Flexible Images</a></li>
<li class="tabs__nav-item" data-tab-target-group="tab-example3" data-tab-target-member="mq3"><a>Media Queries</a></li>
</ul>
</div>
<section class="tabs__content is-shown" data-tab-group="tab-example3" data-tab-member="grid3">
<p>
In adaptive grids, we define pixel-based dimensions. Hence we will have to adjust the widths and heights manually in certain device viewports. Since fluid grids flow naturally within the dimensions of its parent container, limited adjustments will be needed for various screen sizes and devices.
</p>
<p>
Mobile devices are getting smaller in size and people prefer using them in their personal work. On the other hand, desktop monitors are getting wider with higher resolutions. So we just cannot plan for smaller devices in responsive design. The advantage of fluid grid is that we can adjust the max-width and it will still work on larger screens due to the percentage based calculations.
</p>
</section>
<section class="tabs__content" data-tab-group="tab-example3" data-tab-member="img3">
<p>
<a href="http://clagnut.com/sandbox/imagetest/">First discovered by designer Richard Rutter</a>, this one rule immediately provides an incredibly handy constraint for every image in our document. Now, our <code class=" language-markup">img</code> element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the <code class=" language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 100%</code> directive forces the image’s width to match the width of its container. And as you can see, our image has snapped into place.
</p>
</section>
<section class="tabs__content" data-tab-group="tab-example3" data-tab-member="mq3">
<p>
A media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
</p>
</section>
</section>Alternative Tabs
These Tabs just look different and they do not convert to a collapsing menu on small screens. You'd want to use these only if there 3-5 tab entries since they are always visible, even on small screens.
Example
Mobile devices are getting smaller in size and people prefer using them in their personal work. On the other hand, desktop monitors are getting wider with higher resolutions. So we just cannot plan for smaller devices in responsive design. The advantage of fluid grid is that we can adjust the max-width and it will still work on larger screens due to the percentage based calculations.
First discovered by designer Richard Rutter, this one rule immediately provides an incredibly handy constraint for every image in our document. Now, our img element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the max-width: 100% directive forces the image’s width to match the width of its container. And as you can see, our image has snapped into place.
A media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
Imports
- SASS:
@import "base"; @import "imports/modules/tab-nav"; - Javascript:
require(["tabcontroller"], function(TabController) { TabController.init(); });
Code
<section class="tabs--alt" data-tab-group-parent>
<ul class="tabs__nav">
<li class="tabs__nav-item" data-tab-target-group="tab-alt" data-tab-target-member="things">
<a href="">Fluid Grids</a>
</li>
<li class="tabs__nav-item tabs__nav-item--is-active" data-tab-target-group="tab-alt" data-tab-target-member="and">
<a class="invisible" href="">Flexible Images</a>
</li>
<li class="tabs__nav-item" data-tab-target-group="tab-alt" data-tab-target-member="stuff">
<a href="">Media Queries</a>
</li>
</ul>
<section class="tabs__content" data-tab-group="tab-alt" data-tab-member="things">
<p>
Mobile devices are getting smaller in size and people prefer using them in their personal work. On the other hand, desktop monitors are getting wider with higher resolutions. So we just cannot plan for smaller devices in responsive design. The advantage of fluid grid is that we can adjust the max-width and it will still work on larger screens due to the percentage based calculations.
</p>
</section>
<section class="tabs__content is-shown" data-tab-group="tab-alt" data-tab-member="and">
<p>
<a href="http://clagnut.com/sandbox/imagetest/">First discovered by designer Richard Rutter</a>, this one rule immediately provides an incredibly handy constraint for every image in our document. Now, our <code class=" language-markup">img</code> element will render at whatever size it wants, as long as it’s narrower than its containing element. But if it happens to be wider than its container, then the <code class=" language-css"><span class="token property">max-width</span><span class="token punctuation">:</span> 100%</code> directive forces the image’s width to match the width of its container. And as you can see, our image has snapped into place.
</p>
</section>
<section class="tabs__content" data-tab-group="tab-alt" data-tab-member="stuff">
<p>
A media query consists of a media type and one or more expressions, involving media features, which resolve to either true or false. The result of the query is true if the media type specified in the media query matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules.
</p>
</section>
</section>