diff --git a/docs/_includes/snippet.html b/docs/_includes/snippet.html index 16aeddef..57e4c925 100644 --- a/docs/_includes/snippet.html +++ b/docs/_includes/snippet.html @@ -2,7 +2,7 @@
{{ include.content }}
-
+
{% highlight html %}{{ include.content }}{% endhighlight %}
diff --git a/docs/_sass/example.sass b/docs/_sass/example.sass index dad351a5..da07adae 100644 --- a/docs/_sass/example.sass +++ b/docs/_sass/example.sass @@ -64,11 +64,18 @@ .bd-snippet-code background-color: $pre-background +tablet - align-items: stretch - display: flex - flex-direction: column - .highlight + &, + .highlight, + .highlight pre + align-items: stretch + display: flex + flex-direction: column + .highlight, + .highlight pre, + .highlight .language-html flex-grow: 1 + .highlight pre + white-space: pre // Highlight .highlight.bd-is-hovering diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 31288afe..c595114b 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -9647,14 +9647,21 @@ html.route-index #carbon { } @media screen and (min-width: 769px), print { - .bd-snippet-code { + .bd-snippet-code, + .bd-snippet-code .highlight, + .bd-snippet-code .highlight pre { align-items: stretch; display: flex; flex-direction: column; } - .bd-snippet-code .highlight { + .bd-snippet-code .highlight, + .bd-snippet-code .highlight pre, + .bd-snippet-code .highlight .language-html { flex-grow: 1; } + .bd-snippet-code .highlight pre { + white-space: pre; + } } .highlight.bd-is-hovering { diff --git a/docs/documentation/elements/box.html b/docs/documentation/elements/box.html index a2f48422..66c5d90d 100644 --- a/docs/documentation/elements/box.html +++ b/docs/documentation/elements/box.html @@ -71,23 +71,15 @@ variables:
-
-
-
-

- The .box element is simply a container with a shadow, a border, a radius, and some padding. -
- For example, you can include a media object: -

-
-
- -
- {{box_example}} -
+
+

+ The .box element is simply a container with a shadow, a border, a radius, and some padding. +
+ For example, you can include a media object: +

- {% highlight html %}{{box_example}}{% endhighlight %} + {% include snippet.html content=box_example %} {% include variables.html %} diff --git a/docs/documentation/elements/content.html b/docs/documentation/elements/content.html index 21456eba..cee752fd 100644 --- a/docs/documentation/elements/content.html +++ b/docs/documentation/elements/content.html @@ -164,11 +164,7 @@ variables:

This content class can be used in any context where you just want to (or can only) write some text. For example, it's used for the paragraph you're currently reading.

-
- {{content_example}} -
- - {% highlight html %}{{content_example}}{% endhighlight %} + {% include snippet.html content=content_example fullheight=true %} {% include anchor.html name="Sizes" %} diff --git a/docs/documentation/elements/delete.html b/docs/documentation/elements/delete.html index c5122308..0a87f56a 100644 --- a/docs/documentation/elements/delete.html +++ b/docs/documentation/elements/delete.html @@ -61,57 +61,32 @@ doc-subtab: delete

The .delete element is a stand-alone element that can be used in different contexts.

+

+ On its own, it's a simple circle with a cross: +

-
-
-
-

- On its own, it's a simple circle with a cross: -

-
- {{cross_example}} -
-
- {% highlight html %}{{cross_example}}{% endhighlight %} -
-
+ {% include snippet.html content=cross_example %} {% include anchor.html name="Sizes" %} -
-
-
-

- It comes in 4 sizes: -

-
- {{cross_sizes_example}} -
-
- {% highlight html %}{{cross_sizes_example}}{% endhighlight %} -
+
+

+ It comes in 4 sizes: +

-
+ {% include snippet.html content=cross_sizes_example %} -

- Combinations -

+ {% include anchor.html name="Combinations" %} -
-
-
-

- Bulma uses it for the tags, the notifications, and the messages: -

-
- {{cross_elements_example}} -
-
- {% highlight html %}{{cross_elements_example}}{% endhighlight %} -
+
+

+ Bulma uses it for the tags, the notifications, and the messages: +

+ {% include snippet.html content=cross_elements_example %} +
diff --git a/docs/documentation/elements/icon.html b/docs/documentation/elements/icon.html index e3a76926..b0a4fc54 100644 --- a/docs/documentation/elements/icon.html +++ b/docs/documentation/elements/icon.html @@ -42,11 +42,7 @@ variables:

Because the icons can take a few seconds to load, and because you want control over the space the icons will take, you can use the icon class as a container:

-
- {{icon_example}} -
- - {% highlight html %}{{icon_example}}{% endhighlight %} + {% include snippet.html content=icon_example %}

The icon container will take up exactly 1.5rem x 1.5rem. The icon itself is sized at 21px.

diff --git a/docs/documentation/elements/image.html b/docs/documentation/elements/image.html index ce3fd1d9..9a08bfea 100644 --- a/docs/documentation/elements/image.html +++ b/docs/documentation/elements/image.html @@ -49,17 +49,10 @@ variables:

Because images can take a few seconds to load (or not at all), use the .image container to specify a precisely sized container so that your layout isn't broken because of image loading or image errors.

-
-
- -
-
+ {% include snippet.html content=image %} - {% highlight html %}{{ image }}{% endhighlight %} + {% include anchor.html name="Fixed square images" %} -
- -

Fixed square images

There are 7 dimensions to choose from, useful for avatars:

@@ -76,23 +69,15 @@ variables: -

Retina images

+ {% include anchor.html name="Retina images" %}

Because the image is fixed in size, you can use an image that is twice as big. So for example, in a 128x128 container, you can use a 256x256 image, but resized to 128x128 pixels.

-
-
- -
-
+ {% include snippet.html content=retina_image %} - {% highlight html %}{{ retina_image }}{% endhighlight %} - -
- -

Responsive images with ratios

+ {% include anchor.html name="Responsive images with ratios" %}

If you don't know the exact dimensions but know the ratio instead, you can use one of the 5 ratio modifers:

diff --git a/docs/documentation/elements/notification.html b/docs/documentation/elements/notification.html index a23e56fd..b491a9ea 100644 --- a/docs/documentation/elements/notification.html +++ b/docs/documentation/elements/notification.html @@ -75,25 +75,11 @@ variables:
-
-
- {{ notification }} -
-
- {% highlight html %}{{ notification }}{% endhighlight %} -
-
+ {% include snippet.html content=notification %} {% include anchor.html name="Colors" %} -
-
- {{ notification_colors }} -
-
- {% highlight html %}{{ notification_colors }}{% endhighlight %} -
-
+ {% include snippet.html content=notification_colors %} {% include variables.html %} diff --git a/docs/documentation/elements/progress.html b/docs/documentation/elements/progress.html index 7cc0a0b9..66e20fae 100644 --- a/docs/documentation/elements/progress.html +++ b/docs/documentation/elements/progress.html @@ -46,24 +46,15 @@ variables:
-
- {{ progress }} -
- {% highlight html %}{{ progress }}{% endhighlight %} + {% include snippet.html content=progress %} {% include anchor.html name="Colors" %} -
- {{ progress_colors }} -
- {% highlight html %}{{ progress_colors }}{% endhighlight %} + {% include snippet.html content=progress_colors %} {% include anchor.html name="Sizes" %} -
- {{ progress_sizes }} -
- {% highlight html %}{{ progress_sizes }}{% endhighlight %} + {% include snippet.html content=progress_sizes %} {% include variables.html element=true %}