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

Fix button spacing, Add image placeholders

Browse Source
This commit is contained in:
Jeremy Thomas
2016-12-22 18:17:26 +00:00
parent b8b3733d99
commit 41db07d68d
40 changed files with 1989 additions and 2178 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,13 +21,13 @@ doc-subtab: image
<div class="example">
<figure class="image is-128x128">
<img src="http://placehold.it/128x128">
<img src="{{site.url}}/images/placeholders/128x128.png">
</figure>
</div>
{% highlight html %}
<figure class="image is-128x128">
<img src="http://placehold.it/128x128">
<img src="{{site.url}}/images/placeholders/128x128.png">
</figure>
{% endhighlight %}
@@ -42,37 +42,37 @@ doc-subtab: image
<tbody>
<tr>
<td><code>image is-16x16</code></td>
<td><figure class="image is-16x16"><img src="http://placehold.it/16x16"></figure></td>
<td><figure class="image is-16x16"><img src="{{site.url}}/images/placeholders/16x16.png"></figure></td>
<td>16x16px</td>
</tr>
<tr>
<td><code>image is-24x24</code></td>
<td><figure class="image is-24x24"><img src="http://placehold.it/24x24"></figure></td>
<td><figure class="image is-24x24"><img src="{{site.url}}/images/placeholders/24x24.png"></figure></td>
<td>24x24px</td>
</tr>
<tr>
<td><code>image is-32x32</code></td>
<td><figure class="image is-32x32"><img src="http://placehold.it/32x32"></figure></td>
<td><figure class="image is-32x32"><img src="{{site.url}}/images/placeholders/32x32.png"></figure></td>
<td>32x32px</td>
</tr>
<tr>
<td><code>image is-48x48</code></td>
<td><figure class="image is-48x48"><img src="http://placehold.it/48x48"></figure></td>
<td><figure class="image is-48x48"><img src="{{site.url}}/images/placeholders/48x48.png"></figure></td>
<td>48x48px</td>
</tr>
<tr>
<td><code>image is-64x64</code></td>
<td><figure class="image is-64x64"><img src="http://placehold.it/64x64"></figure></td>
<td><figure class="image is-64x64"><img src="{{site.url}}/images/placeholders/64x64.png"></figure></td>
<td>64x64px</td>
</tr>
<tr>
<td><code>image is-96x96</code></td>
<td><figure class="image is-96x96"><img src="http://placehold.it/96x96"></figure></td>
<td><figure class="image is-96x96"><img src="{{site.url}}/images/placeholders/96x96.png"></figure></td>
<td>96x96px</td>
</tr>
<tr>
<td><code>image is-128x128</code></td>
<td><figure class="image is-128x128"><img src="http://placehold.it/128x128"></figure></td>
<td><figure class="image is-128x128"><img src="{{site.url}}/images/placeholders/128x128.png"></figure></td>
<td>128x128px</td>
</tr>
</tbody>
@@ -86,13 +86,13 @@ doc-subtab: image
<div class="example">
<figure class="image is-128x128">
<img src="http://placehold.it/256x256">
<img src="{{site.url}}/images/placeholders/256x256.png">
</figure>
</div>
{% highlight html %}
<figure class="image is-128x128">
<img src="http://placehold.it/256x256">
<img src="{{site.url}}/images/placeholders/256x256.png">
</figure>
{% endhighlight %}
@@ -108,32 +108,32 @@ doc-subtab: image
<tbody>
<tr>
<td><code>image is-square</code></td>
<td><figure class="image is-square"><img src="http://placehold.it/480x480"></figure></td>
<td><figure class="image is-square"><img src="{{site.url}}/images/placeholders/480x480.png"></figure></td>
<td>Square (or 1by1)</td>
</tr>
<tr>
<td><code>image is-1by1</code></td>
<td><figure class="image is-1by1"><img src="http://placehold.it/480x480"></figure></td>
<td><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-4by3</code></td>
<td><figure class="image is-4by3"><img src="http://placehold.it/640x480"></figure></td>
<td><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="http://placehold.it/480x320"></figure></td>
<td><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-16by9</code></td>
<td><figure class="image is-16by9"><img src="http://placehold.it/640x360"></figure></td>
<td><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="http://placehold.it/640x320"></figure></td>
<td><figure class="image is-2by1"><img src="{{site.url}}/images/placeholders/640x320.png"></figure></td>
<td>2 by 1</td>
</tr>
</tbody>