The form styling provided allows you to easily style forms to your liking. Most elements inside a form will be styled using the values provided, however some inputs (ones that look and behave like buttons, checkboxes and radios) might not be styled the same way. This is intentional and can be resolved using the provided button styles and mixins to complement the form styles.
To customize your form styling, use the mixin provided in the _form.scss partial file.
##Definition
make-frm(
$frm-name,
$frm-border,
$frm-border-radius,
$frm-margin,
$frm-padding,
$frm-focus-color,
$frm-invalid-color,
$frm-disabled-cursor,
$frm-disabled-opacity,
$frm-readonly-bg-color,
$frm-readonly-border-color,
$frm-select-height,
$frm-label-margin,
$frm-ctrl-group-name,
$frm-ctrl-group-margin,
$frm-inline-name,
$frm-aligned-name,
$frm-aligned-label-width)
##Parameters
- $frm-name : The class name of the form.
- $frm-border : The border of the form elements.
- $frm-border-radius : The border-radius of the form elements.
- $frm-margin : The margin of the form elements.
- $frm-padding : The padding of the form elements.
- $frm-focus-color : The color used to mark the focused form element.
- $frm-invalid-color : The color used to mark an invalid form element.
- $frm-disabled-cursor : The cursor style when hovering over disabled form elements.
- $frm-disabled-opacity : The opacity of the form elements when disabled.
- $frm-readonly-bg-color : The background color of the form elements when they are readonly.
- $frm-readonly-border-color : The border color of the form elements when they are readonly.
- $frm-select-height : The height for non-multiline select elements in the form.
- $frm-label-margin : The margin for the form's label elements.
- $frm-ctrl-group-name : The class name of the control groups in the form.
- $frm-ctl-group-margin : The margin for control groups inside the form.
- $frm-inline-name : The class name for forms with inline style.
- $frm-aligned-name : The class name for forms with aligned style.
- $frm-aligned-label-width : The width of labels in forms with aligned style.
Notes:
- [1] : Input elements with button-like style (i.e. submit, reset, button etc.) are not affected by form styling. Please use the button styles and mixins provided to properly style them to your liking.
##Remarks
- The default form styling is
stacked
. To change this styling, additional classes are provided for inline and aligned styles. - Parts of the form styling can be stripped manually, like the extra styles for inline and aligned, or the control groups system.
- The form styling mixin can be tweaked to apply to all forms by default. This can be done by modifying the SCSS file to apply to all
form
elements instead of elements with the specified class.
mini.css is a minimal Sass-y responsive mobile-first style-agnostic CSS framework that allows you to build very lightweight pages with minimal effort. It is built using Sass (SCSS), is fully customizable and hopes to allow designers and developers build the webpages they want. The framework is licensed under the MIT license. Contributions and feedback are always welcome.