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

Start using Papillon

The way you need to install Papillon depends on how you plan to use it. Make sure to pick the one that best fits your needs as you can easily be held back or overwhelmed by the lack or the overdose of features.

Easy mode

When you just need to have a beautiful website fast, and you don't care about all the settings.

If you don't want to tweak the settings and are ok with default color scheme, fonts, sizes, etc. then just download the minified papillon.min.css and papillon.js files.

Download CSS Download Javascript

Creative mode

When you want to quickly create your website but have to follow a graphical guideline, such as sticking to a logotype color scheme.

You plan on using the framework as it's intended to be, without much more to add, but our magnificient color palette isn't fitting your needs ?
No problem, you can create your unique CSS file using all the settings you need !

How to customize the framework using SASS

  1. First of all, you'll need to have the CSS preprocessor SASS installed. SASS runs using Ruby, so you'll need to install Ruby first.
    When it's done, just open the terminal ( or the command prompt if you're using Windows ) and install SASS using the Ruby package manager Gem:
                      gem install sass
  2. When SASS is installed, you are ready to unleash the framework to its full power and customize it to your needs. Just clone the repo to get all the source code:
                      git clone
    Now it's easy: just open the 3 files in src/scss/config/ These 3 files are the configuration files, containing variables representing some visual parameters of the framework.
    For example, let's say you want to change the primary color of the theme: just go into src/scss/config/colors.scss and change the variable $primary-color to the one you want.
  3. After each modification you did to the files in the src/scss/ folder, you have to recompile the framework so it will update the .css file with your values:
                      sass src/scss/main.scss:src/min/papillon.min.css
    This command compiles the main .scss file ( main.scss ), which is calling the different modules, and it compiles the framework into the src/min/papillon.min.css file but you can change the command to compile it into whatever file you need

Want to see it at work ?

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 ?


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