Papillon ( pa.pi.jõ )
The beautiful, easy to use CSS framework

Beautiful CSS. Easily. Quickly.

Easy

Papillon comes with a clear syntax, easy to understand so you actually spend your time coding

Powerful

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.

Responsive

In 2016, it's purely unthinkable to develop computers-only websites. Every feature of Papillon is designed to look great on every screen size

Complete

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

Quick tour

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.

1.1
1.2
1.3
2.1
2.2
2.3

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.

Basic buttons

Modifier classes

Loading and disabled states

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 ;)");
              
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


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.

Note: The framework is still in development so watch the repo if you want to be aware of the latest features