pelinoleg / cssformalize

Custom styles for standard html forms

CSSformalize v2.0.2

The Fast-Track to Stylish HTML Forms!

For a live demo, visit cssformalize.com. Happy designing!

CSSformalize is a groundbreaking CSS framework engineered exclusively for effortless customization of native HTML forms. With just a few clicks on our intuitive on-site interface at cssformalize.com, 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:

1. 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.
2. Installation: You can install CSSformalize using npm by executing the following command in your command line: npm i cssformalize
3. 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">

4. Variable Implementation: After linking the 'css-formalize.css' file, copy and paste the CSS variables generated during the customization process.
5. 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.

cssformalize's Issues

Incorrect show html for File Upload/Color Picker

Should be something like:

<input class="cform cform-custom-file" type="file">
<input type="color" class="cform cform-custom-picker">

I think! Thanks for you work on this.

"data-theme=dark" only for inputs as intended

First I would like to thank you for this beautiful CSS; Really eye pleasing.

My question is: Can I only apply style 'as intended on input elements' and not background or anything other than that (links ...)

I was integrating CCF with Chota.css library which is my root style, Chota already has dark mode for document.body.dark while CCF works with document.html.data-theme=dark, in this case, they can coexist nicely but if only CCF only acts on inputs and not anything else like background color.