2 |
3 | ##### Quick Form CSS is an easy-to-use fully-responsive CSS Boilerplate for simple html forms.
4 |
5 | ----------
6 | 
7 | This CSS boilerplate converts any simple html form into a material design minimalistic webform in seconds.
8 |
9 |
10 | > Current version 2.2.2 enables Google like input placeholder transitions
11 | 
12 |
13 | > **Note** [Quick-Form-Css](https://github.com/siwalikm/quick-form-css) is created solely for the purpose of quick templating your html-webforms with the zero efforts. This project is a *Work-In-Progress* and might result in undesirable result at times.
14 |
15 | ----------
16 |
17 | Themes
18 | -------------
19 | Quick-Form-Css comes with two themes by default, **qfc-dark** and **qfc-light**.
20 | **qfc-dark.css** is the theme on the left with Google forms inspired style [(url)](https://cdn.jsdelivr.net/gh/siwalikm/quick-form-css@2.2.2/qfc-dark.css),
21 | **qfc-light.css** is the theme on the right with a more minimal look. [(url)](https://cdn.jsdelivr.net/gh/siwalikm/quick-form-css@2.2.2/qfc-light.css).
22 |
23 | 
24 |
25 | ----------
26 |
27 | Usage
28 | -------------
29 |
30 | 1. In the **head section** of your html document, include the css theme you like:
31 |
32 | > ``
33 |
34 | or
35 |
36 | > ``
37 |
38 | 2. In the **head section**, also add the meta viewport for the form to work correctly on handheld devices.
39 | > ``
40 |
41 | 3. Wrap your html form in a **`div`** with **`class="qfc-container"`** like this:
42 | > 
43 |
44 | **Awesome, you did it!**
45 |
46 | Change Color(s)
47 | -------------
48 | To change theme color or background color of your form, edit the values of these css variables in your stylesheet.
49 |
50 | .qfc-container {
51 | --form-theme-color: mediumaquamarine;
52 | --form-bg-color : white;
53 | --button-hover : gray;
54 | --input-text-color: black;
55 | }
56 | body {
57 | --main-bg-color: white;
58 | }
59 |
60 | Titles and Sub-titles(s)
61 | -------------
62 | Quick-Form-Css supports meterial design specifications for headers from h1 to h6 [(link)](http://brm.io/material-design-type/).
63 |
64 | All headers tags come with the default underline style. Please add class *"no-underline"* in your header element if you want to modify this behaviour.
65 |
--------------------------------------------------------------------------------
/demoForm.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |