mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-13 09:23:58 +02:00
Code Issues Releases Wiki Activity

Updated index.html

Browse Source
This commit is contained in:
Angelos Chalaris
2017-01-07 17:07:21 +02:00
parent 2eab61b9c5
commit 80c52e2219
3 changed files with 128 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

66
docs/index.html
View File

@@ -1,7 +1,9 @@
<!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="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css">
<!-- Local tests -->
<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 - Minimal, responsive, style-agnostic CSS toolkit</title>
<meta charset="utf-8">
@@ -21,6 +23,11 @@
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);
@@ -28,6 +35,17 @@
#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);
}
@@ -50,8 +68,19 @@
</style>
</head>
<body>
<header>
<a href="index.html"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;">
<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.1</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="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>
@@ -60,20 +89,10 @@
<a href="https://github.com/Chalarangelo/mini.css" class="button">Github</a>
</div>
</header>
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 3px 9px rgba(0,0,0,0.26), 0 3px 6px rgba(0,0,0,0.35);">
<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>
<!-- Insert your page content here-->
<main><div class="container">
<div class="row" style="padding-top: 40px;">
<div class="col-sm-12 col-lg-10 col-lg-offset-1 row">
<div class="col-sm-12 col-md box-centered row">
<div class="card fluid">
<div class="section">
@@ -105,11 +124,12 @@
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="col-sm col-lg-10 col-lg-offset-1">
<h2>Setup &amp; usage</h2>
<p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference inside your HTML page's <code>&lt;head&gt;</code> tag:</p>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0.2/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<pre>&lt;<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">&quot;stylesheet&quot;</span> <span class="fore-secondary">href</span>=<span class="fore-primary">&quot;https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css&quot;</span>&gt;</pre><br>
<p>If you want to download the package using your favorite package manager, you can use either <strong>Bower</strong> or <strong>NPM</strong>:</p>
<div class="row">
<div class="col-sm-12 col-md-6">
@@ -122,8 +142,9 @@
<p>If you are interested in tinkering with the flavor files and cooking your own flavor, check out the <a href="customization.html">Customization</a> page for information, tips on how to get started and general guidelines.</p>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<h2>Quick overview</h2>
<p>Take a couple of minutes to learn how <strong>mini.css</strong> differs from all those other UI toolkits (Bootstrap, Semantic UI etc):</p>
<table>
@@ -178,7 +199,7 @@
<p><mark class="secondary" style="font-size: 1.4em; padding: 3px 10px;">!</mark>&nbsp;The above comparison takes into account only the CSS files of each framework. <strong>mini.css</strong>'s size is an approximation due to the nature of its flavor system. The calculated results were produced using <a href="http://refresh-sf.com/">Refresh-SF</a>.</p>
<br>
</div>
<div class="col-sm-12 col-md">
<div class="col-sm-12 col-md col-lg-5 col-lg-offset-1">
<h3>Module list</h3>
<ul>
<li><strong>Core</strong> - Resets, typography rules and fixes</li>
@@ -193,12 +214,13 @@
<li><strong>Utility</strong> - Utility and helper classes</li>
</ul>
</div>
<div class="col-sm-12 col-md">
<div class="col-sm-12 col-md col-lg-5">
<h3>Why does <strong>mini.css</strong> have so few modules?</h3>
<p>Modules are what make toolkits so powerful, by giving developers the essential components they need to structure and style their websites. <strong>mini.css</strong> simplifies the crafting and learning process for new developers by providing a handful of very powerful modules that can do many different things. This way, new developers will only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. For example, cards can be used for almost any type of layout and can be customized to behave exactly as the developer needs them to. Tabs, on the other hand, are very responsive on mobile, collapsing to a stack below a certain width, but they can also be forced into a stack, allowing accordions and collapses to be built using the same building block as tabs.</p>
</div>
</div>
<div class="col-sm-12">
<div class="row">
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
<table>
<caption>Browser support</caption>
<thead>
@@ -257,8 +279,9 @@
<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 table above, note that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.</p>
<hr>
</div>
</div>
<div class="row" style="padding-bottom: 40px;">
<div class="col-sm">
<div class="col-sm col-lg-10 col-lg-offset-1">
<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>
<ul>
@@ -269,6 +292,7 @@
</ul>
</div>
</div>
</div>
</div></main>
<!-- 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>

3
docs/v2/DEVLOG.md
View File

@@ -748,4 +748,5 @@
- Tested `position: sticky` for breadcrumbs and other elements. Layout seems to get in the way quite a lot. Implementation might only be viable for `header` elements for now.
- Added `$include-header-sticky` flag and required variables to implement the `.sticky` class.
- Tested a new layout idea in `demo.html`, this is how the new `index.html` should look like in the next update (top part only).
- Updated `index.html` to use the new `.sticky` `header`, along with other styling changes, such as content sizing.
- *TODO* Update the rest of the pages, bump everything to `v2.1.0` and use the local stylesheets in the meantime.

2
docs/v2/demo.html
View File

@@ -101,7 +101,7 @@
</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"><img class="logo" src="mini-logo.svg" id="header-logo"></a><div style="display: inline; overflow: auto;">
<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>