nice-forms.css
I like pretty forms and clean HTML � That's why I created nice-forms.css to help devs who want to hit the ground running, but don't want to stare at default input fields when doing so 💩
In a nutshell:- It provides a sensible input styling 'reset'
- Get nice looking forms with zero effort
- Easily customizable with css-variables
- Perfect for rapid prototyping or tweak it and make it your own.
- No hacks or unnecessary elements, pure semantics
Installation
Import nice-forms.css from unpkg
https://unpkg.com/nice-forms.css/nice-forms.css
Install via NPM
npm install nice-forms.css
Structure
All you need to do is add the class .nice-form-group
to
get a nice base style for all your input fields. Add a
small
element for additional information, this can be
below the label or below the field.
Toggle code
Input types
All available input types are included
Checkbox and Radio
These are your basic input[type="radio"]
and
input[type="checkbox"]
elements. They have a label and
can contain secondary information by adding a
small
element inside the label
.
Switch
If you want a checkbox to look like a switch, just add a
.switch
class to the checkbox input element
Toggle code
Fieldset
The fieldset
is used to group multiple related input
fields. All nested .nice-form-group
elements within
will automaticly have a smaller margin.
Toggle code
Icons
For some input types it could make sense to show a icon. These icons
are hidden by default but can be added by adding either
.icon-left
or .icon-right
to the input
element. The icons used are from
feathericons.
Toggle code
Field Validation
Fields that have a required
attribute can be valid or
invalid based on their value. When a user focuses on a invalid field
the styling is set back to default.
Toggle code
Date input
Date fields show icons by default. The month
,
week
and date
fields have a fixed min
width set at 14em. time
is set at 7em.
Toggle code
Other input types
Toggle code
Reset only
There is also a reset only version available, this version provides styled form fields out of the box without any wrapping class. This does however mean that .icon-left
, .icon-right
or .switch
are not included.
Grab the raw CSS here, or import the reset from unpkg via
https://unpkg.com/nice-forms.css@0.1.7/dist/nice-forms-reset.css
Customization
The styling is highly customizable using css variables.
Contribute
If you encounter a bug on any device or have suggestions for improvement, don't hesitate to open a bug report or pull request.
Check out the repo