Documentation updates
All docs (except customization which will be updated in the next commit) have been updated to use the new drawer on mobile and have had their version tags updated. New menu items and links are now properly shown in the menus.
This commit is contained in:
Angelos Chalaris
parent
4a564505af
commit
7cb2329762
17 changed files with 329 additions and 217 deletions
|
|
@ -23,19 +23,23 @@
|
|||
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
|
||||
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
|
||||
.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container#co {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10#col{padding: 0 !important;}}
|
||||
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">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>
|
||||
<div class="container" id="co" 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>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<h4 style="margin-left: 0;">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>
|
||||
|
|
@ -43,23 +47,23 @@
|
|||
<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="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#drawer" class="sublink-1">Drawer</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="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>
|
||||
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</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>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</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>
|
||||
|
|
@ -67,8 +71,12 @@
|
|||
<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>
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
|
||||
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10" id="col"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="card-title">
|
||||
<div class="col-sm-12">
|
||||
|
|
|
|||
|
|
@ -26,19 +26,23 @@
|
|||
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
|
||||
.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
.toast.demo { position: relative; top: 2rem; left: calc(50% - 6rem); z-index: 1;} .toast.demo.small { top: 4.5rem; left: calc(50% - 6.75rem);} .toast.demo.large { top: 7.5rem; left: calc(50% - 8rem);}
|
||||
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">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>
|
||||
<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>
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<h4 style="margin-left: 0;">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>
|
||||
|
|
@ -46,23 +50,23 @@
|
|||
<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="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#drawer" class="sublink-1">Drawer</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="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>
|
||||
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</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>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</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>
|
||||
|
|
@ -70,8 +74,12 @@
|
|||
<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>
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
|
||||
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="contextual-title">
|
||||
<div class="col-sm-12">
|
||||
|
|
|
|||
|
|
@ -23,19 +23,23 @@
|
|||
.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; } }
|
||||
@media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">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>
|
||||
<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>
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<h4 style="margin-left: 0;">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>
|
||||
|
|
@ -43,23 +47,23 @@
|
|||
<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="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#drawer" class="sublink-1">Drawer</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="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>
|
||||
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</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>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</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>
|
||||
|
|
@ -67,8 +71,12 @@
|
|||
<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>
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
|
||||
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<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">
|
||||
|
|
|
|||
|
|
@ -72,7 +72,7 @@
|
|||
<div class="row" style="padding-top: 40px;" id="navigation-title">
|
||||
<div class="col-sm-121">
|
||||
<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>
|
||||
<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 menus.</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><br/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -25,12 +25,18 @@
|
|||
</head>
|
||||
<body>
|
||||
<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="index.html" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">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>
|
||||
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
|
|
@ -38,7 +44,7 @@
|
|||
<h1>Flavors</h1>
|
||||
<p>One of the core ideas behind <strong>mini.css</strong> is its flavor system. A flavor is the final compiled stylesheet a website or web app uses. When you start using <strong>mini.css</strong>, you usually try out the default flavor, using one of the following references 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://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css"</span>></pre>
|
||||
<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.1.5/dist/mini-default.min.css"</span>></pre><br>
|
||||
<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.2.0/dist/mini-default.min.css"</span>></pre><br>
|
||||
<p>There are, however a handful of other flavors included with <strong>mini.css</strong>. Below, you can see a full list of them:</p><br>
|
||||
<ul style="margin-left:0px; padding-left: 4px">
|
||||
<li class="card fluid">
|
||||
|
|
|
|||
|
|
@ -25,19 +25,23 @@
|
|||
.box-colored {color: #f5f5f5; } @media (max-width: 767px){.container#co {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10#col{padding: 0 !important;}}
|
||||
.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;margin-bottom: 16px;padding-bottom: 12px;}
|
||||
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9; margin-bottom: 0;}}
|
||||
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">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>
|
||||
<div class="container" style="padding-left: 0.25rem;" id="co">
|
||||
<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>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<h4 style="margin-left: 0;">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>
|
||||
|
|
@ -45,23 +49,23 @@
|
|||
<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="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#drawer" class="sublink-1">Drawer</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="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>
|
||||
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</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>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</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>
|
||||
|
|
@ -69,8 +73,12 @@
|
|||
<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>
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
|
||||
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10" id="col"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="grid-title">
|
||||
<div class="col-sm-12">
|
||||
|
|
|
|||
|
|
@ -57,17 +57,23 @@
|
|||
<div id="logo-body">
|
||||
<p id="description">minimal, responsive, style-agnostic CSS framework</p>
|
||||
<h1 id="top-heading"><span style="font-size: 1.45em; font-family: 'Noto Sans', sans-serif;">m</span>ini<span style="font-size:0.65em; color: #4527a0; font-family: 'Noto Sans', sans-serif;">.css</span></h1>
|
||||
<p id="top-vtag-cont"><mark id="top-version-tag">v2.1</mark></p>
|
||||
<p id="top-vtag-cont"><mark id="top-version-tag">v2.2</mark></p>
|
||||
<div id="mt1"></div><div id="mt2"></div><div id="mt3"></div><div id="mt4"></div><div id="mt5"></div>
|
||||
<small id="codename">Fermion</small>
|
||||
</div>
|
||||
<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="index.html" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">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>
|
||||
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container responsive-padding">
|
||||
<div class="row" style="padding-top: 60px; padding-bottom: 20px;">
|
||||
|
|
@ -111,7 +117,7 @@
|
|||
<br/>
|
||||
<p>Alternatively, you can use either <strong>GitCDN</strong> or <strong>RawGit</strong> to import the default flavor of <strong>mini.css</strong>. Simply add one of the following references 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://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css"</span>></pre>
|
||||
<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.1.5/dist/mini-default.min.css"</span>></pre><br/>
|
||||
<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.2.0/dist/mini-default.min.css"</span>></pre><br/>
|
||||
<p>Finally, you can find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
|
||||
<hr>
|
||||
</div>
|
||||
|
|
@ -134,7 +140,7 @@
|
|||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
<h2>Quick overview</h2>
|
||||
<p>Take a couple of minutes to explore what makes <strong>mini.css</strong> different from all those other CSS frameworks and UI toolkits.</p>
|
||||
<figure style="margin: 0;"><div style="position: relative; padding: 0.5rem; padding-bottom: 42%; margin-bottom: 0.25rem;"><iframe style="display: none; border: 0; position: absolute; width: 100%; height: 100%;" onload="this.style.display='block';" src="https://scrimba.com/cast/cast-1949.embed"></iframe></div><figcaption style="padding: 0.5rem;">Intro to mini.css by <a href="https://scrimba.com/casts/cast-1949" style="font-size: 0.8125rem; text-decoration: none;">Per Harald Borgen</a></figcaption></figure><br/>
|
||||
<figure style="margin: 0;"><div style="position: relative; padding: 0.5rem; padding-bottom: 42%; margin-bottom: 0.25rem; margin-right: 1rem;"><iframe style="display: none; border: 0; position: absolute; width: 100%; height: 100%;" onload="this.style.display='block';" src="https://scrimba.com/cast/cast-1949.embed"></iframe></div><figcaption style="padding: 0.5rem;">Intro to mini.css by <a href="https://scrimba.com/casts/cast-1949" style="font-size: 0.8125rem; text-decoration: none;">Per Harald Borgen</a></figcaption></figure><br/>
|
||||
<h3>Why should I use mini.css?</h3>
|
||||
<p><strong>mini.css</strong> is a lot lighter than a lot of other full-featured CSS frameworks (e.g. Bootstrap, Semantic UI), but it is not a micro framework (e.g. Milligram, Pure.CSS). Instead, <strong>mini.css</strong> blurs the line between full-featured and micro frameworks by providing lots of modules and components in a very small file. All the things you expect to find in a CSS framework, such as grids, styling for common elements and typography, along with some more complex components such as tabs or cards are all present in <strong>mini.css</strong>.</p>
|
||||
<br/>
|
||||
|
|
|
|||
|
|
@ -25,19 +25,23 @@
|
|||
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
|
||||
.box-colored {color: #f5f5f5;} @media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
.responsive-label {align-items: center;} @media (min-width: 768px) { .responsive-label .col-md-3 {text-align: right;}}
|
||||
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">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>
|
||||
<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>
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<h4 style="margin-left: 0;">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>
|
||||
|
|
@ -45,23 +49,23 @@
|
|||
<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="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#drawer" class="sublink-1">Drawer</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="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>
|
||||
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</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>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</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>
|
||||
|
|
@ -69,8 +73,12 @@
|
|||
<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>
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
|
||||
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="input-control-title">
|
||||
<div class="col-sm-12">
|
||||
|
|
|
|||
|
|
@ -33,7 +33,8 @@
|
|||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<h4 style="text-align: center">Modules</h4> <a href="core.html#core-title">Core</a>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<h4 style="margin-left: 0;">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>
|
||||
|
|
@ -41,23 +42,23 @@
|
|||
<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="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#drawer" class="sublink-1">Drawer</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="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>
|
||||
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</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>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</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>
|
||||
|
|
@ -65,7 +66,11 @@
|
|||
<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/>
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
|
||||
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
|
|
@ -116,9 +121,10 @@
|
|||
<div class="col-sm-12 col-lg-6 row">
|
||||
<div class="card fluid">
|
||||
<h2 class="section"><mark class="primary"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></mark> Navigation</h2>
|
||||
<div class="section box-left"><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. More specifically, the <strong>navigation</strong> module contains:</p><ul>
|
||||
<div class="section box-left"><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 menus. More specifically, the <strong>navigation</strong> module contains:</p><ul>
|
||||
<li><a href="navigation.html#header" class="sublink-1">Styling for headers, logos and header links</a></li>
|
||||
<li><a href="navigation.html#navigation-bar" class="sublink-1">Styling for navigation bars</a></li>
|
||||
<li><a href="navigation.html#drawer" class="sublink-1">Classes for creating responsive drawers</a></li>
|
||||
<li><a href="navigation.html#footer" class="sublink-1">Styling for footers</a></li>
|
||||
<li><a href="navigation.html#sticky" class="sublink-1">Classes for making headers and footers sticky</a></li>
|
||||
</ul></div><a href="navigation.html" class="button section">See more</a>
|
||||
|
|
@ -143,6 +149,7 @@
|
|||
<li><a href="card.html#basic-syntax" class="sublink-1">Classes for creating card-based layouts</a></li>
|
||||
<li><a href="card.html#sections-media" class="sublink-1">Classes for creating card sections and adding media</a></li>
|
||||
<li><a href="card.html#sizing-fluidity" class="sublink-1">Classes for creating card variants and making cards fluid</a></li>
|
||||
<li><a href="card.html#color-variants" class="sublink-1">Classes for creating card color variants</a></li>
|
||||
</ul></div><a href="card.html" class="button section">See more</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -162,8 +169,7 @@
|
|||
<h2 class="section"><mark class="secondary"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></mark> Contextual</h2>
|
||||
<div class="section box-left"><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. Contextual toasts and tooltips are also provided, aiming to help deliver important information to users. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily. More specifically, the <strong>contextual</strong> module contains:</p><ul>
|
||||
<li><a href="contextual.html#text-highlighting" class="sublink-1">Styling for highlighted text</a></li>
|
||||
<li><a href="contextual.html#alerts" class="sublink-1">Classes for creating alerts</a></li>
|
||||
<li><a href="contextual.html#animated-alerts" class="sublink-1">Classes for animating alerts</a></li>
|
||||
<li><a href="contextual.html#toasts" class="sublink-1">Classes for creating toast messages</a></li>
|
||||
<li><a href="contextual.html#tooltips" class="sublink-1">Classes for creating hover-over tooltips</a></li>
|
||||
</ul></div><a href="contextual.html" class="button section">See more</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -27,19 +27,23 @@
|
|||
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
|
||||
@media (min-width: 1280px) {.col-sm-12.col-sm-last.col-md-12.col-md-normal.col-lg-4.col-lg-normal {border:0; border-right: 1px solid #c9c9c9; }}
|
||||
@media (max-width: 767px){.container {padding: 0.25rem !important;}.col-sm-12.col-md-8.col-lg-10{padding: 0 !important;}}
|
||||
@media screen and (min-width: 768px) { .drawer#real-drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">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>
|
||||
<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>
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2" id="real-drawer">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<h4 style="margin-left: 0;">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>
|
||||
|
|
@ -47,23 +51,23 @@
|
|||
<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="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#drawer" class="sublink-1">Drawer</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="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>
|
||||
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</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>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</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>
|
||||
|
|
@ -71,13 +75,17 @@
|
|||
<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>
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
|
||||
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="navigation-title">
|
||||
<div class="col-sm-12">
|
||||
<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>
|
||||
<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 menus.</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><br/>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,20 +23,23 @@
|
|||
.col-sm-12.col-sm-last.col-md-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
|
||||
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-4.col-md-normal { border: 0;border-top: 1px solid #c9c9c9;}}
|
||||
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
|
||||
.box-colored {color: #f5f5f5;}
|
||||
.box-colored {color: #f5f5f5;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">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>
|
||||
<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>
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<h4 style="margin-left: 0;">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>
|
||||
|
|
@ -44,23 +47,23 @@
|
|||
<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="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#drawer" class="sublink-1">Drawer</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="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>
|
||||
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</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>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</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>
|
||||
|
|
@ -68,8 +71,12 @@
|
|||
<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>
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
|
||||
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="progress-title">
|
||||
<div class="col-sm-12">
|
||||
|
|
|
|||
|
|
@ -21,35 +21,41 @@
|
|||
[class^='fore-'] { font-family: monospace, monospace;} .fore-primary { color: #0d47a1;} .fore-secondary { color: #b71c1c;} .fore-tertiary { color: #1b5e20;}
|
||||
.col-sm-12.col-md-6.col-sm-first.col-md-first {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
|
||||
@media (max-width: 767px){.col-sm-12.col-md-6.col-sm-first.col-md-first {border: 0;border-bottom: 1px solid #c9c9c9;}}
|
||||
h3 > a{font-size: 1rem;} h2 > a {font-size: 0.85em;} pre {max-height: 400px;} header.sticky a.button {padding: 4px 6px; font-size: 0.95em;}
|
||||
h3 > a{font-size: 1rem;} h2 > a {font-size: 0.85em;} pre {max-height: 400px;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</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>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">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" class="button">Core</a> <a href="#grid" class="button">Grid</a>
|
||||
<a href="#input_control" class="button">Input Control</a> <a href="#navigation" class="button">Navigation</a>
|
||||
<a href="#table" class="button">Table</a> <a href="#card" class="button">Card</a>
|
||||
<a href="#tab" class="button">Tab</a> <a href="#contextual" class="button">Contextual</a>
|
||||
<a href="#progress" class="button">Progress</a> <a href="#utility" class="button">Utility</a>
|
||||
</header>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
|
||||
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
<a href="#core">Core</a> <a href="#grid">Grid</a> <a href="#input_control">Input Control</a> <a href="#navigation">Navigation</a> <a href="#table">Table</a>
|
||||
<a href="#card">Card</a> <a href="#tab">Tab</a> <a href="#contextual">Contextual</a> <a href="#progress">Progress</a> <a href="#utility">Utility</a> <br/>
|
||||
</nav>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="col-sm-12">
|
||||
<h1>Quick Reference</h1>
|
||||
<p>If you are familiar with <strong>mini.css</strong> and want a cheat sheet, you've come to the right place. Below you will find a quick overview of the framework and examples to help you brush up on your website-building skills. For more detailed instructions on modules, check out the <a href="modules.html">modules</a> page.</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><br>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2>Setup & usage</h2></div>
|
||||
<div class="section">
|
||||
|
|
@ -61,7 +67,7 @@
|
|||
</div><br>
|
||||
<p>You can import the default flavor of <strong>mini.css</strong> in your webpage by simply adding one of the following references 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://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css"</span>></pre>
|
||||
<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.1.5/dist/mini-default.min.css"</span>></pre><br>
|
||||
<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.2.0/dist/mini-default.min.css"</span>></pre><br>
|
||||
<p>You can also find <strong>mini.css</strong> on <a href="https://cdnjs.com/libraries/mini.css">cdnjs</a>, which you can use to include it in your projects.</p><br/>
|
||||
<p>We strongly suggest you add the following line inside your HTML page's <code><head></code> to utilize the viewport meta tag:</p>
|
||||
<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>
|
||||
|
|
@ -70,7 +76,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" id="core">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2><a href="core.html" target="_blank" class="button primary small"><i class="fa fa-font fa-fw" aria-hidden="true"></i></a> Core</h2></div>
|
||||
<div class="section row">
|
||||
|
|
@ -138,7 +144,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" id="grid">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2><a href="grid.html" target="_blank" class="button secondary small"><i class="fa fa-th-large fa-fw" aria-hidden="true"></i></a> Grid</h2></div>
|
||||
<div class="section row">
|
||||
|
|
@ -368,7 +374,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" id="input_control">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section">
|
||||
<h2><a href="input_control.html" target="_blank" class="button tertiary small"><i class="fa fa-keyboard-o fa-fw" aria-hidden="true"></i></a> Input Control</h2>
|
||||
|
|
@ -484,7 +490,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" id="navigation">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2><a href="navigation.html" target="_blank" class="button primary small"><i class="fa fa-compass fa-fw" aria-hidden="true"></i></a> Navigation</h2></div>
|
||||
<div class="section row">
|
||||
|
|
@ -602,7 +608,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" id="table">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2><a href="table.html" target="_blank" class="button primary small"><i class="fa fa-table fa-fw" aria-hidden="true"></i></a> Table</h2></div>
|
||||
<div class="section row">
|
||||
|
|
@ -752,7 +758,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" id="card">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2><a href="card.html" target="_blank" class="button secondary small"><i class="fa fa-id-card-o fa-fw" aria-hidden="true"></i></a> Card</h2></div>
|
||||
<div class="section row">
|
||||
|
|
@ -874,7 +880,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" id="tab">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2><a href="tab.html" target="_blank" class="button secondary small"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></a> Tab</h2></div>
|
||||
<div class="section row">
|
||||
|
|
@ -963,7 +969,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" id="contextual">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2><a href="contextual.html" target="_blank" class="button secondary small"><i class="fa fa-tags fa-fw" aria-hidden="true"></i></a> Contextual</h2></div>
|
||||
<div class="section row">
|
||||
|
|
@ -1023,7 +1029,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" id="progress">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2><a href="progress.html" target="_blank" class="button tertiary small"><i class="fa fa-spinner fa-fw" aria-hidden="true"></i></a> Progress</h2></div>
|
||||
<div class="section row">
|
||||
|
|
@ -1094,7 +1100,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="row" id="utility">
|
||||
<div class="col-sm col-lg-10 col-lg-offset-1">
|
||||
<div class="col-sm-12">
|
||||
<div class="card fluid">
|
||||
<div class="section"><h2><a href="utility.html" target="_blank" class="button tertiary small"><i class="fa fa-wrench fa-fw" aria-hidden="true"></i></a> Utility</h2></div>
|
||||
<div class="section row">
|
||||
|
|
@ -1215,7 +1221,7 @@
|
|||
<div class="col-sm-12 col-lg-10 col-lg-offset-1">
|
||||
</div>
|
||||
</div>
|
||||
</div></main>
|
||||
</main></div></div></div>
|
||||
<!-- End of page content-->
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -22,20 +22,24 @@
|
|||
.col-sm-12.col-sm-last.col-lg-4.col-md-normal {box-sizing: border-box;border-right: 1px solid #c9c9c9;}
|
||||
.box-colored.green { background: #689f38; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
|
||||
.box-colored {color: #f5f5f5;} @media (max-width: 1279px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box; border: 0; border-bottom: 1px solid #c9c9c9;}}
|
||||
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
|
||||
@media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
|
||||
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">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>
|
||||
<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>
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<h4 style="margin-left: 0;">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>
|
||||
|
|
@ -43,23 +47,23 @@
|
|||
<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="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#drawer" class="sublink-1">Drawer</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="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>
|
||||
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</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>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</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>
|
||||
|
|
@ -67,8 +71,12 @@
|
|||
<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>
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
|
||||
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="tab-title">
|
||||
<div class="col-sm-12">
|
||||
|
|
|
|||
|
|
@ -29,19 +29,23 @@
|
|||
table#carded td {display: block;border: 0; border-bottom: 1px solid #c9c9c9; text-align: right; }
|
||||
table#carded td:before { content: attr(data-label); float: left; font-weight: 700; }
|
||||
table#carded td:last-child { border-bottom: 0; } .border-fix > td, .border-fix > th { border-top: 0; }.col-sm-12.col-sm-last.col-md-12.col-md-normal {box-sizing: border-box;border-bottom: 1px solid #c9c9c9;} @media (max-width: 767px){.col-sm-12.col-sm-last.col-md-12.col-md-normal {border: 0;border-top: 1px solid #c9c9c9;}}
|
||||
@media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">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>
|
||||
<div class="container" id="co" 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>
|
||||
<div class="container" style="padding-left: 0.25rem;">
|
||||
<div class="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<h4 style="margin-left: 0;">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>
|
||||
|
|
@ -49,23 +53,23 @@
|
|||
<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="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#drawer" class="sublink-1">Drawer</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="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>
|
||||
<a href="card.html#sizing-fluidity" class="sublink-1">Card sizing & fluidity</a> <a href="card.html#color-variants" class="sublink-1">Card color variants</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>
|
||||
<a href="contextual.html#text-highlighting" class="sublink-1">Text highlighting</a> <a href="contextual.html#toasts" class="sublink-1">Toasts</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>
|
||||
|
|
@ -73,8 +77,12 @@
|
|||
<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>
|
||||
<a href="utility.html#close-icon" class="sublink-1">Close icon</a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
|
||||
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="table-title">
|
||||
<div class="col-sm-12">
|
||||
|
|
|
|||
|
|
@ -25,12 +25,18 @@
|
|||
</head>
|
||||
<body>
|
||||
<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="index.html" class="logo"><span id="header-logo">m</span></a> <label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">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>
|
||||
<input type="checkbox" id="navigation-toggle"> <nav class="drawer hidden-md hidden-lg">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a> <a href="modules.html"><h4 style="margin-left: 0;">Modules</h4></a>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a> <a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a> <a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<!-- Insert your page content here-->
|
||||
<main><div class="container">
|
||||
<div class="row" style="padding-top: 40px;">
|
||||
|
|
|
|||
|
|
@ -24,53 +24,60 @@
|
|||
.col-sm-12.col-sm-last.col-md-12.col-md-normal { box-sizing: border-box; border-bottom: 1px solid #c9c9c9; }
|
||||
@media (max-width: 767px){ .col-sm-12.col-sm-last.col-md-12.col-md-normal { border: 0; border-top: 1px solid #c9c9c9;}}
|
||||
.box-colored.green { background: #1b5e20; } .do {border-top: 15px solid #689f38;padding-top: 10px;} .dont {border-top: 15px solid #e53935;padding-top: 10px;}
|
||||
.box-colored { color: #f5f5f5;}
|
||||
.box-colored { color: #f5f5f5;} @media screen and (min-width: 768px) { .drawer { margin-top: 4px;}}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<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>
|
||||
<label class="drawer-toggle button" for="navigation-toggle"></label>
|
||||
<a href="index.html" class="button hidden-sm">Introduction</a> <a href="modules.html" class="button hidden-sm">Modules</a>
|
||||
<a href="flavors.html" class="button hidden-sm">Flavors</a> <a href="templates.html" class="button hidden-sm">Templates</a>
|
||||
<a href="customization/index.html" class="button hidden-sm">Customization</a> <a href="quick_reference.html" class="button hidden-sm">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>
|
||||
<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="row"> <input type="checkbox" id="navigation-toggle"> <nav class="drawer col-md-4 col-lg-2">
|
||||
<label class="close" for="navigation-toggle"></label>
|
||||
<a href="index.html"><h4 style="margin-left: 0;">Introduction</h4></a>
|
||||
<h4 style="margin-left: 0;">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="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="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#drawer" class="sublink-1">Drawer</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="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> <a href="card.html#color-variants" class="sublink-1">Card color variants</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#toasts" class="sublink-1">Toasts</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>
|
||||
<a href="flavors.html"><h4 style="margin-left: 0;">Flavors</h4></a>
|
||||
<a href="templates.html"><h4 style="margin-left: 0;">Templates</h4></a>
|
||||
<a href="customization/index.html"><h4 style="margin-left: 0;">Customization</h4></a>
|
||||
<a href="quick_reference.html"><h4 style="margin-left: 0;">Quick Reference</h4></a>
|
||||
</nav>
|
||||
<div class="col-sm-12 col-md-8 col-lg-10"><main>
|
||||
<div class="row" style="padding-top: 40px;" id="utility-title">
|
||||
<div class="col-sm-12">
|
||||
|
|
|
|||
|
|
@ -1159,3 +1159,7 @@
|
|||
- Updated customization for the new `.drawer` component.
|
||||
- Updated `mini-default`, `mini-lite` and `mini-dark` for the new `.drawer` component, the other two flavors will be updated later today.
|
||||
- Updated `quick_reference` for `.drawer`, added a codepen for the component.
|
||||
- Updated `index.html` with mobile menu, updated tags to latest version. Fixed the way the screencast displays, so that it fits nicely on smaller screens.
|
||||
- Updated all module pages to use `.drawer` on mobile.
|
||||
- Updated `flavors.html` and `templates.html`, both now use the new menu and the tags are updated for the flavor doc.
|
||||
- Updated `quick_reference.html` with new navigation, new tag, checked everything.
|
||||
|
|
|
|||
Loading…
Reference in a new issue