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


H1 Title Secondary text

H2 Title Secondary text

H3 Title Secondary text

H4 Title Secondary text

H5 Title Secondary text
H6 Title Secondary text


This is a large container ( 1200 px )
This is a medium container ( 960 px )
This is a small container ( 750 px )

Grid Layout

With Soft CSS, you can organize your components using a responsive grid layout. A lot Pretty much all other CSS frameworks can do that, but Soft CSS is different because it's easy to use, and you have full control over it.
The layout is based on a 12-tiles grid, in which you put columns which take a certain number of tiles. For example you can put 4 columns of 3 tiles each. If you want them to stack under a certain width, use the class .stack-lg, .stack-md or .stack-sm depending on the threshold width you need and assign the .soft-col class to the container.
If you don't want them to stack like that, put them in a .soft-row instead of a .soft-col
The nice thing is that you can use one inside of the other, so you can stack responsive rows inside of a column, like in the example below, where the global container is .soft-row.stack-lg, containing 4 columns that won't stack. However, the first column is a .soft-col containing 3 other columns that will stack.
So you get 3 columns that will stack when the display narrows + 3 columns that will never stack.
This column ...
... and this one ...
... and this one will stack
This column ...
... and this one ...
... and this one will not
And in reverse mode, you can stack rows which each contain multiple columns
We will always
stay together <3
Don't go below me plz
k dude chill
I don't know what text
I will put here
And finally, if you put tiles that are too big together, they will wrap on a new line


Soft CSS comes with a pack of redefined buttons, with a better and more modern design than the default ones, and a bit of choice for the colors. You can use it either by creating a button ( <button> ) or by using the class .button on a link.
Primary link Danger link
You can use the class .large to mark a bigger button
Large Secondary link
And you can also use .loading and .disabled

Custom Elements

( Or the components that make Soft CSS unique )

So while developping Soft CSS, I realized that the number of classes started to grow really fast, and that at one point everybody using the framework would be lost while reading the doc.
Then I learned about the ability to create custom HTML elements
So, when you're using Soft CSS and you want to create a popup alert masking the whole screen, you don't need to do some ugly code like this:

      <div class="popup alert">
        <h2 class="popup-header">ALERT</h2>
        <p>Alert message</p>

Instead, you use the custom element soft-popup like this:

      <soft-popup class="alert">
        <p>Alert message</p>

Don't see the difference ?
That's because it is only the top of the iceberg.
When you want to create your popup dynamically, you have to create a Javascript function creating a div, then set it the "popup" class, then another thing and you end up with a big ass ugly function.
But Soft CSS takes care of all that
In the "soft.js" file you will find all the constructors for the custom elements, so if you want to create an alert popup you can do it in literally one line:

      softPopup('alert', 'Alert header', 'Alert message');

You don't trust me ? Enter the line given in the example in the console and watch what happens. You can also replace 'alert' by 'success', 'info' or 'warning' for more options.


Soft CSS comes with simple to use tooltips
Top !
Right !
Bottom !
Left !
Hover me !

Modifiers classes

Soft CSS will ship with a lot of handy classes you can use to quickly customize elements without a headache. Want an element to float right without having to do some inline CSS or create a new class ? Just use .right
Here you can see 2 classes changing the first letter of a paragraph, and the redefined blockquote
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lobortis massa a tristique ultricies. Nullam non ex erat. Sed eu nisl a velit efficitur tristique. Duis bibendum mattis metus, dignissim mattis eros eleifend vel. Maecenas faucibus, sem in gravida varius, nisi quam dictum velit, eget fermentum sapien est eget risus.
This is a truly verified quote inserted right into the text
Nulla est nunc, scelerisque ut lorem lacinia, ultrices mattis arcu. Cras felis urna, iaculis at elementum sit amet, accumsan molestie enim. Suspendisse potenti. Suspendisse potenti. Integer pretium massa augue. Vivamus hendrerit eu nisl a tempor.
A reverse quote with the source
Romain Arnaud in 40 ans toujours puceau
Curabitur rhoncus diam ornare tempus lacinia. Nullam consectetur, arcu vel tincidunt laoreet, massa neque eleifend ipsum, vitae efficitur est est ac turpis. Quisque at hendrerit nisl.


Soft CSS will also ship with a lot of beautiful CSS animations
Here is a heartbeat one ( actually there are 2 animations: one just changes the scale of the element, the other the background color )


To Do Doing Done
Better config file Navigation menus Titles
Animations Forms Buttons
Documentation Custom elements A cool front page ( yay )
Grid layout ( some bugs )