diff --git a/docs/v2/DEVLOG.md b/docs/v2/DEVLOG.md index 37a4ca5..b84da0e 100644 --- a/docs/v2/DEVLOG.md +++ b/docs/v2/DEVLOG.md @@ -585,3 +585,9 @@ - Added some base info on `table` module doc page and a basic example. - Full documentation for `table` module. - Updated all doc pages to use **2 spaces** per indentation. + +## 20161205 + +- `playground` cleanup, readying for the rest of the modules to be tested and documented. +- Added empty `input_control.html` documentation page for the module of the same name. +- Basic structure for `input_control` module's doc page. diff --git a/docs/v2/input_control.html b/docs/v2/input_control.html new file mode 100644 index 0000000..28a0547 --- /dev/null +++ b/docs/v2/input_control.html @@ -0,0 +1,275 @@ + + + + + + + + + mini.css - Input Control + + + + + + + + + +
+
+ Introduction + Modules + Flavors + Customization + Github +
+
+
+
+
+
+ +

mini.css

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

Card

+

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.

+

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

+
+
+
+
+
+
+
+
+

Forms & input

+
+
+
+ +
+
+

+

Sample code

+

+              
+
+
+

Notes

+
    +
  • +
  • +
+
+
+
+
+

Do: 

+
+
+
+

Don't: 

+
+
+
+
+
+
+
+
+
+
+

Checkboxes & radio buttons

+
+
+
+ +
+
+

+

Sample code

+

+              
+
+
+

Notes

+
    +
  • +
  • +
+
+
+
+
+

Do: 

+
+
+
+

Don't: 

+
+
+
+
+
+
+
+
+
+
+

Buttons & button groups

+
+
+
+ +
+
+

+

Sample code

+

+              
+
+
+

Notes

+
    +
  • +
  • +
+
+
+
+
+

Do: 

+
+
+
+

Don't: 

+
+
+
+
+
+
+
+
+
+
+

File upload buttons

+
+
+
+ +
+
+

+

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/playground.html b/docs/v2/playground.html index 037be9c..7027a80 100644 --- a/docs/v2/playground.html +++ b/docs/v2/playground.html @@ -75,394 +75,92 @@
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Hacker List
NameSurnameEmailHandle
Sum$180Sum$180
JohnSmithjohnsmith@mail.comSmithereensJohn
LisaCodycodyl@mail.comCodyl
MaxRobertsterminus@mail.comT3rm1nu5
AdamLeeksleekt@mail.comLeekt
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Hacker List
NameSurnameEmailHandle
Sum$180Sum$180
JohnSmithjohnsmith@mail.comSmithereensJohn
LisaCodycodyl@mail.comCodyl
MaxRobertsterminus@mail.comT3rm1nu5
AdamLeeksleekt@mail.comLeekt
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Hacker List
NameSurnameEmailHandle
JohnSmithjohnsmith@mail.comSmithereensJohn
LisaCodycodyl@mail.comCodyl
MaxRobertsterminus@mail.comT3rm1nu5
AdamLeeksleekt@mail.comLeekt
JohnSmithjohnsmith@mail.comSmithereensJohn
LisaCodycodyl@mail.comCodyl
MaxRobertsterminus@mail.comT3rm1nu5
AdamLeeksleekt@mail.comLeekt
JohnSmithjohnsmith@mail.comSmithereensJohn
LisaCodycodyl@mail.comCodyl
MaxRobertsterminus@mail.comT3rm1nu5
AdamLeeksleekt@mail.comLeekt
JohnSmithjohnsmith@mail.comSmithereensJohn
LisaCodycodyl@mail.comCodyl
MaxRobertsterminus@mail.comT3rm1nu5
AdamLeeksleekt@mail.comLeekt
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Hacker List
NameSurnameEmailHandle
JohnSmithjohnsmith@mail.comSmithereensJohn
LisaCodycodyl@mail.comCodyl
MaxRobertsterminus@mail.comT3rm1nu5
AdamLeeksleekt@mail.comLeekt
JohnSmithjohnsmith@mail.comSmithereensJohn
LisaCodycodyl@mail.comCodyl
MaxRobertsterminus@mail.comT3rm1nu5
AdamLeeksleekt@mail.comLeekt
JohnSmithjohnsmith@mail.comSmithereensJohn
LisaCodycodyl@mail.comCodyl
MaxRobertsterminus@mail.comT3rm1nu5
AdamLeeksleekt@mail.comLeekt
JohnSmithjohnsmith@mail.comSmithereensJohn
LisaCodycodyl@mail.comCodyl
MaxRobertsterminus@mail.comT3rm1nu5
AdamLeeksleekt@mail.comLeekt
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Hacker List
Surname - Email - Handle -
JohnSmithjohnsmith@mail.comSmithereensJohn
LisaCodycodyl@mail.comCodyl
MaxRobertsterminus@mail.comT3rm1nu5
AdamLeeksleekt@mail.comLeekt
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Hacker List
JohnSmithjohnsmith@mail.comSmithereensJohn
LisaCodycodyl@mail.comCodyl
MaxRobertsterminus@mail.comT3rm1nu5
AdamLeeksleekt@mail.comLeekt
- +
+
+ Inline form (default style): +
 
+
 
+
+

+
+ Aligned form (using width and grid): +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+

+
+ More inputs + + + + + +
+
+
+
+
+ +
+
+ +
+
+
+
+ + + +
+
+
+ + + + + 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:

+
+ + + + + Link button +
+

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:

+ + + + + +