Grid and containers

Papillon relies on containers and two classes, .soft-col and .soft-row in order to have a fully responsive column system
More classes can be used to control the behaviour of your columns, if you want them to stack or not depending on the screen size.

Buttons

The main goal of Papillon is to change the ugly default aspect of pretty much every HTML element, and buttons are part of the party.
This is the default look for the <button> element, but you can also use the .button class to enable it on a link or a submit input.

Custom elements

Papillon isn't only CSS, it also ships with some JS. By importing papillon.min.js into your website, some of it will automatically run at the start ( such as the function validating inputs on a form ), while the rest are only function provided by the framework that you can use in order to gain time

How do I use them ?

Just create on instance of Papillon() that you will use to run the functions:

                var p = new Papillon();
              

Example

Here is an example of a function shipped in papillon.min.js.
Called "notification", this function allows you to easily create a notification of 4 differents types ( info, success, warnig, danger ), appearing on the bottom right corner of the screen.
Example use:

                p.notification("success","Congratulations on being awesome ;)");