346 lines
18 KiB
HTML
346 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<!-- Live demo styled as of 20161025 -->
|
|
<!-- <link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/5b4a224c4cad68a76b94e1635696925d13ea45f6/flavors/v2/mini-default.min.css"> -->
|
|
<link rel="stylesheet" href="../../flavors/v2/mini-default.css">
|
|
<title>mini.css - A minimal Sass-y responsive mobile-first style-agnostic CSS framework</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="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">
|
|
<style>
|
|
#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-header {
|
|
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);
|
|
}
|
|
.box-centered { text-align: center; }
|
|
.box-colored { background: #0277bd; border-radius: 2px; padding: 14px; margin-bottom: 8px; min-height: 14px;}
|
|
</style>
|
|
</head>
|
|
<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-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>
|
|
<mark class="tag tertiary" id="top-version-tag">v2.0</mark>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container">
|
|
<div class="row">
|
|
<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>
|
|
<br><br>
|
|
<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-sm-12 col-md">
|
|
<div class="box-centered">
|
|
<h2>Reponsive</h2>
|
|
<i class="fa fa-mobile fa-4x" aria-hidden="true"></i>
|
|
<br><br>
|
|
<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-sm-12 col-md">
|
|
<div class="box-centered">
|
|
<h2>Style-agnostic</h2>
|
|
<i class="fa fa-paint-brush fa-4x" aria-hidden="true"></i>
|
|
<br><br>
|
|
<p><strong>mini.css</strong> gives you the power of customization, using its fully moddable flavors. This will give you control over how your websites look and allow great designs to stand out!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div>
|
|
<h2>Typography <small>Styles for common textual elements</small></h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-4">
|
|
<div><h1>Heading 1 <small>Subheading</small></h1></div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-4">
|
|
<div><h2>Heading 2 <small>Subheading</small></h2></div>
|
|
</div>
|
|
<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-sm-12 col-md-4">
|
|
<div><h4>Heading 4 <small>Subheading</small></h4></div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-4">
|
|
<div><h5>Heading 5 <small>Subheading</small></h5></div>
|
|
</div>
|
|
<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-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>
|
|
</div>
|
|
<div>
|
|
<pre>function sum(num1, num2) {
|
|
var num3 = num1 + num2;
|
|
console.log('Result: ' + num3);
|
|
}</pre>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div>
|
|
<hr>
|
|
<h2>Grid system <small>Easy layout using flexbox</small></h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<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-sm">
|
|
<div class="box-colored"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6">
|
|
<div class="box-colored"></div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="box-colored"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-7">
|
|
<div class="box-colored"></div>
|
|
</div>
|
|
<div class="col-sm-5">
|
|
<div class="box-colored"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-2">
|
|
<div class="box-colored"></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="box-colored"></div>
|
|
</div>
|
|
<div class="col-sm-6">
|
|
<div class="box-colored"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-6 col-sm-offset-3">
|
|
<div class="box-colored"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-4 col-sm-offset-2">
|
|
<div class="box-colored"></div>
|
|
</div>
|
|
<div class="col-sm-4">
|
|
<div class="box-colored"></div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-3 col-sm-offset-1">
|
|
<div class="box-colored"></div>
|
|
</div>
|
|
<div class="col-sm-2 col-sm-offset-3">
|
|
<div class="box-colored"></div>
|
|
</div>
|
|
<div class="col-sm">
|
|
<div class="box-colored"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div>
|
|
<hr>
|
|
<h2>Common Elements <small>Styles for common HTML elements</small></h2>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<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>
|
|
<p>The <code><progress></code> element is used for progress bars. There are three color variants (default, <code>secondary</code> and <code>tertiary</code>), as well as an <code>inline</code> class that displays the progress bar as an inline block, along with a <code>nano</code> variant for tiny progress bars. Below are some examples:</p>
|
|
<br>
|
|
<progress value="45" max="100""></progress><br>
|
|
<progress value="20" max="100" class="secondary"></progress><br>
|
|
<progress value="60" max="100" class="tertiary"></progress><br>
|
|
<p>Inline progress: <progress value="85" max="100" class="inline"></progress></p>
|
|
<p>Nano progress:</p>
|
|
<progress class="nano" value="35" max="100"></progress>
|
|
<br>
|
|
<h3>Tables</h3>
|
|
<p>Tables are responsive and use the <code>data-label</code> attribute to specify the header name for each cell, so that they can be displayed as cards on mobile devices. Here's an example (resize to see mobile display if you are on desktop):</p>
|
|
<table>
|
|
<caption>Hacker List</caption>
|
|
<thead>
|
|
<tr>
|
|
<th>Name</th>
|
|
<th>Surname</th>
|
|
<th>Email</th>
|
|
<th>Handle</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td data-label="Name">John</td>
|
|
<td data-label="Surname">Smith</td>
|
|
<td data-label="Email">johnsmith@mail.com</td>
|
|
<td data-label="Handle">SmithereensJohn</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Lisa</td>
|
|
<td data-label="Surname">Cody</td>
|
|
<td data-label="Email">codyl@mail.com</td>
|
|
<td data-label="Handle">Codyl</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Max</td>
|
|
<td data-label="Surname">Roberts</td>
|
|
<td data-label="Email">terminus@mail.com</td>
|
|
<td data-label="Handle">T3rm1nu5</td>
|
|
</tr>
|
|
<tr>
|
|
<td data-label="Name">Adam</td>
|
|
<td data-label="Surname">Leeks</td>
|
|
<td data-label="Email">leekt@mail.com</td>
|
|
<td data-label="Handle">Leekt</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<br>
|
|
<h3>Buttons</h3>
|
|
<p>Buttons are already pre-styled in <strong>mini.css</strong> to allow for consistent presentation. However, there is a lot you can do to customize them, as the pre-applied styles are mostly overrides for the default presentation styles. Pre-styled buttons and other button-like inputs can be seen below:</p>
|
|
<span style="margin:3px;"></span>
|
|
<button>Normal button</button>
|
|
<input type="button" value="Input button">
|
|
<input type="submit" value="Submit button">
|
|
<input type="reset" value="Reset button">
|
|
<a href="#" class="button">Link button</a>
|
|
<button disabled>Disabled button</button><br>
|
|
<p>File inputs are a sore spot in most frameworks, as they cannot be easily stylized using CSS. <strong>mini.css</strong> deals with the problem, using a workaround involving labels that use the <code>button</code> class, which applies the exact same style to those labels. Just link it to the <code><input type="file"></code> element of your choice and you're good to go. For example:</p>
|
|
<span style="margin:3px;"></span><input type="file" id="file-input-demo"><label for="file-input-demo" class="button"><i class="fa fa-upload" aria-hidden="true"></i> Upload file</label><br>
|
|
<p>There are also different kinds of buttons, specifically <code>primary</code>, <code>secondary</code> and <code>tertiary</code>, as well as <code>small</code> and <code>large</code> buttons. All of these types can be specified as classes. For example:</p>
|
|
<span style="margin:3px;"></span>
|
|
<button class="primary">Primary normal button</button>
|
|
<input type="button" value="Secondary input button" class="secondary">
|
|
<input type="reset" value="Tertiary reset button" class="tertiary">
|
|
<input type="submit" value="Large submit button" class="large">
|
|
<label disabled class="button small primary">Small primary disabled label button</label><br>
|
|
<h3>Forms</h3>
|
|
<p>Forms are inline by default and textual <code><input></code>, <code><textarea></code> and <code><select></code> elements have been pre-styled. To make inputs take up more space than their default, simply add something like <code>width="100%"</code>. You can also utilize the grid system to align forms to your liking. Below are some examples:</p>
|
|
<form>
|
|
<fieldset>
|
|
<legend>Inline form (default style):</legend>
|
|
<div class="input-group"><label for="username">Username</label> <input type="text" value="" id="username" placeholder="username"> </div>
|
|
<div class="input-group"><label for="mail">Email</label> <input type="email" value="" id="mail" placeholder="mail@server.com"> </div>
|
|
<div class="input-group"><label for="pwd">Password</label> <input type="password" value="" id="pwd" placeholder="password"></div>
|
|
</fieldset><br>
|
|
<fieldset class="container">
|
|
<legend>Aligned form (using <code>width</code> and grid):</legend>
|
|
<div class="row">
|
|
<div class="col-sm-2" style="text-align:right;">
|
|
<label for="website" style="vertical-align: text-top;">Website</label>
|
|
</div>
|
|
<div class="col-sm">
|
|
<input type="text" value="" id="website" placeholder="website" style="width:85%;">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-2" style="text-align:right;">
|
|
<label for="weburl" style="vertical-align: text-top;">URL</label>
|
|
</div>
|
|
<div class="col-sm">
|
|
<input type="url" value="" id="weburl" placeholder="https://www.mywebsite.com" style="width:85%;">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-sm-2" style="text-align:right;">
|
|
<label for="desc" style="vertical-align: text-top;">Description</label>
|
|
</div>
|
|
<div class="col-sm">
|
|
<textarea type="url" value="" id="desc" placeholder="description" style="width:85%;"></textarea>
|
|
</div>
|
|
</div>
|
|
</fieldset><br>
|
|
<fieldset>
|
|
<legend>More inputs</legend>
|
|
<input disabled value="Disabled">
|
|
<input readonly value="Readonly">
|
|
<input type="number" value="4">
|
|
<select>
|
|
<option>Test</option>
|
|
<option>Demo</option>
|
|
</select>
|
|
<input type="search" placeholder="search..." value="">
|
|
</fieldset>
|
|
</form>
|
|
<h3>Checkboxes and Radio buttons</h3>
|
|
<p>Checkboxes and radio buttons are styled using the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>, while keeping things simple and adding just the needed consistency for those input types. Place an <code><input></code> (checkbox or radio button) and a linked <code><label></code> inside an <code>.input-group</code> and the controls will style themselves. To allow accessibility for those controls, you can use <code>tabindex="0"</code> on the <code><input></code> elements only. You can see some examples below:</p>
|
|
<form>
|
|
<fieldset>
|
|
<div class="input-group">
|
|
<input type="checkbox" id="c1" tabindex="0"> <label for="c1">Checkbox</label>
|
|
</div>
|
|
<div class="input-group">
|
|
<input type="checkbox" id="c2" disabled> <label for="c2" disabled>Disabled</label>
|
|
</div>
|
|
</fieldset>
|
|
<fieldset>
|
|
<div class="input-group">
|
|
<input type="radio" name="radios" value="r1" checked id="r1" tabindex="0"> <label for="i1">Value 1</label>
|
|
<input type="radio" name="radios" value="r2" id="r2" tabindex="0"> <label for="i2">Value 2</label>
|
|
<input type="radio" name="radios" value="r3"checked id="r3" tabindex="0"> <label for="i3">Value 3</label>
|
|
</div>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html> |