beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Documentation update

Browse source
This commit is contained in:
Angelos Chalaris 2016-11-15 00:41:49 +02:00
parent a03cd49c36
commit 80bc8c20fa
3 changed files with 41 additions and 47 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/v2/DEVLOG.md
View file

@ -454,3 +454,5 @@
- Added the basic setup instructions in the `index` page.
- Added a few links for getting started in the `index` page. Page is complete for now.
- Minor updates to resources, description, title etc, updated `template` as well.
- Added links for the rest of the docs.

33
docs/v2/index.html
View file

@ -4,16 +4,17 @@
<!-- Live demo styled as of 20161113 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/3e0ae4fa7fa87cb51187ae5df2e3cab21f60eb52/dist/mini-default.min.css">
<!-- Local stylesheet -->
<link rel="stylesheet" href="../../dist/mini-default.min.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<link rel="stylesheet" href="../../dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<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 - A minimal Sass-y responsive mobile-first style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, responsive, framework, mobile first, style agnostic, Sass">
<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)">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.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: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
@ -22,11 +23,11 @@
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-header {
#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: 3px 5px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
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;}
@ -39,6 +40,7 @@
-webkit-align-self: auto;
align-self: auto;
}
/* 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; }
@ -47,11 +49,10 @@
<body>
<header>
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
<a href="#" class="button">Introduction</a>
<a href="#" class="button">Module Overview</a>
<a href="#" class="button">Module Demos</a>
<a href="#" class="button">Flavors</a>
<a href="#" class="button">Customization</a>
<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="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
</div>
</header>
@ -60,7 +61,7 @@
<div class="col-sm">
<div class="box-centered">
<img src="mini-logo.svg" id="top-logo">
<h1 id="top-header"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
<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="tag tertiary" id="top-version-tag">v2.0</mark>
</div>
</div>
@ -68,7 +69,7 @@
</div>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row cards" style="padding-top: 20px;">
<div class="row" style="padding-top: 40px;">
<div class="col-sm-12 col-md box-centered row">
<div class="card fluid">
<div class="section">
@ -252,7 +253,7 @@
<p><mark class="secondary" style="font-size: 1.4em; padding: 3px 10px;">!</mark>&nbsp;Due to the way <strong>mini.css</strong> is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. Apart from the above table, note that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not display or behave properly due to the browsers themselves.</p>
<hr>
</div>
<div class="row">
<div class="row" style="padding-bottom: 40px;">
<div class="col-sm">
<h2>Getting started</h2>
<p>If you are still here after reading this far, we will assume you are interested or at least curious. Based on that assumption, here are a few links to help get you started:</p>

53
docs/v2/template.html
View file

@ -4,16 +4,17 @@
<!-- Live demo styled as of 20161113 -->
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/3e0ae4fa7fa87cb51187ae5df2e3cab21f60eb52/dist/mini-default.min.css">
<!-- Local stylesheet -->
<link rel="stylesheet" href="../../dist/mini-default.min.css">
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</title>
<link rel="stylesheet" href="../../dist/mini-default.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<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 - A minimal Sass-y responsive mobile-first style-agnostic CSS framework">
<meta name="keywords" content="mini, mini.css, CSS, responsive, framework, mobile first, style agnostic, Sass">
<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)">
<link rel="icon" type="image/png" href="favicon.png">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.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: 2px; background: #558b2f; border-radius: 1px;
margin-left: -3px; padding: 2px;
@ -22,43 +23,33 @@
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-header {
#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: 3px 5px; font-size: 0.85em; font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,0.35);
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: #b71c1c; }
.card.fluid.box-centered {
-webkit-box-pack: start;
-webkit-box-align: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
-webkit-align-self: auto;
align-self: auto;
}
@media (max-width: 800px) {
.row.cards {
-webkit-box-orient: vertical;
-webkit-flex-direction: column;
flex-direction: column;
}
.card.fluid.box-centered {
width: auto;
}
.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;
}
/* Local classes and ids for this page */
</style>
</head>
<body>
<header>
<img class="logo" src="mini-logo.svg" id="header-logo"><div style="display: inline; overflow: auto;">
<a href="#" class="button">Introduction</a>
<a href="#" class="button">Module Overview</a>
<a href="#" class="button">Module Demos</a>
<a href="#" class="button">Flavors</a>
<a href="#" class="button">Customization</a>
<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="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
</div>
</header>
@ -67,7 +58,7 @@
<div class="col-sm">
<div class="box-centered">
<img src="mini-logo.svg" id="top-logo">
<h1 id="top-header"><span style="font-size: 1.35em;">m</span>ini<span style="font-size:0.65em; color: #558b2f;">.css</span></h1>
<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="tag tertiary" id="top-version-tag">v2.0</mark>
</div>
</div>