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

Updated customization page and cleanup

Browse Source
This commit is contained in:
Angelos Chalaris
2017-02-12 22:30:21 +02:00
parent dd9e957c17
commit 6d4b0e09e4
4 changed files with 30 additions and 247 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
docs/v2/DEVLOG.md
View File

@@ -862,3 +862,6 @@
- Added `sticky` documentation in `navigation`. No *dos* and *dont's* either, I'm afraid, can't find any troublesome things with this.
- Added a quick fix for `table`s' irregular styling of mutliline headers. Resolves #54.
- Updated `input_control` documentation for accessibility and `fluid` `input-group`s. Finally resolved #40, accessibility is now properly explained everywhere.
- Removed `demo.html` once again.
- Updated `v2/index.html` to take up less space.
- Updated `customization.html` page with latest information.

214
docs/v2/demo.html
View File

@@ -1,214 +0,0 @@
<!DOCTYPE html>
<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="../../dist/mini-default.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<title>mini.css - v2.1.0 Test page</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 toolkit">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
<meta property="og:type" content="website"/>
<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">
<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-area {
height: 320px;
background: -webkit-linear-gradient(#455a64,#192024);
background: linear-gradient(#455a64,#192024);
}
#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;
}
@media (min-width: 768px) {
#top-area {
height: 440px;
}
#top-logo {
margin: 88px auto -24px;
}
#top-heading {
margin-bottom: -6px;
}
}
#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;
}
}
.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;
}
</style>
</head>
<body>
<div class="container" id="top-area">
<div class="row">
<div class="col-sm">
<div class="box-centered">
<img src="mini-logo.svg" id="top-logo">
<h1 id="top-heading"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
<mark class="tertiary" id="top-version-tag">v2.0</mark>
</div>
</div>
</div>
</div>
<header class="sticky" style="box-shadow: 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); ">
<a href="index.html" class="logo"><img src="mini-logo.svg" id="header-logo">&nbsp;<span style="display:inline-block; 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">Github</a>
</div>
</header>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row cols-sm-12" style="padding-top: 20px">
<div><h2>Quick-layout system</h2></div>
</div>
<div class="row cols-sm-12 cols-md-6 cols-lg-4">
<div><div class="box-colored"></div></div>
<div><div class="box-colored"></div></div>
<div><div class="box-colored"></div></div>
<div><div class="box-colored"></div></div>
<div><div class="box-colored"></div></div>
<div><div class="box-colored"></div></div>
</div>
<div class="row cols-sm-12">
<div><h2>Classic system</h2></div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
<div class="col-sm-12 col-md-6 col-lg-4"><div class="box-colored"></div></div>
</div>
<div class="row col-sm-12">
<div>
<a role="button" class="tertiary" href="#">Test span button</a>
<div class="button-group">
<button>Button</button>
<a role="button">Button</a>
<label class="button">Button</label>
</div>
</div>
</div>
<div class="row cols-sm-12 cols-md-10">
<div class="col-md-offset-1">
<ul class="breadcrumbs">
<li><a href="#">Root</a></li>
<li><a href="#">Folder</a></li>
<li>File</li>
</ul>
</div>
<div class="col-md-offset-1">
<mark class="tooltip large" aria-label="This is some sample tooltip text">Show a tooltip while hovering</mark><br /><br /><br />
<nav>
<a href="#">Home</a>
<span>News</span>
<a href="#" class="sublink-1">New Courses</a>
<a href="#" class="sublink-1">Certifications</a>
<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="#">About</a>
<a href="#">Contact</a>
</nav>
<form>
<fieldset>
<legend>Simple form</legend>
<div class="input-group fluid">
<label for="username">username</label>
<input type="email" value="" id="username" placeholder="username">
<label for="pwd">password</label>
<input type="password" value="" id="pwd" placeholder="password">
</div>
<div class="input-group">
<label for="username">username</label>
<input type="email" value="" id="username" placeholder="username">
</div>
<div class="input-group">
<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">
<label for="rad1">Radio</label>
</div>
</fieldset>
</form>
<input type="button" value="Test" readonly></input>
<button readonly>Test</button>
</div>
</div>
<div class="row">
<div class="col-sm-1">
<img src="https://placehold.it/800x800">
</div>
<div class="col-sm-11">
<h2>Heading</h2>
<p>Some text...</p>
</div>
</div>
</div></main>
<!-- End of page content-->
<footer class="sticky"><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>

29
docs/v2/index.html
View File

@@ -1,18 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<title>mini.css - Minimal, responsive, style-agnostic CSS toolkit</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 toolkit">
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass">
<meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit">
<meta property="og:type" content="website"/>
<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">
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/mini.css/">
</head>
</html>
<!DOCTYPE html><html><head>
<title>mini.css - Minimal, responsive, style-agnostic CSS framework</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, toolkit">
<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">
<meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/mini.css/">
</head></html>