From 84f544b1f236d3a0c67f41c180e834cb882c28cd Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 10 Aug 2015 15:39:32 -0700 Subject: rename --- docs/layout/media-object.md | 169 ++++++++++++++++++++++++++++++++++++++++++++ docs/layout/media.md | 169 -------------------------------------------- 2 files changed, 169 insertions(+), 169 deletions(-) create mode 100644 docs/layout/media-object.md delete mode 100644 docs/layout/media.md (limited to 'docs/layout') diff --git a/docs/layout/media-object.md b/docs/layout/media-object.md new file mode 100644 index 000000000..79eac7865 --- /dev/null +++ b/docs/layout/media-object.md @@ -0,0 +1,169 @@ +--- +layout: page +title: Media +group: layout +--- + +Abstract object styles for building custom components (like blog comments, Tweets, etc) that feature a left- or right-aligned piece of content alongside textual content. + +## Contents + +* Will be replaced with the ToC, excluding the "Contents" header +{:toc} + +## Default media + +The default media allow to float a media object (images, video, audio) to the left or right of a content block. + +{% example html %} +
+ + Generic placeholder image + +
+

Media heading

+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
+
+{% endexample %} + +## Nesting + +Media components can also be nested. + +{% example html %} +
+
+ + Generic placeholder image + +
+
+

Media heading

+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
+ + Generic placeholder image + +
+

Nested media heading

+ Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. +
+
+
+
+{% endexample %} + +## Alignment + +The images or other media can be aligned top, middle, or bottom. The default is top aligned. + +{% example html %} +
+
+ + Generic placeholder image + +
+
+

Top aligned media

+

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

+

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+
+
+{% endexample %} + +{% example html %} +
+
+ + Generic placeholder image + +
+
+

Middle aligned media

+

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

+

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+
+
+{% endexample %} + +{% example html %} +
+
+ + Generic placeholder image + +
+
+

Bottom aligned media

+

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

+

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

+
+
+{% endexample %} + +## Media list + +With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists). + +{% example html %} + +{% endexample %} diff --git a/docs/layout/media.md b/docs/layout/media.md deleted file mode 100644 index 79eac7865..000000000 --- a/docs/layout/media.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -layout: page -title: Media -group: layout ---- - -Abstract object styles for building custom components (like blog comments, Tweets, etc) that feature a left- or right-aligned piece of content alongside textual content. - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Default media - -The default media allow to float a media object (images, video, audio) to the left or right of a content block. - -{% example html %} -
- - Generic placeholder image - -
-

Media heading

- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
-
-{% endexample %} - -## Nesting - -Media components can also be nested. - -{% example html %} -
-
- - Generic placeholder image - -
-
-

Media heading

- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
- - Generic placeholder image - -
-

Nested media heading

- Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus. -
-
-
-
-{% endexample %} - -## Alignment - -The images or other media can be aligned top, middle, or bottom. The default is top aligned. - -{% example html %} -
-
- - Generic placeholder image - -
-
-

Top aligned media

-

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

-

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

-
-
-{% endexample %} - -{% example html %} -
-
- - Generic placeholder image - -
-
-

Middle aligned media

-

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

-

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

-
-
-{% endexample %} - -{% example html %} -
-
- - Generic placeholder image - -
-
-

Bottom aligned media

-

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

-

Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

-
-
-{% endexample %} - -## Media list - -With a bit of extra markup, you can use media inside list (useful for comment threads or articles lists). - -{% example html %} - -{% endexample %} -- cgit v1.2.3