diff --git a/docs/customization/card.html b/docs/customization/card.html new file mode 100644 index 0000000..659c0d2 --- /dev/null +++ b/docs/customization/card.html @@ -0,0 +1,77 @@ + + + + + + + mini.css - Card + + + + + + + + + + + +
+ + Introduction Modules + Flavors Customization + Quick Reference +  Github +
+
+ Core Grid + Navigation Input Control + Table Card + Tab Contextual + Progress Utility +
+ +
+
+
+

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.

+

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

+ +
+
+
+
+
+
+

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.


+
+
+

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:


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

+
+
+
+
+ +
+
+

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 new file mode 100644 index 0000000..9f8c167 --- /dev/null +++ b/docs/customization/contextual.html @@ -0,0 +1,77 @@ + + + + + + + mini.css - Contextual + + + + + + + + + + + +
+ + Introduction Modules + Flavors Customization + Quick Reference +  Github +
+
+ Core Grid + Navigation Input Control + Table Card + Tab Contextual + Progress Utility +
+ +
+
+
+

Contextual

+

The contextual module provides you with simple tags, marks and highlights for your pages, allowing you to easily emphasize parts of your text. The contextual alerts aim to replace the commonly used modal dialog design paradigm with a more modern one. HTML5 elements and simple rules are used in order to make important messages and pieces of content stand out easily.

+

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

+ +
+
+
+
+
+
+

Quick overview

+

Almost every piece of content present on the web has some sort of content that needs highlighting in one way or another. The contextual module provides you with simple semantic text highlighting that utilises the <mark> HTML element. Apart from that, this module contains styles and definitions for a simple .alert container, that you can use to show alerts on your websites and web apps. Alerts replace the traditional design paradigms of modals, messages and alerts by defining a simple, usable container that is also mobile friendly. Finally, a simple accessible .tooltip implementation is included. All components in this module are fully accessible, so that's another thing not to worry about.


+
+
+

Quick start

+

To use the contextual module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:


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

+
+
+
+
+ +
+
+

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 new file mode 100644 index 0000000..1eae499 --- /dev/null +++ b/docs/customization/core.html @@ -0,0 +1,94 @@ + + + + + + + mini.css - Core + + + + + + + + + + + +
+ + Introduction Modules + Flavors Customization + Quick Reference +  Github +
+
+ Core Grid + Navigation Input Control + Table Card + Tab Contextual + Progress Utility +
+ +
+
+
+

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.

+

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

+
+
+
+
+
+
+
+

Quick overview

+

Before applying any typography and styling rules, some resets need to be applied to make sure that different elements display consistently on all browsers. The core module utilizes the ruleset of Normalize.css v5.0.0 to apply those much needed resets and fixes. However, to keep the framework small, we removed some rules that only help with legacy browser support and also tweaked a lot of the rules around to use customizable variables so no duplicate rules are applied, taking up unnecessary space. The typography rules in core deal with a page's basics, like fonts and styling of headings and paragraphs, horizontal rules, colors, margins, padding etc.


+
+
+

Quick start

+

To use the core module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:


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

+
+
+
+
+ +
+
+
+

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.

+

Sample code

+ 
<img src="...">

+
+
+
+
+
+
+
+

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 new file mode 100644 index 0000000..14fde32 --- /dev/null +++ b/docs/customization/grid.html @@ -0,0 +1,79 @@ + + + + + + + mini.css - Grid + + + + + + + + + + + +
+ + Introduction Modules + Flavors Customization + Quick Reference +  Github +
+
+ Core Grid + Navigation Input Control + Table Card + Tab Contextual + Progress Utility +
+ +
+
+
+

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.

+

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

+ +
+
+
+
+
+
+

Quick overview

+

Easy page layout is one of the main advantages of using a CSS framework over writing your own styles. The grid module utilizes the Flexbox Layout to provide you with a modern and responsive layout grid system for all your needs. Rules in the grid module help you create basic fluid containers for your grid and allow you to design layouts that work well on all screen sizes using a simple row and column structure. The grid system contains definitions for both fluid columns that resize according to their siblings and columns with preset sizes on different screen sizes, as well as rules that allow you to offset or move certain columns to the first or last place on the grid's row on different devices, helping you present the page in a different layout without duplicating any content. All of the rules in the module are built around accessibility, so screen readers can easily read you pages.


+
+
+

Quick start

+

To use the grid module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:


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

+
+
+
+
+ +
+
+

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 f37474a..7ee58a4 100644 --- a/docs/customization/index.html +++ b/docs/customization/index.html @@ -11,8 +11,8 @@ - - + + + + +
+ + Introduction Modules + Flavors Customization + Quick Reference +  Github +
+
+ Core Grid + Navigation Input Control + Table Card + Tab Contextual + Progress Utility +
+ +
+
+
+

Input Control

+

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

+

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

+ +
+
+
+
+
+
+

Quick overview

+

The presentation of forms, input fields, buttons and other interactive elements is always very important for any website or app. The input_control module provides you with much needed styling improvements for all of these elements, while keeping everything simple to use and understand, as well as combine with the other modules. Forms and input elements have a clean, modern design, while some elements like checkoxes and radio buttons get a much needed facelift. Buttons have also been stylized to look the same in all browsers, while keeping their design clean and allowing for a few color and size variants. Grouping inputs and labels or buttons is also part of this module and, as always, responsiveness is an important feature. Finally, all of the components are accessible, with a few minor caveats, that are discussed in their respective section in this page.


+
+
+

Quick start

+

To use the input_control module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:


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

+
+
+
+
+ +
+
+

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 new file mode 100644 index 0000000..7985475 --- /dev/null +++ b/docs/customization/navigation.html @@ -0,0 +1,77 @@ + + + + + + + mini.css - Navigation + + + + + + + + + + + +
+ + Introduction Modules + Flavors Customization + Quick Reference +  Github +
+
+ Core Grid + Navigation Input Control + Table Card + Tab Contextual + Progress Utility +
+ +
+
+
+

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 without complicated structures and hacks.

+

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

+ +
+
+
+
+
+
+

Quick overview

+

Menus and navigation are some of the most important elements for any website or web app and their design and ease-of-use are key factors that can determine a page's bounce rates. The navigation module takes a step back from all the complicated menu and navigation design paradigms of the modern web, like dropdown menus and hamburger buttons, and tries to reinvent the basics for page navigation using HTML5 elements (i.e. header, nav and footer) and make navigation fully accessible for screen readers. Instead of sticking to either horizontal navigation menus (headers) or vertical menus (sidebars), we opted to allow the use of both for different things. Header menus are designed to stand out and contain links to help users find new content, whereas vertical navigation aims to provide a more traditional navigation menu that maps out your website's structure. Finally, footers are also part of the navigation module, as they can often provide the user with useful information and/or links that are very important to enhancing their experience.


+
+
+

Quick start

+

To use the navigation module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:


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

+
+
+
+
+ +
+
+

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/progress.html b/docs/customization/progress.html new file mode 100644 index 0000000..c76f546 --- /dev/null +++ b/docs/customization/progress.html @@ -0,0 +1,79 @@ + + + + + + + mini.css - Progress + + + + + + + + + + + +
+ + Introduction Modules + Flavors Customization + Quick Reference +  Github +
+
+ Core Grid + Navigation Input Control + Table Card + Tab Contextual + Progress Utility +
+ +
+
+
+

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.

+

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

+ +
+
+
+
+
+
+

Quick overview

+

Progress indicators are very common UI elements for almost any website and web app, as they help communicate vital information such as the fact that a process is being executed in the background, informing the user that they should wait for it to complete before proceeding. The progress module provides you with two essential tools to communicate this information: the <progress> HTML element, which is pre-styled and compatible with modern browsers to help you communicate information about the percentage of a task and the .spinner-donut class that allows you to create an animated spinner that communicates that something is loading currently and will continue doing so for an indefinite amount of time. Both elements come with their own color and size variants and are fully accessible.


+
+
+

Quick start

+

To use the progress module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:


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

+
+
+
+
+ +
+
+

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 new file mode 100644 index 0000000..c69a13f --- /dev/null +++ b/docs/customization/tab.html @@ -0,0 +1,77 @@ + + + + + + + mini.css - Tab + + + + + + + + + + + +
+ + Introduction Modules + Flavors Customization + Quick Reference +  Github +
+
+ Core Grid + Navigation Input Control + Table Card + Tab Contextual + Progress Utility +
+ +
+
+
+

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.

+

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

+ +
+
+
+
+
+
+

Quick overview

+

Spoilers, collapses, accordions, tabs, carousels have been a staple of modern design for quite a long time. All of these elements are implemented using the tab module's single generic container. The tab container replaces all of these design paradigms with one component that is very flexible and responsive in order to let you present your website or app's content any way you like. Tabbed navigation is very easy to implement, while collapse, accordion and carousel components use the stacked architecture of tabs. As usual, the tab container is responsive and accessible, allowing you to deliver your content properly to all devices and users.


+
+
+

Quick start

+

To use the tab module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:


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

+
+
+
+
+ +
+
+

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 new file mode 100644 index 0000000..d69e9c0 --- /dev/null +++ b/docs/customization/table.html @@ -0,0 +1,83 @@ + + + + + + + mini.css - Table + + + + + + + + + + + +
+ + Introduction Modules + Flavors Customization + Quick Reference +  Github +
+
+ Core Grid + Navigation Input Control + Table Card + Tab Contextual + Progress Utility +
+ +
+
+
+

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.

+

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

+ +
+
+
+
+
+
+

Quick overview

+

Presenting information the right way is very important, especially so when dealing with large amounts of data. The table module reinvents tabular data presentation, using modern styling and responsiveness to help make tables fun again for all users no matter the device size. Tables can be either vertical or horizontal, both collapsing to a card view on smaller devices, so that they are easier to view properly. Horizontal tables are also flexible, allowing you to take as little space as possible, while still providing your users with a pleasant way to view their data. Finally, like in most CSS frameworks nowadays, you can stripe your tables to make reading them slightly less tiresome for your users' eyes. Note that all of the table variants are fully accessible.


+
+
+

Quick start

+

To use the table module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:


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

+
+
+
+
+ +
+
+

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 new file mode 100644 index 0000000..b5736ef --- /dev/null +++ b/docs/customization/utility.html @@ -0,0 +1,77 @@ + + + + + + + mini.css - Utility + + + + + + + + + + + +
+ + Introduction Modules + Flavors Customization + Quick Reference +  Github +
+
+ Core Grid + Navigation Input Control + Table Card + Tab Contextual + Progress Utility +
+ +
+
+
+

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.

+

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

+ +
+
+
+
+
+
+

Quick overview

+

Every website or app has different needs and no CSS framework can predict them all. The utility module addresses this issue by providing you with a handful of utility and helper classes to make common, repetitive declarations easier. These classes include, but are not limited to, generic border styling and shadows, some responsive sizing and spacing utilities and a few other things, like a close icon, breadcrumbs styling and visiblity helpers for screen readers.


+
+
+

Quick start

+

To use the utility module, simply include the link to the flavor you are using and start writing your HTML page as usual. One suggestion we will make is to add the following line inside your HTML page's <head> to utilize the viewport meta tag:


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

+
+
+
+
+ +
+
+

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/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 494b5d0..aadafca 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -940,3 +940,15 @@ - Started documenting the `customization` pages which will serve as a replacement for the old *wiki*. Created `index.html` in the new `customization` folder and added most of the basic info. - Updated all old navigation links for `Customization` to point to the new folder and its `index.html` page. - Removed content from old `customization.html` page and added a redirection directive to take visitors to the new page. + +## 20170405 + +- Worked on rebranding quite a lot, set up a mockup of the new logo. + +## 20170406 + +- Updated `index.html` with new logo, all other pages with new brand etc. +- Updated `README.md` and added shields to it. +- Decided to change preferred CDN from `rawgit` to `gitCDN` as it seems more stable and easier to use. +- Opened issue in `cdnjs`'s repo for the library not auto-updating. +- Created mostly empty pages for all modules under `/customization`.