mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-07 06:16:29 +02:00
Code Issues Releases Wiki Activity

Center block disabled by default

Browse Source
This commit is contained in:
Angelos Chalaris
2017-01-31 10:31:04 +02:00
parent 1f03644282
commit dd8f436d64
7 changed files with 39 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
docs/quick_reference.html
View File

@@ -2,7 +2,7 @@
<html>
<head>
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/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://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - Quick Reference</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@@ -14,7 +14,7 @@
<meta property="og:description" content="mini.css is a tiny CSS toolkit 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">
<link rel="icon" type="image/png" href="favicon.png">
<style>
/* Classes and ids used in multiple pages - page top and utilities */
#header-logo {
@@ -36,7 +36,7 @@
.box-colored.red { background: #e53935; }
.box-centered > .card.fluid {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
@@ -69,7 +69,7 @@
}
</style>
</head>
<body>
<body>
<header>
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;">
<a href="index.html" class="button">Introduction</a>
@@ -239,7 +239,7 @@
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-12&quot;&gt;
&lt;div class=&quot;col-sm-12&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm&quot;&gt;
@@ -260,7 +260,7 @@
<li>Multiple <code>.col-<span class="fore-primary">SCR_SZ</span></code> and/or <code>.col-<span class="fore-primary">SCR_SZ</span>-<span class="fore-secondary">COL_WD</span></code> elements specify serve as the grid system's columns (fluid and preset respectively)</li>
</ol>
</li>
<li><code><span class="fore-primary">SCR_SZ</span></code> values:
<li><code><span class="fore-primary">SCR_SZ</span></code> values:
<ul>
<li><code><span class="fore-tertiary">sm</span></code> for screens below <code>768px</code> wide</li>
<li><code><span class="fore-tertiary">md</span></code> for screens between <code>768px</code>(inclusive) and <code>1280px</code>(exclusive)</li>
@@ -331,11 +331,11 @@
&lt;div class=&quot;col-sm-8 col-sm-offset-4&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;row&quot;&gt;
&lt;div class=&quot;col-sm-5 col-sm-offset-1&quot;&gt;
&lt;div class=&quot;col-sm-5 col-sm-offset-1&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;col-sm-5 col-sm-offset-1&quot;&gt;
&lt;div class=&quot;col-sm-5 col-sm-offset-1&quot;&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
@@ -420,7 +420,7 @@
&lt;span class=&quot;sublink-1&quot;&gt;Events&lt;/span&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Course Showcase - 12th, Dec&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-2&quot;&gt;Staff AMA - 16th, Dec&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;Policy Update&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;sublink-1&quot;&gt;Policy Update&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;About&lt;/a&gt;
&lt;a href=&quot;#&quot;&gt;Contact&lt;/a&gt;
&lt;/nav&gt;</pre>
@@ -464,11 +464,11 @@
&lt;fieldset&gt;
&lt;legend&gt;Simple form&lt;/legend&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;label for=&quot;username&quot;&gt;username&lt;/label&gt;
&lt;label for=&quot;username&quot;&gt;username&lt;/label&gt;
&lt;input type=&quot;email&quot; value=&quot;&quot; id=&quot;username&quot; placeholder=&quot;username&quot;&gt;
&lt;/div&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;label for=&quot;pwd&quot;&gt;password&lt;/label&gt;
&lt;label for=&quot;pwd&quot;&gt;password&lt;/label&gt;
&lt;input type=&quot;password&quot; value=&quot;&quot; id=&quot;pwd&quot; placeholder=&quot;password&quot;&gt;
&lt;/div&gt;
&lt;/fieldset&gt;
@@ -476,7 +476,7 @@
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<ul>
<li>Link <code>&lt;label&gt;</code> elements to their respective <code>&lt;input&gt;</code> elements for ease-of-use</li>
<li>Use of the <code>&lt;fieldset&gt;</code> and <code>&lt;legend&gt;</code> elements is highly recommended</li>
<li>Forms are inline by default, use <code>.input-group</code> to align elements inside them</li>
@@ -491,12 +491,12 @@
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Checkboxes &amp; radio buttons <a href="https://codepen.io/chalarangelo/pen/yVZPEZ" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;div class=&quot;input-group&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;check1&quot; tabindex=&quot;0&quot;&gt;
&lt;input type=&quot;checkbox&quot; id=&quot;check1&quot; tabindex=&quot;0&quot;&gt;
&lt;label for=&quot;check1&quot;&gt;Checkbox&lt;/label&gt;
&lt;/div&gt;
&lt;div class=&quot;input-group&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;rad1&quot; tabindex=&quot;0&quot; name=&quot;radio-group-1&quot;&gt;
&lt;input type=&quot;radio&quot; id=&quot;rad1&quot; tabindex=&quot;0&quot; name=&quot;radio-group-1&quot;&gt;
&lt;label for=&quot;rad1&quot;&gt;Radio&lt;/label&gt;
&lt;/div&gt;</pre>
</div>
@@ -521,7 +521,7 @@
&lt;input type=&quot;submit&quot; class=&quot;tertiary&quot; value=&quot;Tertiary button&quot;&gt;
&lt;button class=&quot;inverse&quot;&gt;Inverse button&lt;/button&gt;
&lt;button class=&quot;small&quot;&gt;Small button&lt;/button&gt;
&lt;button class=&quot;large&quot;&gt;Large button&lt;/button&gt;
&lt;button class=&quot;large&quot;&gt;Large button&lt;/button&gt;
&lt;button disabled&gt;Disabled button&lt;/button&gt;
&lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;Link button&lt;/a&gt;
&lt;label class=&quot;button&quot;&gt;Label button&lt;/label&gt;
@@ -876,7 +876,7 @@
&lt;div&gt;
&lt;h3&gt;Section 1&lt;/h3&gt;
&lt;p&gt;This is the first accordion section's content.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;input type=&quot;radio&quot; name=&quot;accordion&quot; id=&quot;a2&quot;aria-hidden=&quot;true&quot;&gt;
&lt;label for=&quot;a2&quot; aria-hidden=&quot;true&quot;&gt;Accordion section 2&lt;/label&gt;
&lt;div&gt;
@@ -1084,25 +1084,6 @@
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Floats, centering &amp; clearfix <a href="https://codepen.io/chalarangelo/pen/pNGGjE" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
<pre>&lt;span class=&quot;float-left&quot;&gt;Float left&lt;/span&gt;
&lt;span class=&quot;float-right&quot;&gt;Float right&lt;/span&gt;
&lt;span class=&quot;clearfix&quot;&gt;Clearfix&lt;/span&gt;
&lt;span class=&quot;center-block&quot;&gt;Center block&lt;/span&gt;</pre>
</div>
<div class="col-sm-12 col-md-6">
<h3>Notes</h3>
<ul>
<li>Use <code>.float-left</code> or <code>.float-right</code> for quick floats</li>
<li>Use <code>.center-block</code> for centered blocks</li>
<li>Use <code>.clearfix</code> to clear floats</li>
<li>All classes use <code><span class="fore-secondary">!important</span></code> declarations</li>
<li>Do not combine these classes with each other, except for <code>.clearfix</code></li>
</ul>
</div>
</div>
<div class="section row">
<div class="col-sm-12 col-md-6 col-md-first col-sm-first">
<h3>Generic borders &amp; shadows <a href="https://codepen.io/chalarangelo/pen/aBXXvE" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i>&nbsp;View on Codepen</a></h3>
@@ -1184,4 +1165,4 @@
<!-- 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>
</html>