325 lines
24 KiB
HTML
325 lines
24 KiB
HTML
<!DOCTYPE html>
|
|
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans">
|
|
<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">
|
|
<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>
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/erE3KsIWUumgD1j_Ca-V-xJtnKITppOI_IvcXXDNrsc.woff2) format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
|
|
@font-face { font-family: 'Noto Sans'; font-style: normal; font-weight: 400; src: local('Noto Sans'), local('NotoSans'), url(https://fonts.gstatic.com/s/notosans/v6/LeFlHvsZjXu2c3ZRgBq9nFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215; }
|
|
#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 #c9c9c9;}
|
|
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
|
|
.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;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
|
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;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="sticky">
|
|
<a href="../index.html" class="logo"><span id="header-logo">m</span></a>
|
|
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
|
<a href="../index.html" class="button hidden-sm">Introduction</a> <a href="../modules.html" class="button hidden-sm">Modules</a>
|
|
<a href="../flavors.html" class="button hidden-sm">Flavors</a> <a href="../templates.html" class="button hidden-sm">Templates</a>
|
|
<a href="index.html" class="button hidden-sm">Customization</a> <a href="../quick_reference.html" class="button hidden-sm">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>
|
|
<div class="container" style="padding-left: 0.25rem;">
|
|
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
|
<label class="close" for="navigation-toggle"></label>
|
|
<a href="../index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
|
<a href="../modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
|
|
<a href="../flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
|
<a href="../templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
|
<h4 style="margin-left: 0;">Customization</h4> <a href="core.html#core-title">Core</a>
|
|
<a href="core.html#typography-headings" class="sublink-1">Typography & headings</a>
|
|
<a href="core.html#common-elements" class="sublink-1">Common elements & fixes</a>
|
|
<br/> <a href="grid.html#grid-title">Grid</a>
|
|
<a href="grid.html#classes-breakpoints" class="sublink-1">Classes & breakpoints</a>
|
|
<br/> <a href="input_control.html#input-control-title">Input Control</a>
|
|
<a href="input_control.html#forms-input" class="sublink-1">Forms & input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a> <a href="input_control.html#switch" class="sublink-1">Switches</a>
|
|
<a href="input_control.html#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button mixins</a> <a href="input_control.html#switch-mixins" class="sublink-1">Switch mixins</a>
|
|
<br/> <a href="navigation.html#navigation-title">Navigation</a>
|
|
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
|
|
<a href="navigation.html#drawer" class="sublink-1">Drawer</a> <a href="navigation.html#footer" class="sublink-1">Footer</a>
|
|
<br/> <a href="table.html#table-title">Table</a>
|
|
<a href="table.html#table-styling" class="sublink-1">Table styling</a>
|
|
<br/> <a href="card.html#card-title">Card</a>
|
|
<a href="card.html#cards-sections" class="sublink-1">Cards and sections</a> <a href="card.html#card-mixins" class="sublink-1">Card mixins</a>
|
|
<br/> <a href="tab.html#tab-title">Tab</a>
|
|
<a href="tab.html#tab-styling" class="sublink-1">Tab styling</a>
|
|
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
|
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</a>
|
|
<a href="contextual.html#tooltips" class="sublink-1">Tooltips</a> <a href="contextual.html#modals" class="sublink-1">Modals</a>
|
|
<a href="contextual.html#highlighting-mixins" class="sublink-1">Text highlighting mixins</a>
|
|
<a href="contextual.html#toast-mixins" class="sublink-1">Toast mixins</a> <a href="contextual.html#tooltip-mixins" class="sublink-1">Tooltip mixins</a>
|
|
<br/> <a href="progress.html#progress-title">Progress</a>
|
|
<a href="progress.html#progress-bar" class="sublink-1">Progress bar</a> <a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a>
|
|
<a href="progress.html#progress-mixins" class="sublink-1">Progress bar mixins</a> <a href="progress.html#spinner-mixins" class="sublink-1">Donut spinner mixins</a>
|
|
<br/> <a href="utility.html#utility-title">Utility</a>
|
|
<a href="utility.html#visibility-legacy" class="sublink-1">Visibility helpers & legacy features</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
|
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
|
<a href="utility.html#borders-shadows-mixins" class="sublink-1">Generic border & shadow mixins</a>
|
|
<a href="utility.html#responsive-sizing-mixins" class="sublink-1">Responsive sizing & spacing mixins</a>
|
|
<a href="utility.html#responsive-visibility-mixins" class="sublink-1">Responsive visibility helper mixins</a>
|
|
<a href="../quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
|
</nav>
|
|
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
|
<div class="row" style="padding-top: 40px;" id="card-title">
|
|
<div class="col-sm-12">
|
|
<h1>Card</h1>
|
|
<p style="text-align:justify">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><br/>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section">
|
|
<h2>Quick overview</h2>
|
|
<p style="text-align:justify">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 style="text-align:justify">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" id="cards-sections">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Cards & sections</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">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 style="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" id="card-mixins">
|
|
<div class="col-sm-12">
|
|
<div class="card fluid">
|
|
<div class="section"><h2>Card mixins</h2></div>
|
|
<div class="section">
|
|
<p style="text-align:justify">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 style="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 style="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 style="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 style="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 style="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 style="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">
|
|
<p style="text-align:justify">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>
|
|
</main></div></div></div>
|
|
<footer style="text-align:justify"><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>
|