Welcome to our detailed guide on Formbase, a powerful CSS solution designed to bring consistency and beauty to your web forms by eliminating cross-browser bugs and inconsistencies. Whether you’re a novice or an experienced developer, this guide will walk you through everything you need to know to get started with Formbase.

What is Formbase?

Formbase is a library that applies elegant default styles to common input elements, making your forms visually appealing and user-friendly across all modern browsers, including Internet Explorer 11. This lightweight CSS framework can be easily integrated without any complications since it has zero dependencies and requires no JavaScript.

Table of Contents

• Demos
• Features
• Setup
• Usage
• Options
• Semver Strategy

Demos

To see Formbase in action, you can explore the following demo:

Name	Description	Link
Default	Includes all features.	Try it on CodePen

Features

• Compatible with all modern browsers and IE11
• No JavaScript dependency, just CSS
• Uniform styles for inputs, textareas, selects, checkboxes, and radio buttons
• Consistent styling throughout browsers
• Zero dependencies required

Setup

Setting up Formbase is straightforward. We recommend installing it using npm or yarn. Run one of the following commands in your terminal:

npm install formbase

yarn add formbase

Next, include the CSS file in the head of your HTML document:

<link rel="stylesheet" href="dist/formbase.min.css">

Alternatively, you can import the SASS file directly:

@import "src/styles/main";

Usage

Here’s how to apply Formbase styles to various input elements:

Input

<input class="input" type="text">

Textarea

<textarea class="input" rows="8" cols="40"></textarea>

Select

<select class="select">
  <option selected disabled>-option</option>
  <option value="one">One</option>
  <option value="two">Two</option>
</select>

Radio

<div class="control">
  <input class="control__input" id="Radio" type="radio">
  <label class="control__label" for="Radio">Radio</label>
</div>

Checkbox

<div class="control">
  <input class="control__input" id="checkbox" type="checkbox">
  <label class="control__label" for="checkbox">Checkbox</label>
</div>

Options

Formbase options allow you to customize the look and feel by importing the SASS file directly. You can change several settings:

$formbase__prefix: "";  // Class name prefix
$formbase__margin: .9rem;  // Margin
$formbase__padding: .6rem;  // Padding
$formbase__select_size: 12px;  // Size of the select arrow
$formbase__control_size: 20px;  // Size of the checkbox and radio button
$formbase__radius: 0;  // Input border radius
$formbase__svg: #000;  // Hex color for svgs
$formbase__color: #000;  // Input and label color
$formbase__placeholder: #999;  // Input placeholder color
$formbase__background: #fff;  // Background color
$formbase__border: #bbb;  // Border color
$formbase__active: #17f;  // Active highlight color
$formbase__shadow: inset 0 1px 3px rgba(0, 0, 0, .05);  // Shadow styling
$formbase__duration: .3s;  // Transition duration
$formbase__timing: ease;  // Transition timing

Note: Use absolute units (px) for the control size to maintain the appearance of your elements.

Semver Strategy

Formbase follows semantic versioning. Any change to CSS rules classified as breaking will result in a major release. Non-impactful changes will lead to patch releases, while no changes are considered minor.

Troubleshooting

If you encounter issues with Formbase, here are a few troubleshooting tips:

• Ensure you have included the CSS file correctly in your HTML document.
• Check your browser version compatibility.
• Look for conflicts with other CSS frameworks you might be using.

For more insights, updates, or to collaborate on AI development projects, stay connected with fxis.ai.

Wrap-Up

At fxis.ai, we believe that such advancements are crucial for the future of AI, as they enable more comprehensive and effective solutions. Our team is continually exploring new methodologies to push the envelope in artificial intelligence, ensuring that our clients benefit from the latest technological innovations.