mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Add more layout
This commit is contained in:
Jeremy Thomas
parent
a8c0805988
commit
999c284dcc
@ -323,10 +323,6 @@
|
||||
"name": "Blog",
|
||||
"path": "/blog"
|
||||
},
|
||||
"more": {
|
||||
"name": "More",
|
||||
"path": "/more"
|
||||
},
|
||||
"expo": {
|
||||
"name": "Expo",
|
||||
"subtitle": "Official Bulma showcase",
|
||||
@ -341,6 +337,10 @@
|
||||
"icon": "heart",
|
||||
"path": "/love"
|
||||
},
|
||||
"more": {
|
||||
"name": "More",
|
||||
"path": "/more"
|
||||
},
|
||||
"bulma-start": {
|
||||
"name": "Bulma start",
|
||||
"subtitle": "A tiny npm package to get started",
|
||||
@ -379,8 +379,6 @@
|
||||
}
|
||||
},
|
||||
"more": [
|
||||
"expo",
|
||||
"love",
|
||||
"bulma-start",
|
||||
"made-with-bulma",
|
||||
"bootstrap",
|
||||
|
||||
13
docs/_includes/components/more.html
Normal file
13
docs/_includes/components/more.html
Normal file
@ -0,0 +1,13 @@
|
||||
<nav class="bd-categories">
|
||||
{% for link_id in site.data.links.more %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
|
||||
<div class="bd-category">
|
||||
<header class="bd-category-header">
|
||||
<a class="bd-category-name" href="{{ site.url }}{{ link.path }}">
|
||||
<strong>{{ link.name }}</strong>
|
||||
</a>
|
||||
</header>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
@ -10,6 +10,11 @@
|
||||
</p>
|
||||
<div class="bd-pro-content">
|
||||
{{ include.content | markdownify }}
|
||||
|
||||
{% if include.title == 'No JavaScript' %}
|
||||
{% assign tweet = site.data.love.tweetsById.860885116909998080 %}
|
||||
{% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
{% assign boostrap_link = site.data.links.by_id['boostrap'] %}
|
||||
{% assign bootstrap_link = site.data.links.by_id['bootstrap'] %}
|
||||
{% assign expo_link = site.data.links.by_id['expo'] %}
|
||||
{% assign love_link = site.data.links.by_id['love'] %}
|
||||
|
||||
<div class="bd-footer-stars">
|
||||
<a class="bd-footer-star bd-is-bootstrap" href="{{ site.url }}{{ boostrap_link.path }}">
|
||||
<a class="bd-footer-star bd-is-bootstrap" href="{{ site.url }}{{ bootstrap_link.path }}">
|
||||
<header class="bd-footer-star-header">
|
||||
<h4 class="bd-footer-title">
|
||||
<strong>Coming from Bootstrap</strong>
|
||||
<strong>{{ bootstrap_link.name }}</strong>
|
||||
</h4>
|
||||
<p class="bd-footer-subtitle">
|
||||
An alternative to Bootstrap
|
||||
@ -21,10 +21,10 @@
|
||||
<a class="bd-footer-star bd-is-expo" href="{{ site.url }}{{ expo_link.path }}">
|
||||
<header class="bd-footer-star-header">
|
||||
<h4 class="bd-footer-title">
|
||||
<span class="icon has-text-star">
|
||||
<i class="fas fa-star"></i>
|
||||
<span class="icon has-text-{{ expo_link.color }}">
|
||||
<i class="fas fa-{{ expo_link.icon }}"></i>
|
||||
</span>
|
||||
<strong>Expo</strong>
|
||||
<strong>{{ expo_link.name }}</strong>
|
||||
</h4>
|
||||
<p class="bd-footer-subtitle">
|
||||
See what you can build with Bulma
|
||||
@ -35,10 +35,10 @@
|
||||
<a class="bd-footer-star bd-is-love" href="{{ site.url }}{{ love_link.path }}">
|
||||
<header class="bd-footer-star-header">
|
||||
<h4 class="bd-footer-title">
|
||||
<span class="icon has-text-danger">
|
||||
<i class="fas fa-heart"></i>
|
||||
<span class="icon has-text-{{ love_link.color }}">
|
||||
<i class="fas fa-{{ love_link.icon }}"></i>
|
||||
</span>
|
||||
<strong>Love</strong>
|
||||
<strong>{{ love_link.name }}</strong>
|
||||
</h4>
|
||||
<p class="bd-footer-subtitle">
|
||||
Fans of Bulma
|
||||
|
||||
13
docs/_includes/footer/link.html
Normal file
13
docs/_includes/footer/link.html
Normal file
@ -0,0 +1,13 @@
|
||||
<p class="bd-footer-link bd-has-subtitle">
|
||||
<a href="{{ site.url }}{{ link.path }}">
|
||||
<span class="bd-footer-link-icon has-text-{{ link.color }}">
|
||||
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
|
||||
</span>
|
||||
<strong>
|
||||
{{ link.name }}
|
||||
</strong>
|
||||
<em>
|
||||
{{ link.subtitle }}
|
||||
</em>
|
||||
</a>
|
||||
</p>
|
||||
@ -50,22 +50,15 @@
|
||||
<a href="{{ site.url }}{{ more_link.path }}">More</a>
|
||||
</p>
|
||||
|
||||
{% assign link = site.data.links.by_id['expo'] %}
|
||||
{% include footer/link.html %}
|
||||
|
||||
{% assign link = site.data.links.by_id['love'] %}
|
||||
{% include footer/link.html %}
|
||||
|
||||
{% for link_id in site.data.links.more %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
|
||||
<p class="bd-footer-link bd-has-subtitle">
|
||||
<a href="{{ site.url }}{{ link.path }}">
|
||||
<span class="bd-footer-link-icon has-text-{{ link.color }}">
|
||||
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
|
||||
</span>
|
||||
<strong>
|
||||
{{ link.name }}
|
||||
</strong>
|
||||
<em>
|
||||
{{ link.subtitle }}
|
||||
</em>
|
||||
</a>
|
||||
</p>
|
||||
{% include footer/link.html %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
|
||||
<aside class="bd-side">
|
||||
{% if include.show_categories %}
|
||||
{% include elements/categories-nav.html %}
|
||||
{% include components/categories.html %}
|
||||
{% endif %}
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
@ -84,7 +84,7 @@ route: documentation
|
||||
|
||||
<aside class="bd-side">
|
||||
{% unless page.hide_categories %}
|
||||
{% include elements/categories-nav.html %}
|
||||
{% include components/categories.html %}
|
||||
{% endunless %}
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
85
docs/_layouts/more.html
Normal file
85
docs/_layouts/more.html
Normal file
@ -0,0 +1,85 @@
|
||||
---
|
||||
layout: default
|
||||
route: more
|
||||
---
|
||||
|
||||
{% include global/navbar.html id="More" %}
|
||||
|
||||
{% assign current_link_id = page.breadcrumb | last %}
|
||||
{% assign current_link = site.data.links.by_id[current_link_id] %}
|
||||
|
||||
{% assign category_links = site.data.links.more %}
|
||||
|
||||
{% for link_id in category_links %}
|
||||
{% if link_id == current_link_id %}
|
||||
{% unless forloop.first %}
|
||||
{% assign previous_index = forloop.index0 | minus: 1 %}
|
||||
{% assign previous_link_id = category_links[previous_index] %}
|
||||
{% assign previous_link = site.data.links.by_id[previous_link_id] %}
|
||||
{% endunless %}
|
||||
|
||||
{% unless forloop.last %}
|
||||
{% assign next_index = forloop.index0 | plus: 1 %}
|
||||
{% assign next_link_id = category_links[next_index] %}
|
||||
{% assign next_link = site.data.links.by_id[next_link_id] %}
|
||||
{% endunless %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
|
||||
<main class="bd-main">
|
||||
<div class="bd-side-background"></div>
|
||||
<div class="bd-main-container container">
|
||||
<div class="bd-duo">
|
||||
<div class="bd-lead">
|
||||
{% include components/breadcrumb.html %}
|
||||
|
||||
<header class="bd-header">
|
||||
<div class="bd-header-titles">
|
||||
<h1 class="title">
|
||||
{% if page.title %}
|
||||
{{ page.title }}
|
||||
{% else %}
|
||||
{{ current_link.name }}
|
||||
{% endif %}
|
||||
</h1>
|
||||
<p class="subtitle is-4">
|
||||
{% if page.subtitle %}
|
||||
{{ page.subtitle }}
|
||||
{% else %}
|
||||
{{ current_link.subtitle }}
|
||||
{% endif %}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="bd-header-carbon">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="bd-content">
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
<nav class="bd-prev-next-bis">
|
||||
{% if previous_link %}
|
||||
<a class="bd-prev-next-bis-previous" href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
|
||||
← {{ previous_link.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if next_link %}
|
||||
<a class="bd-prev-next-bis-next" href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
|
||||
{{ next_link.name }} →
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% include elements/improve-page.html %}
|
||||
</div>
|
||||
|
||||
<aside class="bd-side">
|
||||
{% include components/more.html %}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
@ -1,20 +1,8 @@
|
||||
$bootstrap: #6f5499
|
||||
$bootstrap-invert: #fff
|
||||
|
||||
.bd-bootstrap
|
||||
.hero
|
||||
background-color: $bootstrap
|
||||
color: $bootstrap-invert
|
||||
.title,
|
||||
.subtitle
|
||||
color: currentColor
|
||||
.subtitle
|
||||
color: rgba($bootstrap-invert, 0.5)
|
||||
.subtitle a
|
||||
border-bottom: 1px solid currentColor
|
||||
color: currentColor
|
||||
&:hover
|
||||
color: $bootstrap-invert
|
||||
.bd-bootstrap-table
|
||||
margin: 3rem 0
|
||||
|
||||
.bd-pros-heading
|
||||
padding: 0 2rem
|
||||
@ -54,11 +42,7 @@ $bootstrap-invert: #fff
|
||||
.icon
|
||||
color: $bootstrap
|
||||
|
||||
.bd-separator
|
||||
color: $border
|
||||
margin: 0 0.25em
|
||||
|
||||
.bd-comparison
|
||||
.bd-bootstrap-comparison
|
||||
margin: 0 auto
|
||||
max-width: 42rem
|
||||
.table
|
||||
@ -93,5 +77,5 @@ $bootstrap-invert: #fff
|
||||
color: $text-strong
|
||||
font-weight: $weight-bold
|
||||
|
||||
.bd-comparison-header
|
||||
.bd-bootstrap-comparison-header
|
||||
margin-bottom: 3rem
|
||||
|
||||
@ -1,4 +1,10 @@
|
||||
---
|
||||
fulltitle: "Bulma: an alternative to Bootstrap"
|
||||
layout: more
|
||||
breadcrumb:
|
||||
- home
|
||||
- more
|
||||
- bootstrap
|
||||
bulma:
|
||||
- type: "bulma"
|
||||
icon: "css3"
|
||||
@ -25,7 +31,7 @@ bulma:
|
||||
- type: "bulma"
|
||||
icon: "code"
|
||||
title: "No JavaScript"
|
||||
content: '<p>By focusing only on <strong>CSS</strong>, Bulma provides a lightweight solution that can easily be implemented in <strong>any development context</strong>.</p><blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr"><a href="https://t.co/vY1ZsRScYM">https://t.co/vY1ZsRScYM</a> -- a CSS framework by <a href="https://twitter.com/jgthms">@jgthms</a> -- is lovely! No JS included, which means no JS opinions included!</p>— Robert Stuttaford (@RobStuttaford) <a href="https://twitter.com/RobStuttaford/status/860885116909998080">May 6, 2017</a></blockquote>'
|
||||
content: '<p>By focusing only on <strong>CSS</strong>, Bulma provides a lightweight solution that can easily be implemented in <strong>any development context</strong>.</p>'
|
||||
bootstrap:
|
||||
- type: "bootstrap"
|
||||
icon: "plug"
|
||||
@ -46,165 +52,82 @@ bootstrap:
|
||||
content: "Bootstrap has some **elements** like [list group](https://getbootstrap.com/components/#list-group), [wells](https://getbootstrap.com/components/#wells), or [page header](https://getbootstrap.com/components/#page-header) that Bulma doesn't have."
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="has-navbar-fixed-top">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.data.meta.description }}{% endif %}">
|
||||
<div class="bd-bootstrap-message notification is-radiusless">
|
||||
<h2 class="subtitle">
|
||||
Both Bulma and Bootstrap are <strong>CSS frameworks</strong> that allow developers to quickly <strong>build web interfaces</strong> with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.
|
||||
</h2>
|
||||
</div>
|
||||
|
||||
<title>Bulma: an alternative to Bootstrap</title>
|
||||
|
||||
<link rel="stylesheet" href="{{ site.url }}/css/bulma-docs.css">
|
||||
|
||||
<link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.url }}">
|
||||
<link rel="alternate" type="application/rss+xml" title="{{ site.data.meta.title }}" href="{{ "/atom.xml" | prepend: site.url }}">
|
||||
|
||||
<meta property="og:url" content="{{site.url}}">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="{{site.data.meta.title}}">
|
||||
<meta property="og:image" content="{{site.url}}/images/bulma-banner.png">
|
||||
<meta property="og:image:type" content="image/png">
|
||||
<meta property="og:image:width" content="1200">
|
||||
<meta property="og:image:height" content="630">
|
||||
<meta property="og:description" content="{{site.data.meta.description}}">
|
||||
|
||||
<meta name="twitter:card" content="summary_large_image">
|
||||
<meta name="twitter:site" content="@jgthms">
|
||||
<meta name="twitter:creator" content="@jgthms">
|
||||
<meta name="twitter:title" content="{{site.data.meta.title}}">
|
||||
<meta name="twitter:image" content="{{site.url}}/images/bulma-banner.png">
|
||||
<meta name="twitter:description" content="{{site.data.meta.description}}">
|
||||
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="{{site.url}}/favicons/apple-touch-icon.png?v=201701041855">
|
||||
<link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-32x32.png?v=201701041855" sizes="32x32">
|
||||
<link rel="icon" type="image/png" href="{{site.url}}/favicons/favicon-16x16.png?v=201701041855" sizes="16x16">
|
||||
<link rel="manifest" href="{{site.url}}/favicons/manifest.json?v=201701041855">
|
||||
<link rel="mask-icon" href="{{site.url}}/favicons/safari-pinned-tab.svg?v=201701041855" color="#00d1b2">
|
||||
<link rel="shortcut icon" href="{{site.url}}/favicons/favicon.ico?v=201701041855">
|
||||
<meta name="msapplication-config" content="{{site.url}}/favicons/browserconfig.xml?v=201701041855">
|
||||
<meta name="theme-color" content="#00d1b2">
|
||||
|
||||
<script defer src="{{ site.data.icons.fontawesome5 }}"></script>
|
||||
</head>
|
||||
<body>
|
||||
{% include global/navbar.html id="Documentation" %}
|
||||
|
||||
<main class="bd-bootstrap">
|
||||
<section class="hero is-medium">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h1 class="title">
|
||||
Bulma: an alternative to Bootstrap
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Learn how Bulma can become a replacement for <a href="https://getbootstrap.com/" target="_blank">Bootstrap</a>
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<div class="section notification is-radiusless">
|
||||
<h2 class="subtitle">
|
||||
<div class="container">
|
||||
Both Bulma and Bootstrap are <strong>CSS frameworks</strong> that allow developers to quickly <strong>build web interfaces</strong> with ease. While they have fairly similar features, they still differ in some ways, and you might wonder why you should choose one framework over the other. This page is here to help answer that.
|
||||
</div>
|
||||
</h2>
|
||||
<div class="bd-bootstrap-table">
|
||||
<div class="columns is-desktop">
|
||||
<div class="column is-half-desktop">
|
||||
<h3 class="subtitle is-3 has-text-centered pros-heading">
|
||||
Why choose <strong>Bulma</strong>
|
||||
</h3>
|
||||
<figure class="bd-pros-icon">
|
||||
{% include svg/bulma-b.svg %}
|
||||
</figure>
|
||||
<div class="bd-pros-list">
|
||||
{% for pro in page.bulma %}
|
||||
{%
|
||||
include content/pro.html
|
||||
type=pro.type
|
||||
icon=pro.icon
|
||||
icon_brand=pro.icon_brand
|
||||
title=pro.title
|
||||
content=pro.content
|
||||
%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<div class="columns is-desktop">
|
||||
<div class="column is-half-desktop">
|
||||
<h3 class="subtitle is-3 has-text-centered pros-heading">
|
||||
Why choose <strong>Bulma</strong>
|
||||
</h3>
|
||||
<figure class="bd-pros-icon">
|
||||
{% include svg/bulma-b.svg %}
|
||||
</figure>
|
||||
<div class="bd-pros-list">
|
||||
{% for pro in page.bulma %}
|
||||
{%
|
||||
include content/pro.html
|
||||
type=pro.type
|
||||
icon=pro.icon
|
||||
icon_brand=pro.icon_brand
|
||||
title=pro.title
|
||||
content=pro.content
|
||||
%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-half-desktop">
|
||||
<h3 class="subtitle is-3 has-text-centered pros-heading">
|
||||
Why choose <strong>Bootstrap</strong>
|
||||
</h3>
|
||||
<figure class="bd-pros-icon">
|
||||
{% include svg/bootstrap-icon.svg %}
|
||||
</figure>
|
||||
<div class="bd-pros-list">
|
||||
{% for pro in page.bootstrap %}
|
||||
{%
|
||||
include content/pro.html
|
||||
type=pro.type
|
||||
icon=pro.icon
|
||||
icon_brand=pro.icon_brand
|
||||
title=pro.title
|
||||
content=pro.content
|
||||
%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="column is-half-desktop">
|
||||
<h3 class="subtitle is-3 has-text-centered pros-heading">
|
||||
Why choose <strong>Bootstrap</strong>
|
||||
</h3>
|
||||
<figure class="bd-pros-icon">
|
||||
{% include svg/bootstrap-icon.svg %}
|
||||
</figure>
|
||||
<div class="bd-pros-list">
|
||||
{% for pro in page.bootstrap %}
|
||||
{%
|
||||
include content/pro.html
|
||||
type=pro.type
|
||||
icon=pro.icon
|
||||
icon_brand=pro.icon_brand
|
||||
title=pro.title
|
||||
content=pro.content
|
||||
%}
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="bd-comparison">
|
||||
<header class="bd-comparison-header has-text-centered">
|
||||
<h2 class="title">
|
||||
Comparison table
|
||||
</h2>
|
||||
<p class="subtitle">
|
||||
See which elements of the framework exist (or not) in the other
|
||||
</p>
|
||||
</header>
|
||||
<table class="table is-bordered is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% include svg/bulma-b.svg %}Bulma</th>
|
||||
<th>{% include svg/bootstrap-icon.svg %}Bootstrap</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>{% include svg/bulma-b.svg %}Bulma</th>
|
||||
<th>{% include svg/bootstrap-icon.svg %}Bootstrap</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
{% include content/comparison.html %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include global/footer.html %}
|
||||
</body>
|
||||
</html>
|
||||
<div class="bd-bootstrap-comparison">
|
||||
<header class="bd-bootstrap-comparison-header has-text-centered">
|
||||
<h2 class="title">
|
||||
Comparison table
|
||||
</h2>
|
||||
<p class="subtitle">
|
||||
See which elements of the framework exist (or not) in the other
|
||||
</p>
|
||||
</header>
|
||||
<table class="table is-bordered is-fullwidth">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>{% include svg/bulma-b.svg %}Bulma</th>
|
||||
<th>{% include svg/bootstrap-icon.svg %}Bootstrap</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>{% include svg/bulma-b.svg %}Bulma</th>
|
||||
<th>{% include svg/bootstrap-icon.svg %}Bootstrap</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
{% include content/comparison.html %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
@ -1,75 +1,53 @@
|
||||
---
|
||||
title: Backers via Patreon
|
||||
layout: default
|
||||
layout: more
|
||||
route: backers
|
||||
breadcrumb:
|
||||
- home
|
||||
- more
|
||||
- patreon-backers
|
||||
---
|
||||
|
||||
{% include global/navbar.html id="BackersNavbar" %}
|
||||
<h2 class="title is-5">
|
||||
Website sponsors via Patreon ($300+)
|
||||
</h2>
|
||||
<div class="content">
|
||||
<ul>
|
||||
{% for backer in site.data.backers["300"] reversed %}
|
||||
{% include elements/patreon-item.html %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<section class="hero is-primary bd-is-patreon">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h1 class="title">
|
||||
Backers via Patreon
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Everyone who is supporting Bulma
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<h2 class="title is-5">
|
||||
Homepage sponsors via Patreon ($100+)
|
||||
</h2>
|
||||
<div class="content">
|
||||
<ul>
|
||||
{% for backer in site.data.backers["100"] reversed %}
|
||||
{% include elements/patreon-item.html %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 class="title is-5">
|
||||
Website sponsors via Patreon ($300+)
|
||||
</h2>
|
||||
<div class="content">
|
||||
<ul>
|
||||
{% for backer in site.data.backers["300"] reversed %}
|
||||
{% include elements/patreon-item.html %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
<h2 class="title is-5">
|
||||
Generous backers via Patreon ($30+)
|
||||
</h2>
|
||||
<div class="content">
|
||||
<ul>
|
||||
{% for backer in site.data.backers["30"] reversed %}
|
||||
{% include elements/patreon-item.html %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="title is-5">
|
||||
Homepage sponsors via Patreon ($100+)
|
||||
</h2>
|
||||
<div class="content">
|
||||
<ul>
|
||||
{% for backer in site.data.backers["100"] reversed %}
|
||||
{% include elements/patreon-item.html %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="title is-5">
|
||||
Generous backers via Patreon ($30+)
|
||||
</h2>
|
||||
<div class="content">
|
||||
<ul>
|
||||
{% for backer in site.data.backers["30"] reversed %}
|
||||
{% include elements/patreon-item.html %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="title is-5">
|
||||
Backers via Patreon ($10+)
|
||||
</h2>
|
||||
<div class="content">
|
||||
<ul>
|
||||
{% for backer in site.data.backers["10"] reversed %}
|
||||
{% include elements/patreon-item.html %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<h2 class="title is-5">
|
||||
Backers via Patreon ($10+)
|
||||
</h2>
|
||||
<div class="content">
|
||||
<ul>
|
||||
{% for backer in site.data.backers["10"] reversed %}
|
||||
{% include elements/patreon-item.html %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -1,81 +1,60 @@
|
||||
---
|
||||
title: "Bulma start"
|
||||
fulltitle: "Bulma start: a tiny npm package to get started with Bulma"
|
||||
layout: default
|
||||
layout: more
|
||||
route: bulma-start
|
||||
download_url: https://github.com/jgthms/bulma-start/archive/master.zip
|
||||
github_url: https://github.com/jgthms/bulma-start
|
||||
npm_url: https://www.npmjs.com/package/bulma-start
|
||||
breadcrumb:
|
||||
- home
|
||||
- more
|
||||
- bulma-start
|
||||
---
|
||||
|
||||
{% include global/navbar.html id="BulmaStartHero" %}
|
||||
|
||||
<section class="hero is-success">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h1 class="title">
|
||||
Bulma Start
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Tiny npm package to get started with Bulma
|
||||
</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="columns">
|
||||
<div class="column is-5-widescreen">
|
||||
<p class="title is-4"><code><a target="_blank" href="{{ page.npm_url }}">bulma-start</a></code> is a tiny npm package that includes the <code>npm</code> <strong>dependencies</strong> you need to <strong>build your own website</strong> with Bulma.</p>
|
||||
<div class="buttons">
|
||||
<a class="button is-medium is-success" target="_blank" href="{{ page.download_url }}"><span><strong>Download</strong></span></a>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="button is-small is-outlined is-dark" target="_blank" href="{{ page.github_url }}"><span><strong>GitHub</strong> page</span></a>
|
||||
<a class="button is-small is-outlined is-danger" target="_blank" href="{{ page.npm_url }}"><span><strong>npm</strong> page</span></a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="columns">
|
||||
<div class="column is-5-widescreen">
|
||||
<p class="title is-4"><code><a target="_blank" href="{{ page.npm_url }}">bulma-start</a></code> is a tiny npm package that includes the <code>npm</code> <strong>dependencies</strong> you need to <strong>build your own website</strong> with Bulma.</p>
|
||||
<div class="buttons">
|
||||
<a class="button is-medium is-success" target="_blank" href="{{ page.download_url }}"><span><strong>Download</strong></span></a>
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a class="button is-small is-outlined is-dark" target="_blank" href="{{ page.github_url }}"><span><strong>GitHub</strong> page</span></a>
|
||||
<a class="button is-small is-outlined is-danger" target="_blank" href="{{ page.npm_url }}"><span><strong>npm</strong> page</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p><a href="{{ page.npm_url }}"><img src="{{ site.url }}/images/bulma-start.png" alt="Bulma: a Flexbox CSS framework" style="max-width:100%;" width="438" height="200"></a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Install" %}
|
||||
|
||||
{% highlight bash %}npm install bulma-start{% endhighlight %}
|
||||
|
||||
<p class="block"><em>or</em></p>
|
||||
|
||||
{% highlight bash %}yarn add bulma-start{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="What’s included" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>npm</code> dependencies included in <code>package.json</code> are:</p>
|
||||
|
||||
<ul>
|
||||
<li><code><a href="https://github.com/jgthms/bulma" target="_blank">bulma</a></code></li>
|
||||
<li><code><a href="https://github.com/sass/node-sass" target="_blank">node-sass</a></code> to compile your own Sass file</li>
|
||||
<li><code><a href="https://github.com/postcss/postcss-cli" target="_blank">postcss-cli</a></code> and <code><a href="https://github.com/postcss/autoprefixer" target="_blank">autoprefixer</a></code> to add support for older browsers</li>
|
||||
<li><code><a href="https://babeljs.io/docs/usage/cli/" target="_blank">babel-cli</a></code>, <code><a href="https://github.com/babel/babel-preset-env" target="_blank">babel-preset-env</a></code> and <code><a href="https://github.com/jmcriffey/babel-preset-es2015-ie">babel-preset-es2015-ie</a></code> for compiling ES6 JavaScript files</li>
|
||||
</ul>
|
||||
|
||||
<p>Apart from <code>package.json</code>, the following files are included:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>.babelrc</code> configuration file for <a href="https://babeljs.io/">Babel</a></li>
|
||||
<li><code>.gitignore</code> common <a href="https://git-scm.com/">Git</a> ignored files</li>
|
||||
<li><code>index.html</code> this HTML5 file</li>
|
||||
<li><code>_sass/main.scss</code> a basic SCSS file that <strong>imports Bulma</strong> and explains how to <strong>customize</strong> your styles, and compiles to <code>css/main.css</code></li>
|
||||
<li><code>_javascript/main.js</code> an ES6 JavaScript that compiles to <code>lib/main.js</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
<p><a href="{{ page.npm_url }}"><img src="{{ site.url }}/images/bulma-start.png" alt="Bulma: a Flexbox CSS framework" style="max-width:100%;" width="438" height="200"></a></p>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
{% include elements/anchor.html name="Install" %}
|
||||
|
||||
{% highlight bash %}npm install bulma-start{% endhighlight %}
|
||||
|
||||
<p class="block"><em>or</em></p>
|
||||
|
||||
{% highlight bash %}yarn add bulma-start{% endhighlight %}
|
||||
|
||||
{% include elements/anchor.html name="What’s included" %}
|
||||
|
||||
<div class="content">
|
||||
<p>The <code>npm</code> dependencies included in <code>package.json</code> are:</p>
|
||||
|
||||
<ul>
|
||||
<li><code><a href="https://github.com/jgthms/bulma" target="_blank">bulma</a></code></li>
|
||||
<li><code><a href="https://github.com/sass/node-sass" target="_blank">node-sass</a></code> to compile your own Sass file</li>
|
||||
<li><code><a href="https://github.com/postcss/postcss-cli" target="_blank">postcss-cli</a></code> and <code><a href="https://github.com/postcss/autoprefixer" target="_blank">autoprefixer</a></code> to add support for older browsers</li>
|
||||
<li><code><a href="https://babeljs.io/docs/usage/cli/" target="_blank">babel-cli</a></code>, <code><a href="https://github.com/babel/babel-preset-env" target="_blank">babel-preset-env</a></code> and <code><a href="https://github.com/jmcriffey/babel-preset-es2015-ie">babel-preset-es2015-ie</a></code> for compiling ES6 JavaScript files</li>
|
||||
</ul>
|
||||
|
||||
<p>Apart from <code>package.json</code>, the following files are included:</p>
|
||||
|
||||
<ul>
|
||||
<li><code>.babelrc</code> configuration file for <a href="https://babeljs.io/">Babel</a></li>
|
||||
<li><code>.gitignore</code> common <a href="https://git-scm.com/">Git</a> ignored files</li>
|
||||
<li><code>index.html</code> this HTML5 file</li>
|
||||
<li><code>_sass/main.scss</code> a basic SCSS file that <strong>imports Bulma</strong> and explains how to <strong>customize</strong> your styles, and compiles to <code>css/main.css</code></li>
|
||||
<li><code>_javascript/main.js</code> an ES6 JavaScript that compiles to <code>lib/main.js</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
@ -12212,27 +12212,8 @@ svg {
|
||||
}
|
||||
}
|
||||
|
||||
.bd-bootstrap .hero {
|
||||
background-color: #6f5499;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.bd-bootstrap .hero .title,
|
||||
.bd-bootstrap .hero .subtitle {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.bd-bootstrap .hero .subtitle {
|
||||
color: rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
.bd-bootstrap .hero .subtitle a {
|
||||
border-bottom: 1px solid currentColor;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.bd-bootstrap .hero .subtitle a:hover {
|
||||
color: #fff;
|
||||
.bd-bootstrap-table {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
|
||||
.bd-pros-heading {
|
||||
@ -12281,28 +12262,23 @@ svg {
|
||||
color: #6f5499;
|
||||
}
|
||||
|
||||
.bd-separator {
|
||||
color: #dbdbdb;
|
||||
margin: 0 0.25em;
|
||||
}
|
||||
|
||||
.bd-comparison {
|
||||
.bd-bootstrap-comparison {
|
||||
margin: 0 auto;
|
||||
max-width: 42rem;
|
||||
}
|
||||
|
||||
.bd-comparison .table {
|
||||
.bd-bootstrap-comparison .table {
|
||||
color: #ff3860;
|
||||
}
|
||||
|
||||
.bd-comparison .table thead th,
|
||||
.bd-comparison .table tfoot th {
|
||||
.bd-bootstrap-comparison .table thead th,
|
||||
.bd-bootstrap-comparison .table tfoot th {
|
||||
font-size: 1.5rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bd-comparison .table thead svg,
|
||||
.bd-comparison .table tfoot svg {
|
||||
.bd-bootstrap-comparison .table thead svg,
|
||||
.bd-bootstrap-comparison .table tfoot svg {
|
||||
height: 1.5rem;
|
||||
margin-right: 1rem;
|
||||
position: relative;
|
||||
@ -12310,36 +12286,36 @@ svg {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.bd-comparison .table tbody th {
|
||||
.bd-bootstrap-comparison .table tbody th {
|
||||
font-size: 1.25rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.bd-comparison .table tbody td {
|
||||
.bd-bootstrap-comparison .table tbody td {
|
||||
font-family: monospace;
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.bd-comparison .table tbody a {
|
||||
.bd-bootstrap-comparison .table tbody a {
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.bd-comparison .table tbody a:hover {
|
||||
.bd-bootstrap-comparison .table tbody a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.bd-comparison .table .bd-is-empty {
|
||||
.bd-bootstrap-comparison .table .bd-is-empty {
|
||||
background-color: whitesmoke;
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.bd-comparison .table .bd-is-unique {
|
||||
.bd-bootstrap-comparison .table .bd-is-unique {
|
||||
background-color: rgba(35, 209, 96, 0.25);
|
||||
color: #363636;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.bd-comparison-header {
|
||||
.bd-bootstrap-comparison-header {
|
||||
margin-bottom: 3rem;
|
||||
}
|
||||
|
||||
|
||||
@ -1,7 +1,12 @@
|
||||
---
|
||||
title: Extensions
|
||||
layout: default
|
||||
layout: more
|
||||
route: extensions
|
||||
route: backers
|
||||
breadcrumb:
|
||||
- home
|
||||
- more
|
||||
- extensions
|
||||
extensions:
|
||||
- name: bulma-accordion
|
||||
url: https://wikiki.github.io/components/accordion
|
||||
@ -110,65 +115,39 @@ extensions:
|
||||
height: 469
|
||||
---
|
||||
|
||||
{% include global/navbar.html id="Extensions" %}
|
||||
{% for extension in page.extensions %}
|
||||
<a class="box" href="{{ extension.url }}">
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<h3 class="title is-4">
|
||||
<strong>{{ extension.name }}</strong>
|
||||
</h3>
|
||||
<h4 class="subtitle is-6">
|
||||
{{ extension.url | remove:'http://' | remove:'https://' | remove:'www.' }}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img src="{{site.url}}/images/extensions/{{ extension.slug }}.png" width="{{ extension.width }}" height="{{ extension.height }}">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
<section class="hero is-danger">
|
||||
<div class="hero-body">
|
||||
<div class="container">
|
||||
<div class="columns is-vcentered">
|
||||
<div class="column">
|
||||
<h1 class="title">
|
||||
<a href="{{ site.url }}/blog">Extensions</a>
|
||||
</h1>
|
||||
<p class="subtitle">
|
||||
Side projects to enhance Bulma
|
||||
</p>
|
||||
<div class="message">
|
||||
<div class="message-body">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>Have an extension to share with the community?</p>
|
||||
</div>
|
||||
<div class="column is-narrow">
|
||||
{% include elements/carbon.html %}
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/pulls">
|
||||
Submit a Pull Request
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
{% for extension in page.extensions %}
|
||||
<a class="box" href="{{ extension.url }}">
|
||||
<div class="columns">
|
||||
<div class="column is-one-third">
|
||||
<h3 class="title is-4">
|
||||
<strong>{{ extension.name }}</strong>
|
||||
</h3>
|
||||
<h4 class="subtitle is-6">
|
||||
{{ extension.url | remove:'http://' | remove:'https://' | remove:'www.' }}
|
||||
</h4>
|
||||
</div>
|
||||
<div class="column">
|
||||
<img src="{{site.url}}/images/extensions/{{ extension.slug }}.png" width="{{ extension.width }}" height="{{ extension.height }}">
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
|
||||
<div class="message">
|
||||
<div class="message-body">
|
||||
<div class="level">
|
||||
<div class="level-left">
|
||||
<div class="level-item">
|
||||
<p>Have an extension to share with the community?</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="level-right">
|
||||
<div class="level-item">
|
||||
<a class="button is-primary" href="https://github.com/jgthms/bulma/pulls">
|
||||
Submit a Pull Request
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
@ -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 %}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user