+
+
+
+
Paper CSS
+ the less formal css framework
+
+
+
+
+
+
Flexbox
+
Flexgrid
+
+
+
col-4 col
+
col-4 col
+
col-4 col
+
+
+
col-3 col
+
col-9 col
+
+
+
sm-6 md-8 lg-10 col
+
sm-6 md-4 lg-2 col
+
+
+
sm-5 col
+
col-fill col
+
col-fill col
+
+
+
Aligned
+
Left (default)
+
+
+
Aligned
+
Right (flex-right)
+
+
+
Aligned
+
Right (flex-right)
+
+
+
Aligned
+
to edges (flex-edges)
+
+
+
Aligned
+
to be evenly spaced (flex-spaces)
+
+
+
Aligned top
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
+
+
+
+
Aligned middle
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
+
+
+
+
Aligned bottom
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
+
+
+
+
Align bottom
+
Align middle
+
Align top
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras lorem lectus, lobortis a nibh non, luctus luctus erat posuere. Curabitur ac turpis aliquam, malesuada elit suscipit, blandit dolor.
+
+
+
+
+
+
Typography
+
How pretty is the text?
+
Heading 1
+
Heading 2
+
Heading 3
+
Heading 4
+
Heading 5
+
Heading 6
+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ultrices, eros non elementum accumsan, massa nulla
+ aliquam libero, ut posuere justo nibh ac ipsum. Aliquam blandit commodo justo at laoreet. Suspendisse potenti. Duis
+ magna neque, venenatis non libero a, tincidunt convallis diam. Donec vel fermentum ante. Quisque diam nisl, vestibulum
+ imperdiet sapien nec, interdum fringilla lorem. Morbi sed arcu facilisis, maximus justo vel, porttitor nisl. Nam
+ suscipit metus facilisis iaculis vestibulum.
+
+
+
+
+
Lists
+
Ordered Lists
+
+ - Do this
+ - Then this
+ - Finally this
+ - Then we'll go one deeper
+
+ - Dillon
+ - Francis
+
+ - What if we went...
+ - One more deeper?
+
+ - DJ
+ - Hanzel
+
+ - Five levels should be enough
+ - Right?
+
+
+
+
+ - But don't forget this
+
+
Unordered Lists
+
+ - Let's try this
+ - Let's try this again
+
+ - And now we are nested
+ - Pretty cool?
+
+ - The list items are just text
+ - From this font
+
+ - We'll keep going
+ - Until we hit
+
+
+
+
+ - And now we're are the top!
+
+
+
+
Code
+
Let's make some pretty <code>
+
Print files backwards using tac
+
To stop a process, hit ctrl + c
+
+function add(x, y) {
+ return x + y;
+}
+
+
+
Tables
+
Regular
+
+
+
+ | # |
+ Name |
+ Position |
+ Location |
+
+
+
+
+ | 1 |
+ Bob Dylan |
+ Musician |
+ California, USA |
+
+
+ | 2 |
+ Eric Claption |
+ Musician |
+ Ohio, USA |
+
+
+ | 3 |
+ Daniel Kahneman |
+ Psychologist |
+ California, USA |
+
+
+
+
Hover
+
+
+
+ | # |
+ Name |
+ Position |
+ Location |
+
+
+
+
+ | 1 |
+ Bob Dylan |
+ Musician |
+ California, USA |
+
+
+ | 2 |
+ Eric Claption |
+ Musician |
+ Ohio, USA |
+
+
+ | 3 |
+ Daniel Kahneman |
+ Psychologist |
+ California, USA |
+
+
+
+
Alternating
+
+
+
+ | # |
+ Name |
+ Position |
+ Location |
+
+
+
+
+ | 1 |
+ Bob Dylan |
+ Musician |
+ California, USA |
+
+
+ | 2 |
+ Eric Claption |
+ Musician |
+ Ohio, USA |
+
+
+ | 3 |
+ Daniel Kahneman |
+ Psychologist |
+ California, USA |
+
+
+
+
+
+
Colors
+
Text
+
Text primary
+
Text secondary
+
Text success
+
Text warning
+
Text danger
+
Backgrounds
+
+
Background primary
+
Background secondary
+
Background success
+
Background warning
+
Background danger
+
+
+
+
Borders & Shadows
+
Borders
+
+
Default Border
+
Border-1
+
Border-2
+
+
+
Border-3
+
Border-4
+
Border-5
+
+
Border Colors
+
+
Border primary
+
Border secondary
+
Border success
+
Border warning
+
Border danger
+
Border white
+
+
Child Borders
+
Use this if you want all children to have a border. This will alternate through the different border styles defined above instead of having to add the border class for each element.
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
Shadows
+
+
Large
+
Default
+
Small
+
Hover
+
+
Child Shadows
+
+
Shadow
+
Shadow
+
Shadow
+
+
Child Shadows Hover
+
+
Shadow
+
Shadow
+
Shadow
+
+
+
+
Utilities
+
Margin
+
+
Margin
+
Margin-large
+
Margin-top-small
+
+
Padding
+
+
Padding-small
+
Padding-none
+
Padding-left-large
+
+
+
+
Images
+
Responsive
+
Images by default are responsive
+
+
Float
+
You can also float responsive images to fit neatly with your text
+
+ 
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur non elit sed lorem vulputate consectetur sed vel orci. Nunc orci metus, hendrerit viverra diam a, viverra efficitur nisi. Suspendisse ante sapien, porta vitae augue et, pulvinar posuere nibh. Suspendisse id commodo sem, vestibulum malesuada erat. Duis luctus est sit amet nisl maximus porta. Curabitur tempor nisi tincidunt ultricies rutrum. Nam finibus turpis ut nibh dignissim, in tincidunt mauris suscipit. Curabitur sollicitudin mi quis orci semper, nec egestas nibh mollis. Aenean pellentesque lectus rutrum, ultrices felis malesuada, finibus purus.
+ Morbi eleifend pellentesque justo, quis vestibulum mi. Donec porta ipsum tellus, ac scelerisque lectus pellentesque eget. Etiam quis rutrum dui. Nulla facilisi. Donec imperdiet mattis mi nec fringilla. Donec mollis augue sed viverra placerat. Donec varius, sem sed porttitor euismod, est nunc varius tellus, eget molestie urna arcu ac turpis. Phasellus id sem elit. Vivamus pellentesque mauris vel ex laoreet varius. Vivamus non tempor libero. Nam consectetur nisi erat, ac varius elit porttitor quis. Morbi ullamcorper, tortor in sagittis tempus, justo ipsum pretium urna, ut bibendum nisl orci et eros. Quisque ut ipsum neque. Integer sapien dolor, vestibulum id maximus ac, pharetra eu augue.
+ 
+ Aenean mauris tellus, facilisis sed quam non, tincidunt rutrum risus. Fusce quam urna, commodo vitae nunc condimentum, efficitur commodo libero. Sed dignissim odio enim, ac pharetra dui laoreet id. Suspendisse nec accumsan erat. Integer sit amet leo arcu. Proin sagittis blandit tempor. Vivamus at egestas lectus. Mauris eros tellus, egestas ac neque eget, lacinia sagittis ante. Phasellus faucibus suscipit erat, eget malesuada neque congue non.
+
+
No Responsive & No Borders
+
If you don't like the default, you can just add the class no-responsive to prevent the image from being responsive. You can also remove the default border with no-border.
+
+
+
+
About
+
I got tired of straight lines and clean pages on the internet. I also wanted to learn more about flexbox and less. So I made Paper CSS to solve these two challenges of mine :)
+
The goal of Paper CSS is to be as minimal as possible when adding classes. For example, a button should just look like a paper button. There shouldn't be a need to add a class such as paper-button. Because of this, adding Paper CSS to a markdown generated page should instantly paper-ize it.
+
While I'm proud of how it's turned out so far, I think there's a lot that can still be done to make it better. Such things as refactoring, adding more utility classes and more border types (like dashed/dotted) could really polish off this framework. That's why it's open sourced and available for pull requests!
+
If you are new to git/less, this would be a great project to get your feet wet with. I'd be happy to help walk you through the pull request process!
+
+
+
Made with ๐ by Rhyne
+
+