+
+ mini.css is one of the lightest front-end frameworks on the web: about 5KB gzipped. This helps your websites load faster, while still looking great!
+mini.css is built in such a way that it will look great on most devices and especially phones and tablets. This allows you to easily tailor your websites to different users!
+mini.css gives you the power of customization, using its fully moddable flavors. This will give you control over how your websites look and allow great designs to stand out!
+Below you can see a showcase of the features and styles included in the default flavor of mini.css.
+This is some quoted text from elsewhere.
This is a paragraph with some sample text. Did you know mini.css v2.0 is codenamed Fermion? No? Well, now you do! 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!. We use highlights quite a lot as well. Apart from the primary color, you can also try the secondary and tertiary colors. If you wanna be fancy, maybe use a tag or a bubble. All of these work well inside headings and the like. To finish our typography tour, check out the preformatted code block below.
function sum(num1, num2) {
+ var num3 = num1 + num2;
+ console.log('Result: ' + num3);
+}
+Alerts are important
+Hi
+Alerts are important
+Alerts are important
+Alerts are important
+mini.css uses the Flexible Layout Module (commonly known as flexbox) to create a grid system for easy page layout. The grid system is not the most feature-rich one, but it contains all the essential components. The container of the grid is fluid by default, meaning it will adjust to fill its parent container. Rows are easily created using the row class and columns can be created using the usual col-SZ-XX syntax where SZ and XX are replaced by a screen size and a number of vertical columns respectively. Columns can also scale themselves automatically if you omit the number of vertical columns in the class name. Similarly, you can use offsets with the col-SZ-offset-XX syntax. The default grid is separated into 12 vertical columns. You can see some examples below.
mini.css adds modern styles for many of the HTML elements.
Tables are responsive and use the data-label attribute to specify the header name for each cell, so that they can be displayed as cards on mobile devices. Here's an example (resize to see mobile display if you are on desktop):
| Name | +Surname | +Handle | +|
|---|---|---|---|
| John | +Smith | +johnsmith@mail.com | +SmithereensJohn | +
| Lisa | +Cody | +codyl@mail.com | +Codyl | +
| Max | +Roberts | +terminus@mail.com | +T3rm1nu5 | +
| Adam | +Leeks | +leekt@mail.com | +Leekt | +
| Name | +Surname | +Handle | +|
|---|---|---|---|
| John | +Smith | +johnsmith@mail.com | +SmithereensJohn | +
| Lisa | +Cody | +codyl@mail.com | +Codyl | +
| Max | +Roberts | +terminus@mail.com | +T3rm1nu5 | +
| Adam | +Leeks | +leekt@mail.com | +Leekt | +
Forms are inline by default and textual <input>, <textarea> and <select> elements have been pre-styled. To make inputs take up more space than their default, simply add something like width="100%". You can also utilize the grid system to align forms to your liking. Below are some examples:
Use the <header>, <nav> and <footer> elements to add navigational elements to your page. The <header> element displays as a non-fixed horizontal bar and can contain a logo along with a set of links or buttons. Style any links using the .button class to give them the proper style. it is suggested that you place the <header> element outside of your grid system's .container to avoid styling problems. You can see an example below:
<nav> implements the traditional navigation sidebar, using simple styling. The sidebar is not fixed by default and it has no specific width set, so you can use the grid system or some Javascript code to show or hide it and decide its size. Use simple links and <span> elements to add links and categories. The .sublink-1 and .sublink-2 classes can be added to create links in categories and subcategories. Below you can see an example (sidebar is displayed next to text on medium-large displays, but fills the whole display on phones and smaller screens):
This is some sample content that will show next to the navigation menu. Which means that we'll have to present some more fun facts about mini.css to occupy this space. Well, here's a couple:
+Finally, use the <footer> element to create your footer. Add links, images, credits. This element is not meant for main navigation, but many pages use it for some kind of navigation or other. Try to place the <footer> outside of the grid system for best results. Below is an example:
Buttons are already pre-styled in mini.css to allow for consistent presentation. However, there is a lot you can do to customize them, as the pre-applied styles are mostly overrides for the default presentation styles. Pre-styled buttons and other button-like inputs can be seen below:
+ + + + + + Link button +Button groups can also be created, utilising the .button-group class. Simply add a set of buttons in it and you're good to go. Check it out below:
File inputs are a sore spot in most frameworks, as they cannot be easily stylized using CSS. mini.css deals with the problem, using a workaround involving labels that use the button class, which applies the exact same style to those labels. Just link it to the <input type="file"> element of your choice and you're good to go. For example:
There are also different kinds of buttons, specifically primary, secondary and tertiary, as well as small and large buttons. All of these types can be specified as classes. For example:
Checkboxes and radio buttons are styled using the checkbox hack, while keeping things simple and adding just the needed consistency for those input types. Place an <input> (checkbox or radio button) and a linked <label> inside an .input-group and the controls will style themselves. To allow accessibility for those controls, you can use tabindex="0" on the <input> elements only. You can see some examples below:
The <progress> element is used for progress bars. There are three color variants (default, secondary and tertiary), as well as an inline class that displays the progress bar as an inline block, along with a nano variant for tiny progress bars. Below are some examples:
Inline progress:
+Nano progress:
+ +The utilities provided with mini.css aim to solve common problems and allow ease of use whenever possible. Some of them are showcased below:
+Generic border (using black outline and opacity of 0.25), Radial border style 1 & 2 .
+ +You can also use the .hidden class to hide any element you want or the .visually-hidden class for elements that need to be invisible to users but exist in the accessibility tree, set floats to left or right using the .float-left and .float-right classes or clear floats using the .clearfix class, which implements the micro clearfix by Nicolas Gallagher. Finally, use the .center-block class to make an element center and display as a block.
Cards are some of the most modern and stylish content containers and are widely used in many website types. mini.css provides you with the .card class, along with a handful of pre-built styles to help you create beatiful cards for your pages. Note that this module is heavily dependent on the grid system module. To use the cards, simply replace the grid's columns with your cards and you're ready to go. Note that in the examples below, we try to showcase as many features as possible, but there might be something we missed. Also, the .row which acts as the contaienr for the cards has the .cards class applied to it, which helps align the cards horizontally, by automatically shrinking or expanding the spaces between them.
+
+ This cat is pretty amazing, right? Just look at it!
+Cards are pretty awesome, as you can see.
+This is a card with three text sections.
+By the way, here's a link to the mini.css project repository on Github, just in case.
+<button>s and other similar elements as card sections. Like the button below.Cards resize automatically to fit any and all content, allowing you to do anything you want with them. They also align the content automatically, so your sections will always look pretty. Nothing to worry about anymore! By the way, this is a .primary card.
.dark headingTotally normal text.
+.primary section text.
Yes, .fluid cards are also available! You might want to use these in combination with the grid system's columns to achieve a better effect. There's an example below, after the other size variants for the cards. Have a look.
There are also .small cards. Tiny, cute, small cards.
And, of course, there are .large cards.
Because you'll need them.
+ These cards work quite well together, no matter the size. Well, except the .fluid ones which should be used together, without the other cards. Unless you want a fluid card to act as a separator of sorts, which might be desirable. Just use them in columns, like we show you below, it's the best way. By the way, this was a .double-padded section.
+
This is the first card. It is placed inside a column.
+This is the second card. It is placed inside a larger column. On smaller displays these will display like a list of cards.
+This is the third card. It is placed inside a column.
+mini.css provides you with a very modern tab component, that can easily be used for multiple things, like tabbed navigation, single collapses, accordion collapses and even image carousels. This might sound like a lot to do with one component, but the design behind it allows it to be truly versatile and replace all those components. To use the tab component, simply create a container using a <div> with the .tabs class. Populate it with <input type="radio">s, each followed by a linked <label> and another <div> which includes the tab's contents. If you want to create an accordion add the .stacked class to the container. The same thing works for collapses as well. Accordions and collapses can also use <input type="checkbox">s instead. Carousels can be created similarly, remember to add images to the inner content <div> and you're good to go. You can see some examples below:
This is some content you can hide and show at will using the above label. Isn't that useful?
+Yes, this is still based on tabs. Isn't it wonderful how many things you can accomplish using one simple component?
+Accordions are very similar to collapses. Just add multiple <input type="radio">s, along with their content and you are ready to go.
This is the first tab's content.
+This is the second tab's content.
+This is the third tab's content.
+This is the fourth tab's content.
+
+
+
+ Finally, mini.css provides you with a couple of spinner variations, .spinner-dot and .spinner-donut. Simply apply these to a <div> and you are ready to go. Both are showcased below:
This is some text with a .spinner-dot spinner. These spinners are designed with normal paragraphs in mind, so some tweaking of the component itself and/or the way it is presented might be requird. Loading looks like this
And this here is a .spinner-donut spinner. It is more versatile and it can also use a couple of variants like .secondary and .tertiary, as shown below:
elements +$list-margin: 4px 10px 10px; // Margin for
+$blockquote-fore-color: $fore-color; // Text color for+$blockquote-margin: 8px 10px; // Margin for+$blockquote-padding: 6px 10px 24px; // Padding for+$blockquote-sidebar-style: 3px solid #616161; // Style for the sidebar of+$blockquote-cite-font-size: 0.85em; // Font size for citation of+$blockquote-cite-fore-color: #616161; // Text color for citation of+$blockquote-cite-left-position: 10px; // Left padding for citation of+$blockquote-cite-bottom-position: // Bottom padding for citation of+ 0; +$blockquote-border-style: 0; // Border style for+$blockquote-border-radius: 0 2px 2px 0; // Border radius for+$blockquote-box-shadow: // Box shadow for+ 0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); +$use-default-code-fonts: false; // Should default font choice (monospace) be + // used for code elements? (`true`/`false`) [6] +$code-font-family: '\"Inconsolata\", monospace, monospace'; // Fonts for code elements if not default +$code-element-padding: 2px 4px; // Padding for+$code-element-fore-color: $fore-color; // Text color for+$code-element-back-color: #e0e0e0; // Background color for+$code-element-border-style: 0; // Border style for+$code-element-border-radius: 2px; // Border radius for+$code-element-box-shadow: // Box shadow for+ 0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); +$pre-element-padding: 12px; // Padding for+$pre-element-fore-color: $code-element-fore-color; // Text color for+$pre-element-back-color: $code-element-back-color; // Background color for+$pre-element-border-style: 0; // Border style for+$pre-element-border-radius: 0 2px 2px 0; // Border radius for+$pre-element-margin: 8px 10px; // Margin for+$pre-element-box-shadow: // Box shadow for+ 0 1px 3px rgba(0,0,0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); +$add-pre-element-sidebar: true; // Should a fancy sidebar be added to the + // left side of(`true`/`false`) [7] +$pre-element-sidebar-style: 3px solid #1565c0; // Style of the sidebar of+$kbd-element-padding: 2px 4px; // Padding for +$kbd-element-fore-color: #fafafa; // Text color for +$kbd-element-back-color: $fore-color; // Background color for +$kbd-element-border-style: 0; // Border style for +$kbd-element-border-radius: 2px; // Border radius for +$kbd-element-box-shadow: // Box shadow for + 0 1px 2px rgba(0,0,0, 0.1), 0 1px 1px rgba(0, 0, 0, 0.15); +$style-samp-element: false; // Should styles for be included? + // (`true`/`false`) [8] +//$samp-element-padding: 2px 4px; // Padding for +//$samp-element-fore-color: $fore-color; // Text color for +//$samp-element-back-color: #2196f3; // Background color for +//$samp-element-border-style: 0; // Border style for +//$samp-element-border-radius: 2px; // Border radius for +$include-dfn-fix: true; // Should the fix for Android 4.3 concerning + // be included (`true`/`false`) [9] +$small-font-size: 75%; // Font size for elements +$sup-font-size: 75%; // Font size for elements +$sub-font-size: 75%; // Font size for elements +$sup-top: -8px; // top +$sub-bottom: -4px; // bottom +$link-fore-color: #0277bd; // Text color for +$link-visited-fore-color: #01579b; // Text color for visited +$link-font-weight: 500; // Font weight for +$apply-link-underline: true; // Should an underline be applied to all + // elements? (`true`/`false`) [10] +$apply-link-hover-fade: true; // Should the :hover and :focus state of + // elements use fade-out instead of a different + // color (`true`/`false`) [11] +//$link-hover-fore-color: #0288d1; // Text color for when hovered or focused +// Notes: +// [1] - The value $base-root-font-size should be in `px` only! This rule is very important, as it will determine the root +// element's font sizing. +// [2] - The value of $base-font-size will only be used if the value of $apply-defaults-to-all is set to `true` (see [3]). +// This is due to the fact that applying the value of it on the root element again will overwrite the value of +// $base-root-font-size (see [1]). The value of this variable should be set in either `em` or `rem`. +// [3] - It is recommended to set the value of $apply-defaults-to-all to `true`, unless you want to apply extra styling +// to elements manually. +// [4] - If the value of $make-heading-smalltext-block is `true` the elements in headings will be displayed below +// the main heading and the 2 values specified below will apply. +// [5] - If $horizontal-rule-fancy-style is set to `true` the value of $horizontal-rule-border-style will not be used and +// a gradient with the style specified in $horizontal-rule-fancy-gradient will be applied instead. +// [6] - If the value of $use-default-code-fonts is set to `false` the value of $code-font-family will be used. `true` +// will apply the proper fix to use monospace font without any problems on all browsers. +// [7] - if the value of $add-pre-element-sidebar is set to true, the style specified in $pre-element-sidebar-style will +// be applied as a left border for theelements. +// [8] - If the value of $style-samp-element is set to `false`, no styling will be included in the final CSS file for +// `samp` elements. Otherwise, the styling defined in the $samp-... variables will be applied. +// [9] - If the value of $include-dfn-fix is set to `true` a styling fix will be applied, so that the elements are +// displayed properly on older versions of Android (4.3-) in italics. Otherwise, said fix will not be included. +// [10] - If the value of $apply-link-underline is set to `true`, an underline will be applied to the link in its normal +// color, as defined in $link-fore-color. +// [11] - If `$apply-link-hover-fade` is set to `true`, a fading transition will be used for the link when hovered over or +// focused. Otherwise, the color specified in $link-hover-fore-color will be used. +// Variables for grid elements +$use-four-step-grid: false; // Should the old 4-step grid system be used + // instead of the new (`true`/`false`) [1] +$grid-container-name: 'container'; // Class name for the grid container +$grid-container-side-padding: 10px; // Padding for the grid container (left and right only) +$grid-row-name: 'row'; // Class name for the grid's rows +$grid-column-prefix: 'col'; // Class name prefix for the grid's columns +$grid-column-offset-suffix: 'offset'; // Class name suffix for the grid's offsets +$grid-order-normal-suffix: 'normal'; // Class name suffix for grid columns with normal priority +$grid-order-first-suffix: 'first'; // Class name suffix for grid columns with highest priority +$grid-order-last-suffix: 'last'; // Class name suffix for grid columns with lowest priorty +$grid-column-count: 12; // Number of columns in the grid (integer value only) +$grid-column-padding: 0 4px; // Padding for the columns of the grid +//$grid-extra-small-prefix: 'xs'; // Extra small screen class prefix for grid +//$grid-small-breakpoint: 480px; // Small screen breakpoint for grid +$grid-small-prefix: 'sm'; // Small screen class prefix for grid +$grid-medium-breakpoint: 768px; // Medium screen breakpoint for grid +$grid-medium-prefix: 'md'; // Medium screen class prefix for grid +$grid-large-breakpoint: 1280px; // Large screen breakpoint for grid +$grid-large-prefix: 'lg'; // Large screen class prefix for grid +// Notes: +// [1] - If the value of $use-four-step-grid is `true`, the grid system will contain 4 breakpoints instead of 3, along with +// the needed styles. In this case, values should be specified for $grid-extra-small-prefix and $grid-small-breakpoint. +// Variables for navigational elements +$header-height: 44px; // Height for+$header-back-color: #263238; // Background color for +$header-fore-color: #fafafa; // Text color for +$header-border-style: 0; // Border style for +$header-margin: 0; // Margin for +$header-padding: 2px 8px; // Padding for +$header-box-shadow: // Box shadow for + 0 2px 4px rgba(0,0,0, 0.18), 0 2px 3px rgba(0, 0, 0, 0.26); +$header-logo-name: 'logo'; // Class name for 's logo +$header-logo-font-size: 1.75em; // Font size for 's logo +$header-logo-line-height: 1.2; // Line height for 's logo +$header-logo-margin: 1px 6px 1px 1px; // Margin for 's logo +$header-logo-padding: 3px 0 0; // Padding for 's logo +$header-link-hover-color: #37474f; // Hover color for 's links +$header-link-margin: 2px 0 0; // Margin for 's links +$nav-back-color: #eceff1; // Background for