npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

cssformalize

v2.0.2

Published

CSSformalize is a groundbreaking CSS framework for effortless customization of native HTML forms. Fully customizable with CSS variables, requires no JavaScript.

Downloads

6

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

pelinolegpelinoleg

Keywords

CSSHTMLFormsDesignCustomizationFrameworkCSSformalizeStylingWeb DevelopmentFrontend

Readme

GitHub forks GitHub issues GitHub stars

CSSformalize v2.0.2

The Fast-Track to Stylish HTML Forms!

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

Dark and Light mode example for custom css forms

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