SOLID CSS3 Responsive Formsagatef.com.br/Plugins/master-demo/documentation.pdf · SOLID – CSS3...
Transcript of SOLID CSS3 Responsive Formsagatef.com.br/Plugins/master-demo/documentation.pdf · SOLID – CSS3...
SOLID – CSS3 Responsive Forms Documentation
SOLID – CSS3 Responsive Forms
Created: October 21, 2015
Updated: October 23, 2016
By: solid_designs
Email: [email protected]
Table of Contents
A. Quick Start Guide
1. Description
2. Features
3. Installation Guide
B. HTML Structure
1. General Structure
2. Radio Button Structure
3. Checkbox Structure
4. Radio Button Structure (Using SVG)
5. Checkbox Structure (Using SVG)
6. Toggle Switch Structure
C. Radio Designs
D. Checkbox Designs
E. Toggle Switch Designs
F. Files
G. Simple Validation of Forms
H. JavaScript Libraries and Files
A) Quick Start Guide
1. Description
These sets of radio buttons, checkboxes and toggle switches are created using only pure CSS3 properties.
The simplistic HTML structures will make the integration of these custom form elements on your existing work
to be easily implemented.
Radio, Checkbox and Toggle usability and user experience can be improved by distinctly differentiating the
appearance of some options. A great example can be found on this product. It uses custom radio buttons that
have different designs associated with them which gives the user an emotional cue based on choices.
Including also in the product are LESS files in order for easy customizations.
SOLID – CSS3 Responsive Forms Documentation
2. Features
A. Custom Radio Buttons
1. Simple Radio Buttons
2. Fontawesome Radio Buttons
3. SVG (Scalabe Vector Graphics) Radio Buttons
B. Custom Checkboxes
1. Simple Checkboxes
2. Fontawesome Checkboxes
3. SVG (Scalable Vector Graphics) Checkboxes
C. Custom Toggle Switch
1. Simple Toggle Switch
2. Fontawesome Toggle Switch
3. Installation Guide
To install the custom form elements insert the code below inside the <head> tag of your own
html file.
At line 9, the styles.css consolidates CSS Files that are used for the form elements (Of course,
you can change its name if you have already style.css on your project). The styles.css contains the
following codes. Also notice at line 10, Font-Awesome is used. You can find more of font awesome at
this link (It is really that awesome!). (https://fortawesome.github.io/Font-Awesome/get-started/)
Here is a quick description of what each CSS settings inside the styles.css are supposed to do.
1. base.css – the base.css settings normalizes every css settings across different browsers. Usually
general CSS settings can be found here.
2. layout.css – the layout.css settings contains most of the layout settings which include the grid
system (12 - column) that have been used for the product. It is similar to the bootstrap grid system
(Yes it is similar, but not exactly bootstrap).
SOLID – CSS3 Responsive Forms Documentation
3. module.css – the module.css settings contains the custom form elements settings that are used
throughout the product. This is the core settings of the product.
4. theme.css – theme settings for the product.
5. state.css – these are the states used in the product.
6. media.css- - these are the breakpoint for the media queries. This is important for the
responsiveness of the product. To remove the responsiveness delete this line (It is that easy).
Some HTML Markup to Consider
In order as not to conflict with your css settings when implementing the custom form elements
on your project, a class of “solid-radcheck” must be used (Line 14). This can be placed on the <body>
tag or if you have a wrapping <div> (in this case div id=”wrapper”).
B) HTML Structure
1. General Structure
A 12-column grid system is utilized for the layout that is similar to the popular Twitter BootStrap.
I recommend looking for the file (grid.html) to fully understand the grid system.
2. Radio Button Structure
Each radio button is contained in a <div> with an “form-group-radio” class followed by a
<input> tag with a class of “form-element”. The class on the <span> tag signifies the design of the radio
buttons. In this example, a class of “radio-2” can be found (more on this later). The <label> tag describes the
radio button.
SOLID – CSS3 Responsive Forms Documentation
3. Checkbox Structure
Each checkbox is contained in a <div> with an “form-group-checkbox” class followed by a
<input> tag with a class of “form-element”. The class on the <span> tag signifies the design of the checkbox.
In this example, a class of “check-2” can be found (more on this later). The <label> tag describes the checkbox.
4. Radio Button Structure (Using SVG)
Each radio button is contained in a <div> with an “form-group-radio” class followed by a
<input> tag with a class of “form-element”. The class on the <span> tag signifies the design of the radio
buttons. In this example, a class of “radio-svg-1” can be found (more on this later). The <label> tag describes
the radio button and <svg> tag contains the graphics use for the radio button. It is required to have an <svg>
tag when the <span> tag describes a design for svg.
SOLID – CSS3 Responsive Forms Documentation
5. Checkbox Structure (Using SVG)
Each checkbox is contained in a <div> with an “form-group-checkbox” class followed by a
<input> tag with a class of “form-element”. The class on the <span> tag signifies the design of the checkbox.
In this example, a class of “check-svg-1” can be found (more on this later). The <label> tag describes the
checkbox and the <svg> tag contains the graphics use for the radio button. It is required to have an <svg> tag
when the <span> tag describes a design for svg.
6. Toggle Switch Structure
Each toggle switch is contained in a <div> with an “form-group-switch” class followed by a <div> tag
with a class of “switch-container”. The main structure of the toggle switch is enclosed in a <label> tag with a
class of “switch”.
SOLID – CSS3 Responsive Forms Documentation
C) Radio Designs
Let us review the structure for radio buttons. Refer to the structure below.
By changing the class of the <span> the radio button style will change.
1. <span></span>
2. <span class=”radio-2”></span>
3. <span class=”radio-3”></span>
4. <span class=”radio-fa-1”></span>
5. <span class=”radio-fa-2”></span>
Look for the “data-on” attribute to
change the icon (FontAwesome
Hexadecimal Code)
Here is the link for the Hex Codes
Font Awesome Cheat Sheet
SOLID – CSS3 Responsive Forms Documentation
6. <span class=”radio-fa-3”></span>
7. <span class=”radio-fa-1”></span>
8. <span class=”radio-fa-2”></span>
9. <span class=”radio-fa-3”></span>
10. <span class=”radio-svg-1”></span>
This is the svg
SOLID – CSS3 Responsive Forms Documentation
11. <span class=”radio-svg-2”></span> (Why 2?, there are two paths)
This is the svg
12. <span class=”radio-svg-2”></span>
This is the svg
13. <span class=”radio-svg-1”></span>
This is the svg
14. <span class=”radio-svg-1”></span>
This is the svg
SOLID – CSS3 Responsive Forms Documentation
15. <span class=”radio-svg-1”></span>
This is the svg
D) Checkbox Design
Let us review the structure for radio buttons. Refer to the structure below.
By changing the class of the <span> the radio button style will change.
1. <span></span>
2. <span class=”check-2”></span>
3. <span class=”check-3”></span>
4. <span class=”check-fa-1”></span>
Look for the “data-on” attribute to
change the icon (FontAwesome
Hexadecimal Code)
Here is the link for the Hex Codes
Font Awesome Cheat Sheet
SOLID – CSS3 Responsive Forms Documentation
5. <span class=”check-fa-2”></span>
6. <span class=”check-fa-3”></span>
7. <span class=”check-fa-1”></span>
8. <span class=”check-fa-2”></span>
9. <span class=”check-fa-3”></span>
10. <span class=”check-svg-1”></span> (Remember this is an svg, look for the corresponding path(s))
11. <span class=”check-svg-2”></span>
SOLID – CSS3 Responsive Forms Documentation
12. <span class=”radio-svg-2”></span>
13. <span class=”radio-svg-1”></span>
14. <span class=”radio-svg-1”></span>
15. <span class=”radio-svg-1”></span>
SOLID – CSS3 Responsive Forms Documentation
E) Toggle Switch Design
Let us review the toggle switch structure.
By adding some settings to the class “switch-label”. Toggle switch design will change.
1. <span class="switch-label”></span>
2. <span class="switch-label switch-label-fa" data-on=""></span>
3. <span class="switch-label" data-on="yes" data-off="no"></span>
4. <span class="switch-label switch-label-fa" data-on="" data-off=""></span>
This represents FontAwesome
character when switch is on.
SOLID – CSS3 Responsive Forms Documentation
5.
6.
SOLID – CSS3 Responsive Forms Documentation
F) Files
a. LESS files (for easy manipulation of css properties)
1. base.less - this LESS normalizes browser settings 2. layout.less - this LESS pertains to layout settings 3. module.less - this LESS pertains to module settings 4. module-form.less - this LESS pertains to form design settings. 5. state.less - this LESS pertains to state settings (eg. .is-active, :hover) 6. styles.lesss - this LESS consolidates settings
b. CSS files
7. base.css - this CSS normalizes browser settings 8. layout.css - this CSS pertains to layout settings 9. module.css - this CSS pertains to module settings 10. module-form.css - this LESS pertains to form design settings. 11. state.css - this CSS pertains to state settings (eg. .is-active, :hover) 12. theme.css - this CSS pertains to some default theme settings 13. styles.css - this CSS consolidates settings
G) Simple Validation of Form
Simple validation of form uses the jquery validate plugin that can be found here https://jqueryvalidation.org/.
General Structure of the Validation Takes an Object Structure as shown below:
Line 254: ‘#solid-form’ in this instance is the ID of the form (you can change the ID name if you want to)
Line 256: errorClass is the name of the class to be applied to the form element that is invalid
Line 257: errorPlacement is the function that tells the plugin where to place the error message when
encountering an invalid form element
Line 273: rules, are the set of objects to be applied to pass a specific validation
Line 331: messages, are the set of object of custom of messages that you want to convey to the user if the form
element is invalid.
For detailed information about the validation plugin visit the provided link above.
SOLID – CSS3 Responsive Forms Documentation
H) JavaScript Libraries and Files
1. jQuery 1.11.1 (JavaScript Library)
2. main.js (Custom Script) - custom javascript that contains some functions for the demo. The author recommends not
removing the script. It also contains the script for the settings on the optional live preview.
I) Some Notes
The optional live preview files must be run in a server like XAMPP, WAMP or other related
application for it uses a jquery load function.