The flexgrid is a grid system that supports up to 12 columns per row. Because it uses flexbox (rather than just %widths), we also get the benefit of the fun parts of flexbox like alignment in more complex ways than normal.
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
Center (flex-center)
Aligned
to edges (flex-edges)
Aligned
to be evenly spaced (flex-spaces)
Aligned top
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
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
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.
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.
<ol>
<li>Do this</li>
<li>Then this</li>
<li>Finally this</li>
<li>Then we'll go one deeper</li>
<ol>
<li>Dillon</li>
<li>Francis</li>
<ol>
<li>What if we went...</li>
<li>One more deeper?</li>
<ol>
<li>DJ</li>
<li>Hanzel</li>
<ol>
<li>Five levels should be enough</li>
<li>Right?</li>
</ol>
</ol>
</ol>
</ol>
<li>But don't forget this</li>
</ol>
<!-- Replace ol with ul for unordered lists. Go up to 5 levels deep! -->
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;
}
<p>Let's make some pretty <code><code></code></p>
<p>Print files backwards using <kbd>tac</kbd></p>
<p>To stop a process, hit <kbd>ctrl + c</kbd></p>
<pre>
function add(x, y) {
return x + y;
}
</pre>
You can add popovers, also called tooltips, on your elements. popover-[position] attribute is the popover text content and it can be: top, left, right, bottom.
Popover left position
Popover top position
Popover bottom position
Popover right position
<p popover-left="Popover on left">Popover left position</p>
<p popover-top="Popover on top">Popover top position</p>
<p popover-bottom="Popover on bottom">Popover bottom position</p>
<p popover-right="Popover on right">Popover right position</p>
But you can also popover on pretty much any element you want, it can be on a button, on a table cell, ...
<button popover-top="Popover on top">Popover on top and on a button!</button>
Cards
Full card example
It is possible to not put all the sub-classes like card-title, card-subtitle, card-text, ... But instead the framework will recognize the element properly if it's a h4, h5, p, ... And you need to put all this content on a div with card class.
My awesome Paper card!
Nice looking subtitle.
Notice that the card width in this example have been set to 20rem, otherwise it will try to fill the current container/row where the card is.
<div class="card" style="width: 20rem;">
<img src="https://picsum.photos/768" alt="Card example image">
<div class="card-body">
<h4 class="card-title">My awesome Paper card!</h4>
<h5 class="card-subtitle">Nice looking subtitle.</h5>
<p class="card-text">Notice that the card width in this example have been set to 20rem, otherwise it will try to fill the current container/row where the card is.</p>
<button>Let me go here!</button>
</div>
</div>
Card title, text, links
My awesome Paper card!
Nice looking subtitle.
This is another example of a card without image. Cards are also meant to be used without images, but with text/links/buttons.
<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">My awesome Paper card!</h4>
<h5 class="card-subtitle">Nice looking subtitle.</h5>
<p class="card-text">This is another example of a card without image. Cards are also meant to be used without images, but with text/links/buttons.</p>
<a class="card-link" href="#">First link</a>
<a class="card-link" href="#">Second link</a>
</div>
</div>
Image on top or bottom
My awesome Paper card!
Nice looking subtitle.
You can also place image on the bottom of the card.
<div class="card" style="width: 20rem;">
<div class="card-body">
<h4 class="card-title">My awesome Paper card!</h4>
<h5 class="card-subtitle">Nice looking subtitle.</h5>
<p class="card-text">You can also place image on the bottom of the card.</p>
<button>Let me go here!</button>
</div>
<img class="image-bottom" src="https://unsplash.it/550/250" alt="Card example image">
</div>
Header and footer
Header
My awesome Paper card!
Nice looking subtitle.
You can also place image on the bottom of the card.
<div class="card" style="width: 20rem;">
<div class="card-header">Header</div>
<div class="card-body">
<h4 class="card-title">My awesome Paper card!</h4>
<h5 class="card-subtitle">Nice looking subtitle.</h5>
<p class="card-text">You can also place image on the bottom of the card.</p>
<button>Let me go here!</button>
</div>
<div class="card-footer">Footer</div>
</div>
Badges
Default
You can customize badges colors with secondary, success, warning, danger classes.
<div class="row flex-center">
<div class="sm-2 col background-primary">Background primary</div>
<div class="sm-2 col background-secondary">Background secondary</div>
<div class="sm-2 col background-success">Background success</div>
<div class="sm-2 col background-warning">Background warning</div>
<div class="sm-2 col background-danger">Background danger</div>
</div>
Borders & Shadows
Borders
Default Border
Border-2
Border-3
Border-4
Border-5
Border-6
<div class="row flex-spaces">
<div class="sm-3 col border border-primary">Default Border</div>
<div class="sm-3 col border border-2 border-primary">Border-2</div>
<div class="sm-3 col border border-3 border-primary">Border-3</div>
</div>
<div class="row flex-spaces">
<div class="sm-3 col border border-4 border-primary">Border-4</div>
<div class="sm-3 col border border-5 border-primary">Border-5</div>
<div class="sm-3 col border border-6 border-primary">Border-6</div>
</div>
Border Colors
Border primary
Border secondary
Border success
Border warning
Border danger
Border white
<div class="row child-borders">
<div class="sm-2 col border border-primary">Border primary</div>
<div class="sm-2 col border border-secondary">Border secondary</div>
<div class="sm-2 col border border-success">Border success</div>
<div class="sm-2 col border border-warning">Border warning</div>
<div class="sm-2 col border border-danger">Border danger</div>
<div class="sm-2 col border background-primary border-white">Border white</div>
</div>
<div class="row child-borders">
<div class="sm-2 col border border-primary">Border primary</div>
<div class="sm-2 col border border-secondary">Border secondary</div>
<div class="sm-2 col border border-success">Border success</div>
<div class="sm-2 col border border-warning">Border warning</div>
<div class="sm-2 col border border-danger">Border danger</div>
<div class="sm-2 col border background-primary border-white">Border white</div>
</div>
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.
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.
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.
Written by Super User on 24 November 2017. Posted in Blog
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur repellendus excepturi, consequatur illo rerum, non sint asperiores dolore sapiente, vitae blanditiis. Officiis at quaerat modi earum, fugiat magni impedit, aperiam.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti iure totam nam debitis aliquid impedit, et quas omnis aspernatur optio molestias ex laborum quia. Ducimus culpa tempore, veritatis officia delectus dolore dignissimos reprehenderit vero, sunt odit placeat est non molestiae ipsa nam velit in iusto hic quasi similique facere. Maxime?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti iure totam nam debitis aliquid impedit, et quas omnis aspernatur optio molestias ex laborum quia. Ducimus culpa tempore, veritatis officia delectus dolore dignissimos reprehenderit vero, sunt odit placeat est non molestiae ipsa nam velit in iusto hic quasi similique facere. Maxime?
Here's a quck snippet to get started with PaperCSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://unpkg.com/papercss@1.1.0/dist/paper.min.css">
<title>Document</title>
</head>
<body>
<div class="container">
<div class="paper">
<h1>Some Fresh Title</h1>
<p>This is where some content would go.</p>
</div>
</div>
</body>
</html>
Build it Yourself
If you'd rather customize things, you can build the CSS yourself via the git repo
git clone [repo url]
npm install
npm run build
Grab the CSS out of the /dist folder created
You can also go into src/colors.less before building to change around the colors of your new CSS.
About
I got tired of mODerN STylEs and clean pages on the internet. I also wanted to learn more about Flexbox and Less. So I made PaperCSS to solve these two challenges of mine :)
The goal of PaperCSS 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 PaperCSS 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 or 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. Check out the Git repo for more info!