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

Bulma v9 website (#3249)

Browse Source 
* Add Bulma v9

* Add vendor dependencies

* Fix native

* Fix sponsors

* Add style attribute
This commit is contained in:
Jeremy Thomas
2021-01-27 23:30:42 +00:00
committed by GitHub
parent c5edaea84f
commit 08ef4df2c0
1963 changed files with 157468 additions and 9452 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -63,7 +63,9 @@ meta:
{% for dimension in page.dimensions %}
<tr>
<td><code>image is-{{ dimension }}x{{ dimension }}</code></td>
<td><figure class="image is-{{ dimension }}x{{ dimension }}"><img src="{{site.url}}/images/placeholders/{{ dimension }}x{{ dimension }}.png"></figure></td>
<td>
<figure class="image is-{{ dimension }}x{{ dimension }}"><img src="{{site.url}}/images/placeholders/{{ dimension }}x{{ dimension }}.png"></figure>
</td>
<td>{{ dimension }}x{{ dimension }}px</td>
</tr>
{% endfor %}
@@ -96,87 +98,93 @@ meta:
<tbody>
<tr>
<td><code>image is-square</code></td>
<td><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
<td>Square (or 1 by 1)</td>
</tr>
<tr>
<td><code>image is-1by1</code></td>
<td><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-1by1"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
<td>1 by 1</td>
</tr>
<tr>
<td><code>image is-5by4</code></td>
<td><figure class="image is-5by4"><img src="{{site.url}}/images/placeholders/600x480.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-5by4"><img src="{{site.url}}/images/placeholders/600x480.png"></figure></td>
<td>5 by 4</td>
</tr>
<tr>
<td><code>image is-4by3</code></td>
<td><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-4by3"><img src="{{site.url}}/images/placeholders/640x480.png"></figure></td>
<td>4 by 3</td>
</tr>
<tr>
<td><code>image is-3by2</code></td>
<td><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-3by2"><img src="{{site.url}}/images/placeholders/480x320.png"></figure></td>
<td>3 by 2</td>
</tr>
<tr>
<td><code>image is-5by3</code></td>
<td><figure class="image is-5by3"><img src="{{site.url}}/images/placeholders/800x480.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-5by3"><img src="{{site.url}}/images/placeholders/800x480.png"></figure></td>
<td>5 by 3</td>
</tr>
<tr>
<td><code>image is-16by9</code></td>
<td><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-16by9"><img src="{{site.url}}/images/placeholders/640x360.png"></figure></td>
<td>16 by 9</td>
</tr>
<tr>
<td><code>image is-2by1</code></td>
<td><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
<td>2 by 1</td>
</tr>
<tr>
<td><code>image is-3by1</code></td>
<td><figure class="image is-3by1"><img src="{{site.url}}/images/placeholders/720x240.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-3by1"><img src="{{site.url}}/images/placeholders/720x240.png"></figure></td>
<td>3 by 1</td>
</tr>
<tr>
<td><code>image is-4by5</code></td>
<td><figure class="image is-4by5"><img src="{{site.url}}/images/placeholders/480x600.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-4by5"><img src="{{site.url}}/images/placeholders/480x600.png"></figure></td>
<td>4 by 5</td>
</tr>
<tr>
<td><code>image is-3by4</code></td>
<td><figure class="image is-3by4"><img src="{{site.url}}/images/placeholders/480x640.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-3by4"><img src="{{site.url}}/images/placeholders/480x640.png"></figure></td>
<td>3 by 4</td>
</tr>
<tr>
<td><code>image is-2by3</code></td>
<td><figure class="image is-2by3"><img src="{{site.url}}/images/placeholders/320x480.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-2by3"><img src="{{site.url}}/images/placeholders/320x480.png"></figure></td>
<td>2 by 3</td>
</tr>
<tr>
<td><code>image is-3by5</code></td>
<td><figure class="image is-3by5"><img src="{{site.url}}/images/placeholders/480x800.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-3by5"><img src="{{site.url}}/images/placeholders/480x800.png"></figure></td>
<td>3 by 5</td>
</tr>
<tr>
<td><code>image is-9by16</code></td>
<td><figure class="image is-9by16"><img src="{{site.url}}/images/placeholders/360x640.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-9by16"><img src="{{site.url}}/images/placeholders/360x640.png"></figure></td>
<td>9 by 16</td>
</tr>
<tr>
<td><code>image is-1by2</code></td>
<td><figure class="image is-1by2"><img src="{{site.url}}/images/placeholders/320x640.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-1by2"><img src="{{site.url}}/images/placeholders/320x640.png"></figure></td>
<td>1 by 2</td>
</tr>
<tr>
<td><code>image is-1by3</code></td>
<td><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></td>
<td style="width: 10rem;"><figure class="image is-1by3"><img src="{{site.url}}/images/placeholders/240x720.png"></figure></td>
<td>1 by 3</td>
</tr>
</tbody>
</table>
<div class="content">
<p>
The only <strong>requirement</strong> is for the parent element to already have a specific <strong>width</strong>.
</p>
</div>
<div class="content">
<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>
@@ -195,4 +203,4 @@ meta:
{% include elements/snippet.html content=iframe_ratio horizontal=true %}
{% include elements/variables.html type='element' %}
{% include components/variables.html type='element' %}