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

Organize partials

Browse Source
This commit is contained in:
Jeremy Thomas
2018-04-09 22:25:26 +01:00
parent a1c1909001
commit e8d4efb274
97 changed files with 691 additions and 835 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -38,9 +38,9 @@ meta:
<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 snippet.html content=image %}
{% include elements/snippet.html content=image %}
{% include anchor.html name="Fixed square images" %}
{% include elements/anchor.html name="Fixed square images" %}
<div class="content">
<p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
@@ -58,15 +58,15 @@ meta:
</tbody>
</table>
{% include anchor.html name="Retina images" %}
{% include elements/anchor.html name="Retina images" %}
<div class="content">
<p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
</div>
{% include snippet.html content=retina_image %}
{% include elements/snippet.html content=retina_image %}
{% include anchor.html name="Responsive images with ratios" %}
{% include elements/anchor.html name="Responsive images with ratios" %}
<div class="content">
<p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>16 ratio modifiers</strong>, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):</p>
@@ -161,4 +161,4 @@ meta:
<p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
</div>
{% include variables.html type='element' %}
{% include elements/variables.html type='element' %}