Skip to content

A front-end improvement to Bootstrap forms with animations and a Material design

License

Notifications You must be signed in to change notification settings

runthis/swapform

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

84 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Swapform in action

A front-end improvement to Bootstrap forms with a Material design.
Supports Bootstrap versions 3, 4 and 5.
Documentation »

Report bug · Request feature

Build version bootstrap version JS gzip size CSS gzip size vulnerabilities license CodeQL

Table of contents

Quick start

What's included

swapform/
└── dist/
    ├── css/
    │   ├── swapform.css
    │   ├── swapform.css.map
    │   ├── swapform.min.css
    │   └── swapform.min.css.map
    └── js/
        ├── swapform.js
        ├── swapform.js.map
        ├── swapform.min.js
        └── swapform.min.js.map

Documentation

Quite simply, wrap an input or textarea in a <div> element with an sf-form class. Then add the sf-label class to the <label> element. Swapform will automatically perform everything else.

Input examples

Basic

<div class="sf-form">
    <label class="sf-label">Enter username</label>
    <input type="text" class="form-control">
</div>

Basic swap

Swapping label when focused

<div class="sf-form">
    <label class="sf-label" data-description="Who are you?">Enter username</label>
    <input type="text" class="form-control">
</div>

Basic swap

Swapping multiple labels when focused and when input value is filled

<div class="sf-form">
    <label class="sf-label" data-description="Who are you?" data-filled="That's what she said">
        Enter username
    </label>
    <input type="text" class="form-control">
</div>

Basic swap

Textarea examples

The <textarea> element supports the same swapping methods outlined above, and also supports automatic height expansion, fixed heights and multiple sizes. Below is a table listing the available classes for a <textarea> depending on the features and size desired.

Expanding Textarea

Classes for fixed heights and auto-expanding heights

Class Suffix Sizes Description
sf-textarea- sm, md, lg 160px, 320px, 640px Automatically expands to a maximum height based on content
sf-textarea-fixed- sm, md, lg 160px, 320px, 640px Has a fixed height

Basic, medium, fixed height

Class: sf-textarea-fixed-md

<div class="sf-form">
    <label class="sf-label">Tell me a story</label>
    <textarea class="form-control sf-textarea-fixed-md"></textarea>
</div>

Basic, large, expanding height

Class: sf-textarea-lg

<div class="sf-form">
    <label class="sf-label">Tell me a story</label>
    <textarea class="form-control sf-textarea-lg"></textarea>
</div>

Basic, large, expanding height, with swapping texts

Class: sf-textarea-lg

Focused: Surprise me!

Filled: Cool story bro

<div class="sf-form">
    <label class="sf-label" data-description="Surprise me!" data-filled="Cool story bro">Tell me a story</label>
    <textarea class="form-control sf-textarea-lg"></textarea>
</div>

Supported classes

Basic

Class Description
sf-form Used to wrap around a <label> with an accompanying <input> or <textarea>

Labels

Class Description
sf-label-sm Should be used when using form-control-sm in your input/textarea elements
sf-label Should be used when using regular form-control in your input/textarea elements
sf-label-lg Should be used when using form-control-lg in your input/textarea elements

Textarea

Class Description
sf-textarea-sm Auto expanding height up to 160px
sf-textarea-md Auto expanding height up to 320px
sf-textarea-lg Auto expanding height up to 640px
sf-textarea Auto expanding height infinitely
sf-textarea-fixed-sm Fixed height, 160px
sf-textarea-fixed-md Fixed height, 320px
sf-textarea-fixed-lg Fixed height, 640px

Supported data attributes

These are used on <input> or <textarea> elements. The color and file input types are not supported at this time.

Option Description
data-description The value is swapped in when a form input or textarea is focused
data-filled The value is swapped in when a form input or textarea has a value and is no longer focused

Screenshots

Basic

Basic swap

Using HTML

HTML Swap

Using emojis

Emoji Swap

Auto expanding textarea

Expanding Textarea

Builds

If you are using the npm build, you can rebuild the compiled assets after making any desired changes by running any of the following commands:

Option Description
css-compile Generates a non-minified version of the css and stores it in ./dist/css/swapform.css
css-minify Generates a minified version of the css and stores it in ./dist/css/swapform.min.css
js-compile-dev Generates a non-minified version of the javascript and stores it in ./js/dist/swapform.js
js-minify-dev Generates a minified version of the javascript and stores it in ./js/dist/swapform.min.js
js-compile-prod Generates a non-minified version of the javascript and stores it in ./dist/js/swapform.js
js-minify-prod Generates a minified version of the javascript and stores it in ./dist/js/swapform.min.js

All the above commands also generate source maps

Todo

  • Add a new method to detect errors on form validation and allow handling

Creator

Robert Miller