312 lines
22 KiB
HTML
312 lines
22 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<title>mini.css - Card</title>
|
|
<meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, module, card ">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
|
|
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
|
|
<meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
|
|
<meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
|
|
<style>
|
|
#header-logo { display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px; padding: 4px; }
|
|
.box-centered { text-align: center; } .box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;} .box-colored.red { background: #e53935; }
|
|
.box-centered > .card.fluid {-webkit-box-pack: start; -webkit-box-align: start; -webkit-justify-content: flex-start; justify-content: flex-start; -webkit-align-self: auto; align-self: auto;} [class^='col-'] .card.fluid { margin: 2px 0 20px; }
|
|
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
|
.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #bdbdbd;}
|
|
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #bdbdbd;}}
|
|
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
|
|
.box-colored {color: #f5f5f5;}header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo"> <span style="vertical-align: top; position: relative; top:-12px;"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></span></a>
|
|
<div style="display: inline; overflow: auto;">
|
|
<a href="index.html" class="button">Introduction</a> <a href="modules.html" class="button">Modules</a>
|
|
<a href="flavors.html" class="button">Flavors</a> <a href="customization.html" class="button">Customization</a>
|
|
<a href="quick_reference.html" class="button">Quick Reference</a>
|
|
<a href="https://github.com/Chalarangelo/mini.css" class="button"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.4em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
|
</div>
|
|
</header>
|
|
<header class="sticky" style="height:36px;">
|
|
<a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
|
|
<a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</a>
|
|
<a href="table.html" class="button">Table</a> <a href="card.html" class="button">Card</a>
|
|
<a href="tab.html" class="button">Tab</a> <a href="contextual.html" class="button">Contextual</a>
|
|
<a href="progress.html" class="button">Progress</a> <a href="utility.html" class="button">Utility</a>
|
|
</header>
|
|
<!-- Insert your page content here-->
|
|
<main><div class="container">
|
|
<div class="row" style="padding-top: 40px;">
|
|
<div class="col-sm">
|
|
<h1>Card</h1>
|
|
<p>The <strong>card</strong> module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly.</p>
|
|
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
|
|
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Card</li></ul>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Quick overview</h2>
|
|
<p>The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The <strong>card</strong> module seeks to help deal with this problem, by utilizing the <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">Flexbox Layout</a> in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile <a href="grid.html"><strong>grid</strong></a> module to deliver the best experience on any device.</p><br>
|
|
</div>
|
|
<div class="section">
|
|
<h2>Quick start</h2>
|
|
<p>To use the <strong>card</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the <strong>card</strong> module is heavily dependent on the <a href="grid.html"><strong>grid</strong></a> module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p><br>
|
|
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="card fluid">
|
|
<div class="section"> <h2>Basic syntax</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
|
<div class="container">
|
|
<br>
|
|
<div class="row">
|
|
<div class="card"><div class="section"><h3>Card 1</h3><p>This is a basic card with some sample content.</p></div></div>
|
|
<div class="card"><div class="section"><h3>Card 2</h3><p>This is another card with some sample content.</p></div></div>
|
|
<div class="card"><div class="section"><h3>Card 3</h3><p>This is one more card with some sample content.</p></div></div>
|
|
</div>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
|
<p>To start using cards in your layout, you need to be somewhat familiar with the <a href="grid.html"><strong>grid</strong></a> module, so if you aren't, take a minute to read how its basic layout works. The basic syntax for cards is composed of three components, presented below in the order they should be added to the DOM tree:</p>
|
|
<ol>
|
|
<li>At the outermost level of the card layout syntax is a <code>.row</code>, which serves as a wrapper for all the cards inside it.</li>
|
|
<li>Inside the <code>.row</code>, cards are defined as <code><div></code> elements of the <code>.card</code> class.</li>
|
|
<li>Finally, inside the <code>.card</code>s, you can define sections using the <code>.section</code> class to wrap your content.</li>
|
|
</ol>
|
|
<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>
|
|
<div class="card">
|
|
<div class="section">
|
|
<h3>Card Title</h3>
|
|
<p>Card content...</p>
|
|
</div>
|
|
</div>
|
|
</div></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>The <strong>card</strong> module is compatible with modern browsers, but might not display properly in older browsers.</li>
|
|
<li>If you want to further customize your <code>.section</code>s, check the section below.</li>
|
|
</ul><hr>
|
|
<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></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></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>
|
|
</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>
|
|
<div class="col-sm-12 col-md-6 col-sm-last col-md-normal col-lg-4 col-lg-last">
|
|
<pre><div class="row">
|
|
<div class="card">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="card">
|
|
</div>
|
|
</div></pre>
|
|
<p class="dont"><mark class="secondary">Don't:</mark> If you want to place multiple cards side by side, add them all inside the same <code>.row</code>. Placing cards inside different rows or not inside rows at all can result in unexpected behavior. </p>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 col-lg-4">
|
|
<pre><div class="card">
|
|
<div class="section row">
|
|
<div class="card">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="fore-tertiary"><!-- or --></span>
|
|
<div class="card">
|
|
<div class="row">
|
|
<div class="card">
|
|
</div>
|
|
</div>
|
|
</div></pre>
|
|
<p class="do"><mark class="tertiary">Do:</mark> You can place <code>.row</code> elements inside <code>.card</code> elements, if you want. you should normally also make those rows into card <code>.section</code>s, but for this specific case you might want to make an exception sometimes.</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 row">
|
|
</div>
|
|
<span class="fore-secondary"><!-- or --></span>
|
|
<div class="card col-sm">
|
|
</div></pre>
|
|
<p class="dont"><mark class="secondary">Don't:</mark> You should not have elements that are both cards and rows or columns at the same time.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Sections & media</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
|
<div class="container"><br>
|
|
<div class="row">
|
|
<div class="card"><div class="section"><h3>Card with image</h3></div><img class="section media" src="http://placehold.it/800x600"><div class="section"><p>Content</p></div></div>
|
|
<div class="card"><iframe class="section media" width="1280" height="720" src="https://www.youtube.com/embed/ScMzIvxBSi4" frameborder="0"></iframe><div class="section"><h3>Card with video</h3></div></div>
|
|
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section double-padded"><h3>Double-padded section</h3></div></div>
|
|
<div class="card"><div class="section"><h3>Normal section</h3></div><div class="section dark"><h3>Dark section</h3></div><div class="section darker"><h3>Darker section</h3></div></div>
|
|
<div class="card inverse"><div class="section"><h3>Inverse card</h3></div><img class="section media" src="http://placehold.it/800x600"><div class="section"><p>Content</p></div><div class="section"><p>More content</p></div></div>
|
|
</div><br>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
|
<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>
|
|
</div>
|
|
|
|
<div class="card inverse">
|
|
<div class="section"><p>Content</p></div>
|
|
</div></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li>The <code>.media</code> class might not be well supported in older browsers, especially legacy versions of Internet Explorer.</li>
|
|
<li>Due to the <code>.media</code> class using <a href="http://caniuse.com/#feat=object-fit"><code>object-fit</code></a>, you might want to use a polyfill for better browser support, especially if you are targeting Microsoft browsers. We recommend <a href="https://github.com/bfred-it/object-fit-images">this one</a> for images and <a href="https://github.com/jonathantneal/fitie">this one</a> for videos.</li>
|
|
<li>Depending on the source website, some embedded videos might not display properly inside a <code>.media</code> section.</li>
|
|
<li>The <code>.media</code> class has a preset size of <code>height: 200px</code>. If you want to customize this, you should check the <a href="customization.html">customization page</a> for instructions.</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Card sizing & fluidity</h2></div>
|
|
<div class="section row">
|
|
<div class="col-sm-12 col-sm-last col-md-12 col-md-normal">
|
|
<div class="container"><br>
|
|
<div class="row">
|
|
<div class="card small"><div class="section"><h3>Small Card</h3><p>Small cards are <code>240px</code> wide.</p></div></div>
|
|
<div class="card large"><div class="section"><h3>Large Card</h3><p>Large cards are <code>480px</code> wide.</p></div></div>
|
|
<div class="col-sm-12 col-md-12 col-lg">
|
|
<div class="card fluid" style="margin: 2px 10px 20px;"><div class="section"><h3>Fluid Card</h3><p>Fluid cards scale their width based on their container. Always wrap them in a column.</p></div></div>
|
|
</div>
|
|
</div>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-sm-first col-md-12 col-md-normal">
|
|
<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>
|
|
|
|
<div class="card large">
|
|
<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>
|
|
</div></pre>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<h3>Notes</h3>
|
|
<ul>
|
|
<li><code>.fluid</code> cards might not display properly in older browsers, especially legacy versions of Internet Explorer.</li>
|
|
<li>Due to the fact that <code>.fluid</code> cards stretch to fill their parent container, they might not fully respect their margins, like the rest of the cards. However, this should not cause any noticable problems with layout, except maybe the odd pixel here and there.</li>
|
|
</ul><hr>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-6">
|
|
<pre><div class="card">
|
|
<div class="section">
|
|
<p>Content</p>
|
|
</div>
|
|
</div>
|
|
<div class="card fluid">
|
|
<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>
|
|
</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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
|
<div class="col-sm">
|
|
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
|
|
</div>
|
|
</div>
|
|
</div></main>
|
|
<!-- End of page content-->
|
|
<footer><strong>mini.css</strong> was designed and built with <i class="fa fa-heart-o" aria-hidden="true"></i> by <a href="https://github.com/Chalarangelo">@Chalarangelo</a>. It is licensed under the <a href="https://github.com/Chalarangelo/mini.css/blob/master/LICENSE">MIT License</a>. You can view the project's source code on <a href="https://github.com/Chalarangelo/mini.css">Github</a>.</footer>
|
|
</body>
|
|
</html>
|