diff --git a/README.md b/README.md index 85de9fd..356b9e6 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ You have 4 options when it comes to setting up **mini.css**: 3. [Use Rawgit](#method-3-use-rawgit) 4. [Use cdnjs](#method-4-use-cdnjs-preferred-for-older-releases) (preferred for older releases) -For instructions on how to use, best practices, templates and other usage information, please visit the framework's [documentation](https://chalarangelo.github.io/mini.css/modules.html). +For instructions on how to use, best practices, templates and other usage information, please visit the framework's [documentation](http://minicss.org/modules). #### Method 1: Use a package manager (recommended) diff --git a/docs/card.html b/docs/card.html index 0e2f727..825df9f 100644 --- a/docs/card.html +++ b/docs/card.html @@ -28,54 +28,54 @@
- + - - - + + +  Github
@@ -90,11 +90,11 @@

Quick overview

-

The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The card module seeks to help deal with this problem, by utilizing the Flexbox Layout in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile grid module to deliver the best experience on any device.


+

The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The card module seeks to help deal with this problem, by utilizing the Flexbox Layout in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile grid module to deliver the best experience on any device.


Quick start

-

To use the card module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the card module is heavily dependent on the grid module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:

+

To use the card module, simply include the link to the flavor you are using and start writing your HTML page as usual. Remember that the card module is heavily dependent on the grid module, so you might want to first familiarize with its basic layout. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

@@ -117,7 +117,7 @@
-

To start using cards in your layout, you need to be somewhat familiar with the grid module, so if you aren't, take a minute to read how its basic layout works. The basic syntax for cards is composed of three components, presented below in the order they should be added to the DOM tree:

+

To start using cards in your layout, you need to be somewhat familiar with the grid module, so if you aren't, take a minute to read how its basic layout works. The basic syntax for cards is composed of three components, presented below in the order they should be added to the DOM tree:

  1. At the outermost level of the card layout syntax is a .row, which serves as a wrapper for all the cards inside it.
  2. Inside the .row, cards are defined as <div> elements of the .card class.
    3. @@ -248,7 +248,7 @@
  3. The .media class might not be well supported in older browsers, especially legacy versions of Internet Explorer.
  4. Due to the .media class using object-fit, you might want to use a polyfill for better browser support, especially if you are targeting Microsoft browsers. We recommend this one for images and this one for videos.
  5. Depending on the source website, some embedded videos might not display properly inside a .media section.
    6. -
  6. The .media class has a preset size of height: 200px. If you want to customize this, you should check the customization page for instructions.
    7. +
  7. The .media class has a preset size of height: 200px. If you want to customize this, you should check the customization page for instructions.
@@ -363,7 +363,7 @@

Notes

<div class="card warning errors">
@@ -380,7 +380,7 @@
-

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

+

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

diff --git a/docs/contextual.html b/docs/contextual.html index 65413aa..e73dffd 100644 --- a/docs/contextual.html +++ b/docs/contextual.html @@ -31,54 +31,54 @@
- + - - - + + +  Github
@@ -186,7 +186,7 @@

Notes

  • Toast 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.
    • -
  • If you want to create your own color or size variants for toast messages, check out the customization page.
    • +
  • If you want to create your own color or size variants for toast messages, check out the customization page.
@@ -220,7 +220,7 @@

Notes

  • Tooltips are built to be accessible and should display properly on screenreaders.
    • -
  • If you are not satisfied with the default tooltip colors, please check out the customization page for instuctions on how to create your own tooltip variants.
    • +
  • If you are not satisfied with the default tooltip colors, please check out the customization page for instuctions on how to create your own tooltip variants.
  • Remember to always add the aria-label attribute, otherwise your tooltip will not have any text to show.
@@ -266,7 +266,7 @@

Notes

    -
  • You can use any styles you want from the card module to create different dialogs based on context (e.g. alerts, warnings etc.).
    • +
  • You can use any styles you want from the card module to create different dialogs based on context (e.g. alerts, warnings etc.).
  • Remember to add a <label> linked to your modal dialog's <input type="checkbox"> or use Javascript to alter its state, otherwise users will not be able to close the dialog.
  • You can place your modal dialog anywhere on your page, as long as the structure is not altered. You can also toggle it from anywhere on a page.
@@ -300,7 +300,7 @@
-

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

+

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

diff --git a/docs/core.html b/docs/core.html index 03ccfab..3f4c7a9 100644 --- a/docs/core.html +++ b/docs/core.html @@ -28,54 +28,54 @@
- + - - - + + +  Github
@@ -119,7 +119,7 @@

Notes

    -
  • Fluid typography is also included, but not enabled by default. If you want to try it out, check out the out the customization page.
    • +
  • Fluid typography is also included, but not enabled by default. If you want to try it out, check out the out the customization page.
@@ -246,7 +246,7 @@
-

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

+

If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

diff --git a/docs/customization/card.html b/docs/customization/card.html index ae94e06..a997217 100644 --- a/docs/customization/card.html +++ b/docs/customization/card.html @@ -30,52 +30,52 @@
- + - - - + + +  Github
@@ -89,7 +89,7 @@

Quick overview

-

The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The card module seeks to help deal with this problem, by utilizing the Flexbox Layout in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile grid module to deliver the best experience on any device.


+

The main content of a website or web app needs to be easy to access and well organized no matter the nature of the content itself. The card module seeks to help deal with this problem, by utilizing the Flexbox Layout in order to provide general-purpose containers that help you present the information you want in the best possible way. Cards are designed in a very modern way, self-aligning and structuring their content based on your needs, while also being fully responsive to changes and compatible with the versatile grid module to deliver the best experience on any device.


Quick start

@@ -315,7 +315,7 @@
-

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

+

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

diff --git a/docs/customization/contextual.html b/docs/customization/contextual.html index 3a136bc..2077265 100644 --- a/docs/customization/contextual.html +++ b/docs/customization/contextual.html @@ -29,52 +29,52 @@
- + - - - + + +  Github
@@ -575,7 +575,7 @@
-

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

+

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

diff --git a/docs/customization/core.html b/docs/customization/core.html index 30b2e5d..11cb942 100644 --- a/docs/customization/core.html +++ b/docs/customization/core.html @@ -29,52 +29,52 @@
- + - - - + + +  Github
@@ -517,7 +517,7 @@
-

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

+

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

diff --git a/docs/customization/grid.html b/docs/customization/grid.html index fe66418..fe04f79 100644 --- a/docs/customization/grid.html +++ b/docs/customization/grid.html @@ -31,52 +31,52 @@
- + - - - + + +  Github
@@ -208,7 +208,7 @@
-

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

+

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

diff --git a/docs/customization/index.html b/docs/customization/index.html index 43676a8..2da2962 100644 --- a/docs/customization/index.html +++ b/docs/customization/index.html @@ -28,58 +28,58 @@
- + - - - + + +  Github

Customization

-

mini.css is built in such a way that customization is really simple. You could try out one of the pre-defined flavors, if you want, in order to get used to the framework and build something quickly and easily. However, many projects require custom styles and color palettes, which is when you need to get your hands dirty and start creating your own flavor by customizing an existing one and using mixins and variables to create your own, unique style for your brand or product. This page, along with the rest of the Customization section is aimed at developers who want to tweak the code provided with mini.css to create their own flavors for their projects, as well as active maintainers of the framework and people who just want to understand the inner workings of the codebase.

+

mini.css is built in such a way that customization is really simple. You could try out one of the pre-defined flavors, if you want, in order to get used to the framework and build something quickly and easily. However, many projects require custom styles and color palettes, which is when you need to get your hands dirty and start creating your own flavor by customizing an existing one and using mixins and variables to create your own, unique style for your brand or product. This page, along with the rest of the Customization section is aimed at developers who want to tweak the code provided with mini.css to create their own flavors for their projects, as well as active maintainers of the framework and people who just want to understand the inner workings of the codebase.

Use the menu to quickly jump to the documentation of any module that you want to check out. We strongly recommend, however, that you read the general information provided in this page before you start exploring the modules' code, especially if you are not familiar with the way mini.css is structured.


diff --git a/docs/customization/input_control.html b/docs/customization/input_control.html index 0cbe7d3..ba07e31 100644 --- a/docs/customization/input_control.html +++ b/docs/customization/input_control.html @@ -30,52 +30,52 @@
- + - - - + + +  Github
@@ -655,7 +655,7 @@
-

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

+

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

diff --git a/docs/customization/navigation.html b/docs/customization/navigation.html index 14c38f0..ff8752b 100644 --- a/docs/customization/navigation.html +++ b/docs/customization/navigation.html @@ -29,52 +29,52 @@
- + - - - + + +  Github
diff --git a/docs/customization/progress.html b/docs/customization/progress.html index 7a73817..ef5466d 100644 --- a/docs/customization/progress.html +++ b/docs/customization/progress.html @@ -31,52 +31,52 @@
- + - - - + + +  Github
@@ -381,7 +381,7 @@
-

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

+

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

diff --git a/docs/customization/tab.html b/docs/customization/tab.html index 5aecd9f..9b714d7 100644 --- a/docs/customization/tab.html +++ b/docs/customization/tab.html @@ -29,52 +29,52 @@
- + - - - + + +  Github
@@ -191,7 +191,7 @@
-

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

+

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

diff --git a/docs/customization/table.html b/docs/customization/table.html index ea58f8e..8dd730b 100644 --- a/docs/customization/table.html +++ b/docs/customization/table.html @@ -29,52 +29,52 @@
- + - - - + + +  Github
@@ -222,7 +222,7 @@
-

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

+

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

diff --git a/docs/customization/utility.html b/docs/customization/utility.html index 505938b..c5b475e 100644 --- a/docs/customization/utility.html +++ b/docs/customization/utility.html @@ -29,52 +29,52 @@
- + - - - + + +  Github
@@ -571,7 +571,7 @@
-

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

+

If you want to learn more about customizing mini.css, go back to the customization page or choose a module from the top menu to see its documentation.

diff --git a/docs/flavors.html b/docs/flavors.html index 29c0589..8fbf87f 100644 --- a/docs/flavors.html +++ b/docs/flavors.html @@ -25,17 +25,17 @@
- - - - + + + +  Github
@@ -50,7 +50,7 @@

  • Default mini-default

    <link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css">
    -

    The default flavor for mini.css uses a light gray background and gray-black foreground color. Certain containers, such as cards and tabs use white-gray backgrounds. The grid system has 12 columns and most of the components and modules use sharp corners and light border colors. All of the colors used in this flavor are loosely based on Google's Material design color palette.

    +

    The default flavor for mini.css uses a light gray background and gray-black foreground color. Certain containers, such as cards and tabs use white-gray backgrounds. The grid system has 12 columns and most of the components and modules use sharp corners and light border colors. All of the colors used in this flavor are loosely based on Google's Material design color palette.

    Author: Chalarangelo

    Size: 7 KB

    @@ -59,7 +59,7 @@

  • Dark  View on Codepenmini-dark

    <link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-dark.min.css">
    -

    The dark version of the default flavor, Dark uses a dark gray background with light gray foreground color. All modules are the same as in the default flavor, but with a dark palette, loosely based on Google's Material design color palette.

    +

    The dark version of the default flavor, Dark uses a dark gray background with light gray foreground color. All modules are the same as in the default flavor, but with a dark palette, loosely based on Google's Material design color palette.

    Author: Chalarangelo

    Size: 7 KB

    @@ -93,7 +93,7 @@
    • -

    If you would rather modify one of the pre-defined flavors or create your own, check out our customization page for instructions.

    +

    If you would rather modify one of the pre-defined flavors or create your own, check out our customization page for instructions.

    diff --git a/docs/grid.html b/docs/grid.html index 2afb209..cc0ffad 100644 --- a/docs/grid.html +++ b/docs/grid.html @@ -30,54 +30,54 @@
    - + - - - + + +  Github
    @@ -683,7 +683,7 @@
    -

    If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

    +

    If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

    diff --git a/docs/index.html b/docs/index.html index 3ed7caf..1651386 100644 --- a/docs/index.html +++ b/docs/index.html @@ -62,17 +62,17 @@ Fermion
    - - - - + + + +  Github
    @@ -116,7 +116,7 @@ 
    yarn add mini.css
    bower install mini.css
    -

    After downloading mini.css, pick a Flavor and use it for your project.

    +

    After downloading mini.css, pick a Flavor and use it for your project.


    Alternatively, you can use either GitCDN or RawGit to import the default flavor of mini.css. Simply add one of the following references inside your HTML page's <head> tag:

    <link rel="stylesheet" href="https://gitcdn.link/repo/Chalarangelo/mini.css/master/dist/mini-default.min.css">
    @@ -148,21 +148,23 @@

    mini.css 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, mini.css 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 mini.css.


    What exactly does mini.css provide?

    -

    Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. mini.css provides a handful of very powerful modules that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:

    +

    Many CSS frameworks utilize modules to deliver more components and features, without making it necessary for all developers to include them. mini.css provides a handful of very powerful modules that can do many different things. This way, developers only have to learn a few different HTML structures and patterns, while having the ability to build a lot of interesting things with them. You can see an overview of the modules below:

      -
    • Core - Basic reset and fix rules, based on Normalize.css v5.0.0, typography and common textual element styling
      • -
    • Grid - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as flexbox)
      • -
    • Navigation - Common navigational elements such as headers, footers and navigation bars
      • -
    • Input Control - Form, input element, checkbox, radio button and button styling
      • -
    • Table - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices
      • -
    • Card - Sleek, modern general-purpose content containers, media embedding
      • -
    • Tab - Modern, responsive tabs, accordions and collapses
      • -
    • Contextual - Content highlight element styling, elegant alerts and accessible tooltips
      • -
    • Progress - Modern progress bar styling and spinning progress indicators
      • -
    • Utility - Utilities, visibility helper classes, responsive sizing and breadcrumbs
      • -

    +
  • Core - Basic reset and fix rules, based on Normalize.css v5.0.0, typography and common textual element styling
    • +
  • Grid - Powerful, responsive grid system based on the Flexible Layout Module (commonly known as flexbox)
    • +
  • Navigation - Common navigational elements such as headers, footers and navigation bars
    • +
  • Input Control - Form, input element, checkbox, radio button and button styling
    • +
  • Table - Modern table styling, horizontal and preset tables, table responsiveness for mobile devices
    • +
  • Card - Sleek, modern general-purpose content containers, media embedding
    • +
  • Tab - Modern, responsive tabs, accordions and collapses
    • +
  • Contextual - Content highlight element styling, elegant alerts and accessible tooltips
    • +
  • Progress - Modern progress bar styling and spinning progress indicators
    • +
  • Utility - Utilities, visibility helper classes, responsive sizing and breadcrumbs
    • + +

    While not strictly part of the framework, we have also created component libraries for React and Preact, which will make your development faster and easier, especially if you are developing progressive web apps. You can get started with one of our Javascript libraries here!

    +

    How do I customize mini.css?

    -

    mini.css allows you to easily customize your designs, using Flavors, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the customization section.


    +

    mini.css allows you to easily customize your designs, using Flavors, pre-built color and style variants of the framework. The functionality is the same, but many things like color palettes, spacing and fonts can be easily changed by the community. Apart from that, you can easily build your own flavor by tweaking variables and using mixins, as explained in depth in the customization section.


    @@ -177,11 +179,12 @@

    Getting started

    If you are still here after reading this far, we will assume you are interested or at least curious. Based on that assumption, here are a few links to help get you started:

      -
    • For a quick guide on getting started, you might wanna take a look at the available modules list and the tutorials provided for each one!
      • -
    • To get you started even faster, we have created a handful of templates that might fit your needs!
      • -
    • If you are familiar with mini.css and want a cheat sheet or quick reference guide, check the quick reference page!
      • -
    • mini.css comes with a few nice pre-built customizable flavors. See which one of them better suits your needs!
      • -
    • 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!
      • +
    • For a quick guide on getting started, you might want to take a look at the available modules list and the tutorials provided for each one!
      • +
    • To get you started even faster, we have created a handful of templates that might fit your needs!
      • +
    • If you are familiar with mini.css and want a cheat sheet or quick reference guide, check the quick reference page!
      • +
    • If you want to develop a progressive web app or just utilize a virtual DOM, you should check out our React & Preact Libraries, which will help you get started creating all kinds of custom components based on mini.css. +
    • mini.css comes with a few nice pre-built customizable flavors. See which one of them better suits your needs!
      • +
    • 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!
    • Finally, if you want to contribute to the framework's development in any way or have an interest in what happens behind the scenes, visit the Github repository to find out more.
    diff --git a/docs/input_control.html b/docs/input_control.html index 66cc2f5..49dc645 100644 --- a/docs/input_control.html +++ b/docs/input_control.html @@ -30,54 +30,54 @@
    - + - - - + + +  Github
    @@ -169,7 +169,7 @@

    Forms are structured the same way you would structure a normal form in HTML5. Simply create a root <form> element and add your <input> elements inside. Link them to <label> elements for ease of access and you are pretty much set. We highly recommend using the <fieldset> and <legend> elements to annotate your forms as well, but you can skip them if you wish.

    -

    Forms are inline by default. Use the .input-group class on a <div> wrapping inside it an <input> and <label> pair to make sure they always display together in one line. You can make your .input-groups respond to viewport changes, by adding the .fluid class to them or you can align them vertically by adding the .vertical class. Finally, if you want to create aligned forms with a preset layout, you can utilize the grid module's rows and columns.

    +

    Forms are inline by default. Use the .input-group class on a <div> wrapping inside it an <input> and <label> pair to make sure they always display together in one line. You can make your .input-groups respond to viewport changes, by adding the .fluid class to them or you can align them vertically by adding the .vertical class. Finally, if you want to create aligned forms with a preset layout, you can utilize the grid module's rows and columns.

    Sample code

    <form>
   <fieldset>
@@ -406,7 +406,7 @@
 						
    
 						
    Notes
    
 							
      
-								
    • You can create your own color variants for the .switch component. For more information, check out the customization page.
      • 
+								
    • You can create your own color variants for the .switch component. For more information, check out the customization page.
      • 
 							
    
 							
    
 								
    
@@ -467,7 +467,7 @@
             
    
             
    Notes
    
               
      
-                
    • If you want more color or size variants for your buttons, check out the customization page.
      • 
+                
    • 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.
      • 
               
    
@@ -545,7 +545,7 @@
       
    
       
    
         
    
-          
    If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.
    
+          
    If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.
    diff --git a/docs/mini-logo.svg b/docs/mini-logo.svg deleted file mode 100644 index c29c35c..0000000 --- a/docs/mini-logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/docs/modules.html b/docs/modules.html index cbfe91c..1dca0c4 100644 --- a/docs/modules.html +++ b/docs/modules.html @@ -23,54 +23,54 @@
    - + - - - + + +  Github
    @@ -84,25 +84,25 @@

     Core

    The core module contains basic reset and fix rules, based on Normalize.css v5.0.0, along with lots of custom typography rules. Most textual HTML5 elements are styled by this module, so you can start writing your pages immediately without worrying about font families, weights, sizes, line heights, paddings and the like. More specifically, the core module contains:

    See more +
  • General typography rules
    • +
  • Styling for headings
    • +
  • Styling for common textual elements
    • +
  • Styling for lists
    • +
  • Rules for image responsiveness and captions
    • +
    See more

     Grid

    The grid module provides you with a modern, responsive grid system based on the Flexible Layout Module (commonly known as flexbox). The structure of the grid is simple and logical, allowing you to quickly build your pages from scratch. Setting the layout for a page is easy and will behave the way you want them to on mobile devices and smaller screens. More specifically, the grid module contains:

    See more +
  • Containers, rows and columns for layout
    • +
  • Classes for defining screen-specific layouts
    • +
  • Classes for predefined layouts
    • +
  • Classes for content offsetting
    • +
  • Classes for content reordering
    • +
  • Layout examples for implementing the media object pattern
    • +
    See more
    @@ -111,24 +111,24 @@

     Input Control

    The input_control module contains rules that affect forms, input elements, buttons, checkboxes and radio buttons. All of these elements's styles are predefined, allowing you to create modern, responsive forms quickly. Layout alternatives are also provided if you want your forms to look a certain way. More specifically, the input_control module contains:

    See more +
  • Styling for forms and input elements
    • +
  • Styling for checkboxes and radio buttons
    • +
  • Styling and grouping classes for buttons
    • +
  • Classes for creating switches
    • +
  • Workarounds for styling file upload buttons
    • +
    See more

     Navigation

    The navigation 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 navigation module contains:

    See more +
  • Styling for headers, logos and header links
    • +
  • Styling for navigation bars
    • +
  • Classes for creating responsive drawers
    • +
  • Styling for footers
    • +
  • Classes for making headers and footers sticky
    • +
    See more
    @@ -137,22 +137,22 @@

     Table

    The table module provides styling and responsiveness for tables. Simple rules and accessible design paradigms have been used to make creating tables quick and easy. Large tables will collapse to cards when on smaller devices or, if you don't want that, they can be locked into their default, desktop view. More specifically, the table module contains:

    See more +
  • Styling for tables and built-in responsiveness
    • +
  • Classes for creating scrollable tables
    • +
  • Classes for creating horizontal tables
    • +
  • Classes for creating table variants and matrices
    • +
    See more

     Card

    The card module provides you with modern, responsive, general-purpose containers for your page's contents. They are very easy to use and their structure is really simple and versatile. Layouts will respond to smaller screens, realigning the cards in a manner that makes your page mobile-friendly. More specifically, the card module contains:

    See more +
  • Classes for creating card-based layouts
    • +
  • Classes for creating card sections and adding media
    • +
  • Classes for creating card variants and making cards fluid
    • +
  • Classes for creating card color variants
    • +
    See more
    @@ -161,20 +161,20 @@

     Tab

    The tab module aims to combine multiple components and design paradigms, like collapses, accordions, carousels and tabs, into one general-purpose component. Tabs are very simple in structure, responsive on mobile and they allow for layout customization so that you can turn them into accordions or collapses whenever you want. More specifically, the tab module contains:

    See more +
  • Classes for creating tab-based layouts
    • +
  • Classes for creating stacked tabs, accordions and collapses
    • +
    See more

     Contextual

    The contextual module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. Contextual toasts, tooltips and modals 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 contextual module contains:

    See more +
  • Styling for highlighted text
    • +
  • Classes for creating toast messages
    • +
  • Classes for creating hover-over tooltips
    • +
  • Classes for creating modal dialogs
    • +
    See more
    @@ -183,24 +183,24 @@

     Progress

    The progress module gives you full control over the presentation of progress and loading on your pages. Apart from progress bars and color variants for them, spinner elements are provided to help communicate that something is loading. More specifically, the progress module contains:

    See more +
  • Styling for progress bars
    • +
  • Classes for creating progress bar variants
    • +
  • Classes for creating donut spinners
    • +
  • Classes for creating donut spinner variants
    • +
    See more

     Utility

    The utility module contains all the utilities and helper classes that you might want when designing a website or application. They solve common design problems efficiently and provide you with generic rules you can easily apply everywhere. More specifically, the utility module contains:

    See more +
  • Visibility helpers for hiding elements
    • +
  • Classes for creating generic borders and shadows
    • +
  • Classes for responsive sizing and spacing
    • +
  • Responsive visibility helpers for hiding elements
    • +
  • Classes for creating breadcrumbs
    • +
  • Classes for creating close icons
    • +
    See more
    diff --git a/docs/navigation.html b/docs/navigation.html index a156096..a15df18 100644 --- a/docs/navigation.html +++ b/docs/navigation.html @@ -32,54 +32,54 @@
    - + - - - + + +  Github
    @@ -258,7 +258,7 @@

    Notes

      -
    • The .drawer component can be easily and effectively combined with the grid module's system and classes, as well as the utility module's responsive visibility helper classes to create fully responsive navigation menus.
      • +
    • The .drawer component can be easily and effectively combined with the grid module's system and classes, as well as the utility module's responsive visibility helper classes to create fully responsive navigation menus.
    • It's best to use the .drawer component in combination with a <header> element that has the .sticky class (check the last section of this page).
    @@ -359,7 +359,7 @@
    -

    If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

    +

    If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

    diff --git a/docs/progress.html b/docs/progress.html index b0685f8..dafaf80 100644 --- a/docs/progress.html +++ b/docs/progress.html @@ -28,54 +28,54 @@
    - + - - - + + +  Github
    @@ -122,7 +122,7 @@

    Notes

    • 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.
      • +
    • 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.
    @@ -159,7 +159,7 @@

    Notes

      -
    • If you want to add your own custom size classes for <progress> elements, check the customization page for instructions.
      • +
    • If you want to add your own custom size classes for <progress> elements, check the customization page for instructions.
    @@ -242,7 +242,7 @@
    -

    If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

    +

    If you want to learn more about mini.css's modules, go back to the modules page and choose another module to see its documentation.

    diff --git a/docs/quick_reference.html b/docs/quick_reference.html index 9091f1a..cee0c7b 100644 --- a/docs/quick_reference.html +++ b/docs/quick_reference.html @@ -26,22 +26,22 @@
    - + - - - + + +  Github
    @@ -50,7 +50,7 @@

    Quick Reference

    -

    If you are familiar with mini.css 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 modules page.

    +

    If you are familiar with mini.css 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 modules page.

    All examples showcased refer to the mini-default flavor, some class names and styles might differ based on the flavor you're using.


    @@ -78,7 +78,7 @@
    -

     Core

    +

     Core

    Headings  View on Codepen

    @@ -146,7 +146,7 @@
    -

     Grid

    +

     Grid

    Basic layout  View on Codepen

    @@ -377,7 +377,7 @@
    -

     Input Control

    +

     Input Control

    @@ -519,7 +519,7 @@