Basic syntax
-Basic syntax
- The card module is compatible with modern browsers, but might not display properly in older browsers.
- If you want to further customize your
.sections, check the section below.
-
+
<div class="card">
@@ -245,21 +184,17 @@
-
- Sections & media
-
+ Sections & media
-
-
+
Card with image
Content
Card with video
Normal section
Double-padded section
Normal section
Dark section
Darker section
Inverse card
Content
More content
-
-
+
@@ -292,13 +227,10 @@
-
- Card sizing & fluidity
-
+ Card sizing & fluidity
-
-
+
Small Card
Small cards are 240px wide.
Large Card
Large cards are 480px wide.
@@ -338,8 +270,7 @@
.fluid cards might not display properly in older browsers, especially legacy versions of Internet Explorer.- Due to the fact that
.fluid cards stretch to fill their parent container, they might not fully respect their margins, like the rest of the cards. However, this should not cause any noticable problems with layout, except maybe the odd pixel here and there.
-
-
+
<div class="card">
diff --git a/docs/contextual.html b/docs/contextual.html
index ad0ff94..7f90ac9 100644
--- a/docs/contextual.html
+++ b/docs/contextual.html
@@ -1,103 +1,45 @@
-
+
-
-
- mini.css - Contextual
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ mini.css - Contextual
+
+
+
+
+
+
+
+
+
- 
mini.css
-
-
- Core
- Grid
- Navigation
- Input Control
- Table
- Card
- Tab
- Contextual
- Progress
- Utility
-
-
+ mini.css
+
+
+
+ Core Grid
+ Navigation Input Control
+ Table Card
+ Tab Contextual
+ Progress Utility
+
@@ -126,9 +68,7 @@
-
- Text highlighting
-
+ Text highlighting
@@ -153,8 +93,7 @@
- Try to use elements with the
.inline-block class only when absolutely necessary, as they break the normal text flow of the document. Avoid using this class on shorter pieces of text that span a few words and contain no line breaks.
<mark> elements, along with their supporting classes (except for .inline-block) can be easily used in paragraphs, headings and other elements, as they scale according to their parent element.
-
+
<mark class="tag tertiary">green tag</mark>
@@ -188,9 +127,7 @@
-
- Alerts
-
+ Alerts
@@ -220,8 +157,7 @@
Notes
- Alert elements do not have any pre-defined behavior. You should use your own Javascript code and interactive HTML elements to deal with showing and hiding them as necessary.
-
-
+
<p class="alert">Short and to the point</p>
@@ -241,9 +177,7 @@
-
- Animated alerts
-
+ Animated alerts
diff --git a/docs/core.html b/docs/core.html
index d5e6509..c26500e 100644
--- a/docs/core.html
+++ b/docs/core.html
@@ -1,90 +1,44 @@
-
+
-
-
- mini.css - Core
-
-
+
+
+ mini.css - Core
+
-
-
-
-
-
+
+
+
-
- mini.css
-
-
- Core
- Grid
- Navigation
- Input Control
- Table
- Card
- Tab
- Contextual
- Progress
- Utility
-
+
+ mini.css
+
+
+
+ Core Grid
+ Navigation Input Control
+ Table Card
+ Tab Contextual
+ Progress Utility
@@ -114,9 +68,7 @@
-
- Typography
-
+ Typography
For the basic typography rules we did the following, along with other things presented below:
@@ -134,9 +86,7 @@
-
- Headings
-
+ Headings
Heading 1Subheading
@@ -163,13 +113,10 @@
-
- Common textual elements
-
+ Common textual elements
-
This is a paragraph with some sample text. Did you know mini.css v2.1 is codenamed Fermion? No? Well, now you do! Oh, by the way, that was some Bold text and here is some text in Italics. Maybe you want to know what our inline elements look like. For example a link to the Github repository of mini.css looks like that! Neat, right? Maybe you want to see some inline code or some sample input. Oh, also small text is cool, along with its siblings: the subscripthi! and the superscripthello!. Finally, check out the horizontal rule, preformatted code block and quotation below.
-
+
This is a paragraph with some sample text. Did you know mini.css v2.1 is codenamed Fermion? No? Well, now you do! Oh, by the way, that was some Bold text and here is some text in Italics. Maybe you want to know what our inline elements look like. For example a link to the Github repository of mini.css looks like that! Neat, right? Maybe you want to see some inline code or some sample input. Oh, also small text is cool, along with its siblings: the subscripthi! and the superscripthello!. Finally, check out the horizontal rule, preformatted code block and quotation below.
function sum(num1, num2) {
var num3 = num1 + num2;
console.log('Result: ' + num3);
@@ -200,25 +147,20 @@
-
- Lists
-
+ Lists
-
-
+
- Apple
- Orange
- Strawberry
-
-
+
- Wake up
- Eat breakfast
- Go to work
-
-
+
@@ -243,14 +185,10 @@
-
- Image responsiveness
-
+ Image responsiveness
-
-
-
+ 
Image elements (<img>) are responsive by default, without the need for any special classes or anything else. We made sure they will scale down as necessary to display properly on smaller devices, while keeping their original aspect ratio, but they will never scale up above their original size.
diff --git a/docs/customization.html b/docs/customization.html
index 3a2144b..a47c2f5 100644
--- a/docs/customization.html
+++ b/docs/customization.html
@@ -1,66 +1,34 @@
-
+
-
-
- mini.css - Customization
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ mini.css - Customization
+
+
+
+
+
+
+
+
+
-
- mini.css
-
+
+ mini.css
+
+
@@ -103,9 +71,7 @@
Building a flavor
Creating your own flavor can be as easy or as complicated as your needs. Adding and removing modules is as simple as adding an @import statement or commenting it out, after declaring all the required variables. In this section, we will briefly walk you through most of the variables usually present in a flavor, along with some flags and mixins. This section serves as a complementary documentation to the comment column present in our pre-defined flavors, instead of a replacement and should be always viewed alongside it.
-
- Core
-
+ Core
The core module uses a lot of variables, most of which are pretty straightforward. Some of the most important ones are as follows:
@@ -120,25 +86,19 @@
-
- Grid
-
+ Grid
The grid module contains two important variables, the boolean $use-four-step-grid which determines if the grid has 3 or 4 breakpoints and the $grid-column-count which determines the amount of vertical columns used for the grid's layout. Apart from those, there are a few variables that set the names for the grid system's classes, prefixes and suffixes and the grid's screen size breakpoint definitions.
-
- Navigation
-
+ Navigation
The navigation module contains a plethora of variables used in the styling of the navigational elements. Most of them concern colors, spacing and sizing or similar things. Bear in mind that the presentation of buttons inside the <header> element will be affected by the styling of all button elements, as defined in the input_control module. The variable that stands out in this module is $nav-sublink-depth which determines how deep a navigational hierarchy tree can be.
-
- Input Control
-
+ Input Control
The input_control module is one of the larger modules, containg a lot of variables to style a multitude of elements. Forms and textual <input> elements utilize variables that concern color, spacing, sizing etc. Button variables are more interesting, especially the ones concerning the opacity of button elements ($button-back-opacity and $button-hover-back-opacity). The $hide-file-inputs boolean variable determines how <input type="file"> elements will be handled. Checkboxes and radio buttons also use a few variables concerning basic styling, but special attention needs to be paid to the $checkbox-size variable, as it determines a few attributes of both elements.
There are two mixins in the input_control module, specifically:
@@ -149,17 +109,13 @@
-
- Table
-
+ Table
The table module's variables deal mostly with basic table styling. The $table-mobile-breakpoint is very important as it determines the breakpoint for responsive tables' mobile view, along with $table-mobile-card-label which determines the attribute that will be used to display the table headings on mobile devices.
-
- Card
-
+ Card
The card modules' variables mostly deal with things like class names, spacing, sizing and colors. Cards offer a handful of mixins, specifically:
@@ -171,17 +127,13 @@
-
- Tab
-
+ Tab
The tab module utilizes a few naming and color variables, along with some sizing and spacing variables to deal with presentation and functionality. Many of the sizing variables are very dependent on each other's values. The $tab-stacked-breakpoint variable is especially important, as it determines the mobile view breakpoint for the tabs component.
-
- Contextual
-
+ Contextual
The contextual module features, apart from basic naming and styling variables, a few things of note. The boolean variable $alert-include-animated determines if animated alerts will be inluded or not. There is also a handful of mixins, which are the most important part of the contextual module as they are what makes it useful:
@@ -193,9 +145,7 @@
-
- Progress
-
+ Progress
The progress module contains lots of variables that affect basic styling, but it also features a few interesting mixins:
@@ -208,9 +158,7 @@
-
- Utility
-
+ Utility
The utility module contains a few variables dealing with naming and basic styling, but its most important feature is its mixins:
@@ -230,10 +178,7 @@
If you would rather use one of the pre-defined flavors, check out our flavors page for a list of all flavors currently available.
-
-
-
-
+
diff --git a/docs/flavors.html b/docs/flavors.html
index ab4ec16..aa9617b 100644
--- a/docs/flavors.html
+++ b/docs/flavors.html
@@ -1,70 +1,35 @@
-
+
-
-
- mini.css - Flavors
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ mini.css - Flavors
+
+
+
+
+
+
+
+
+
-
- mini.css
-
+
+ mini.css
+
+
diff --git a/docs/grid.html b/docs/grid.html
index 13ac8fb..903649b 100644
--- a/docs/grid.html
+++ b/docs/grid.html
@@ -1,116 +1,47 @@
-
+
-
-
- mini.css - Grid
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ mini.css - Grid
+
+
+
+
+
+
+
+
+
- mini.css
-
-
- Core
- Grid
- Navigation
- Input Control
- Table
- Card
- Tab
- Contextual
- Progress
- Utility
-
-
+ mini.css
+
+
+
+ Core Grid
+ Navigation Input Control
+ Table Card
+ Tab Contextual
+ Progress Utility
+
diff --git a/docs/index.html b/docs/index.html
index cb6b0da..42ef52d 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,92 +1,48 @@
-
+
-
-
- mini.css - Minimal, responsive, style-agnostic CSS framework
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ mini.css - Minimal, responsive, style-agnostic CSS framework
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+ mini.css
+
+
@@ -94,9 +50,7 @@
- MinimalSize matters!
-
-
+ MinimalSize matters!
mini.css aims to provide as much functionality as possible in less than 7KB gzipped. This very small footprint means that your websites and web applications will load faster, while still looking great utilising the modern components we provide!
@@ -104,9 +58,7 @@
- ResponsiveThink mobile!
-
-
+ ResponsiveThink mobile!
mini.css is crafted with both desktops and mobile devices in mind. All of its components are well-tested on different devices and will respond to any changes in the viewport, allowing for an experience tailored to each user's device!
@@ -114,9 +66,7 @@
- Style-agnosticInfinitely customizable!
-
-
+ Style-agnosticInfinitely customizable!
mini.css provides you with a customizable flavor system, allowing you to be a designer without all the hard work. This way you can create your own custom design and personalize your websites any way you want!
@@ -130,72 +80,47 @@
<link rel="stylesheet" href="https://cdn.rawgit.com/Chalarangelo/mini.css/v2.1.0/dist/mini-default.min.css">
If you want to download the package using your favorite package manager, you can use either Bower or NPM:
-
- bower install mini.css
-
-
- npm install mini.css
-
+ bower install mini.css
+ npm install mini.css
- If you are interested in tinkering with the flavor files and cooking your own flavor, check out the Customization page for information, tips on how to get started and general guidelines.
-
+ If you are interested in tinkering with the flavor files and cooking your own flavor, check out the Customization page for information, tips on how to get started and general guidelines.
Quick overview
Take a couple of minutes to learn how mini.css differs from all those other UI frameworks (Bootstrap, Semantic UI etc):
-
- Framework file size comparison
-
-
- Name
- Version
- Size (uncompressed)
- Size (minified)
- Size (gzipped)
-
-
-
-
- Bootstrap
- v3.3.7
- 143 KB
- 117 KB
- 20 KB
-
-
- Material Framework
- v3.0
- 114 KB
- 90 KB
- 18 KB
-
-
- mini.css
- v2.1
- 47 KB
- 36 KB
- 7 KB
-
-
- Semantic UI
- v2.2.6
- 730 KB
- 550 KB
- 95 KB
-
-
- Zurb Foundation
- v3.0
- 90 KB
- 64 KB
- 12 KB
-
-
-
- The above comparison takes into account only the CSS files of each framework. mini.css's size is an approximation due to the nature of its flavor system. The calculated results were produced using Refresh-SF.
-
+ Framework file size comparison
+ Name Version Size (uncompressed) Size (minified) Size (gzipped)
+
+
+ Bootstrap
+ v3.3.7
+ 143 KB 117 KB 20 KB
+
+
+ Material Framework
+ v3.0
+ 114 KB 90 KB 18 KB
+
+
+ mini.css
+ v2.1
+ 47 KB 36 KB 7 KB
+
+
+ Semantic UI
+ v2.2.6
+ 730 KB 550 KB 95 KB
+
+
+ Zurb Foundation
+ v3.0
+ 90 KB 64 KB 12 KB
+
+
+
+ The above comparison takes into account only the CSS files of each framework. mini.css's size is an approximation due to the nature of its flavor system. The calculated results were produced using Refresh-SF.
Module list
@@ -219,63 +144,40 @@
-
- Browser support
-
-
- Browser
- Not supported
- Partially supported
- Fully supported
-
-
-
-
- Internet Explorer
- 8-
- 9-10
- 11+
-
-
- Edge
- n/a
- n/a
- 12+
-
-
- Firefox
- 21-
- 22-27
- 28+
-
-
- Chrome
- 20-
- n/a
- 21+
-
-
- Safari
- 6-
- n/a
- 6.1+
-
-
- Opera
- 11.5-
- 12.1-16
- 17+
-
-
- Android Browser
- 4.3-
- n/a
- 4.4+
-
-
-
- Due to the way mini.css is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. Apart from the table above, note that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.
-
+ Browser support
+ Browser Not supported Partially supported Fully supported
+
+
+ Internet Explorer
+ 8- 9-10 11+
+
+
+ Edge
+ n/a n/a 12+
+
+
+ Firefox
+ 21- 22-27 28+
+
+
+ Chrome
+ 20- n/a 21+
+
+
+ Safari
+ 6- n/a 6.1+
+
+
+ Opera
+ 11.5- 12.1-16 17+
+
+
+ Android Browser
+ 4.3- n/a 4.4+
+
+
+
+ Due to the way mini.css is crafted, some legacy browsers are not supported anymore and some others are partially supported. This could be a dealbreaker for some developers, however most legacy browsers will display a less feature-rich and modern website. Apart from the table above, note that some mobile browsers like Opera Mini, IE Mobile and UC Browser for Android are officially supported, but some features may not be displayed properly or behave as expected due to the browsers themselves.
@@ -289,7 +191,7 @@
If you are more experienced or demanding, you can always take a look at the customization section to cook up a flavor of your own custom-tailored to your needs!
-
+
diff --git a/docs/input_control.html b/docs/input_control.html
index 3202c2e..079ad31 100644
--- a/docs/input_control.html
+++ b/docs/input_control.html
@@ -1,103 +1,46 @@
-
+
-
-
- mini.css - Input Control
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ mini.css - Input Control
+
+
+
+
+
+
+
+
+
- mini.css
-
-
- Core
- Grid
- Navigation
- Input Control
- Table
- Card
- Tab
- Contextual
- Progress
- Utility
-
-
+ mini.css
+
+
+
+ Core Grid
+ Navigation Input Control
+ Table Card
+ Tab Contextual
+ Progress Utility
+
@@ -126,9 +69,7 @@
-
- Forms & input
-
+ Forms & input
-
-
+
@@ -214,8 +142,7 @@
Using the <fieldset> and <legend> elements is highly recommended for a better presentational effect. Using these elements is a matter of personal preference, however try to keep your forms consistent (i.e. either use them in all forms or no forms as to not confuse users).
Some <input> elements, such as date & time, color and range types, are not supported and, as a result, do not have a default style defined for them. You can define said styles manually if you need to use them in your website or app.
Checkboxes and radio buttons are not stylized the same way as most of the other elements, nor do they follow the exact same stucture for layout. Please refer to the next section for information on how to use those.
-
-
+
<form>
@@ -306,9 +233,7 @@
-
- Checkboxes & radio buttons
-
+ Checkboxes & radio buttons
@@ -343,8 +268,7 @@
Notes
- Checkboxes and radio buttons are fully accessible. However, if not provided with a label, they are not visible to users, but only to screen readers.
-
-
+
<div class="input-group">
@@ -397,9 +321,7 @@
-
- Buttons & button groups
-
+ Buttons & button groups
@@ -411,11 +333,7 @@
Button group
-
+
All button types have been stylized by default, while maintaining accessiblity. Simply add any <button> or an <input> with a button type (i.e. "button", "submit" or "reset") and they will be styled accordingly. You can also use the .button class for links, labels and other elements of your choice to make them look like buttons.
@@ -446,8 +364,7 @@
If you want more color or size variants for your buttons, check out the customization page.
The .button-group component is compatible with modern browsers, but might not display properly in older browsers.
.button-groups will display as a horizontal container with all their buttons in one row on medium-sized and larger displays, however they will collapse into a column view for smaller displays.
+
<button class="inverse small">Small inverse button</button>
@@ -483,9 +400,7 @@
-
- File upload buttons
-
+ File upload buttons
@@ -507,8 +422,7 @@
- The icon displayed in the example above is not part of the button styling.
- File upload buttons do not change their text to the name of the file after the user has selected a file to upload. You can, however, add this functionality using a few lines of Javascript.
-
-
+
<div class="input-group">
diff --git a/docs/modules.html b/docs/modules.html
index 2fcb538..142291e 100644
--- a/docs/modules.html
+++ b/docs/modules.html
@@ -1,63 +1,33 @@
-
+
-
- mini.css - Modules
-
-
-
-
-
-
-
-
-
-
-
-
+
+ mini.css - Modules
+
+
+
+
+
+
+
+
+
-
- mini.css
-
+
+ mini.css
+
+
diff --git a/docs/navigation.html b/docs/navigation.html
index 3c64ee7..430825c 100644
--- a/docs/navigation.html
+++ b/docs/navigation.html
@@ -1,103 +1,45 @@
-
+
-
-
- mini.css - navigation
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ mini.css - navigation
+
+
+
+
+
+
+
+
+
- mini.css
-
-
- Core
- Grid
- Navigation
- Input Control
- Table
- Card
- Tab
- Contextual
- Progress
- Utility
-
-
+ mini.css
+
+
+
+ Core Grid
+ Navigation Input Control
+ Table Card
+ Tab Contextual
+ Progress Utility
+
@@ -126,22 +68,15 @@
-
- Header
-
+ Header
-
@@ -162,8 +97,7 @@
- The
<header> element is partially responsive on smaller screen devices. More specifically, when the content inside it exceeds the width of the viewport (ie. overflows to the right), users will be able to scroll horizontally in order to see the rest of the menu.
- The
<header> element does not display as fixed by default. You can, however, alter this CSS property manually, if you so desire.
-
-
+
<header>
@@ -193,26 +127,17 @@
-
- Navigation bar
-
+ Navigation bar
-
-
+
-
+ Home News
+ New Courses Certifications
+ Events Course Showcase - 12th, Dec
+ Staff AMA - 16th, Dec Policy Update
+ About Contact
+
@@ -237,8 +162,7 @@
- Subcategories and their links support a depth of 2 by default. If, however, you need more than that, we recommend you check the customization page for instructions on how to add more depth to the vertical navigation.
- We strongly suggest you do not add irrelevant things inside your
<nav> element, like images or text that are not part of the navigation menu.
-
-
+
<div class="col-sm-12 col-sm-last col-md-3 col-md-first">
@@ -256,17 +180,11 @@
-
- Footer
-
+ Footer
-
-
-
-
+
+
diff --git a/docs/progress.html b/docs/progress.html
index 73155aa..9bea5c6 100644
--- a/docs/progress.html
+++ b/docs/progress.html
@@ -1,103 +1,48 @@
-
+
-
-
- mini.css - Progress
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ mini.css - Progress
+
+
+
+
+
+
+
+
+
- mini.css
-
-
- Core
- Grid
- Navigation
- Input Control
- Table
- Card
- Tab
- Contextual
- Progress
- Utility
-
-
+ mini.css
+
+
+
+ Core Grid
+ Navigation Input Control
+ Table Card
+ Tab Contextual
+ Progress Utility
+
@@ -126,17 +71,12 @@
-
- Basic progress bar
-
+ Basic progress bar
- Process is 0% complete!
-
- Process is 45% complete!
-
- Process is 100% complete!
-
+ Process is 0% complete!
+ Process is 45% complete!
+ Process is 100% complete!
To create a progress bar, use the <progress> HTML element, specify the preset maximum of max="1000" and set a value between 0 and 1000. Update your <progress> element using some Javascript code, by changing its value to any integer in the same range.
@@ -151,8 +91,7 @@
- We made sure that the
<progress> element displays properly on all modern browsers, using browser-specific rules. However, there might be some irregularities with older browsers, especially legacy versions of Internet Explorer.
- If the preset
max="1000" does not suit your needs, you should check the customization page for instructions on how to set your own maximum value for the <progress> element.
-
-
+
<progress value="80" max="100"></progress>
@@ -170,17 +109,12 @@
-
- Progress bar variants
-
+ Progress bar variants
- Secondary process is 60% complete!
-
- Tertiary process is 30% complete!
-
- Nano progress bar is 75% filled!
-
+ Secondary process is 60% complete!
+ Tertiary process is 30% complete!
+ Nano progress bar is 75% filled!
Inline progress bar:
@@ -196,8 +130,7 @@
Notes
- If you want to add your own custom size classes for
<progress> elements, check the customization page for instructions.
-
-
+
<progress class="nano secondary" value="800" max="1000"></progress>
@@ -219,15 +152,11 @@
-
- Donut spinner
-
+ Donut spinner
-
-
-
-
+
+
@@ -240,8 +169,7 @@
Notes
- The
.spinner-donut is an animated component, meaning that if a browsers does not support animation, this element might display incorrectly.
-
-
+
<p>Loading... <span class="spinner-donut"></span></p>
@@ -259,17 +187,11 @@
-
- Donut spinner variants
-
+ Donut spinner variants
-
-
-
-
-
-
+
+
diff --git a/docs/quick_reference.html b/docs/quick_reference.html
index 6c130eb..db942f9 100644
--- a/docs/quick_reference.html
+++ b/docs/quick_reference.html
@@ -1,85 +1,37 @@
-
+
-
-
- mini.css - Quick Reference
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ mini.css - Quick Reference
+
+
+
+
+
+
+
+
+
-
- mini.css
-
+
+ mini.css
+
+
diff --git a/docs/tab.html b/docs/tab.html
index 18fdf15..ac6bfed 100644
--- a/docs/tab.html
+++ b/docs/tab.html
@@ -1,103 +1,45 @@
-
+
-
-
- mini.css - Tab
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ mini.css - Tab
+
+
+
+
+
+
+
+
+
- mini.css
-
-
- Core
- Grid
- Navigation
- Input Control
- Table
- Card
- Tab
- Contextual
- Progress
- Utility
-
-
+ mini.css
+
+
+
+ Core Grid
+ Navigation Input Control
+ Table Card
+ Tab Contextual
+ Progress Utility
+
@@ -126,36 +68,22 @@
-
- Basic syntax
-
+ Basic syntax
-
- Tab 1
- This is the first tab's content.
-
+ Tab 1
This is the first tab's content.
-
- Tab 2
- This is the second tab's content.
-
+ Tab 2
This is the second tab's content.
-
- Tab 3
- This is the third tab's content.
-
+ Tab 3
This is the third tab's content.
-
- Tab 4
- This is the fourth tab's content.
-
+ Tab 4
This is the fourth tab's content.
@@ -200,8 +128,7 @@
Tabs are compatible with modern browsers, but might not display properly in older browsers.
Remember to add the checked attribute to one of your <input>s if you want that tab to be the one displayed by default. If none is specified, the first one will be displayed.
The height of the tab container's panel area is 400px. If you want to change this default size, please check out the customization page.
-
-
+
<div class="tabs">
@@ -256,36 +183,24 @@
-
- Stacked tabs
-
+ Stacked tabs
-
- Section 1
- This is the first accordion section's content.
-
+ Section 1
This is the first accordion section's content.
-
- Section 2
- This is the second accordion section's content.
-
+ Section 2
This is the second accordion section's content.
-
- This is the first collapse section's content.
-
+ This is the first collapse section's content.
-
- This is the second collapse section's content.
-
+ This is the second collapse section's content.
@@ -325,8 +240,7 @@
.stacked tabs can be used with either checkboxes or radio buttons.- You can mix and match checkboxes and radio buttons, but we suggest you do not do so, unless you think it is necessary for your design.
-
-
+
<div class="tabs stacked">
diff --git a/docs/table.html b/docs/table.html
index ce2fc7b..4b5870c 100644
--- a/docs/table.html
+++ b/docs/table.html
@@ -1,136 +1,51 @@
-
+
-
-
- mini.css - Table
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ mini.css - Table
+
+
+
+
+
+
+
+
+
- mini.css
-
-
- Core
- Grid
- Navigation
- Input Control
- Table
- Card
- Tab
- Contextual
- Progress
- Utility
-
-
+ mini.css
+
+
+
+ Core Grid
+ Navigation Input Control
+ Table Card
+ Tab Contextual
+ Progress Utility
+
@@ -159,9 +74,7 @@
-
- Basic syntax & responsiveness
-
+ Basic syntax & responsiveness
@@ -169,28 +82,12 @@
People
-
- Name
- Surname
- Alias
-
+ Name Surname Alias
- Chad
- Wilberts
- MrOne
-
-
- Adam
- Smith
- TheSmith
-
-
- Sophia
- Canderson
- Candee
-
+ Chad Wilberts MrOne Adam Smith TheSmith Sophia Canderson Candee
@@ -198,28 +95,12 @@
People
-
- Name
- Surname
- Alias
-
+ Name Surname Alias
- Chad
- Wilberts
- MrOne
-
-
- Adam
- Smith
- TheSmith
-
-
- Sophia
- Canderson
- Candee
-
+ Chad Wilberts MrOne Adam Smith TheSmith Sophia Canderson Candee
@@ -269,8 +150,7 @@
- Tables are responsive by default and will change to a card-like view below a certain screen width. If you'd rather not make them responsive, check the last section on this page.
- Specifying the
data-label attribute is essential for the responsive version of a table to display properly. You can, however, use a value different from the column's name. Make sure it does not confuse your users, though.
-
-
+
<tr>
@@ -329,33 +209,13 @@
People
-
- Name
- Surname
- Alias
-
+ Name Surname Alias
- Chad
- Wilberts
- MrOne
-
-
- Adam
- Smith
- TheSmith
-
-
- Sophia
- Canderson
- Candee
-
-
- Nick
- Thomson
- NickThom
-
+ Chad Wilberts MrOne Adam Smith TheSmith Sophia Canderson Candee Nick Thomson NickThom
@@ -417,41 +277,17 @@
-
- Table variants & matrices
-
+ Table variants & matrices
-
-
-
+
Star Wars Character Alignment Table
-
- Lawful
- Neutral
- Chaotic
-
-
- Good
- Yoda
- Luke Skywalker
- Chewbacca
-
-
- Neutral
- C-3PO
- Boba Fett
- Han Solo
-
-
- Bad
- Darth Vader
- Emperor Palpatine
- Jabba the Hutt
-
+ Lawful Neutral Chaotic Good Yoda Luke Skywalker Chewbacca Neutral C-3PO Boba Fett Han Solo Bad Darth Vader Emperor Palpatine Jabba the Hutt
@@ -460,7 +296,7 @@
Tables are responsive by default, however you can disable this functionality for one or more tables (normal or .horizontal), using the .preset class. This class can also be used for a multitude of things, like dealing with tables not allowing you to have <th> elements inside the <tbody> element, building matrices (i.e. tables with a header column and a header row) etc. Finally, you can make your tables use a different color for every other row, using the .striped class.
Sample code
The sample code is a bit lengthy, so we hid it by default to make it easier for mobile device users to read this page. Click or tap on Show sample code below to see the code sample for this example. By the way, we present a sample for a matrix table in he first example, but you can use the same principles and classes to create any table layout you wish.
-
+
@@ -510,8 +346,7 @@
- Making a table
.striped also affects the color of the cards in their responsive view on mobile devices.
- If you create a
.preset table, which you do not want to alter via Javascript to be responsive at any time in the future, you can omit the data-label attributes.
-
-
+
<style>
diff --git a/docs/utility.html b/docs/utility.html
index e460376..64279ca 100644
--- a/docs/utility.html
+++ b/docs/utility.html
@@ -1,103 +1,45 @@
-
+
-
-
- mini.css - Utility
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+ mini.css - Utility
+
+
+
+
+
+
+
+
+
- mini.css
-
-
- Core
- Grid
- Navigation
- Input Control
- Table
- Card
- Tab
- Contextual
- Progress
- Utility
-
-
+ mini.css
+
+
+
+ Core Grid
+ Navigation Input Control
+ Table Card
+ Tab Contextual
+ Progress Utility
+
@@ -126,9 +68,7 @@
-
- Visibility helpers
-
+ Visibility helpers
You can hide content for all your users, using the default hidden attribute. However, we provide you with the .hidden class for the same purpose, as well as the .visually-hidden class which will make your content hidden, except for screen readers.
@@ -141,8 +81,7 @@
Notes
- Both classes utilize
!important declarations, so be careful when and how to use them.
-
-
+
<span class="hidden visually-hidden">Not a good idea</span>
@@ -156,9 +95,7 @@
-
- Generic borders & shadows
-
+ Generic borders & shadows
@@ -187,8 +124,7 @@
All of these classes utilize !important declarations, so be careful when and how to use them.
The .bordered class was originally created with elements such as buttons in mind, to allow users highlighting certain elements in their designs, without having to change any default styles.
All of the above classes can be used with most modern HTML elements.
-
-
+
<span class="bordered rounded shadow-small">Stylized element</span>
@@ -208,9 +144,7 @@
-
- Responsive sizing & spacing classes
-
+ Responsive sizing & spacing classes
Helper classes for the padding and margin attributes are provided in the form of .responsive-margin and .responsive-padding classes. Both of these classes are responsive, allowing you to collapse the spacing and size of elements on different displays to make better use of the device's viewport.
@@ -224,8 +158,7 @@
- If the default values of these classes are not suited to your needs, check out the customization page.
- Both classes utilize
!important declarations, so be careful when and how to use them.
-
-
+
<div class="responsive-padding responsive-margin">Responsive padding and margin</div>
@@ -239,19 +172,11 @@
-