Foundation CSS Forms Sass Reference

Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.

Forms on a web page allow a user to enter data that is sent to a server for processing. Forms can resemble paper or database forms and provides the user to fill in various types of input fields such as text type, password type, number type, email type, or maybe some other type of input. Forms are generally used when you want to collect data from the user. For example, a user wants to buy a bag online, so he/she has to first enter their shipping address in the address form and then add their payment detail in the payment form to place an order.

Variable Used:

Variable-Name	Description	Type	Default Value
$fieldset-border	This variable is used to define the default border around custom fieldsets.	Border	1px solid $medium-gray
$fieldset-padding	This variable is used to define the default padding inside custom fieldsets.	Number	rem-calc(20)
$fieldset-margin	This variable is used to define the default margin around custom fieldsets.	Number	rem-calc(18 0)
$legend-padding	This variable is used to define the default padding between the legend text and the fieldset border.	Number	rem-calc(0 3)
$form-spacing	This variable is used to define the global spacing for form elements.	Number	rem-calc(16)
$helptext-color	This variable is used to define the default color for the help text.	Color	$black
$helptext-font-size	This variable is used to define the default font size for the help text.	Number	rem-calc(13)
$helptext-font-style	This variable is used to define the default font style for the help text.	Keyword	italic
$input-prefix-color	This variable is used to define the color of labels prefixed to an input.	Color	$black
$input-prefix-background	This variable is used to define the background color of labels prefixed to an input.	Color	$light-gray
$input-prefix-border	This variable is used to define the border around labels prefixed to an input.	Border	1px solid $medium-gray
$input-prefix-padding	This variable is used to define the left/right padding of a pre/postfixed input label		1rem
$form-label-color	This variable is used to define the color for form labels.	Color	$black
$form-label-font-size	This variable is used to define the font size for form labels.	Number	rem-calc(14)
$form-label-font-weight	This variable is used to define the font weight for form labels.	Keyword	$global-weight-normal
$form-label-line-height	This variable is used to define the line height for form labels.	Number	1.8
$select-background	This variable is used to define the background color for select menus.	Color	$white
$select-triangle-color	This variable is used to define the color of the dropdown triangle inside select menus.	Color	$dark-gray
$select-radius	This variable is used to define the default radius for select menus.	Color	$global-radius
$input-color	This variable is used to define the font color of text inputs.	Color	$black
$input-placeholder-color	This variable is used to define the font color of placeholder text within text inputs.	Color	$medium-gray
$input-font-family	This variable is used to define the font family of text inputs.	Font	inherit
$input-font-size	This variable is used to define the font size of text inputs.	Number	rem-calc(16)
$input-font-weight	This variable is used to define the font weight of text inputs.	Keyword	$global-weight-normal
$input-line-height	This variable is used to define the line height of text inputs.	Keyword	$global-lineheight
$input-background	This variable is used to define the background color of text inputs.	Color	$white
$input-background-focus	This variable is used to define the background color of focused text inputs.	Color	$white
$input-background-disabled	This variable is used to define the background color of disabled text inputs.	Color	$light-gray
$input-border	This variable is used to define the border around text inputs.	Border	1px solid $medium-gray
$input-border-focus	This variable is used to define the border around focused text inputs.	Color	1px solid $dark-gray
$input-padding	This variable is used to define the padding of text inputs.	Color	$form-spacing * 0.5
$input-shadow	This variable is used to define the box shadow inside text inputs when not focused.	Shadow	inset 0 1px 2px rgba($black, 0.1)
$input-shadow-focus	This variable is used to define the box shadow outside text inputs when focused.	Shadow	0 0 5px $medium-gray
$input-cursor-disabled	This variable is used to define the cursor to use when hovering over a disabled text input.	Cursor	not-allowed
$input-transition	This variable is used to define the properties to transition on text inputs.	Transition	box-shadow 0.5s, border-color 0.25s ease-in-out
$input-number-spinners	This variable is used to define the Enables the up/down buttons that chrome and firefox add to <input type=’number’> elements.	Boolean	true
$input-radius	This variable is used to define the radius for text inputs.	Border	$global-radius
$form-button-radius	This variable is used to define the border radius for form buttons, defaulted to global-radius.	Number	$global-radius
$meter-height	This variable is used to define the height of an <meter> element.	Length	1rem
$meter-radius	This variable is used to define the Border radius of an <meter> element.	Length	$global-radius
$meter-background	This variable is used to define the background color of an <meter> element.	Color	$medium-gray
$meter-fill-good	This variable is used to define the Meter fill for an optimal value in an <meter> element.	Color	$success-color
$meter-fill-medium	This variable is used to define the meter fill for an average value in an <meter> element.	Color	$warning-color
$meter-fill-bad	This variable is used to define the meter fill for a suboptimal value in an <meter> element.	Color	$alert-color
$progress-height	This variable is used to define the height of a progress bar.	Number	1rem
$progress-background	This variable is used to define the background color of a progress bar.	Color	$medium-gray
$progress-margin-bottom	This variable is used to define the bottom margin of a progress bar.	Number	$global-margin
$progress-meter-background	This variable is used to define the default color of a progress bar’s meter.	Color	$primary-color
$progress-radius	This variable is used to define the default radius of a progress bar.	Number	$global-radius
$slider-height	This variable is used to define the default height of the slider.	Number	0.5rem
$slider-background	This variable is used to define the default background color of the slider’s track.	Color	$light-gray
$slider-fill-background	This variable is used to define the default color of the active fill color of the slider.	Color	$medium-gray
$slider-handle-height	This variable is used to define the default height of the handle of the slider.	Number	1.4rem
$slider-handle-width	This variable is used to define the default width of the handle of the slider.	Number	1.4rem
$slider-handle-background	This variable is used to define the default color of the handle for the slider.	Color	$primary-color
$slider-opacity-disabled	This variable is used to define the default fade amount of a disabled slider.	Number	0.25
$slider-radius	This variable is used to define the default radius for the slider.	Number	$global-radius

Example 1: In the below code, we will make use of the above variable to demonstrate the use of form.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">

    <link rel="stylesheet" href="style.css">

    <title>GeeksforGeeks</title>
    <!-- font-awesome cdn -->
    <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
    </script>
</head>

<body>
    <center>
        <h1 class="title" style="color:green;">
            GeeksforGeeks
        </h1>

        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>

        <div style="width:60%;">
            <label>User Name
                <input type="password"
                    aria-describedby="passwordHelpText">
            </label>

            <label>Password
                <input type="password"
                    aria-describedby="passwordHelpText">
            </label>
        </div>
    </center>
</body>

</html>

SASS Code:

$form-label-color: green;
label{
  color:$form-label-color;
}

Compiled CSS Code:

label {
  color: green;
}

Output:

Example 2: In the below code, we will make use of the above variable to demonstrate the use of form.

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <!-- Compressed CSS -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css">

    <link rel="stylesheet" href="style.css">

    <!-- font-awesome cdn -->
    <script src=
'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/js/all.min.js'>
    </script>
</head>

<body>
    <center>
        <h1 class="title" style="color:green;">
            GeeksforGeeks
        </h1>

        <h3 class="subtitle">
            A computer science portal for geeks
        </h3>

        <div style="width:60%;">
            <label>User Name
                <input type="password"
                    aria-describedby="passwordHelpText">
            </label>
            <label>Password
                <input type="password"
                    aria-describedby="passwordHelpText">
            </label>
        </div>
    </center>
</body>

</html>

SASS Code:

$form-label-font-weight: 40px;
label{
  font-size:$form-label-font-weight;
}

Compiled CSS Code:

label {
  font-size: 40px; 
}

Output:

Reference: https://get.foundation/sites/docs/forms.html