Ark/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma synced 2026-03-20 04:14:29 -07:00
Code Issues Packages Projects Releases Wiki Activity

Improve components documentation

Browse Source
This commit is contained in:
Jeremy Thomas
2019-10-13 19:20:44 +01:00
parent d4c7731792
commit e5390369a9
13 changed files with 100 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/documentation/elements/image.html
View File

@@ -47,7 +47,7 @@ meta:
{% endcapture %}
<div class="content">
<p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
<p>Because images can take a few seconds to load (or not at all), use the <code>image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
</div>
{% include elements/snippet.html content=image %}
@@ -73,7 +73,7 @@ meta:
{% include elements/anchor.html name="Rounded images" %}
<div class="content">
<p>You can also make rounded images, using <code>.is-rounded</code> class:</p>
<p>You can also make rounded images, using <code>is-rounded</code> class:</p>
</div>
{% include elements/snippet.html content=rounded_image %}
@@ -178,7 +178,7 @@ meta:
</table>
<div class="content">
<p>The <code>.image</code> container will usually take up the <strong>whole width</strong> while maintaining the perfect ratio.
<p>The <code>image</code> container will usually take up the <strong>whole width</strong> while maintaining the perfect ratio.
<br>If it doesn't, you can force it by appending the <code>is-fullwidth</code> modifier.</p>
</div>
@@ -188,7 +188,7 @@ meta:
<div class="content">
<p>
You can apply a specific <strong>ratio</strong> on <strong>any element</strong> other than an <code>img</code>, simply by applying the <code>.has-ratio</code> modifier to a resizable element.
You can apply a specific <strong>ratio</strong> on <strong>any element</strong> other than an <code>img</code>, simply by applying the <code>has-ratio</code> modifier to a resizable element.
</p>
<p>
For example, you can apply a <code>16by9</code> ratio on an <code>iframe</code>. Resize the browser, and you'll see how the ratio is maintained.