From fd3697a7b6f5695c63b63bd22f773367552e1e85 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Sat, 26 Nov 2016 17:33:37 +0200 Subject: [PATCH] Card documentation page initial commit --- docs/v2/DEVLOG.md | 1 + docs/v2/card.html | 238 ++++++++++++++++++++++++++++++++++++++++ docs/v2/contextual.html | 4 +- docs/v2/navigation.html | 2 +- docs/v2/progress.html | 8 +- 5 files changed, 246 insertions(+), 7 deletions(-) create mode 100644 docs/v2/card.html diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 567a1e2..d1686ae 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -563,3 +563,4 @@ - Documented basic `mark` behavior and stuff. - Basic documentation for `alert`s. - Documented `animated` `alert`s. Documentation of `contextual` seems to be complete. +- Added `card` doc page. diff --git a/docs/v2/card.html b/docs/v2/card.html new file mode 100644 index 0000000..504d879 --- /dev/null +++ b/docs/v2/card.html @@ -0,0 +1,238 @@ + + + + + + + + + mini.css - Card + + + + + + + + + +
+
+ Introduction + Modules + Flavors + Customization + Github +
+
+
+
+
+
+ +

mini.css

+ v2.0 +
+
+
+
+ +
+
+
+

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

+


+
+
+

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. 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">

+
+
+
+
+
+
+
+
+

Basic syntax

+
+
+
+ +
+
+

+

Sample code

+

+              
+
+
+

Notes

+
    +
  • +
  • +
+
+
+
+
+

Do: 

+
+
+
+

Don't: 

+
+
+
+
+
+
+
+
+
+
+

Sections & media

+
+
+
+ +
+
+

+

Sample code

+

+              
+
+
+

Notes

+
    +
  • +
  • +
+
+
+
+
+

Do: 

+
+
+
+

Don't: 

+
+
+
+
+
+
+
+
+
+
+

Fluid Cards

+
+
+
+ +
+
+

+

Sample code

+

+              
+
+
+

Notes

+
    +
  • +
  • +
+
+
+
+
+

Do: 

+
+
+
+

Don't: 

+
+
+
+
+
+
+
+
+

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.

+
+
+
+ + + + \ No newline at end of file diff --git a/docs/v2/contextual.html b/docs/v2/contextual.html index 8459e2b..c4aa902 100644 --- a/docs/v2/contextual.html +++ b/docs/v2/contextual.html @@ -119,7 +119,7 @@
-

Contextual text highlighting

+

Text highlighting

@@ -234,7 +234,7 @@
-

Animated Alerts

+

Animated alerts

diff --git a/docs/v2/navigation.html b/docs/v2/navigation.html index c3daad5..8a74878 100644 --- a/docs/v2/navigation.html +++ b/docs/v2/navigation.html @@ -186,7 +186,7 @@
-

Navigation Bar

+

Navigation bar

diff --git a/docs/v2/progress.html b/docs/v2/progress.html index 3dc55e9..ed2bce1 100644 --- a/docs/v2/progress.html +++ b/docs/v2/progress.html @@ -119,7 +119,7 @@
-

Basic Progress Bar

+

Basic progress bar

@@ -163,7 +163,7 @@
-

Progress Bar variants

+

Progress bar variants

@@ -212,7 +212,7 @@
-

Basic Donut Spinner

+

Donut spinner

@@ -252,7 +252,7 @@
-

Donut Spinner variants

+

Donut spinner variants