deblan-mirror/papercss
1
0
Fork 0
mirror of https://github.com/papercss/papercss synced 2026-03-14 22:45:51 +01:00
Code Issues Projects Releases Wiki Activity

Add container docs

Browse source
This commit is contained in:
Rhyne Vlaservich 2020-08-01 15:58:22 -04:00
commit 97599bbee0
1 changed files with 53 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

53
docs/content/docs/layout/container.md Normal file
View file

@ -0,0 +1,53 @@
---
title: Container
description: PaperCSS Container
---
The container is usually at the root of the HTML and holds all of the content in a fixed size. PaperCSS supports a few
different sizes to make setting your content within a certain max-width easy. Don't forget to add the `.paper` class to
give you site some extra paper flair!
<div class='paper container margin-bottom-large'>
<h4>Responsive Container!</h4>
<p>The default</p>
<p>
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.
</p>
</div>
<div class='paper container container-lg margin-bottom-large'>
<h4>Large Container!</h4>
<p>Using <code>container-lg</code><p>
<p>
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.
</p>
</div>
<div class='paper container container-md margin-bottom-large'>
<h4>Medium Container!</h4>
<p>Using <code>container-md</code><p>
<p>
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.
</p>
</div>
<div class='paper container container-sm margin-bottom-large'>
<h4>Small Container!</h4>
<p>Using <code>container-sm</code><p>
<p>
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.
</p>
</div>
<div class='paper container container-xs margin-bottom-large'>
<h4>Extra Small Container!</h4>
<p>Using <code>container-xs</code><p>
<p>
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.
</p>
</div>