160 lines
No EOL
11 KiB
HTML
160 lines
No EOL
11 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Live demo styled as of 20161117 -->
|
|
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/e6d74493378ebf8837bb3fc2469864dda719af41/dist/mini-default.min.css">
|
|
<!-- Local stylesheet -->
|
|
<link rel="stylesheet" href="../../dist/mini-default.min.css">
|
|
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<title>mini.css - Modules</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, module, modules">
|
|
<meta name="author" content="Angelos Chalaris (chalarangelo)">
|
|
<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;
|
|
}
|
|
#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;
|
|
}
|
|
#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: #b71c1c; }
|
|
.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 */
|
|
.box-left { text-align: left; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<img class="logo" src="mini-logo.svg" id="header-logo"><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="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="tag 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">
|
|
<h1>Modules</h1>
|
|
<p><strong>mini.css</strong> uses modules as its base building blocks. Each module contains one or more components that affect the same part of the user experience. Below you can see a quick overview of all the modules that compose <strong>mini.css</strong>.</p><br>
|
|
</div>
|
|
</div>
|
|
<div class="row box-centered">
|
|
<div class="col-sm-12 col-md-6 row">
|
|
<div class="card fluid">
|
|
<h2 class="section"><mark class="primary"><i class="fa fa-font fa-fw" aria-hidden="true"></i></mark> Core</h2>
|
|
<p class="section box-left">The <strong>core</strong> module contains basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like.</p>
|
|
<a href="core.html" class="button section">See more</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 row">
|
|
<div class="card fluid">
|
|
<h2 class="section"><mark class="secondary"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></mark> Grid</h2>
|
|
<p class="section box-left">The <strong>grid</strong> module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens.</p>
|
|
<a href="grid.html" class="button section">See more</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row box-centered">
|
|
<div class="col-sm-12 col-md-6 row">
|
|
<div class="card fluid">
|
|
<h2 class="section"><mark class="primary"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></mark> Navigation</h2>
|
|
<p class="section box-left">The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks.</p>
|
|
<a href="navigation.html" class="button section">See more</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6 row">
|
|
<div class="card fluid">
|
|
<h2 class="section"><mark class="tertiary"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></mark> Input Control</h2>
|
|
<p class="section box-left">The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements's styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.</p>
|
|
<a href="input_control.html" class="button section">See more</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row box-centered">
|
|
<div class="col-sm-12 col-md-6">
|
|
<div class="card fluid">
|
|
<h2 class="section"><mark class="primary"><i class="fa fa-table fa-fw" aria-hidden="true"></i></mark> Table</h2>
|
|
<p class="section box-left">The <strong>table</strong> module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view.</p>
|
|
<a href="table.html" class="button section">See more</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<div class="card fluid">
|
|
<h2 class="section"><mark class="secondary"><i class="fa fa-id-card-o fa-fw" aria-hidden="true"></i></mark> Card</h2>
|
|
<p class="section box-left">The <strong>card</strong> module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly.</p>
|
|
<a href="card.html" class="button section">See more</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row box-centered">
|
|
<div class="col-sm-12 col-md-6">
|
|
<div class="card fluid">
|
|
<h2 class="section"><mark class="secondary"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></mark> Tab</h2>
|
|
<p class="section box-left">The <strong>tab</strong> module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want.</p>
|
|
<a href="tab.html" class="button section">See more</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<div class="card fluid">
|
|
<h2 class="section"><mark class="secondary"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></mark> Contextual</h2>
|
|
<p class="section box-left">The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily. </p>
|
|
<a href="contextual.html" class="button section">See more</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row box-centered" style="padding-bottom: 40px;">
|
|
<div class="col-sm-12 col-md-6">
|
|
<div class="card fluid">
|
|
<h2 class="section"><mark class="tertiary bordered"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i></mark> Progress</h2>
|
|
<p class="section box-left">The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p>
|
|
<a href="progress.html" class="button section">See more</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-6">
|
|
<div class="card fluid">
|
|
<h2 class="section"><mark class="tertiary"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i></mark> Utility</h2>
|
|
<p class="section box-left">The <strong>utility</strong> module contains all the utilities and helper classes that you might want when designing a website or application. They solve common design problems efficiently and provide you with generic rules you can easily apply everywhere.</p>
|
|
<a href="utility.html" class="button section">See more</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div></main>
|
|
<!-- End of page content-->
|
|
<footer><strong>mini.css</strong> was designed and built 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> |