beenull/mini.css
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 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
Show stats Download patch file Download diff file Expand all files Collapse all files

31
docs/customization.html
View file

@ -32,7 +32,7 @@
<!-- Insert your page content here--> <!-- Insert your page content here-->
<main><div class="container"> <main><div class="container">
<div class="row" style="padding-top: 40px;"> <div class="row" style="padding-top: 40px;">
<div class="col-sm"> <div class="col-sm col-lg-10 col-lg-offset-1">
<h1>Customization</h1> <h1>Customization</h1>
<p><strong>mini.css</strong> is built in such a way that customizing it is really simple. You can try out one of the <a href="flavors.html">pre-defined flavors</a>, if you want to start learning and build something quickly. We strongly suggest, however, that you customize an existing flavor or build your own, by tweaking variables and using mixins, in order to create your own, unique style. In this page, we will try to give you some guidelines and tips on how to do so and explain a few more things about the inner workings of <strong>mini.css</strong>.</p><br> <p><strong>mini.css</strong> is built in such a way that customizing it is really simple. You can try out one of the <a href="flavors.html">pre-defined flavors</a>, if you want to start learning and build something quickly. We strongly suggest, however, that you customize an existing flavor or build your own, by tweaking variables and using mixins, in order to create your own, unique style. In this page, we will try to give you some guidelines and tips on how to do so and explain a few more things about the inner workings of <strong>mini.css</strong>.</p><br>
<h2>Introduction &amp; basics</h2> <h2>Introduction &amp; basics</h2>
@ -46,27 +46,27 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1">
<h3>Modules &amp; file structure</h3> <h3>Modules &amp; file structure</h3>
<p>At the heart of <strong>mini.css</strong> are modules - groups of classes and styles that aim to solve one set of needs. There are 10 modules in <strong>mini.css</strong>, which have been already written for you. All of the modules are built using partial files, named <code>_module_name.scss</code> and placed in the <code>src/mini</code> folder. You can edit any of the modules' code and/or add your own modules, following the same structure. The only thing you need to remember to do, in order to add your module to your flavor, is to add an <code>@import</code> statement after all the required variable declarations towards the bottom of your flavor file and it will be compiled along with the rest of <strong>mini.css</strong>. Similarly, to disable a module, just comment out its <code>@import</code> statement from the flavor file.</p> <p>At the heart of <strong>mini.css</strong> are modules - groups of classes and styles that aim to solve one set of needs. There are 10 modules in <strong>mini.css</strong>, which have been already written for you. All of the modules are built using partial files, named <code>_module_name.scss</code> and placed in the <code>src/mini</code> folder. You can edit any of the modules' code and/or add your own modules, following the same structure. The only thing you need to remember to do, in order to add your module to your flavor, is to add an <code>@import</code> statement after all the required variable declarations towards the bottom of your flavor file and it will be compiled along with the rest of <strong>mini.css</strong>. Similarly, to disable a module, just comment out its <code>@import</code> statement from the flavor file.</p>
</div> </div>
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6 col-lg-5">
<h3>Variables</h3> <h3>Variables</h3>
<p>Everything in <strong>mini.css</strong> is based on Sass variables. We try to make our variable names as descriptive as possible, usually using names like <code>$block-element-property-name</code>, but some things might vary a little bit. Changing the values of variables should be reasonably easy, simply navigate to the <code>src/flavors/flavor-name.scss</code> file for a pre-defined flavor and you will see a list of variables that you can tweak. Change the values as you see fit and your finalized stylesheet will reflect the changes you have made. We did our best to make everything as customizable as possible, so that different people can build entirely different flavors using the same building blocks.</p> <p>Everything in <strong>mini.css</strong> is based on Sass variables. We try to make our variable names as descriptive as possible, usually using names like <code>$block-element-property-name</code>, but some things might vary a little bit. Changing the values of variables should be reasonably easy, simply navigate to the <code>src/flavors/flavor-name.scss</code> file for a pre-defined flavor and you will see a list of variables that you can tweak. Change the values as you see fit and your finalized stylesheet will reflect the changes you have made. We did our best to make everything as customizable as possible, so that different people can build entirely different flavors using the same building blocks.</p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6 col-lg-5 col-lg-offset-1">
<h3>Code optimization</h3> <h3>Code optimization</h3>
<p>Building <strong>mini.css</strong> was no small task. Making it lightweight and customizable made things even harder, because these two things don't go well together most of the time. What we did was put more of the load on the preprocessor, instead of the final file. In order to accomplish this, we optimized as much of the code as possible, using conditions, flags and other tricks, so that compiling a flavor file might take one second longer, but loading won't. If you add any code to a flavor yourself, remember not only to make it customizable, but also to optimize it as best as possible.</p> <p>Building <strong>mini.css</strong> was no small task. Making it lightweight and customizable made things even harder, because these two things don't go well together most of the time. What we did was put more of the load on the preprocessor, instead of the final file. In order to accomplish this, we optimized as much of the code as possible, using conditions, flags and other tricks, so that compiling a flavor file might take one second longer, but loading won't. If you add any code to a flavor yourself, remember not only to make it customizable, but also to optimize it as best as possible.</p>
</div> </div>
<div class="col-sm-12 col-md-6"> <div class="col-sm-12 col-md-6 col-lg-5">
<h3>Mixins</h3> <h3>Mixins</h3>
<p>A lot of elements and components can be styled in many ways and most of the time we want a few styles to be available, without having to rewrite everything. We utilized the <code>@mixin</code> directive of Sass wherever we could to make it possible for you to easily create styles for pre-existing components and elements without having to tweak the base code for said elements or components. To use a mixin, simply <code>@include</code> it, passing values to at least its mandatory parameters. We recommend you write mixins wherever possible, if you create any new modules for <strong>mini.css</strong>.</p> <p>A lot of elements and components can be styled in many ways and most of the time we want a few styles to be available, without having to rewrite everything. We utilized the <code>@mixin</code> directive of Sass wherever we could to make it possible for you to easily create styles for pre-existing components and elements without having to tweak the base code for said elements or components. To use a mixin, simply <code>@include</code> it, passing values to at least its mandatory parameters. We recommend you write mixins wherever possible, if you create any new modules for <strong>mini.css</strong>.</p>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm-12"> <div class="col-sm-12 col-lg-10 col-lg-offset-1">
<br> <br>
<h2>Building a flavor</h2> <h2>Building a flavor</h2>
<p>Creating your own flavor can be as easy or as complicated as your needs. Adding and removing modules is as simple as adding an <code>@import</code> statement or commenting it out, after declaring all the required variables. In this section, we will briefly walk you through most of the variables usually present in a flavor, along with some flags and mixins. This section serves as a complementary documentation to the comment column present in our pre-defined flavors, instead of a replacement and should be always viewed alongside it.</p><br> <p>Creating your own flavor can be as easy or as complicated as your needs. Adding and removing modules is as simple as adding an <code>@import</code> statement or commenting it out, after declaring all the required variables. In this section, we will briefly walk you through most of the variables usually present in a flavor, along with some flags and mixins. This section serves as a complementary documentation to the comment column present in our pre-defined flavors, instead of a replacement and should be always viewed alongside it.</p><br>
@ -88,19 +88,19 @@
<div class="card fluid"> <div class="card fluid">
<div class="section"><h3>Grid</h3></div> <div class="section"><h3>Grid</h3></div>
<div class="section"> <div class="section">
<p>The <strong>grid</strong> module contains two important variables, the boolean <code>$use-four-step-grid</code> which determines if the grid has 3 or 4 breakpoints and the <code>$grid-column-count</code> which determines the amount of vertical columns used for the grid's layout. Apart from those, there are a few variables that set the names for the grid system's classes, prefixes and suffixes and the grid's screen size breakpoint definitions.</p> <p>The <strong>grid</strong> module contains three important variables, the booleans <code>$use-four-step-grid</code> which determines if the grid has 3 or 4 breakpoints and <code>$include-parent-layout</code> which determines if predefined layouts should be included and the integer <code>$grid-column-count</code> which determines the amount of vertical columns used for the grid's layout. Apart from those, there are a few variables that set the names for the grid system's classes, prefixes and suffixes and the grid's screen size breakpoint definitions.</p>
</div> </div>
</div> </div>
<div class="card fluid"> <div class="card fluid">
<div class="section"><h3>Navigation</h3></div> <div class="section"><h3>Navigation</h3></div>
<div class="section"> <div class="section">
<p>The <strong>navigation</strong> module contains a plethora of variables used in the styling of the navigational elements. Most of them concern colors, spacing and sizing or similar things. Bear in mind that the presentation of buttons inside the <code>&lt;header&gt;</code> element will be affected by the styling of all button elements, as defined in the <code>input_control</code> module. The variable that stands out in this module is <code>$nav-sublink-depth</code> which determines how deep a navigational hierarchy tree can be.</p> <p>The <strong>navigation</strong> module contains a plethora of variables used in the styling of the navigational elements. Most of them concern colors, spacing and sizing or similar things. Bear in mind that the presentation of buttons inside the <code>&lt;header&gt;</code> element will be affected by the styling of all button elements, as defined in the <code>input_control</code> module. The variables that stand out in this module are <code>$nav-sublink-depth</code> which determines how deep a navigational hierarchy tree can be, along with the <code>$include-header-sticky</code> and <code>$include-footer-sticky</code> booleans that determine if sticky elements should be included for headers and footers respectively.</p>
</div> </div>
</div> </div>
<div class="card fluid"> <div class="card fluid">
<div class="section"><h3>Input Control</h3></div> <div class="section"><h3>Input Control</h3></div>
<div class="section"> <div class="section">
<p>The <strong>input_control</strong> module is one of the larger modules, containg a lot of variables to style a multitude of elements. Forms and textual <code>&lt;input&gt;</code> elements utilize variables that concern color, spacing, sizing etc. Button variables are more interesting, especially the ones concerning the opacity of button elements (<code>$button-back-opacity</code> and <code>$button-hover-back-opacity</code>). The <code>$hide-file-inputs</code> boolean variable determines how <code>&lt;input <span class="fore-secondary">type</span>=<span class="fore-primary">&quot;file&quot;</span>&gt;</code> elements will be handled. Checkboxes and radio buttons also use a few variables concerning basic styling, but special attention needs to be paid to the <code>$checkbox-size</code> variable, as it determines a few attributes of both elements.</p> <p>The <strong>input_control</strong> module is one of the larger modules, containg a lot of variables to style a multitude of elements. Forms and textual <code>&lt;input&gt;</code> elements utilize variables that concern color, spacing, sizing etc. One important variable concerning forms is the boolean <code>$include-fluid-input-group</code>, whose value determines if fluid input groups will be available. Button variables are more interesting, especially the ones concerning the opacity of button elements (<code>$button-back-opacity</code> and <code>$button-hover-back-opacity</code>). The <code>$hide-file-inputs</code> boolean variable determines how <code>&lt;input <span class="fore-secondary">type</span>=<span class="fore-primary">&quot;file&quot;</span>&gt;</code> elements will be handled. Checkboxes and radio buttons also use a few variables concerning basic styling, but special attention needs to be paid to the <code>$checkbox-size</code> variable, as it determines a few attributes of both elements.</p>
<p>There are two mixins in the <strong>input_control</strong> module, specifically:</p> <p>There are two mixins in the <strong>input_control</strong> module, specifically:</p>
<ul> <ul>
<li><code>make-button-alt-color</code> - button color variants</li> <li><code>make-button-alt-color</code> - button color variants</li>
@ -111,7 +111,7 @@
<div class="card fluid"> <div class="card fluid">
<div class="section"><h3>Table</h3></div> <div class="section"><h3>Table</h3></div>
<div class="section"> <div class="section">
<p>The <strong>table</strong> module's variables deal mostly with basic table styling. The <code>$table-mobile-breakpoint</code> is very important as it determines the breakpoint for responsive tables' mobile view, along with <code>$table-mobile-card-label</code> which determines the attribute that will be used to display the table headings on mobile devices.</p> <p>The <strong>table</strong> module's variables deal mostly with basic table styling. The <code>$table-mobile-breakpoint</code> is very important as it determines the breakpoint for responsive tables' mobile view, along with <code>$table-mobile-card-label</code> which determines the attribute that will be used to display the table headings on mobile devices. Finally, <code>$include-horizontal-table</code> determines if horizontal tables will be included.</p>
</div> </div>
</div> </div>
<div class="card fluid"> <div class="card fluid">
@ -135,12 +135,14 @@
<div class="card fluid"> <div class="card fluid">
<div class="section"><h3>Contextual</h3></div> <div class="section"><h3>Contextual</h3></div>
<div class="section"> <div class="section">
<p>The <strong>contextual</strong> module features, apart from basic naming and styling variables, a few things of note. The boolean variable <code>$alert-include-animated</code> determines if animated alerts will be inluded or not. There is also a handful of mixins, which are the most important part of the contextual module as they are what makes it useful:</p> <p>The <strong>contextual</strong> module features, apart from basic naming and styling variables, a few things of note. The boolean variable <code>$alert-include-animated</code> determines if animated alerts will be inluded or not. Likewise, the boolean variable <code>$include-tooltip</code> determines if tooltips shoud be included. There is also a handful of mixins, which are the most important part of the contextual module as they are what makes it useful:</p>
<ul> <ul>
<li><code>make-mark-alt-color</code> - mark color variants</li> <li><code>make-mark-alt-color</code> - mark color variants</li>
<li><code>make-mark-alt-style</code> - mark size and spacing variants</li> <li><code>make-mark-alt-style</code> - mark size and spacing variants</li>
<li><code>make-alert-alt-color</code> - alert color variants</li> <li><code>make-alert-alt-color</code> - alert color variants</li>
<li><code>make-alert-alt-style</code> - alert size and spacing variants</li> <li><code>make-alert-alt-style</code> - alert size and spacing variants</li>
<li><code>make-tooltip-alt-color</code> - tooltip color variants</li>
<li><code>make-tooltip-alt-style</code> - tooltip size and spacing variants</li>
</ul> </ul>
</div> </div>
</div> </div>
@ -160,25 +162,24 @@
<div class="card fluid"> <div class="card fluid">
<div class="section"><h3>Utility</h3></div> <div class="section"><h3>Utility</h3></div>
<div class="section"> <div class="section">
<p>The <strong>utility</strong> module contains a few variables dealing with naming and basic styling, but its most important feature is its mixins:</p> <p>The <strong>utility</strong> module contains a few variables dealing with naming and basic styling, while some boolean variables like <code>$include-floats</code>, <code>$include-clearfix</code> and <code>$include-center-block</code> can be toggled on or off to enable or disable legacy features. The most important feature of this module, however, are its mixins:</p>
<ul> <ul>
<li><code>make-border-generic</code> - generic border</li> <li><code>make-border-generic</code> - generic border</li>
<li><code>make-border-radial-style</code> - border radius variants</li> <li><code>make-border-radial-style</code> - border radius variants</li>
<li><code>make-box-shadow-generic</code> - generic shadow variants</li> <li><code>make-box-shadow-generic</code> - generic shadow variants</li>
<li><code>make-margin-responsive</code> - responsive margins</li> <li><code>make-margin-responsive</code> - responsive margins</li>
<li><code>make-padding-responsive</code> - responsive paddings</li> <li><code>make-padding-responsive</code> - responsive paddings</li>
<li><code>make-floats</code> - quick floats</li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm"> <div class="col-sm col-lg-10 col-lg-offset-1">
<p>If you would rather use one of the pre-defined flavors, check out our <a href="flavors.html">flavors</a> page for a list of all flavors currently available.</p> <p>If you would rather use one of the pre-defined flavors, check out our <a href="flavors.html">flavors</a> page for a list of all flavors currently available.</p>
</div> </div>
</div> </div>
<div class="row box-centered"><div class="col-sm-12"></div></div> <div class="row box-centered"><div class="col-sm-12 col-lg-10 col-lg-offset-1"></div></div>
</div></main> </div></main>
<!-- End of page content--> <!-- 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> <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

@ -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 `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. - 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. - 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> <!DOCTYPE html><html><head>
<html> <title>mini.css - Minimal, responsive, style-agnostic CSS framework</title><meta charset="utf-8">
<head> <meta name="viewport" content="width=device-width, initial-scale=1"><meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<title>mini.css - Minimal, responsive, style-agnostic CSS toolkit</title> <meta name="keywords" content="mini, mini.css, CSS, framework, minimal, responsive, style-agnostic, front-end, frontend, Sass, toolkit">
<meta charset="utf-8"> <meta name="author" content="Angelos Chalaris (chalarangelo)">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS framework">
<meta name="description" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta property="og:description" content="mini.css is a tiny CSS framework designed to build quick, modern and responsive websites."/>
<meta name="keywords" content="mini, mini.css, CSS, framework, toolkit, minimal, responsive, style-agnostic, Sass"> <meta property="og:type" content="website"/><meta property="og:image" content="page_thumb.PNG">
<meta name="author" content="Angelos Chalaris (chalarangelo)"> <meta property="og:url" content="https://chalarangelo.github.io/mini.css/"><link rel="icon" type="image/png" href="favicon.png">
<meta property="og:title" content="mini.css - Minimal, responsive, style-agnostic CSS toolkit"> <meta http-equiv="refresh" content="0; url=https://chalarangelo.github.io/mini.css/">
<meta property="og:type" content="website"/> </head></html>
<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>