mirror of
https://github.com/jgthms/bulma
synced 2026-03-23 05:19:35 -07:00
Add more layout
This commit is contained in:
Jeremy Thomas
@@ -1,7 +1,11 @@
|
||||
---
|
||||
fulltitle: Made with Bulma badges
|
||||
layout: default
|
||||
layout: more
|
||||
route: made-with-bulma
|
||||
breadcrumb:
|
||||
- home
|
||||
- more
|
||||
- made-with-bulma
|
||||
images:
|
||||
- name: "Default"
|
||||
description: "White boxed"
|
||||
@@ -41,123 +45,96 @@ images:
|
||||
</a>
|
||||
{% endcapture %}
|
||||
|
||||
{% include global/navbar.html id="MadeWithBulmaHero" %}
|
||||
|
||||
<section class="hero is-primary">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h1 class="title">
|
||||
Made with Bulma
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Join the Bulma community by displaying a badge on your website
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 class="title">6 badges available</h2>
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>Made with Bulma</code> badge is available in <strong>6 different</strong> versions:
|
||||
</p>
|
||||
</div>
|
||||
<table class="table is-bordered bd-mwb-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Preview</th>
|
||||
<th>Description</th>
|
||||
<th>Download</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for image in page.images %}
|
||||
{% assign imageUrl = "/images/made-with-bulma" | prepend: site.url | append: image.type | append: ".png" %}
|
||||
<tr>
|
||||
<td>{{ image.name }}</td>
|
||||
<td style="background: {{ image.bg }};"><img src="{{ imageUrl }}" alt="Made with Bulma" width="128" height="24"></td>
|
||||
<td>{{ image.description }}</td>
|
||||
<td>
|
||||
<a class="button is-link is-small" href="{{ imageUrl }}">Download image</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tr>
|
||||
<td style="vertical-align: middle;">All 6</td>
|
||||
<td style="vertical-align: middle;" colspan="2"><code>made-with-bulma-badges.zip</code></td>
|
||||
<td><a class="button is-primary" href="{{ site.url }}/images/made-with-bulma-badges.zip"><span><strong>Download</strong> all 6 badges</span></a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/anchor.html name="Usage" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Ideally the image is displayed at <code>128x24</code> pixels, and links back to the Bulma website:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-snippet bd-is-vertical bd-is-two-fifths">
|
||||
<div class="bd-snippet-preview">
|
||||
<a href="https://bulma.io">
|
||||
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
|
||||
</a>
|
||||
</div>
|
||||
<div class="bd-snippet-code highlight-full">
|
||||
{% highlight html %}{{ image_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Since the original image dimensions are <code>512x96</code> pixels, you can also display it at <code>256x48</code> without losing any quality:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-snippet bd-is-vertical bd-is-two-fifths">
|
||||
<div class="bd-snippet-preview">
|
||||
<a href="https://bulma.io">
|
||||
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="256" height="48">
|
||||
</a>
|
||||
</div>
|
||||
<div class="bd-snippet-code highlight-full">
|
||||
{% highlight html %}{{ image_bigger_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Badge snippets" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can simply <strong>embed</strong> an image <strong>directly</strong> on your website by using one of the following snippets.
|
||||
</p>
|
||||
</div>
|
||||
<h2 class="title">6 badges available</h2>
|
||||
<div class="content">
|
||||
<p>
|
||||
The <code>Made with Bulma</code> badge is available in <strong>6 different</strong> versions:
|
||||
</p>
|
||||
</div>
|
||||
<table class="table is-bordered bd-mwb-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Type</th>
|
||||
<th>Preview</th>
|
||||
<th>Description</th>
|
||||
<th>Download</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for image in page.images %}
|
||||
{% assign imageUrl = "/images/made-with-bulma" | prepend: site.url | append: image.type | append: ".png" %}
|
||||
<tr>
|
||||
<td>{{ image.name }}</td>
|
||||
<td style="background: {{ image.bg }};"><img src="{{ imageUrl }}" alt="Made with Bulma" width="128" height="24"></td>
|
||||
<td>{{ image.description }}</td>
|
||||
<td>
|
||||
<a class="button is-link is-small" href="{{ imageUrl }}">Download image</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tr>
|
||||
<td style="vertical-align: middle;">All 6</td>
|
||||
<td style="vertical-align: middle;" colspan="2"><code>made-with-bulma-badges.zip</code></td>
|
||||
<td><a class="button is-primary" href="{{ site.url }}/images/made-with-bulma-badges.zip"><span><strong>Download</strong> all 6 badges</span></a></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include elements/anchor.html name="Usage" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Ideally the image is displayed at <code>128x24</code> pixels, and links back to the Bulma website:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-snippet bd-is-vertical bd-is-two-fifths">
|
||||
<div class="bd-snippet-preview">
|
||||
<a href="https://bulma.io">
|
||||
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="128" height="24">
|
||||
</a>
|
||||
</div>
|
||||
<div class="bd-snippet-code highlight-full">
|
||||
{% highlight html %}{{ image_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Since the original image dimensions are <code>512x96</code> pixels, you can also display it at <code>256x48</code> without losing any quality:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-snippet bd-is-vertical bd-is-two-fifths">
|
||||
<div class="bd-snippet-preview">
|
||||
<a href="https://bulma.io">
|
||||
<img src="{{ site.url }}/images/made-with-bulma.png" alt="Made with Bulma" width="256" height="48">
|
||||
</a>
|
||||
</div>
|
||||
<div class="bd-snippet-code highlight-full">
|
||||
{% highlight html %}{{ image_bigger_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Badge snippets" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can simply <strong>embed</strong> an image <strong>directly</strong> on your website by using one of the following snippets.
|
||||
</p>
|
||||
</div>
|
||||
{% for image in page.images %}
|
||||
{% capture image_example %}
|
||||
<a href="https://bulma.io">
|
||||
<img src="{{ site.url }}/images/made-with-bulma{{ image.type }}.png" alt="Made with Bulma" width="128" height="24">
|
||||
<img src="{{ site.url }}/images/made-with-bulma{{ image.type }}.png" alt="Made with Bulma" width="128" height="24">
|
||||
</a>
|
||||
{% endcapture %}
|
||||
<div class="bd-snippet bd-is-vertical bd-is-one-fifth">
|
||||
<div class="bd-snippet-preview" style="background: {{ image.bg }};">
|
||||
{{ image_example }}
|
||||
</div>
|
||||
<div class="bd-snippet-code highlight-full">
|
||||
{% highlight html %}{{ image_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="bd-snippet bd-is-vertical bd-is-one-fifth">
|
||||
<div class="bd-snippet-preview" style="background: {{ image.bg }};">
|
||||
{{ image_example }}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="bd-snippet-code highlight-full">
|
||||
{% highlight html %}{{ image_example }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
|
||||
Reference in New Issue
Block a user