mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-04-22 13:21:56 +02:00
Complete documentation for table module
This commit is contained in:
Angelos Chalaris
parent
c73922c24a
commit
594653e9e0
@ -583,3 +583,5 @@
|
||||
- Started the `table` doc page.
|
||||
- Made `alert`s not have rounded corners.
|
||||
- Added some base info on `table` module doc page and a basic example.
|
||||
- Full documentation for `table` module.
|
||||
- Updated all doc pages to use **2 spaces** per indentation.
|
||||
|
||||
@ -143,18 +143,18 @@
|
||||
<p>Note that cards will respond to screen changes, realigning themselves as necessary to fit on the page.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><div class="row">
|
||||
<div class="card">
|
||||
<div class="section">
|
||||
<h3>Card Title</h3>
|
||||
<p>Card content...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="section">
|
||||
<h3>Card Title</h3>
|
||||
<p>Card content...</p>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="section">
|
||||
<h3>Card Title</h3>
|
||||
<p>Card content...</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="section">
|
||||
<h3>Card Title</h3>
|
||||
<p>Card content...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
@ -168,29 +168,29 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><div class="card">
|
||||
<div class="section">
|
||||
<h3>Card Title</h3>
|
||||
</div>
|
||||
<div class="section">
|
||||
<p>Card content...</p>
|
||||
<p>More card content...</p>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Card Title</h3>
|
||||
</div>
|
||||
<div class="section">
|
||||
<p>Card content...</p>
|
||||
<p>More card content...</p>
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can add as many <code>.section</code>s as you like to a card.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><div class="card">
|
||||
<div class="section">
|
||||
<h3>Card Title</h3>
|
||||
</div>
|
||||
<p>Content not in a section!</p>
|
||||
<div class="section">
|
||||
<h3>Card Title</h3>
|
||||
</div>
|
||||
<p>Content not in a section!</p>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid using cards with content inside them that is not wrapped in sections. Try to use a single <code>.section</code> to wrap the content inside these to avoid unexpected behavior.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><div class="card">
|
||||
<h3 class="section">Card Title</h3>
|
||||
<p class="section">Card content...</p>
|
||||
<h3 class="section">Card Title</h3>
|
||||
<p class="section">Card content...</p>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can use the <code>.section</code> class for things other than <code><div></code> elements (e.g. <code><h1></code>-<code><h6></code>, <code><p></code>, <code><button></code>).</p>
|
||||
</div>
|
||||
@ -258,14 +258,14 @@
|
||||
<p>You can do a lot more with card sections apart from filling them with textual content. First off, you can add media sections to your cards, applying the styles of <code>.section</code> and <code>.media</code> to an <code><img></code> element or a video element of your choice (e.g. using a <code><iframe></code> element in the same manner). If you want a section to have more space around it, use the <code>.double-padded</code> class. There are also two section color variations: <code>.dark</code> and <code>.darker</code>. Finally, you can turn a whole <code>.card</code> black, by applying the <code>.inverse</code> class to it. This is not really a section trick, but we thought we should include it here anyway.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><div class="card">
|
||||
<img src="..." class="section media">
|
||||
<div class="section double-padded"><p>Content</p></div>
|
||||
<div class="section dark"><p>Content</p></div>
|
||||
<div class="section darker"><p>Content</p></div>
|
||||
<img src="..." class="section media">
|
||||
<div class="section double-padded"><p>Content</p></div>
|
||||
<div class="section dark"><p>Content</p></div>
|
||||
<div class="section darker"><p>Content</p></div>
|
||||
</div>
|
||||
|
||||
<div class="card inverse">
|
||||
<div class="section"><p>Content</p></div>
|
||||
<div class="section"><p>Content</p></div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
@ -305,23 +305,23 @@
|
||||
<p>Apart from the normal-sized cards (<code>320px</code> wide), there are also two different fixed-width card styles, which can be applied using the <code>.small</code> and <code>.large</code> classes respectively. Fluid cards are available via the <code>.fluid</code> class, but they require one extra step in the card structure, between the <code>.row</code> and <code>.card</code> step, which is to insert either a <code>.col-<span class="fore-primary">SCR_SZ</span></code>, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names (<code><span class="fore-tertiary">sm</span></code> for smaller screens, <code><span class="fore-tertiary">md</span></code> for medium-sized screens or <code><span class="fore-tertiary">lg</span></code> for larger screens) or a <code>.col-<span class="fore-primary">SCR_SZ</span>-<span class="fore-secondary">COL_WD</span></code> to specify columns with fixed width, replacing <code><span class="fore-primary">SCR_SZ</span></code> with one of the available screen size names and <code><span class="fore-secondary">COL_WD</span></code> with a number from <code>1</code> to <code>12</code> specifying the width of the column.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><div class="card small">
|
||||
<div class="section">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
<div class="section">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card large">
|
||||
<div class="section">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
<div class="section">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
@ -335,24 +335,24 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><div class="card">
|
||||
<div class="section">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
<div class="section">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
<div class="section">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid mixing fixed-width cards with <code>.fluid</code> cards. Mixing the two could result in some unexpected behaviors. You can, however, mix fixed-width cards with fluid columns, which can contain <code>.fluid</code> cards inside them, effectively achieving the desired effect.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><div class="row">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<p>Content</p>
|
||||
</div>
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid using <code>.fluid</code> cards without wrapping them in columns. Try to use a single <code>.col-sm</code> to wrap the card inside it, otherwise there might be unexpected behavior.</p>
|
||||
</div>
|
||||
|
||||
@ -162,13 +162,13 @@
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><mark class="inline-block">some
|
||||
<mark class="secondary">text</mark>
|
||||
<mark class="secondary">text</mark>
|
||||
</mark></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can only nest a <code><mark></code> inside another if the outer one is of the <code>.inline-block</code> class. You can color the inner <code><mark></code> using any of the contextual color classses or even make it a <code>.tag</code>. Be careful, however, to not make the inner <code><mark></code> an <code>.inline-block</code> as well.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><mark>some
|
||||
<mark class="secondary">text</mark>
|
||||
<mark class="secondary">text</mark>
|
||||
</mark></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid using nested <code><mark></code> elements, unless the outer <code><mark></code> element is an <code>.inline-block</code>.</p>
|
||||
</div>
|
||||
@ -195,16 +195,16 @@
|
||||
<p>Alerts replace modal dialogs, along with messages, notifications and traditional alerts with a simpler, easier design paradigm. To create an alert, use a <code><div></code> element, which will contain one or more elements (for example a <code><h3></code> and a <code><p></code>) and add the <code>.alert</code> class to it. For more urgent alerts, use the <code>.urgent</code> class and for critical alerts, use the <code>.critical</code> class.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><div class="alert">
|
||||
<h3>This is an alert</h3>
|
||||
<p>Make sure you read this!</p>
|
||||
<h3>This is an alert</h3>
|
||||
<p>Make sure you read this!</p>
|
||||
</div>
|
||||
<div class="alert urgent">
|
||||
<h3>This is an urgent alert</h3>
|
||||
<p>Make absolutely sure you read this!</p>
|
||||
<h3>This is an urgent alert</h3>
|
||||
<p>Make absolutely sure you read this!</p>
|
||||
</div>
|
||||
<div class="alert critical">
|
||||
<h3>This is a critical alert</h3>
|
||||
<p>Make certain you read and actually understand this!</p>
|
||||
<h3>This is a critical alert</h3>
|
||||
<p>Make certain you read and actually understand this!</p>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
@ -248,13 +248,13 @@
|
||||
<p>Alerts can be animated, so that they pop out a little more to make sure your users can see them. To animate an alert box, use the <code>.animated</code> class on an existing <code>.alert</code> and it shall periodically scale up a little bit to make users notice it.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><div class="alert animated">
|
||||
<h3>Animated alert</h3>
|
||||
<h3>Animated alert</h3>
|
||||
</div>
|
||||
<div class="alert urgent animated">
|
||||
<h3>Animated urgent alert</h3>
|
||||
<h3>Animated urgent alert</h3>
|
||||
</div>
|
||||
<div class="alert critical animated">
|
||||
<h3>Animated critical alert</h3>
|
||||
<h3>Animated critical alert</h3>
|
||||
</div></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -212,15 +212,15 @@
|
||||
<p>Lists are also very commonly used in websites and apps. We tweaked a few margins and paddings to save some space and make them align properly with the rest of the common HTML elements that we use, but both unordered lists (<code><ul></code>) and ordered lists (<code><ol></code>) are minimally pre-styled to make things a little bit easier for you.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><ul>
|
||||
<li>Apple</li>
|
||||
<li>Orange</li>
|
||||
<li>Strawberry</li>
|
||||
<li>Apple</li>
|
||||
<li>Orange</li>
|
||||
<li>Strawberry</li>
|
||||
</ul>
|
||||
|
||||
<ol>
|
||||
<li>Wake up</li>
|
||||
<li>Eat breakfast</li>
|
||||
<li>Go to work</li>
|
||||
<li>Wake up</li>
|
||||
<li>Eat breakfast</li>
|
||||
<li>Go to work</li>
|
||||
</ol></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -221,69 +221,69 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><div class="col-sm">
|
||||
<div class="container">
|
||||
</div>
|
||||
<div class="container">
|
||||
</div>
|
||||
</div>
|
||||
<span class="fore-tertiary"><!-- or --></span>
|
||||
<div class="col-sm">
|
||||
<div class="row">
|
||||
</div>
|
||||
<div class="row">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> A column can contain a container or a row inside it. The container can also be skipped if inside a column, so you only need to add a row.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><div class="col-sm">
|
||||
<div class="col-sm">
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid using columns inside columns without a row wrapping them. Either make the outer column a row in itself or wrap the inside columns in a row.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><div class="col-sm row">
|
||||
<div class="col-sm-6">
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
</div>
|
||||
<div class="col-sm-6">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> A column can also be a row at the same time, if you want to include sub-columns inside it. You can make the same element both a column in its own row and a row for its containing columns. The same idea can be applied for the container. Containers can, however, be omitted, when already inside a grid.</p>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><div class="row">
|
||||
<p>Content without columns...</p>
|
||||
<p>Content without columns...</p>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid using rows with content inside that is not in wrapped in columns. Try to use a single <code>.col-sm</code> to wrap the content inside these, otherwise there might be unexpected behavior.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre> <div class="row">
|
||||
<div class="col-sm">
|
||||
<div>
|
||||
<div class="col-sm-4">
|
||||
</div>
|
||||
<div class="col-sm">
|
||||
<div>
|
||||
<div class="col-sm-4">
|
||||
</div>
|
||||
</div>
|
||||
<span class="fore-tertiary"><!-- or --></span>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div>
|
||||
<div class="col-sm-12">
|
||||
</div>
|
||||
</div></pre>
|
||||
<div class="col-sm-12">
|
||||
<div>
|
||||
<div class="col-sm-12">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> Mix fluid columns with fixed, if you like. Fluid columns will adapt to the size of the container left for them. You can also use columns with a total size of more than <code>12</code>, meaning with a total width of over 100%. The remaining content will flow below the rest, allowing you to specify multiple blocks of content inside the same row if you need to.</p>
|
||||
<p></p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><div class="container">
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div>
|
||||
</div>
|
||||
<p>Normal paragraph.</p>
|
||||
<p>Normal paragraph.</p>
|
||||
</div>
|
||||
<span class="fore-secondary"><!-- or --></span>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
</div>
|
||||
<p>Normal paragraph.</p>
|
||||
<div class="col-sm">
|
||||
</div>
|
||||
<p>Normal paragraph.</p>
|
||||
</div></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid mixing rows and columns with normal content that is not wrapped on the respective level of the grid system. Always wrap content inside the proper containers (container, row or column) in your grid layout.</p>
|
||||
</div>
|
||||
@ -444,10 +444,10 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><div class="row">
|
||||
<div class="col-sm col-md-offset-1 col-md-5 col-lg-4">
|
||||
</div>
|
||||
<div class="col-sm col-md-5 col-lg-4 col-lg-offset-2">
|
||||
</div>
|
||||
<div class="col-sm col-md-offset-1 col-md-5 col-lg-4">
|
||||
</div>
|
||||
<div class="col-sm col-md-5 col-lg-4 col-lg-offset-2">
|
||||
</div>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can specify offset classes when you need them and omit them otherwise. This means that, if you want to offset a column only on a medium-sized or a larger screen, you can just specify the offset for that specific screen. Specifying an offset for a smaller screen, however, will apply it to medium-sized and larger screens as well, medium-sized screen offsets will apply to larger screens etc. similar to how the layout system works.</p>
|
||||
</div>
|
||||
|
||||
@ -173,7 +173,7 @@
|
||||
<span class="fore-secondary"><!-- or --></span>
|
||||
<header>
|
||||
<a href="#" class="logo">Logo</a>
|
||||
<a href="#">Link</a>
|
||||
<a href="#">Link</a>
|
||||
</header></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> The <code>.logo</code> element should not be a <code><button></code> or a <code>.button</code> element. On the other hand, links and labels in the <code><header></code> should not be without a <code>.button</code> class. Ignoring this rule might cause unexpected behavior.</p>
|
||||
</div>
|
||||
@ -211,16 +211,16 @@
|
||||
<p>To add vertical navigation to your websites, use the <code><nav></code> HTML element. Adding links is pretty simple, just use <code><a></code> elements, no lists or anything else required. In order to add subcategories to your vertical navigation, use any normal textual element as the title of the subcategory and follow it with its links as normal, adding the <code>.sublink-1</code> class to them. Similarly, you can create a subcategory with a depth of 2, using a similar structure and the <code>.sublink-2</code> class.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><nav>
|
||||
<a href="#">Home</a>
|
||||
<span>News</span>
|
||||
<a href="#" class="sublink-1">New Courses</a>
|
||||
<a href="#" class="sublink-1">Certifications</a>
|
||||
<span class="sublink-1">Events</span>
|
||||
<a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
|
||||
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
|
||||
<a href="#" class="sublink-1">Policy Update</a>
|
||||
<a href="#">About</a>
|
||||
<a href="#">Contact</a>
|
||||
<a href="#">Home</a>
|
||||
<span>News</span>
|
||||
<a href="#" class="sublink-1">New Courses</a>
|
||||
<a href="#" class="sublink-1">Certifications</a>
|
||||
<span class="sublink-1">Events</span>
|
||||
<a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
|
||||
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
|
||||
<a href="#" class="sublink-1">Policy Update</a>
|
||||
<a href="#">About</a>
|
||||
<a href="#">Contact</a>
|
||||
</nav></pre>
|
||||
</div>
|
||||
</div>
|
||||
@ -234,9 +234,9 @@
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<pre><div class="col-sm-12 col-sm-last col-md-3 col-md-first">
|
||||
<nav>
|
||||
<span class="fore-tertiary"><!-- navigation content --></span>
|
||||
</nav>
|
||||
<nav>
|
||||
<span class="fore-tertiary"><!-- navigation content --></span>
|
||||
</nav>
|
||||
</div></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> We strongly recommend using the <code><nav></code> element in combination with the <a href="grid.html"><strong>grid</strong> module</a> to make your layouts more responsive. For example, you could make your sidebar appear on the left side of your content in medium-sized and larger screens, but move to the very bottom of your content on smaller screens.</p>
|
||||
</div>
|
||||
@ -265,7 +265,7 @@
|
||||
<p>The <code><footer></code> element is used to create your page's footer. As normal, add the <code><footer></code> at or near the end of your <code><body></code> element and add content to it like you would otherwise.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><footer>
|
||||
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
|
||||
<p>&copy; 2001-2016 Web Corporation | <a href="#">About</a> | <a href="#">Terms of use</a></p>
|
||||
</footer></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -118,7 +118,7 @@
|
||||
<div class="box-centered">
|
||||
<img src="mini-logo.svg" id="top-logo">
|
||||
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
|
||||
<mark class="tag tertiary" id="top-version-tag">v2.0</mark>
|
||||
<mark class="tertiary" id="top-version-tag">v2.0</mark>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -264,13 +264,45 @@
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><tr>
|
||||
<td>Chad</td>
|
||||
<>Wilberts</td>
|
||||
<>MrOne</td>
|
||||
</tr></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Remember to always add a <code>data-label</code> attribute to your <code><td></code> elements, as the table's card view is very dependent on them to display properly. <code><th></code> elements, however, do not require or utilize this attribute.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><table>
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<span class="fore-secondary"><!-- ... --></span>
|
||||
</thead>
|
||||
<tbody>
|
||||
<span class="fore-secondary"><!-- ... --></span>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<span class="fore-secondary"><!-- ... --></span>
|
||||
</tfoot>
|
||||
</table></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> The <code><tfoot></code> element must always be immediately after the <code><thead></code> element, if included.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><tbody>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<td data-label="Name">Chad</td>
|
||||
</tr>
|
||||
</tbody></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid inserting <code><th></code> elements inside your <code><tbody></code> element. If you want to make your tables horizontal or preset their styling in a manner different from the one shown in the previous examples, check the below sections.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><thead>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
</tr>
|
||||
</thead></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid using <code><td></code> elements inside your <code><thead></code>. You should use a <code><tbody></code> element instead.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -285,29 +317,89 @@
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
<div>
|
||||
<br><table class="horizontal preset">
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Alias</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Sophia</td>
|
||||
<td data-label="Surname">Canderson</td>
|
||||
<td data-label="Alias">Candee</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Nick</td>
|
||||
<td data-label="Surname">Thomson</td>
|
||||
<td data-label="Alias">NickThom</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
<p>Horizontal tables can be created, by simply adding the <code>.horizontal</code> class to the root element of your table (i.e. the <code><table></code> element). Horizontal tables are flexible, so they can acommodate any amount of data rows and, if there is a lot of data, they will make their overflow scrollable. Remember to add the <code>data-label</code> attribute, as shown in the previous section, to allow your tables to be responsive without any errors. Keep in mind, however, that <code>.horizontal</code> tables do not support the <code><tfoot></code> element.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
<pre><table class="horizontal">
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Surname</th>
|
||||
<th>Alias</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td data-label="Name">Chad</td>
|
||||
<td data-label="Surname">Wilberts</td>
|
||||
<td data-label="Alias">MrOne</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Adam</td>
|
||||
<td data-label="Surname">Smith</td>
|
||||
<td data-label="Alias">TheSmith</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td data-label="Name">Sophia</td>
|
||||
<td data-label="Surname">Canderson</td>
|
||||
<td data-label="Alias">Candee</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li>Due to <code>.horizontal</code> tables utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a>, some older browsers may not properly display these tables. This is especially true with legacy versions of Internet Explorer.</li>
|
||||
<li>Mixing the Flexible Layout Module with <code><table></code> elements seems to upset some browsers. We noticed this on an older mobile version of Firefox, where our implementation should work in theory, given the fact that both features are properly supported. If you notice any problems with <code>.horizontal</code> tables, feel free to <a href="https://github.com/Chalarangelo/mini.css/issues/new">submit a new issue on Github</a>.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
<div class="col-sm-12">
|
||||
<pre><table>
|
||||
<span class="fore-secondary"><!-- ... --></span>
|
||||
<tfoot>
|
||||
<span class="fore-secondary"><!-- ... --></span>
|
||||
</tfoot>
|
||||
</table></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> We already explicitly stated that, due to the way <code>.horizontal</code> tables are styled, the <code><tfoot></code> element is not supported. Please refer to the next section if you need to use this element and you want to have a horizontal table layout.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -322,29 +414,134 @@
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<!-- sample -->
|
||||
<div>
|
||||
<br>
|
||||
<style> .border-fix > td, .border-fix > th { border-top: 0; } </style>
|
||||
<table class="preset">
|
||||
<caption>Star Wars Character Alignment Table</caption>
|
||||
<tbody>
|
||||
<tr class="border-fix">
|
||||
<th></th>
|
||||
<th>Lawful</td>
|
||||
<th>Neutral</td>
|
||||
<th>Chaotic</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Good</th>
|
||||
<td>Yoda</td>
|
||||
<td>Luke Skywalker</td>
|
||||
<td>Chewbacca</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Neutral</th>
|
||||
<td>C-3PO</td>
|
||||
<td>Boba Fett</td>
|
||||
<td>Han Solo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Bad</th>
|
||||
<td>Darth Vader</td>
|
||||
<td>Emperor Palpatine</td>
|
||||
<td>Jabba the Hutt</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p></p>
|
||||
<p>Tables are responsive by default, however you can disable this functionality for one or more tables (normal or <code>.horizontal</code>), using the <code>.preset</code> class. This class can also be used for a multitude of things, like dealing with tables not allowing you to have <code><th></code> elements inside the <code><tbody></code> element, building matrices (i.e. tables with a header column and a header row) etc. Finally, you can make your tables use a different color for every other row, using the <code>.striped</code> class.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre></pre>
|
||||
<p>The sample code is a bit lengthy, so we hid it by default to make it easier for mobile device users to read this page. Click or tap on <strong>Show sample code</strong> below to see the code sample for this example. By the way, we present a sample for a matrix table in he first example, but you can use the same principles and classes to create any table layout you wish.</p><br>
|
||||
<div class="container"><div class="row"><div class="tabs stacked"">
|
||||
<input type="checkbox" id="grid-base-sample" autocomplete="off">
|
||||
<label for="grid-base-sample">Show sample code</label>
|
||||
<div>
|
||||
<pre><table class="preset">
|
||||
<caption>Star Wars Character Alignment Table</caption>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>Lawful</td>
|
||||
<th>Neutral</td>
|
||||
<th>Chaotic</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Good</th>
|
||||
<td>Yoda</td>
|
||||
<td>Luke Skywalker</td>
|
||||
<td>Chewbacca</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Neutral</th>
|
||||
<td>C-3PO</td>
|
||||
<td>Boba Fett</td>
|
||||
<td>Han Solo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Bad</th>
|
||||
<td>Darth Vader</td>
|
||||
<td>Emperor Palpatine</td>
|
||||
<td>Jabba the Hutt</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<table class="striped">
|
||||
<caption>People</caption>
|
||||
<thead>
|
||||
<span class="fore-primary"><!-- ... --></span>
|
||||
</thead>
|
||||
<tbody>
|
||||
<span class="fore-primary"><!-- ... --></span>
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<span class="fore-primary"><!-- ... --></span>
|
||||
</tfoot>
|
||||
</table></pre></div></div></div></div><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li></li>
|
||||
<li></li>
|
||||
<li>Making a table <code>.striped</code> also affects the color of the cards in their responsive view on mobile devices.</li>
|
||||
<li>If you create a <code>.preset</code> table, which you do not want to alter via Javascript to be responsive at any time in the future, you can omit the <code>data-label</code> attributes.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-md-6 col-lg-4">
|
||||
<pre><!-- do code --></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> </p>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<pre><style>
|
||||
.border-fix > td, .border-fix > th {
|
||||
border-top: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<table class="preset">
|
||||
<tbody>
|
||||
<tr class="border-fix">
|
||||
<span class="fore-tertiary"><!-- ... --></span>
|
||||
</tr>
|
||||
<span class="fore-tertiary"><!-- ... --></span>
|
||||
</tbody>
|
||||
</table></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> The first row in a preset matrix table or any table without a <code><thead></code> element will have an extra border at the top. You can use a generic class to set <code>border-to: 0;</code> for the elements inside that row to fix this.</p>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
||||
<pre><!-- don't code --></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> </p>
|
||||
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal">
|
||||
<pre><table class="horizontal preset">
|
||||
<span class="fore-tertiary"><!-- ... -></span>
|
||||
</table>
|
||||
<span class="fore-tertiary"><!-- or --></span>
|
||||
<table class="horizontal striped">
|
||||
<span class="fore-tertiary"><!-- ... -></span>
|
||||
</table>
|
||||
<span class="fore-tertiary"><!-- or --></span>
|
||||
<table class="preset striped">
|
||||
<span class="fore-tertiary"><!-- ... -></span>
|
||||
</table>
|
||||
<span class="fore-tertiary"><!-- or --></span>
|
||||
<table class="preset horizontal striped">
|
||||
<span class="fore-tertiary"><!-- ... -></span>
|
||||
</table></pre>
|
||||
<p class="do"><mark class="tertiary">Do:</mark> You can combine any two of the following classes without any problems: <code>.horizontal</code>, <code>.preset</code>, <code>.striped</code>. Just make sure you respect each one's specific rules.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user