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.
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
-
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
-
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 https://github.com/Rominou34/papillon.git
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 intosrc/scss/config/colors.scss
and change the variable$primary-color
to the one you want. -
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
.scss
file (main.scss
), which is calling the different modules, and it compiles the framework into thesrc/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 ?
Documentation
The documentation isn't there yet, I will start working on it soon.