diff --git a/docs/content/docs/layout/container.md b/docs/content/docs/layout/container.md new file mode 100644 index 0000000..64edab1 --- /dev/null +++ b/docs/content/docs/layout/container.md @@ -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! + +
+

Responsive Container!

+

The default

+

+ 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. +

+
+ +
+

Large Container!

+

Using container-lg

+

+ 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. +

+
+ +
+

Medium Container!

+

Using container-md

+

+ 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. +

+
+ +
+

Small Container!

+

Using container-sm

+

+ 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. +

+
+ +
+

Extra Small Container!

+

Using container-xs

+

+ 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. +

+