0afb5277ad
Pretty sizeable documentation update, improving layout, typos etc. Also added the Codepen Project to the templates page, a small note to star the project in the front page and two more examples in the drawer component documentation to make sure that everything is properly documented.
324 lines
23 KiB
HTML
324 lines
23 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#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control.html#button-mixins" class="sublink-1">Button 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#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>
|