CSSformalize

The Fast-Track to Stylish HTML Forms!

version 2.0.2

Introducing CSSformalize - a groundbreaking CSS framework engineered exclusively for effortless customization of native HTML forms. With just a few clicks on our intuitive on-site interface, you can define paddings, dimensions, and color schemes tailored to your preference. Simply link our lightweight CSS file to your project, integrate the automatically generated CSS variables, and watch your form designs come to life!

Key Features:

Purely Native: Leverage the power of native forms - no JavaScript involved, only CSS.
Complete Customizability: Every aspect is customizable using CSS variables for unrivaled design flexibility.
State-of-the-Art CSS Properties: CSSformalize harnesses the latest CSS properties, incorporating cutting-edge features that are ready to use.
Design Freedom: Generate a design aesthetic that aligns perfectly with your vision.
Lightweight and User-friendly: Optimized for minimum file size and easy integration for a seamless user experience.

Quick Start Guide

Getting CSSformalize working with your project is straightforward. Just follow these easy steps:

Form Customization: Use our left sidebar to adjust global variables that define the overall appearance of your forms. In the central view, observe how your adjustments affect your forms and fine-tune the design further by customizing local variables unique to each form.
Installation: You can install CSSformalize using npm by executing the following command in your command line: npm i cssformalize
Integration using different methods:
- Importing in JavaScript or TypeScript file: If you're working with a module system like ES6 or TypeScript, you can import CSSformalize in your JS or TS files: import 'cssformalize/css/css-formalize.css';
- Importing in CSS or SCSS file: If you're using CSS preprocessors, you can import CSSformalize in your CSS or SCSS files: @import 'cssformalize/css/css-formalize.css';
- Link tag integration: If your website is static or you are using a server that handles static files, you can include your CSS framework by adding the following link tag to the header of your HTML document: <link rel="stylesheet" href="node_modules/cssformalize/css/css-formalize.css">
- CDN: you can use CDN link: <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/pelinoleg/CSSformalize@master/css/css-formalize.min.css">
Variable Implementation: After linking the 'css-formalize.css' file, copy and paste the CSS variables generated during the customization process.
Copy HTML Code: Under each form group, you'll find a tab that reveals the necessary HTML code upon clicking. Copy this code into your project for the styles to take effect.