mirror/mini-css
1
0
Fork 0
mirror of https://github.com/Chalarangelo/mini.css.git synced 2025-08-18 19:51:17 +02:00
Code Issues Releases Wiki Activity

Grid update

Browse Source
This commit is contained in:
Angelos Chalaris
2016-10-24 16:43:27 +03:00
parent 70991255d6
commit 08062eff88
6 changed files with 132 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
docs/v2/index.html
View File

@@ -30,7 +30,7 @@
<body>
<div class="container" style="height: 320px; background: -webkit-linear-gradient(#455a64,#263238); background: linear-gradient(#455a64,#263238); box-shadow: 0 1px 3px rgba(0,0,0,0.35);">
<div class="row">
<div class="col-xs">
<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>
@@ -41,7 +41,7 @@
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-md">
<div class="col-sm-12 col-md">
<div class="box-centered">
<h2>Minimal</h2>
<i class="fa fa-compress fa-4x" aria-hidden="true"></i>
@@ -49,7 +49,7 @@
<p><strong>mini.css</strong> is one of the lightest front-end frameworks on the web: about 5KB gzipped. This helps your websites load faster, while still looking great!</p>
</div>
</div>
<div class="col-xs-12 col-md">
<div class="col-sm-12 col-md">
<div class="box-centered">
<h2>Reponsive</h2>
<i class="fa fa-mobile fa-4x" aria-hidden="true"></i>
@@ -57,7 +57,7 @@
<p><strong>mini.css</strong> is built in such a way that it will look great on most devices and especially phones and tablets. This allows you to easily tailor your websites to different users!</p>
</div>
</div>
<div class="col-xs-12 col-md">
<div class="col-sm-12 col-md">
<div class="box-centered">
<h2>Style-agnostic</h2>
<i class="fa fa-paint-brush fa-4x" aria-hidden="true"></i>
@@ -67,7 +67,7 @@
</div>
</div>
<div class="row">
<div class="col-xs">
<div class="col-sm">
<div>
<br><hr>
<p>Below you can see a showcase of the features and styles included in the <strong>default</strong> flavor of <strong>mini.css</strong>.</p>
@@ -75,36 +75,36 @@
</div>
</div>
<div class="row">
<div class="col-xs">
<div class="col-sm">
<div>
<h2>Typography <small>Styles for common textual elements</small></h2>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="col-sm-12 col-md-4">
<div><h1>Heading 1 <small>Subheading</small></h1></div>
</div>
<div class="col-xs-12 col-md-4">
<div class="col-sm-12 col-md-4">
<div><h2>Heading 2 <small>Subheading</small></h2></div>
</div>
<div class="col-xs-12 col-md-4">
<div class="col-sm-12 col-md-4">
<div><h3>Heading 3 <small>Subheading</small></h3></div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-4">
<div class="col-sm-12 col-md-4">
<div><h4>Heading 4 <small>Subheading</small></h4></div>
</div>
<div class="col-xs-12 col-md-4">
<div class="col-sm-12 col-md-4">
<div><h5>Heading 5 <small>Subheading</small></h5></div>
</div>
<div class="col-xs-12 col-md-4">
<div class="col-sm-12 col-md-4">
<div><h6>Heading 6 <small>Subheading</small></h6></div>
</div>
</div>
<div class="row">
<div class="col-xs">
<div class="col-sm">
<div>
<br>
<p>This is a paragraph with some sample text. Did you know <strong>mini.css</strong> v2.0 is codenamed <strong>Fermion</strong>? No? Well, now you do! Maybe you want to know what our inline elements look like. For example a <a href="https://github.com/Chalarangelo/mini.css">link to the Github repository of mini.css</a> looks like that! Neat, right? Maybe you want to see some <code>inline code</code> or some sample <kbd>input</kbd>. Oh, also <small>small text</small> is cool, along with its siblings: the subscript<sub>hi!</sub> and the superscript<sup>hello!</sup>. We use <mark>highlights</mark> quite a lot as well. Apart from the primary color, you can also try the <mark class="secondary">secondary</mark> and <mark class="tertiary">tertiary</mark> colors. If you wanna be fancy, maybe use a <mark class="tag">tag</mark> or a <mark class="bubble">bubble</mark>. All of these work well inside headings and the like. To finish our typography tour, check out the preformatted code block below.</p><br>
@@ -119,7 +119,7 @@
</div>
</div>
<div class="row">
<div class="col-xs">
<div class="col-sm">
<div>
<hr>
<h2>Grid system <small>Easy layout using flexbox</small></h2>
@@ -127,64 +127,64 @@
</div>
</div>
<div class="row">
<div class="col-xs">
<div class="col-sm">
<div>
<p><strong>mini.css</strong> uses the Flexible Layout Module (commonly known as <code>flexbox</code>) to create a grid system for easy page layout. The grid system is not the most feature-rich one, but it contains all the essential components. The <code>container</code> of the grid is fluid by default, meaning it will adjust to fill its parent container. Rows are easily created using the <code>row</code> class and columns can be created using the usual <code>col-SZ-XX</code> syntax where <code>SZ</code> and <code>XX</code> are replaced by a screen size and a number of vertical columns respectively. Columns can also scale themselves automatically if you omit the number of vertical columns in the class name. Similarly, you can use offsets with the <code>col-SZ-offset-XX</code> syntax. The <strong>default</strong> grid is separated into 12 vertical columns. You can see some examples below.</p><br>
</p></div>
<div class="container">
<div class="row">
<div class="col-xs">
<div class="col-sm">
<div class="box-colored"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="col-sm-6">
<div class="box-colored"></div>
</div>
<div class="col-xs-6">
<div class="col-sm-6">
<div class="box-colored"></div>
</div>
</div>
<div class="row">
<div class="col-xs-7">
<div class="col-sm-7">
<div class="box-colored"></div>
</div>
<div class="col-xs-5">
<div class="col-sm-5">
<div class="box-colored"></div>
</div>
</div>
<div class="row">
<div class="col-xs-2">
<div class="col-sm-2">
<div class="box-colored"></div>
</div>
<div class="col-xs-4">
<div class="col-sm-4">
<div class="box-colored"></div>
</div>
<div class="col-xs-6">
<div class="col-sm-6">
<div class="box-colored"></div>
</div>
</div>
<div class="row">
<div class="col-xs-6 col-xs-offset-3">
<div class="col-sm-6 col-sm-offset-3">
<div class="box-colored"></div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-xs-offset-2">
<div class="col-sm-4 col-sm-offset-2">
<div class="box-colored"></div>
</div>
<div class="col-xs-4">
<div class="col-sm-4">
<div class="box-colored"></div>
</div>
</div>
<div class="row">
<div class="col-xs-3 col-xs-offset-1">
<div class="col-sm-3 col-sm-offset-1">
<div class="box-colored"></div>
</div>
<div class="col-xs-2 col-xs-offset-3">
<div class="col-sm-2 col-sm-offset-3">
<div class="box-colored"></div>
</div>
<div class="col-xs">
<div class="col-sm">
<div class="box-colored"></div>
</div>
</div>
@@ -192,7 +192,7 @@
</div>
</div>
<div class="row">
<div class="col-xs">
<div class="col-sm">
<div>
<hr>
<h2>Common Elements <small>Styles for common HTML elements</small></h2>
@@ -200,7 +200,7 @@
</div>
</div>
<div class="row">
<div class="col-xs">
<div class="col-sm">
<div>
<p><strong>mini.css</strong> adds modern styles for many of the HTML elements.</p><br>
<h3>Progress bars</h3>