Built navigation for core, added ids
Added ids to all parts of the modules docs, linked to them through a nav sidebar in core. (Next commit will implement this for all modules)
This commit is contained in:
Angelos Chalaris
parent
829b47cce4
commit
df91cadf49
10 changed files with 248 additions and 222 deletions
|
|
@ -41,7 +41,7 @@
|
|||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="row" style="padding-top: 40px;" id="card-title">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<h1>Card</h1>
|
||||
<p>The <strong>card</strong> module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly.</p>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="basic-syntax">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"> <h2>Basic syntax</h2></div>
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="sections-media">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Sections & media</h2></div>
|
||||
|
|
@ -223,7 +223,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="sizing-fluidity">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Card sizing & fluidity</h2></div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="row" style="padding-top: 40px;" id="contextual-title">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<h1>Contextual</h1>
|
||||
<p>The <strong>contextual</strong> module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.</p>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="text-highlighting">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Text highlighting</h2></div>
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="alerts">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Alerts</h2></div>
|
||||
|
|
@ -174,7 +174,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="animated-alerts">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Animated alerts</h2></div>
|
||||
|
|
@ -210,7 +210,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="tooltips">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Tooltips</h2></div>
|
||||
|
|
|
|||
380
docs/core.html
380
docs/core.html
|
|
@ -21,193 +21,219 @@
|
|||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
.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; } }
|
||||
header.sticky a.button { padding: 4px 6px; font-size: 0.95em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<header class="sticky">
|
||||
<a href="index.html" class="logo"><span id="header-logo">m</span></a>
|
||||
<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="templates.html" class="button">Templates</a> <a href="customization/index.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"><i class="fa fa-github" aria-hidden="true" style="font-size: 1.3em; position: relative; bottom: -2px; margin-right: 2px;"></i> Github</a>
|
||||
</header>
|
||||
<header class="sticky" style="height:36px;">
|
||||
<a href="core.html" class="button">Core</a> <a href="grid.html" class="button">Grid</a>
|
||||
<a href="navigation.html" class="button">Navigation</a> <a href="input_control.html" class="button">Input Control</a>
|
||||
<a href="table.html" class="button">Table</a> <a href="card.html" class="button">Card</a>
|
||||
<a href="tab.html" class="button">Tab</a> <a href="contextual.html" class="button">Contextual</a>
|
||||
<a href="progress.html" class="button">Progress</a> <a href="utility.html" class="button">Utility</a>
|
||||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<h1>Core</h1>
|
||||
<p>The <strong>core</strong> module contains basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like.</p>
|
||||
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
|
||||
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Core</li></ul><br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p>Before applying any typography and styling rules, some resets need to be applied to make sure that different elements display consistently on all browsers. The <strong>core</strong> module utilizes the ruleset of <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0 to apply those much needed resets and fixes. However, to keep the framework small, we removed some rules that only help with legacy browser support and also tweaked a lot of the rules around to use customizable variables so no duplicate rules are applied, taking up unnecessary space. The typography rules in <strong>core</strong> deal with a page's basics, like fonts and styling of headings and paragraphs, horizontal rules, colors, margins, padding etc.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p>To use the <strong>core</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p><br>
|
||||
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Typography</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12">
|
||||
<p>For the basic typography rules we did the following, along with other things presented below:</p>
|
||||
<ul>
|
||||
<li>We use a <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stack</a> to figure out the best font for your device.</li>
|
||||
<li>We set the colors to <code>background: #f5f5f5;</code> and <code>color: #212121;</code>.</li>
|
||||
<li>We use a <code>font-size</code> of <code>16px</code> for the root element.</li>
|
||||
<li>We set <code>line-height</code> to <code>1.5</code>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Headings</h2></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 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 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 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>
|
||||
<h3>Sample code</h3>
|
||||
<pre><h1>Heading 1<small>Subheading</small></h1>
|
||||
<h2>Heading 2<small>Subheading</small></h2>
|
||||
<h3>Heading 3<small>Subheading</small></h3>
|
||||
<h4>Heading 4<small>Subheading</small></h4>
|
||||
<h5>Heading 5<small>Subheading</small></h5>
|
||||
<h6>Heading 6<small>Subheading</small></h6></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<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">
|
||||
<div><br><p>This is a paragraph with some sample text. Did you know <strong>mini.css</strong> v2.1 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 horizontal rule, preformatted code block and quotation below.</p><hr>
|
||||
<pre>function sum(num1, num2) {
|
||||
var num3 = num1 + num2;
|
||||
console.log('Result: ' + num3);
|
||||
}</pre>
|
||||
<blockquote cite="Mr. Quotalot">This is some quoted text from elsewhere.</blockquote><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>), horizontal rules (<code><hr></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>
|
||||
<hr>
|
||||
<pre>This is some preformatted text.</pre>
|
||||
<blockquote cite="Quotation source">
|
||||
This is some quoted text from another website or person.
|
||||
</blockquote></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Lists</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div><br>
|
||||
<ul>
|
||||
<li>Apple</li>
|
||||
<li>Orange</li>
|
||||
<li>Strawberry</li>
|
||||
</ul><br>
|
||||
<ol>
|
||||
<li>Wake up</li>
|
||||
<li>Eat breakfast</li>
|
||||
<li>Go to work</li>
|
||||
</ol><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p>Lists are also very commonly used in websites and apps. We tweaked a few margins and paddings to save some space and make them align properly with the rest of the common HTML elements that we use, but both unordered lists (<code><ul></code>) and ordered lists (<code><ol></code>) are minimally pre-styled to make things a little bit easier for you.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><ul>
|
||||
<li>Apple</li>
|
||||
<li>Orange</li>
|
||||
<li>Strawberry</li>
|
||||
</ul>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <div class="col-sm-12 col-md-4 col-lg-2 hidden-sm" style="padding: 0;"> <nav>
|
||||
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
|
||||
<a href="core.html#typography" class="sublink-1">Typography</a> <a href="core.html#headings" class="sublink-1">Headings</a>
|
||||
<a href="core.html#common-textual-elements" class="sublink-1">Common textual elements</a>
|
||||
<a href="core.html#lists" class="sublink-1">Lists</a> <a href="core.html#images-captions" class="sublink-1">Image responsiveness & captions</a>
|
||||
<br/> <a href="grid.html#grid-title">Grid</a>
|
||||
<a href="grid.html#basic-layout" class="sublink-1">Basic layout</a> <a href="grid.html#screen-specific-layout" class="sublink-1">Screen specific layouts</a>
|
||||
<a href="grid.html#predefined-layout" class="sublink-1">Predefined layouts</a> <a href="grid.html#column-offset" class="sublink-1">Column offsets</a>
|
||||
<a href="grid.html#column-reorder" class="sublink-1">Column reordering</a> <a href="grid.html#media-object" class="sublink-1">Media object pattern</a>
|
||||
<br/> <a href="navigation.html#navigation-title">Navigation</a>
|
||||
<a href="navigation.html#header" class="sublink-1">Header</a> <a href="navigation.html#navigation-bar" class="sublink-1">Navigation bar</a>
|
||||
<a href="navigation.html#footer" class="sublink-1">Footer</a> <a href="navigation.html#sticky" class="sublink-1">Sticky headers & footers</a>
|
||||
<br/> <a href="input_control.html#input-control-title">Input Control</a>
|
||||
<a href="input_control.html#forms-input" class="sublink-1">Forms & input</a> <a href="input_control.html#checkbox-radio" class="sublink-1">Checkboxes & radio buttons</a>
|
||||
<a href="input_control.html#buttons" class="sublink-1">Buttons & button groups</a> <a href="input_control.html#file-upload" class="sublink-1">File upload buttons</a>
|
||||
<br/> <a href="table.html#table-title">Table</a>
|
||||
<a href="table.html#syntax-responsiveness" class="sublink-1">Basic syntax & responsiveness</a>
|
||||
<a href="table.html#horizontal-tables" class="sublink-1">Horizontal tables</a> <a href="table.html#variants-matrices" class="sublink-1">Table variants & matrices</a>
|
||||
<br/> <a href="card.html#card-title">Card</a>
|
||||
<a href="card.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="card.html#sections-media" class="sublink-1">Sections & media</a>
|
||||
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a>
|
||||
<br/> <a href="tab.html#tab-title">Tab</a>
|
||||
<a href="tab.html#basic-syntax" class="sublink-1">Basic syntax</a> <a href="tab.html#stacked-tabs" class="sublink-1">Stacked tabs</a>
|
||||
<br/> <a href="contextual.html#contextual-title">Contextual</a>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#alerts" class="sublink-1">Alerts</a>
|
||||
<a href="contextual.html#animated-alerts" class="sublink-1">Animated alerts</a> <a href="contextual.html#tooltips" class="sublink-1">Tooltips</a>
|
||||
<br/> <a href="progress.html#progress-title">Progress</a>
|
||||
<a href="progress.html#basic-progress-bar" class="sublink-1">Basic progress bar</a> <a href="progress.html#progress-variants" class="sublink-1">Progress bar variants</a>
|
||||
<a href="progress.html#donut-spinner" class="sublink-1">Donut spinner</a> <a href="progress.html#spinner-variants" class="sublink-1">Donut spinner variants</a>
|
||||
<br/> <a href="utility.html#utility-title">Utility</a>
|
||||
<a href="utility.html#visibility-helpers" class="sublink-1">Visibility helpers</a> <a href="utility.html#borders-shadows" class="sublink-1">Generic borders & shadows</a>
|
||||
<a href="utility.html#responsive-sizing" class="sublink-1">Responsive sizing & spacing classes</a>
|
||||
<a href="utility.html#responsive-visibility" class="sublink-1">Responsive visibility helpers</a> <a href="utility.html#breadcrumbs" class="sublink-1">Breadcrumbs</a>
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a> <br/>
|
||||
</nav> </div>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="core-title">
|
||||
<div class="col-sm-12">
|
||||
<h1>Core</h1>
|
||||
<p>The <strong>core</strong> module contains basic reset and fix rules, based on <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like.</p>
|
||||
<p><small>All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.</small></p>
|
||||
<ul class="breadcrumbs"><li><a href="index.html">Home</a></li><li><a href="modules.html">Modules</a></li><li>Core</li></ul><br />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2>Quick overview</h2>
|
||||
<p>Before applying any typography and styling rules, some resets need to be applied to make sure that different elements display consistently on all browsers. The <strong>core</strong> module utilizes the ruleset of <a href="http://necolas.github.io/normalize.css/">Normalize.css</a> v5.0.0 to apply those much needed resets and fixes. However, to keep the framework small, we removed some rules that only help with legacy browser support and also tweaked a lot of the rules around to use customizable variables so no duplicate rules are applied, taking up unnecessary space. The typography rules in <strong>core</strong> deal with a page's basics, like fonts and styling of headings and paragraphs, horizontal rules, colors, margins, padding etc.</p><br>
|
||||
</div>
|
||||
<div class="section">
|
||||
<h2>Quick start</h2>
|
||||
<p>To use the <strong>core</strong> module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p><br>
|
||||
<pre><<span class="fore-tertiary">meta</span> <span class="fore-secondary">name</span>=<span class="fore-primary">"viewport"</span> <span class="fore-secondary">content</span>=<span class="fore-primary">"width=device-width, initial-scale=1"</span>></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="typography">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Typography</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12">
|
||||
<p>For the basic typography rules we did the following, along with other things presented below:</p>
|
||||
<ul>
|
||||
<li>We use a <a href="https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/">native font stack</a> to figure out the best font for your device.</li>
|
||||
<li>We set the colors to <code>background: #f5f5f5;</code> and <code>color: #212121;</code>.</li>
|
||||
<li>We use a <code>font-size</code> of <code>16px</code> for the root element.</li>
|
||||
<li>We set <code>line-height</code> to <code>1.5</code>.</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="headings">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Headings</h2></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 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 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 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>
|
||||
<h3>Sample code</h3>
|
||||
<pre><h1>Heading 1<small>Subheading</small></h1>
|
||||
<h2>Heading 2<small>Subheading</small></h2>
|
||||
<h3>Heading 3<small>Subheading</small></h3>
|
||||
<h4>Heading 4<small>Subheading</small></h4>
|
||||
<h5>Heading 5<small>Subheading</small></h5>
|
||||
<h6>Heading 6<small>Subheading</small></h6></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="common-textual-elements">
|
||||
<div class="col-sm-12">
|
||||
<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">
|
||||
<div><br><p>This is a paragraph with some sample text. Did you know <strong>mini.css</strong> v2.1 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 horizontal rule, preformatted code block and quotation below.</p><hr>
|
||||
<pre>function sum(num1, num2) {
|
||||
var num3 = num1 + num2;
|
||||
console.log('Result: ' + num3);
|
||||
}</pre>
|
||||
<blockquote cite="Mr. Quotalot">This is some quoted text from elsewhere.</blockquote><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>), horizontal rules (<code><hr></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>
|
||||
<hr>
|
||||
<pre>This is some preformatted text.</pre>
|
||||
<blockquote cite="Quotation source">
|
||||
This is some quoted text from another website or person.
|
||||
</blockquote></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="lists">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Lists</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div><br>
|
||||
<ul>
|
||||
<li>Apple</li>
|
||||
<li>Orange</li>
|
||||
<li>Strawberry</li>
|
||||
</ul><br>
|
||||
<ol>
|
||||
<li>Wake up</li>
|
||||
<li>Eat breakfast</li>
|
||||
<li>Go to work</li>
|
||||
</ol><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p>Lists are also very commonly used in websites and apps. We tweaked a few margins and paddings to save some space and make them align properly with the rest of the common HTML elements that we use, but both unordered lists (<code><ul></code>) and ordered lists (<code><ol></code>) are minimally pre-styled to make things a little bit easier for you.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><ul>
|
||||
<li>Apple</li>
|
||||
<li>Orange</li>
|
||||
<li>Strawberry</li>
|
||||
</ul>
|
||||
|
||||
<ol>
|
||||
<li>Wake up</li>
|
||||
<li>Eat breakfast</li>
|
||||
<li>Go to work</li>
|
||||
</ol></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Image responsiveness & captions</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div><figure><img src="https://placehold.it/800x600"><figcaption>Image caption</figcaption></figure></div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p>Image elements (<code><img></code>) are responsive by default, without the need for any special classes or anything else. We made sure they will scale down as necessary to display properly on smaller devices, while keeping their original aspect ratio, but they will never scale up above their original size.</p> <p>On a side note, if you want to add captions to images, you can use a <code><figcaption></code> element, while wrapping both the image and it inside a <code><figure></code>.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><figure>
|
||||
<img src="...">
|
||||
<figcaption>Image caption</figcaption>
|
||||
</figure></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div></main>
|
||||
<!-- End of page content-->
|
||||
<ol>
|
||||
<li>Wake up</li>
|
||||
<li>Eat breakfast</li>
|
||||
<li>Go to work</li>
|
||||
</ol></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" id="images-captions">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Image responsiveness & captions</h2></div>
|
||||
<div class="section row">
|
||||
<div class="col-sm-12 col-sm-last col-md-4 col-md-normal">
|
||||
<div><figure><img src="https://placehold.it/800x600"><figcaption>Image caption</figcaption></figure></div>
|
||||
</div>
|
||||
<div class="col-sm-12 col-sm-first col-md-8 col-md-normal">
|
||||
<p>Image elements (<code><img></code>) are responsive by default, without the need for any special classes or anything else. We made sure they will scale down as necessary to display properly on smaller devices, while keeping their original aspect ratio, but they will never scale up above their original size.</p> <p>On a side note, if you want to add captions to images, you can use a <code><figcaption></code> element, while wrapping both the image and it inside a <code><figure></code>.</p>
|
||||
<h3>Sample code</h3>
|
||||
<pre><figure>
|
||||
<img src="...">
|
||||
<figcaption>Image caption</figcaption>
|
||||
</figure></pre><br>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row" style="padding-bottom: 20px; padding-top:20px;">
|
||||
<div class="col-sm-12">
|
||||
<p>If you want to learn more about <strong>mini.css</strong>'s modules, go back to the <a href="modules.html">modules page</a> and choose another module to see its documentation.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main></div></div></div>
|
||||
<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>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="row" style="padding-top: 40px;" id="grid-title">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<h1>Grid</h1>
|
||||
<p>The <strong>grid</strong> module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as <em>flexbox</em>). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens.</p>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="basic-layout">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Basic layout</h2></div>
|
||||
|
|
@ -240,7 +240,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="screen-specific-layout">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Screen-specific layouts</h2></div>
|
||||
|
|
@ -336,7 +336,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="predefined-layout">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Predefined layouts</h2></div>
|
||||
|
|
@ -393,7 +393,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="column-offset">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Column offsets</h2></div>
|
||||
|
|
@ -466,7 +466,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="column-reorder">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Column reordering</h2></div>
|
||||
|
|
@ -540,7 +540,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="media-object">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Media object pattern</h2></div>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,7 @@
|
|||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="row" style="padding-top: 40px;" id="input-control-title">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<h1>Input Control</h1>
|
||||
<p>The <strong>input_control</strong> module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements' styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way.</p>
|
||||
|
|
@ -65,7 +65,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="forms-input">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Forms & input</h2></div>
|
||||
|
|
@ -237,7 +237,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="checkbox-radio">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Checkboxes & radio buttons</h2></div>
|
||||
|
|
@ -325,7 +325,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="buttons">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Buttons & button groups</h2></div>
|
||||
|
|
@ -406,7 +406,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="file-upload">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>File upload buttons</h2></div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="row" style="padding-top: 40px;" id="navigation-title">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<h1>Navigation</h1>
|
||||
<p>The <strong>navigation</strong> module seeks to remedy the problems of vertical and horizontal navigation design paradigms, by combining the two for a better presentational effect. HTML5 navigational elements are at the heart of the module, allowing you to quickly build your navigation without complicated structures and hacks.</p>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="header">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Header</h2></div>
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="navigation-bar">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Navigation bar</h2></div>
|
||||
|
|
@ -176,7 +176,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="footer">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Footer</h2></div>
|
||||
|
|
@ -197,7 +197,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="sticky">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Sticky headers and footers</h2></div>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="row" style="padding-top: 40px;" id="progress-title">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<h1>Progress</h1>
|
||||
<p>The <strong>progress</strong> module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading.</p>
|
||||
|
|
@ -66,7 +66,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="basic-progress-bar">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Basic progress bar</h2></div>
|
||||
|
|
@ -104,7 +104,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="progress-variants">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Progress bar variants</h2></div>
|
||||
|
|
@ -147,7 +147,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="donut-spinner">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Donut spinner</h2></div>
|
||||
|
|
@ -183,7 +183,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="spinner-variants">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Donut spinner variants</h2></div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="row" style="padding-top: 40px;" id="tab-title">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<h1>Tab</h1>
|
||||
<p>The <strong>tab</strong> module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want.</p>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="basic-syntax">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Basic syntax</h2></div>
|
||||
|
|
@ -180,7 +180,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="stacked-tabs">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Stacked tabs</h2></div>
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="row" style="padding-top: 40px;" id="table-title">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<h1>Table</h1>
|
||||
<p>The <strong>table</strong> module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view.</p>
|
||||
|
|
@ -70,7 +70,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="syntax-responsiveness">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Basic syntax & responsiveness</h2></div>
|
||||
|
|
@ -197,7 +197,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="horizontal-tables">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
|
|
@ -274,7 +274,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="variants-matrices">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Table variants & matrices</h2></div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
</header>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="row" style="padding-top: 40px;" id="utility-title">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<h1>Utility</h1>
|
||||
<p>The <strong>utility</strong> module contains all the utilities and helper classes that you might want when designing a website or application. They solve common design problems efficiently and provide you with generic rules you can easily apply everywhere.</p>
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="visibility-helpers">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Visibility helpers</h2></div>
|
||||
|
|
@ -91,7 +91,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="borders-shadows">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Generic borders & shadows</h2></div>
|
||||
|
|
@ -140,7 +140,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="responsive-sizing">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Responsive sizing & spacing classes</h2></div>
|
||||
|
|
@ -168,7 +168,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="responsive-visibility">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Responsive visibility helpers</h2></div>
|
||||
|
|
@ -216,7 +216,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="breadcrumbs">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Breadcrumbs</h2></div>
|
||||
|
|
@ -268,7 +268,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="row" id="close-icon">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Close icon</h2></div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue