mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-18 03:31:16 +02:00
More documentation for core module
This commit is contained in:
Angelos Chalaris
17
dist/mini-default.css
vendored
17
dist/mini-default.css
vendored
@@ -37,14 +37,17 @@ img {
|
||||
width: 100%;
|
||||
height: auto; }
|
||||
|
||||
dfn {
|
||||
font-style: italic; }
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
line-height: 1.2em;
|
||||
margin: 0.7em 8px;
|
||||
margin: 12px 8px;
|
||||
font-weight: 500; }
|
||||
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small {
|
||||
color: #424242;
|
||||
display: block;
|
||||
margin-top: -0.35em; }
|
||||
margin-top: -4px; }
|
||||
|
||||
h1 {
|
||||
font-size: 2em; }
|
||||
@@ -74,8 +77,8 @@ hr {
|
||||
box-sizing: content-box;
|
||||
border: 0;
|
||||
overflow: visible;
|
||||
line-height: 1.2em;
|
||||
margin: 0.5em 8px;
|
||||
line-height: 1.25em;
|
||||
margin: 8px;
|
||||
height: 1px;
|
||||
background: -webkit-linear-gradient(to right, #bdbdbd, #616161, #bdbdbd);
|
||||
background: linear-gradient(to right, #bdbdbd, #616161, #bdbdbd); }
|
||||
@@ -94,7 +97,7 @@ pre {
|
||||
border-radius: 0 2px 2px 0;
|
||||
background: #e0e0e0;
|
||||
padding: 12px;
|
||||
margin: 1px 10px;
|
||||
margin: 8px 10px;
|
||||
border-left: 3px solid #1565c0;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); }
|
||||
|
||||
@@ -109,10 +112,10 @@ small, sup, sub {
|
||||
font-size: 75%; }
|
||||
|
||||
sup {
|
||||
top: -0.5em; }
|
||||
top: -8px; }
|
||||
|
||||
sub {
|
||||
bottom: -0.25em; }
|
||||
bottom: -4px; }
|
||||
|
||||
sup, sub {
|
||||
line-height: 0;
|
||||
|
||||
2
dist/mini-default.min.css
vendored
2
dist/mini-default.min.css
vendored
File diff suppressed because one or more lines are too long
@@ -474,3 +474,5 @@
|
||||
|
||||
- Started writing `core.html` page.
|
||||
- Added basic info in `core` page and info on headings.
|
||||
- Minor changes in `core` module formatting.
|
||||
- Added `core` documentation for common textual elements.
|
||||
|
||||
@@ -110,12 +110,12 @@
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal row">
|
||||
<div class="col-sm-12 col-lg-6"><h1>Heading 1<small>Subheading</small></h1></div>
|
||||
<div class="col-sm-12 col-lg-6 col-lg-first"><h1>Heading 1<small>Subheading</small></h1></div>
|
||||
<div class="col-sm-12 col-lg-6"><h2>Heading 2<small>Subheading</small></h2></div>
|
||||
<div class="col-sm-12 col-lg-6"><h3>Heading 3<small>Subheading</small></h3></div>
|
||||
<div class="col-sm-12 col-lg-6"><h4>Heading 4<small>Subheading</small></h4></div>
|
||||
<div class="col-sm-12 col-lg-6 col-lg-last"><h3>Heading 3<small>Subheading</small></h3></div>
|
||||
<div class="col-sm-12 col-lg-6 col-lg-first"><h4>Heading 4<small>Subheading</small></h4></div>
|
||||
<div class="col-sm-12 col-lg-6"><h5>Heading 5<small>Subheading</small></h5></div>
|
||||
<div class="col-sm-12 col-lg-6"><h6>Heading 6<small>Subheading</small></h6></div>
|
||||
<div class="col-sm-12 col-lg-6 col-lg-last"><h6>Heading 6<small>Subheading</small></h6></div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p>All six of the HTML headings (<code><h1></code> - <code><h6></code>) are styled with simple rules, providing a clean base for your pages' headings. Apart from the headings themselves, complementary rules are provided for <code><small></code> elements inside headings, allowing you to define subheadings or explanatory text for those headings. These subheadings are stylized to display below the headings in smaller, lighter type.</p>
|
||||
@@ -131,6 +131,36 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Common textual elements</h2>
|
||||
</div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal row">
|
||||
<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! Oh, by the way, that was some Bold text and here is some <em>text in Italics</em>. 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>. Finally, check out the preformatted code block below.</p>
|
||||
<pre>function sum(num1, num2) {
|
||||
var num3 = num1 + num2;
|
||||
console.log('Result: ' + num3);
|
||||
}</pre><br></div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p>The most common HTML5 elements must be things like <code><p></code>aragraphs, bold (<code><strong></code>) & italics (<code><em></code>) text, links (<code><a></code>) and <code><small></code> text. These, along with a few others, are styled by default using clean, modern design to make your pages look cool and stand out from the rest of the internet.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><p>This is a paragraph with some <strong>bold text</strong> and some <em>italics text</em>.</p>
|
||||
<a href="#">This is a link.</a>
|
||||
<small>This is some small text.</small>
|
||||
<sub>Subscript</sub>
|
||||
<sup>Superscript</sup>
|
||||
<code>Inline code</code>
|
||||
<kbd>Keyboard Input</kbd>
|
||||
<pre>This is some preformatted text.</pre></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@@ -104,9 +104,9 @@
|
||||
<div class="row">
|
||||
<div class="col-sm">
|
||||
<h2>Setup and usage</h2>
|
||||
<p>You can import he default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference inside your HTML page's <code><head></code> tag:</p><br>
|
||||
<p>You can import he default flavor of <strong>mini.css</strong> in your webpage by simply adding the following reference inside your HTML page's <code><head></code> tag:</p>
|
||||
<pre><<span class="fore-tertiary">link</span> <span class="fore-secondary">rel</span>=<span class="fore-primary">"stylesheet"</span> <span class="fore-secondary">href</span>=<span class="fore-primary">"https://cdn.rawgit.com/Chalarangelo/mini.css/v2.0/dist/mini-default.min.css"</span>></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><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">
|
||||
<pre><span class="fore-tertiary">bower install</span> <span class="fore-primary">mini.css</span></pre>
|
||||
@@ -258,9 +258,9 @@
|
||||
<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>
|
||||
<li>For a quick guide on getting started, you might wanna take a look at the available <a href="#">modules</a> list and the tutorials provided for each one!</li>
|
||||
<li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="#">flavors</a>. See which one of them better suits your needs!</li>
|
||||
<li>If you are more experienced or demanding, you can always take a look at the <a href="#">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
|
||||
<li>For a quick guide on getting started, you might wanna take a look at the available <a href="modules.html">modules</a> list and the tutorials provided for each one!</li>
|
||||
<li><strong>mini.css</strong> comes with a few nice pre-built customizable <a href="flavors.html">flavors</a>. See which one of them better suits your needs!</li>
|
||||
<li>If you are more experienced or demanding, you can always take a look at the <a href="customization.html">customization</a> section to cook up a flavor of your own custom-tailored to your needs!</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -24,17 +24,17 @@ $h4-font-size: 1.1em; // Font size for h4
|
||||
$h5-font-size: 1em; // Font size for h5
|
||||
$h6-font-size: 0.85em; // Font size for h6
|
||||
$heading-line-height: 1.2em; // Line height for all headings
|
||||
$heading-margin: 0.7em 8px; // Margin for all headings
|
||||
$heading-margin: 12px 8px; // Margin for all headings
|
||||
$heading-font-weight: 500; // Font weight for all headings
|
||||
$heading-smalltext-fore-color: #424242; // <small> color in headings
|
||||
$make-heading-smalltext-block: true; // Should <small> elements in headings
|
||||
// be displayed as blocks (`true`/`false`) [2]
|
||||
$heading-smalltext-b-font-size: 75%; // Font size of block <small> elements in headings
|
||||
$heading-smalltext-b-top-margin:-0.35em; // Top margin of block <small> elements in headings
|
||||
$heading-smalltext-b-top-margin:-4px; // Top margin of block <small> elements in headings
|
||||
$paragraph-margin: 1px 8px; // Paragraph element margin
|
||||
$bold-font-weight: 700; // Font weight for <b> and <strong>
|
||||
$horizontal-rule-line-height: 1.2em; // <hr> line height
|
||||
$horizontal-rule-margin: 0.5em 8px; // <hr> margin
|
||||
$horizontal-rule-line-height: 1.25em; // <hr> line height
|
||||
$horizontal-rule-margin: 8px; // <hr> margin
|
||||
$horizontal-rule-border-style: 1px solid #757575; // Border style for horizontal rules (used
|
||||
// in the <hr> element's border-top)
|
||||
$horizontal-rule-fancy-style: true; // Should a fancy styling be applied for the
|
||||
@@ -55,7 +55,7 @@ $pre-element-fore-color: $code-element-fore-color; // Text color for <pre>
|
||||
$pre-element-back-color: $code-element-back-color; // Background color for <pre>
|
||||
$pre-element-border-style: 0; // Border style for <pre>
|
||||
$pre-element-border-radius: 0 2px 2px 0; // Border radius for <pre>
|
||||
$pre-element-margin: 1px 10px; // Margin for <pre>
|
||||
$pre-element-margin: 8px 10px; // Margin for <pre>
|
||||
$pre-element-box-shadow: // Box shadow for <pre>
|
||||
0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15);
|
||||
$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the
|
||||
@@ -75,13 +75,13 @@ $style-samp-element: false; // Should styles for <samp> be included?
|
||||
//$samp-element-back-color: #2196f3; // Background color for <samp>
|
||||
//$samp-element-border-style: 0; // Border style for <samp>
|
||||
//$samp-element-border-radius: 2px; // Border radius for <samp>
|
||||
$include-dfn-fix: false; // Should the fix for Android 4.3 concerning <dfn>
|
||||
$include-dfn-fix: true; // Should the fix for Android 4.3 concerning <dfn>
|
||||
// be included (`true`/`false`) [7]
|
||||
$small-font-size: 75%; // Font size for <small> elements
|
||||
$sup-font-size: 75%; // Font size for <sup> elements
|
||||
$sub-font-size: 75%; // Font size for <sub> elements
|
||||
$sup-top: -0.5em; // <sup> top
|
||||
$sub-bottom: -0.25em; // <sub> bottom
|
||||
$sup-top: -8px; // <sup> top
|
||||
$sub-bottom: -4px; // <sub> bottom
|
||||
$link-fore-color: #0277bd; // Text color for <a>
|
||||
$link-visited-fore-color: #01579b; // Text color for visited <a>
|
||||
$link-font-weight: 500; // Font weight for <a>
|
||||
|
||||
Reference in New Issue
Block a user