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.
15
Embed
SOLID CSS3 Responsive Formsagatef.com.br/Plugins/master-demo/documentation.pdf · SOLID – CSS3 Responsive Forms Documentation 3. module.css – the module.css settings contains
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
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.