Beautiful CSS. Easily. Quickly.
Papillon comes with a clear syntax, easy to understand so you actually spend your time coding
Even though it's easy to use, Papillon ships with a lot of features allowing you to create beautiful websites as you can see in the demo.
In 2016, it's purely unthinkable to develop computers-only websites. Every feature of Papillon is designed to look great on every screen size
Papillon is built using the CSS preprocessor SASS. Quickly get started by downloading the compiled CSS or build it yourself by downloading and compiling the original source code
Grid and containers
Papillon relies on containers and two classes,
.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.
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
but you can also use the
.button class to enable it on a link
or a submit input.
Loading and disabled states
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();
Here is an example of a function shipped in
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.
Note: For now, you can't close notifications and nothing happen when you click on them but it will be added in the near future
p.notification("success","Congratulations on being awesome ;)");
Want to take a look ?Look at the demo
Happily, I provided some demo pages so you can see the extent of its power
Want to try it out ?Check out the GitHub
Everything regarding the download, informations or even the ability to contribute can be found on the GitHub of the project
Want to check out the doc ?Documentation
The documentation isn't there yet, I will start working on it soon.