mirror of
https://github.com/Chalarangelo/mini.css.git
synced 2025-08-23 22:13:14 +02:00
More documentation for core module
This commit is contained in:
Angelos Chalaris
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user