diff --git a/docs/_includes/comparison.html b/docs/_includes/comparison.html index 9f508d3b..c1aa92c4 100644 --- a/docs/_includes/comparison.html +++ b/docs/_includes/comparison.html @@ -411,7 +411,7 @@ - + level @@ -431,7 +431,7 @@ - + media object diff --git a/docs/_includes/features.html b/docs/_includes/features.html index 448d4797..8cbe9e88 100644 --- a/docs/_includes/features.html +++ b/docs/_includes/features.html @@ -594,7 +594,7 @@

- + Media object

diff --git a/docs/_includes/subnav-components.html b/docs/_includes/subnav-components.html index 16fe6c18..1a312c20 100644 --- a/docs/_includes/subnav-components.html +++ b/docs/_includes/subnav-components.html @@ -14,9 +14,6 @@ Dropdown {% endif %} - - Level - Media object diff --git a/docs/_includes/subnav-layout.html b/docs/_includes/subnav-layout.html index 8ee3b0c9..928bb9a2 100644 --- a/docs/_includes/subnav-layout.html +++ b/docs/_includes/subnav-layout.html @@ -4,6 +4,12 @@ Container + + Level + + + Media Object + Hero diff --git a/docs/_sass/highlight.sass b/docs/_sass/highlight.sass index 3d7601d0..343201ac 100644 --- a/docs/_sass/highlight.sass +++ b/docs/_sass/highlight.sass @@ -123,4 +123,6 @@ color: #2aa198 .content .highlight - text-align: left \ No newline at end of file + margin-left: 0 + margin-right: 0 + text-align: left diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 7d072a08..034e7e43 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -8828,6 +8828,8 @@ label.panel-block:hover { } .content .highlight { + margin-left: 0; + margin-right: 0; text-align: left; } diff --git a/docs/documentation/components/level.html b/docs/documentation/components/level.html index 28a6f8f4..2de194aa 100644 --- a/docs/documentation/components/level.html +++ b/docs/documentation/components/level.html @@ -4,6 +4,8 @@ doc-tab: components doc-subtab: level --- + + {% include subnav-components.html %}
diff --git a/docs/documentation/components/media-object.html b/docs/documentation/components/media-object.html index a2d641f2..3705a042 100644 --- a/docs/documentation/components/media-object.html +++ b/docs/documentation/components/media-object.html @@ -4,6 +4,8 @@ doc-tab: components doc-subtab: media-object --- + + {% include subnav-components.html %}
diff --git a/docs/documentation/layout/level.html b/docs/documentation/layout/level.html new file mode 100644 index 00000000..d62387b0 --- /dev/null +++ b/docs/documentation/layout/level.html @@ -0,0 +1,227 @@ +--- +layout: documentation +doc-tab: layout +doc-subtab: level +--- + +{% capture nav_example %} + + +{% endcapture %} + +{% capture nav_centered_example %} + +{% endcapture %} + +{% capture nav_centered_bis_example %} + +{% endcapture %} + +{% capture nav_mobile_example %} + +{% endcapture %} + +{% include subnav-layout.html %} + +
+
+

Level

+

A multi-purpose horizontal level, which can contain almost any other element

+ +
+ +
+

The structure of a level is the following:

+
    +
  • + level: main container +
      +
    • level-left for the left side. This element is required, even if it is empty
      • +
    • + level-right for the right side +
        +
      • level-item for each individual element
        • +
      +
      • +
    +
    • +
+

In a level-item, you can then insert almost anything you want: a title, a button, a text input, or just simple text. No matter what elements you put inside a Bulma level, they will always be vertically centered.

+
+ +
+ +
+ +
+ {{nav_example}} +
+ {% highlight html %}{{nav_example}}{% endhighlight %} + + {% include anchor.html name="Centered level" %} + +
+ If you want a centered level, you can use as many level-item as you want, as long as they are direct children of the level container. +
+ +
+ {{nav_centered_example}} +
+ + {% highlight html %}{{nav_centered_example}}{% endhighlight %} + +
+ {{nav_centered_bis_example}} +
+ + {% highlight html %}{{nav_centered_bis_example}}{% endhighlight %} + + {% include anchor.html name="Mobile level" %} + +
+ By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the is-mobile modifier on the level container. +
+ +
+ {{nav_mobile_example}} +
+ + {% highlight html %}{{nav_mobile_example}}{% endhighlight %} + +
+
diff --git a/docs/documentation/layout/media-object.html b/docs/documentation/layout/media-object.html new file mode 100644 index 00000000..923745ab --- /dev/null +++ b/docs/documentation/layout/media-object.html @@ -0,0 +1,236 @@ +--- +layout: documentation +doc-tab: layout +doc-subtab: media-object +--- + +{% capture media_example %} +
+
+

+ +

+
+
+
+

+ John Smith @johnsmith 31m +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. +

+
+ +
+
+ +
+
+{% endcapture %} + +{% capture media_bis_example %} +
+
+

+ +

+
+
+
+

+ +

+
+ +
+
+{% endcapture %} +{% capture media_nested_example %} +
+
+

+ +

+
+
+
+

+ Barbara Middleton +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum. Nunc in tempus turpis. +
+ Like · Reply · 3 hrs +

+
+ +
+
+

+ +

+
+
+
+

+ Sean Brown +
+ Donec sollicitudin urna eget eros malesuada sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam blandit nisl a nulla sagittis, a lobortis leo feugiat. +
+ Like · Reply · 2 hrs +

+
+ +
+ Vivamus quis semper metus, non tincidunt dolor. Vivamus in mi eu lorem cursus ullamcorper sit amet nec massa. +
+ +
+ Morbi vitae diam et purus tincidunt porttitor vel vitae augue. Praesent malesuada metus sed pharetra euismod. Cras tellus odio, tincidunt iaculis diam non, porta aliquet tortor. +
+
+
+ +
+
+

+ +

+
+
+
+

+ Kayli Eunice +
+ Sed convallis scelerisque mauris, non pulvinar nunc mattis vel. Maecenas varius felis sit amet magna vestibulum euismod malesuada cursus libero. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus lacinia non nisl id feugiat. +
+ Like · Reply · 2 hrs +

+
+
+
+
+
+
+
+

+ +

+
+
+
+

+ +

+
+
+

+ +

+
+
+
+{% endcapture %} + +{% include subnav-layout.html %} + +
+
+

Media Object

+

The famous media object prevalent in social media interfaces, but useful in any context

+ +
+ +
+

The media object is a UI element perfect for repeatable and nestable content.

+
+ +
+
+
+

+ +

+
+
+
+

+ John Smith @johnsmith 31m +
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ornare magna eros, eu pellentesque tortor vestibulum ut. Maecenas non massa sem. Etiam finibus odio quis feugiat facilisis. +

+
+ +
+
+ +
+
+
+ +
+ {{media_example}} +
+ + {% highlight html %}{{media_example}}{% endhighlight %} + +
+

You can include any other Bulma element, like inputs, textareas, icons, buttons... or even a nav bar.

+
+ +
+ {{media_bis_example}} +
+ + {% highlight html %}{{media_bis_example}}{% endhighlight %} + +
+ +

Nesting

+
+

You can nest media objects up to 3 levels deep.

+
+ +
+ {{media_nested_example}} +
+ + {% highlight html %}{{media_nested_example}}{% endhighlight %} + +
+
diff --git a/docs/index.html b/docs/index.html index 44dfb232..56f25b66 100644 --- a/docs/index.html +++ b/docs/index.html @@ -291,7 +291,7 @@ route: index - + Flexible horizontal level @@ -359,7 +359,7 @@ route: index - + Versatile media object