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.

mailto:[email protected]


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

https://fortawesome.github.io/Font-Awesome/get-started/


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.


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.


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


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>


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

https://fortawesome.github.io/Font-Awesome/cheatsheet/






10. <span class=”radio-svg-1”></span>

This is the svg


11. <span class=”radio-svg-2”></span> (Why 2?, there are two paths)

This is the svg


This is the svg


This is the svg


This is the svg



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

https://fortawesome.github.io/Font-Awesome/cheatsheet/







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>


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="&#xf001"></span>

3. <span class="switch-label" data-on="yes" data-off="no"></span>

4. <span class="switch-label switch-label-fa" data-on="&#xf00c" data-off="&#xf00d"></span>

This represents FontAwesome

character when switch is on.


5.

6.


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.

https://jqueryvalidation.org/


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.

solid css3 responsive formsagatef.com.br/plugins/master-demo/documentation.pdf · solid – css3...

Documents