Style-Forge

Appearance

Style-Forge.Form ​

npm license npm Codacy Badge build

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 ​

shell
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:

css
@import 'style-forge.form';

Customization ​

css
/* Require */
@import 'style-forge.form/src/var.css';
@import 'style-forge.form/src/base.css';
@import 'style-forge.form/src/global.css';
@import 'style-forge.form/src/pseudo-classes.css';

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

@import 'style-forge.form/src/time.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

css
:root {
  --sf-gap: 0.5em;

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

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

  --sf-form-radius: 0.5em;

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

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

  /* 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%;
}