mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-02-23 16:33:58 +01:00
e0b1e1fb10
Used a localized copy of the flavor file to style all the doc pages, added a few things wherever needed, added all download options, updated the README.
293 lines
19 KiB
HTML
293 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<link rel="stylesheet" href="../mini-default.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans">
|
|
<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 { background: -webkit-linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); background: linear-gradient(#07020d 20%, #150627 45%, #220a40 70%, #300d5a); line-height:1; font-size: 39px; width: 48px; height: 48px; padding: 8px; margin-left: -9px; }
|
|
.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;}
|
|
td:first-child, td:last-child { font-family: monospace, monospace; }
|
|
td:first-child::before, td:last-child::before { font-family: -apple-system, BlinkMacSystemFont,"Segoe UI","Roboto", "Droid Sans","Helvetica Neue", Helvetica, Arial, sans-serif;} sup a { text-decoration: none; padding: 2px;}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
|
|
<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="index.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.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
|
</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 col-lg-10 col-lg-offset-1">
|
|
<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="index.html">Customization</a></li><li>Card</li></ul>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm col-lg-10 col-lg-offset-1">
|
|
<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 customize the <strong>card</strong> module, duplicate an existing flavor file (we suggest you use the <code>mini-default.scss</code> flavor file) and use this page's variable tables and mixins as a reference to change only the values you need. Remember to compile your flavor file (not the module's partial file) using a Sass preprocessor (we highly recommend using <a href="https://atom.io/packages/sass-autocompile">sass-autocompile</a> if you are working with <a href="https://atom.io/">Atom</a>).</p><br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Cards & sections</h2></div>
|
|
<div class="section">
|
|
<p>The <strong>card</strong> module's card system uses a few custom classes to create cards and sections, along with a variety of variables to customize their look and feel.</p><br/>
|
|
<table width="100%" class="striped">
|
|
<caption>Variables</caption>
|
|
<thead>
|
|
<tr><th>Variable</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Variable">$card-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for card components</td><td data-label="Sample value">'card'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$card-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for card components</td><td data-label="Sample value">#fafafa</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$card-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for card components</td><td data-label="Sample value">$fore-color</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$card-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for card components</td><td data-label="Sample value">1px solid #9e9e9e</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$card-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">Border radius for card components</td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$card-margin</td><td data-label="Type">Margin</td>
|
|
<td data-label="Description">Margin for card components</td><td data-label="Sample value">16px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$card-box-shadow</td><td data-label="Type">Box shadow</td>
|
|
<td data-label="Description">Box shadow for card components</td><td data-label="Sample value">0 1px 3px rgba(0,0,0, 0.1)</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$card-normal-width</td><td data-label="Type">Width</td>
|
|
<td data-label="Description">Width for card components</td><td data-label="Sample value">320px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$card-section-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for card components' sections</td><td data-label="Sample value">'section'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$card-section-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">Border style for card components' sections</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$card-section-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for card components' sections</td><td data-label="Sample value">6px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$card-section-media-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for card components' media sections</td><td data-label="Sample value">'media'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Variable">$card-section-media-height</td><td data-label="Type">Height</td>
|
|
<td data-label="Description">Height for card components' media sections</td><td data-label="Sample value">200px</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Card mixins</h2></div>
|
|
<div class="section">
|
|
<p>The <strong>card</strong> module contains a couple of mixins for customizing card styles, along with two more for creating custom section styles.</p><br/>
|
|
<table width="100%" class="striped">
|
|
<caption>Card mixin definitions</caption>
|
|
<thead>
|
|
<tr><th>Mixin</th><th>Description</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Mixin">make-card-alt-color (<span class="fore-primary">$card-alt-name</span>, <span class="fore-primary">$card-alt-back-color</span>, <span class="fore-primary">$card-alt-fore-color</span>, <span class="fore-tertiary">$card-alt-border-style</span>, <span class="fore-tertiary">$card-alt-border-radius</span>, <span class="fore-tertiary">$card-alt-section-border-style</span>)</td>
|
|
<td data-label="Description">Creates a new card color variant using the specified values.</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Mixin">make-card-alt-size (<span class="fore-primary">$card-alt-size-name</span>, <span class="fore-primary">$card-alt-size-width</span>)</td>
|
|
<td data-label="Description">Creates a new card size variant using the specified values.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<table width="100%" class="striped">
|
|
<caption style="font-family: monospace, monospace">make-card-alt-color</caption>
|
|
<thead>
|
|
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Parameter">$card-alt-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the card color variant</td><td data-label="Sample value">'inverse'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$card-alt-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for the card color variant</td><td data-label="Sample value">#212121</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$card-alt-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for the card color variant</td><td data-label="Sample value">#fafafa</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$card-alt-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">(Optional) Border style for the card color variant</td><td data-label="Sample value">1px solid #424242</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$card-alt-border-radius</td><td data-label="Type">Border radius</td>
|
|
<td data-label="Description">(Optional) Border radius for the card color variant</td><td data-label="Sample value">2px</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$card-alt-section-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">(Optional) Border style for the card color variant's section borders</td><td data-label="Sample value">1px solid #616161</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<h3>Sample usage</h3>
|
|
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-alt-color</span> ('inverse', #212121, #fafafa, 1px solid #424242, 2px 1px solid #616161);</pre>
|
|
<br/>
|
|
<table width="100%" class="striped">
|
|
<caption style="font-family: monospace, monospace">make-card-alt-size</caption>
|
|
<thead>
|
|
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Parameter">$card-alt-size-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the card size variant</td><td data-label="Sample value">'large'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$card-alt-size-width</td><td data-label="Type">Width</td>
|
|
<td data-label="Description">Width for the card size variant</td><td data-label="Sample value">480px</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<h3>Sample usage</h3>
|
|
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-alt-size</span> ('large', 480px);</pre>
|
|
<br/>
|
|
<table width="100%" class="striped">
|
|
<caption>Card section mixin definitions</caption>
|
|
<thead>
|
|
<tr><th>Mixin</th><th>Description</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Mixin">make-card-section-alt-color (<span class="fore-primary">$card-section-alt-name</span>, <span class="fore-primary">$card-section-alt-back-color</span>, <span class="fore-primary">$card-section-alt-fore-color</span>, <span class="fore-tertiary">$card-section-alt-border-style</span)</td>
|
|
<td data-label="Description">Creates a new card section color variant using the specified values.</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Mixin">make-card-section-alt-style (<span class="fore-primary">$card-section-alt-name</span>, <span class="fore-primary">$card-section-alt-padding</span>)</td>
|
|
<td data-label="Description">Creates a new card section style variant using the specified values.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<table width="100%" class="striped">
|
|
<caption style="font-family: monospace, monospace">make-card-section-alt-color</caption>
|
|
<thead>
|
|
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Parameter">$card-section-alt-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the card section color variant</td><td data-label="Sample value">'dark'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$card-section-alt-back-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Background color for the card section color variant</td><td data-label="Sample value">#e0e0e0</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$card-section-alt-fore-color</td><td data-label="Type">Color</td>
|
|
<td data-label="Description">Text color for the card section color variant</td><td data-label="Sample value">#212121</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$card-section-alt-border-style</td><td data-label="Type">Border</td>
|
|
<td data-label="Description">(Optional) Border style for the card section color variant</td><td data-label="Sample value">1px solid #bdbdbd</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<h3>Sample usage</h3>
|
|
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-section-alt-color</span> ('dark', #e0e0e0, #212121, 1px solid #bdbdbd);</pre>
|
|
<br/>
|
|
<table width="100%" class="striped">
|
|
<caption style="font-family: monospace, monospace">make-card-section-alt-style</caption>
|
|
<thead>
|
|
<tr><th>Parameter</th><th>Type</th><th>Description</th><th>Sample value</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Parameter">$card-section-alt-name</td><td data-label="Type">String</td>
|
|
<td data-label="Description">Class name for the card section style variant</td><td data-label="Sample value">'double-padded'</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Parameter">$card-section-alt-padding</td><td data-label="Type">Padding</td>
|
|
<td data-label="Description">Padding for the card section style variant</td><td data-label="Sample value">10px</td>
|
|
</tr>
|
|
</tbody>
|
|
</table><br/>
|
|
<h3>Sample usage</h3>
|
|
<pre><span class="fore-secondary">@include</span> <span class="fore-primary">make-card-section-alt-style</span> ('double-padded', 10px);</pre>
|
|
<br/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
|
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
|
<p>If you want to learn more about customizing <strong>mini.css</strong>, go back to the <a href="index.html">customization page</a> or choose a module from the top menu 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>
|