mirror of
https://github.com/jgthms/bulma
synced 2026-04-01 01:21:34 -07:00
Add more layout
This commit is contained in:
Jeremy Thomas
@@ -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,84 +52,13 @@ 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 %}">
|
||||
|
||||
<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">
|
||||
<div class="bd-bootstrap-message 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>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
|
||||
<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">
|
||||
@@ -167,16 +102,10 @@ bootstrap:
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<hr>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="bd-comparison">
|
||||
<header class="bd-comparison-header has-text-centered">
|
||||
<div class="bd-bootstrap-comparison">
|
||||
<header class="bd-bootstrap-comparison-header has-text-centered">
|
||||
<h2 class="title">
|
||||
Comparison table
|
||||
</h2>
|
||||
@@ -202,9 +131,3 @@ bootstrap:
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{% include global/footer.html %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -1,33 +1,13 @@
|
||||
---
|
||||
title: Backers via Patreon
|
||||
layout: default
|
||||
layout: more
|
||||
route: backers
|
||||
breadcrumb:
|
||||
- home
|
||||
- more
|
||||
- patreon-backers
|
||||
---
|
||||
|
||||
{% include global/navbar.html id="BackersNavbar" %}
|
||||
|
||||
<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>
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h2 class="title is-5">
|
||||
Website sponsors via Patreon ($300+)
|
||||
</h2>
|
||||
@@ -71,5 +51,3 @@ route: backers
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,36 +1,17 @@
|
||||
---
|
||||
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>
|
||||
</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>
|
||||
@@ -77,5 +58,3 @@ npm_url: https://www.npmjs.com/package/bulma-start
|
||||
<li><code>_javascript/main.js</code> an ES6 JavaScript that compiles to <code>lib/main.js</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -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,30 +115,6 @@ extensions:
|
||||
height: 469
|
||||
---
|
||||
|
||||
{% include global/navbar.html id="Extensions" %}
|
||||
|
||||
<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>
|
||||
<div class="column is-narrow">
|
||||
{% include elements/carbon.html %}
|
||||
</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">
|
||||
@@ -170,5 +151,3 @@ extensions:
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -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,30 +45,6 @@ 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>
|
||||
@@ -158,6 +138,3 @@ images:
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user