Three free form styles
This is one of the first things; I’ve worked on aside from what’s posts, to give away. It’s quite difficult to figure out what to design to give away, without just adding to the masses of things out there already. I’ve decided to code up some form styles. So you should be able to grab their styles and apply them right away to your forms. There are three variations.
127 views
This is one of the first things; I’ve worked on aside from what’s posts, to give away. It’s quite difficult to figure out what to design to give away, without just adding to the masses of things out there already. I’ve decided to code up some form styles. So you should be able to grab their styles and apply them right away to your forms. There are three variations.
Style one
See the Pen Dimensional form style by Steve (@stevemckinney) on CodePen.
Style two
See the Pen Flat form style by Steve (@stevemckinney) on CodePen.
Style three
See the Pen Bulky form style by Steve (@stevemckinney) on CodePen.
Usage
Each element requires the .input-base class. This applies a reset, that I have wrote about previously.
Text fields (text, email, textarea, etc)
These require the .input-text class. The only difference between these is I’ve applied a min-height to the textarea.
Select field
These require the .input-select class.
Checkbox
These require the .input-checkbox class.
Radio
These require the .input-radio class.
Submit button
These require the .button class.
View on GithubIf you have any trouble using them, or any suggestions for what would help you, feel free to contact me or tweet.