Style-Forge.Form

Style-Forge.Form package is a versatile and easy-to-use library designed to streamline the creation and management of forms in web applications. It offers a robust set of tools to handle form validation, styling, and submission processes, enhancing user experience and developer productivity.

Installation

npm i style-forge.form

Usage

After installation, you can import the CSS file into your project or, if you are using Webpack or another module bundler:

@import 'style-forge.form';

Customization

/* Require */
@import 'style-forge.form/src/var.css';

/* Inputs */
@import 'style-forge.form/src/button.css';
@import 'style-forge.form/src/checkbox-radio.css';
@import 'style-forge.form/src/color.css';
@import 'style-forge.form/src/file.css';
@import 'style-forge.form/src/input.css';
@import 'style-forge.form/src/select.css';
@import 'style-forge.form/src/textarea.css';

/* Custom inputs */
@import 'style-forge.form/src/switch.css';

/* Loader */
@import 'style-forge.form/src/loading.css';

/* Validation */
@import 'style-forge.form/src/validate.css';

Variables

--sf-c - these are colors in HSL

:root {
  /* font-family */
  --sf-form-ff: system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';

  /* font-size */
  --sf-form-fz: 0.95rem;
  --sf-form-fz-small: 0.75rem;

  --sf-gap: 0.5em;

  --sf-disabled: 0.4; /* opacity */

  --sf-form-radius: 0.5em;

  --sf-form-p-input-block: 0.5em;
  --sf-form-p-input-inline: 0.5em;

  /* switch */
  --sf-form-switch-size: 1rem;

  /* colors */
  --sf-form-c-white: 0 0% 100%;
  --sf-form-c-info: 200 100% 60%;
  --sf-form-c-error: 0 100% 60%;
  --sf-form-c-success: 0 100% 60%;
  --sf-form-c-warning: 39 100% 50%;

  --sf-form-c-bg: 0 0% 100%;
  --sf-form-c-bd: 0 0% 10%;
  --sf-form-c-loading: 0 0% 10%;
  --sf-form-c-txt: 0 0% 10%;

  /* colors dark theme */
  --sf-form-dark-c-white: 0 0% 100%;
  --sf-form-dark-c-info: 219 79% 66%;
  --sf-form-dark-c-error: 0 100% 65%;
  --sf-form-dark-c-success: 0 100% 65%;
  --sf-form-dark-c-warning: 39 100% 60%;

  --sf-form-dark-c-bg: 0 0% 20%;
  --sf-form-dark-c-bd: 0 0% 100%;
  --sf-form-dark-c-loading: 0 0% 100%;
  --sf-form-dark-c-txt: 0 0% 90%;
}