Center block disabled by default
This commit is contained in:
Angelos Chalaris
parent
1f03644282
commit
dd8f436d64
7 changed files with 39 additions and 87 deletions
5
dist/mini-default.css
vendored
5
dist/mini-default.css
vendored
|
|
@ -1720,11 +1720,6 @@ ul.breadcrumbs {
|
|||
-webkit-transform: rotateZ(-45deg);
|
||||
transform: rotateZ(-45deg); }
|
||||
|
||||
.center-block {
|
||||
display: block !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important; }
|
||||
|
||||
/*
|
||||
Custom elements for utilities and helper classes.
|
||||
*/
|
||||
|
|
|
|||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -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 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="col-sm-12">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
|
|
@ -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 @@
|
|||
<div class="col-sm-8 col-sm-offset-4">
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-5 col-sm-offset-1">
|
||||
<div class="col-sm-5 col-sm-offset-1">
|
||||
</div>
|
||||
<div class="col-sm-5 col-sm-offset-1">
|
||||
<div class="col-sm-5 col-sm-offset-1">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div></pre>
|
||||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
|
|
@ -420,7 +420,7 @@
|
|||
<span class="sublink-1">Events</span>
|
||||
<a href="#" class="sublink-2">Course Showcase - 12th, Dec</a>
|
||||
<a href="#" class="sublink-2">Staff AMA - 16th, Dec</a>
|
||||
<a href="#" class="sublink-1">Policy Update</a>
|
||||
<a href="#" class="sublink-1">Policy Update</a>
|
||||
<a href="#">About</a>
|
||||
<a href="#">Contact</a>
|
||||
</nav></pre>
|
||||
|
|
@ -464,11 +464,11 @@
|
|||
<fieldset>
|
||||
<legend>Simple form</legend>
|
||||
<div class="input-group">
|
||||
<label for="username">username</label>
|
||||
<label for="username">username</label>
|
||||
<input type="email" value="" id="username" placeholder="username">
|
||||
</div>
|
||||
<div class="input-group">
|
||||
<label for="pwd">password</label>
|
||||
<label for="pwd">password</label>
|
||||
<input type="password" value="" id="pwd" placeholder="password">
|
||||
</div>
|
||||
</fieldset>
|
||||
|
|
@ -476,7 +476,7 @@
|
|||
</div>
|
||||
<div class="col-sm-12 col-md-6">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<ul>
|
||||
<li>Link <code><label></code> elements to their respective <code><input></code> elements for ease-of-use</li>
|
||||
<li>Use of the <code><fieldset></code> and <code><legend></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 & radio buttons <a href="https://codepen.io/chalarangelo/pen/yVZPEZ" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><div class="input-group">
|
||||
<input type="checkbox" id="check1" tabindex="0">
|
||||
<input type="checkbox" id="check1" tabindex="0">
|
||||
<label for="check1">Checkbox</label>
|
||||
</div>
|
||||
|
||||
<div class="input-group">
|
||||
<input type="radio" id="rad1" tabindex="0" name="radio-group-1">
|
||||
<input type="radio" id="rad1" tabindex="0" name="radio-group-1">
|
||||
<label for="rad1">Radio</label>
|
||||
</div></pre>
|
||||
</div>
|
||||
|
|
@ -521,7 +521,7 @@
|
|||
<input type="submit" class="tertiary" value="Tertiary button">
|
||||
<button class="inverse">Inverse button</button>
|
||||
<button class="small">Small button</button>
|
||||
<button class="large">Large button</button>
|
||||
<button class="large">Large button</button>
|
||||
<button disabled>Disabled button</button>
|
||||
<a href="#" class="button">Link button</a>
|
||||
<label class="button">Label button</label>
|
||||
|
|
@ -876,7 +876,7 @@
|
|||
<div>
|
||||
<h3>Section 1</h3>
|
||||
<p>This is the first accordion section's content.</p>
|
||||
</div>
|
||||
</div>
|
||||
<input type="radio" name="accordion" id="a2"aria-hidden="true">
|
||||
<label for="a2" aria-hidden="true">Accordion section 2</label>
|
||||
<div>
|
||||
|
|
@ -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 & clearfix <a href="https://codepen.io/chalarangelo/pen/pNGGjE" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> View on Codepen</a></h3>
|
||||
<pre><span class="float-left">Float left</span>
|
||||
<span class="float-right">Float right</span>
|
||||
<span class="clearfix">Clearfix</span>
|
||||
<span class="center-block">Center block</span></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 & shadows <a href="https://codepen.io/chalarangelo/pen/aBXXvE" target="_blank" class="button small"><i class="fa fa-codepen" aria-hidden="true"></i> 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>
|
||||
|
|
|
|||
|
|
@ -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 - Utility</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: #b71c1c; }
|
||||
.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;
|
||||
|
|
@ -71,7 +71,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>
|
||||
|
|
@ -148,38 +148,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Floats, centering & clearfix</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-first">
|
||||
<p>You can easily make content float left or right, using the <code>.float-left</code> and <code>.float-right</code> classes. Clear all floats, using the <code>.clearfix</code> class, based on the <a href="http://nicolasgallagher.com/micro-clearfix-hack/">micro clearfix</a> by Nicolas Gallagher. Finally, use the <code>.center-block</code> class to make an element center and display as a block.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><span class="float-left">Float left</span>
|
||||
<span class="float-right">Float right</span>
|
||||
<span class="clearfix">Clearfix</span>
|
||||
<span class="center-block">Center block</span></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h3>Notes</h3>
|
||||
<ul>
|
||||
<li>All of these classes utilize <code><span class="fore-secondary">!important</span></code> declarations, so be careful when and how to use them.</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<pre><span class="float-left float-right">Avoid this</span></pre>
|
||||
<p class="dont"><mark class="secondary">Don't:</mark> Avoid combining any two of the above classes (except if you use <code>.clearfix</code> to temporarily clear a float or something similar), as they might overwrite each other and cause unexpected behavior.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
|
|
@ -372,4 +340,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>
|
||||
|
|
|
|||
|
|
@ -794,3 +794,6 @@
|
|||
|
||||
- Added flags for `floats` and `clearfix`, turned both utilites of by default, as they are mostly useless.
|
||||
- After removing the two components mentioned above, size is now `6.89KB`.
|
||||
- `center-block` turned off using a flag by default. File size is now `6.87KB`. All legacy utilites have been disabled by default.
|
||||
- Updated `utility.html` page to reflect the fact that these utilities are no longer present by default.
|
||||
- Updated `quick_reference.html` to reflect the fact that these utilities are no longer present by default.
|
||||
|
|
|
|||
|
|
@ -572,12 +572,14 @@ $responsive-padding-medium-value: // Padding value for responsive pad
|
|||
$responsive-padding-large-value:6px 8px; // Padding value for responsive padding on large screens
|
||||
$include-floats: false; // Should floats be included? (`true`/`false`) [1]
|
||||
$include-clearfix: false; // Should clearfix be included? (`true`/`false`) [2]
|
||||
$center-block-name: 'center-block'; // Class name for center block
|
||||
$include-center-block-name: false; // Should center block be included? (`true`/`false`) [3]
|
||||
// Notes:
|
||||
// [1] - If the value of $include-floats is `true`, float classes will be created using the value of $float-prefix to determine the class
|
||||
// names that will be used.
|
||||
// [2] - If the value of $include-clearfix is true, a clearfix class will be created using the value of $clearfix-name to determine the
|
||||
// class name of the clearfix component.
|
||||
// [3] - If the value of $include-center-block is true, a center block class will be created using the value of $center-block-name to
|
||||
// determine the class name of the center block class.
|
||||
// Load modules. If you do not want to use a module, comment out its `@import` statement, along with any mixin `@include`s that are part of
|
||||
// that module and marked as such below it.
|
||||
@import '../mini/core';
|
||||
|
|
|
|||
|
|
@ -203,8 +203,9 @@ ul.#{$breadcrumbs-name} {
|
|||
}
|
||||
}
|
||||
}
|
||||
$include-floats: false !default; // Should floats be included?
|
||||
$include-clearfix: false !default; // Should clearfix be included?
|
||||
$include-floats: false !default; // Should floats be included?
|
||||
$include-clearfix: false !default; // Should clearfix be included?
|
||||
$include-center-block: false !default; // Should center block be included?
|
||||
// Floats. ATTENTION: Uses !important.
|
||||
// NOTE: Might be obsolete and not play well with others.
|
||||
@if $include-floats {
|
||||
|
|
@ -227,8 +228,10 @@ $include-clearfix: false !default; // Should clearfix be included?
|
|||
}
|
||||
}
|
||||
// Center block. ATTENTION: Uses !important.
|
||||
.#{$center-block-name} {
|
||||
display: block !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
@if $include-center-block {
|
||||
.#{$center-block-name} {
|
||||
display: block !important;
|
||||
margin-left: auto !important;
|
||||
margin-right: auto !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue