mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-07-31 02:50:26 +02:00
Code Issues Releases Wiki Activity

Housekeeping

Browse Source
This commit is contained in:
Angelos Chalaris
2017-02-07 12:23:53 +02:00
parent 74a815642f
commit 9d002418c2
16 changed files with 730 additions and 1832 deletions
Download Patch File Download Diff File Expand all files Collapse all files

146
docs/core.html
View File

@@ -1,90 +1,44 @@
<!DOCTYPE html>
<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 - Core</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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 - Core</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, core ">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta property="og:type" content="website"/>
<meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<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>
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
display: inline; height: 28px; width: 28px; margin-top: 4px; background: #558b2f; border-radius: 1px;
padding: 4px;
}
#top-logo {
display: inline-block; height: 66px; width: 70px; margin: 64px auto -30px; border-radius: 1px;
background: #558b2f; padding: 8px; padding-top: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
#top-heading {
color: #f5f5f5; font-size: 2.4em; text-shadow: 0 1px 2px rgba(0,0,0,0.35); margin-bottom: -8px;
}
#top-version-tag {
padding: 4px 6px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.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; }
/* Local classes and ids for this page */
.fore-primary { color: #0d47a1; font-family: monospace, monospace; }
.fore-secondary { color: #b71c1c; font-family: monospace, monospace; }
.fore-tertiary { color: #1b5e20; font-family: monospace, monospace; }
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
box-sizing: border-box;
border-right: 1px solid #bdbdbd;
}
@media (max-width: 767px){
.col-sm-12.col-sm-last.col-md-4.col-md-normal {
border: 0;
border-top: 1px solid #bdbdbd;
}
}
header.sticky a.button {
padding: 4px 6px; font-size: 0.95em;
}
</style>
<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-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
.box-centered { text-align: center; } .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-4.col-md-normal { box-sizing: border-box; border-right: 1px solid #bdbdbd; }
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0; border-top: 1px solid #bdbdbd; } }
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">&nbsp;<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>&nbsp;Github</a>
</div>
</header>
<header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); 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>
</div>
<header>
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<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>&nbsp;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">
@@ -114,9 +68,7 @@
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section">
<h2>Typography</h2>
</div>
<div class="section"><h2>Typography</h2></div>
<div class="section row">
<div class="col-sm-12">
<p>For the basic typography rules we did the following, along with other things presented below:</p>
@@ -134,9 +86,7 @@
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section">
<h2>Headings</h2>
</div>
<div class="section"><h2>Headings</h2></div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal row">
<div class="col-sm-12 col-lg-6 col-lg-first"><h1>Heading 1<small>Subheading</small></h1></div>
@@ -163,13 +113,10 @@
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section">
<h2>Common textual elements</h2>
</div>
<div class="section"><h2>Common textual elements</h2></div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div><br><p>This is a paragraph with some sample text. Did you know <strong>mini.css</strong> v2.1 is codenamed <strong>Fermion</strong>? No? Well, now you do! Oh, by the way, that was some Bold text and here is some <em>text in Italics</em>. Maybe you want to know what our inline elements look like. For example a <a href="https://github.com/Chalarangelo/mini.css">link to the Github repository of mini.css</a> looks like that! Neat, right? Maybe you want to see some <code>inline code</code> or some sample <kbd>input</kbd>. Oh, also <small>small text</small> is cool, along with its siblings: the subscript<sub>hi!</sub> and the superscript<sup>hello!</sup>. Finally, check out the horizontal rule, preformatted code block and quotation below.</p>
<hr>
<div><br><p>This is a paragraph with some sample text. Did you know <strong>mini.css</strong> v2.1 is codenamed <strong>Fermion</strong>? No? Well, now you do! Oh, by the way, that was some Bold text and here is some <em>text in Italics</em>. Maybe you want to know what our inline elements look like. For example a <a href="https://github.com/Chalarangelo/mini.css">link to the Github repository of mini.css</a> looks like that! Neat, right? Maybe you want to see some <code>inline code</code> or some sample <kbd>input</kbd>. Oh, also <small>small text</small> is cool, along with its siblings: the subscript<sub>hi!</sub> and the superscript<sup>hello!</sup>. Finally, check out the horizontal rule, preformatted code block and quotation below.</p><hr>
<pre>function sum(num1, num2) {
var num3 = num1 + num2;
console.log('Result: ' + num3);
@@ -200,25 +147,20 @@
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section">
<h2>Lists</h2>
</div>
<div class="section"><h2>Lists</h2></div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div>
<br>
<div><br>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Strawberry</li>
</ul>
<br>
</ul><br>
<ol>
<li>Wake up</li>
<li>Eat breakfast</li>
<li>Go to work</li>
</ol>
<br>
</ol><br>
</div>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
@@ -243,14 +185,10 @@
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<div class="card fluid">
<div class="section">
<h2>Image responsiveness</h2>
</div>
<div class="section"><h2>Image responsiveness</h2></div>
<div class="section row">
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
<div>
<img src="http://placehold.it/800x600">
</div>
<div><img src="https://placehold.it/800x600"></div>
</div>
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
<p>Image elements (<code>&lt;img&gt;</code>) are responsive by default, without the need for any special classes or anything else. We made sure they will scale down as necessary to display properly on smaller devices, while keeping their original aspect ratio, but they will never scale up above their original size.</p>