mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Organize partials
This commit is contained in:
Jeremy Thomas
parent
a1c1909001
commit
e8d4efb274
@ -322,6 +322,14 @@
|
|||||||
"blog": {
|
"blog": {
|
||||||
"name": "Blog",
|
"name": "Blog",
|
||||||
"path": "/blog"
|
"path": "/blog"
|
||||||
|
},
|
||||||
|
"expo": {
|
||||||
|
"name": "Expo",
|
||||||
|
"path": "/expo"
|
||||||
|
},
|
||||||
|
"love": {
|
||||||
|
"name": "Love",
|
||||||
|
"path": "/love"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"categories": {
|
"categories": {
|
||||||
|
|||||||
@ -1,20 +0,0 @@
|
|||||||
<header class="bd-header">
|
|
||||||
<div class="bd-header-titles">
|
|
||||||
<h1 class="title">
|
|
||||||
Blog
|
|
||||||
</h1>
|
|
||||||
<p class="subtitle is-4">
|
|
||||||
Stay updated about new features, bug fixes, and releases
|
|
||||||
</p>
|
|
||||||
<a class="button bd-is-rss" href="{{ site.url }}/atom.xml">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fas fa-rss"></i>
|
|
||||||
</span>
|
|
||||||
<span>Subscribe</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bd-header-carbon">
|
|
||||||
{% include carbon.html %}
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
@ -4,12 +4,12 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="bd-book-columns">
|
<div class="bd-book-columns">
|
||||||
<div class="bd-book-column bd-is-cover">
|
<div class="bd-book-column bd-is-cover">
|
||||||
{% include book-cover.html %}
|
{% include book/book-cover.html %}
|
||||||
</div>
|
</div>
|
||||||
<div class="bd-book-column bd-is-content">
|
<div class="bd-book-column bd-is-content">
|
||||||
{% include book-content.html show_cover=false %}
|
{% include book/book-content.html show_cover=false %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
@ -7,7 +7,7 @@
|
|||||||
|
|
||||||
{% if include.show_cover %}
|
{% if include.show_cover %}
|
||||||
<div class="bd-book-inline-cover">
|
<div class="bd-book-inline-cover">
|
||||||
{% include book-cover.html %}
|
{% include book/book-cover.html %}
|
||||||
</div>
|
</div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
@ -3,12 +3,12 @@
|
|||||||
<div class="modal-content">
|
<div class="modal-content">
|
||||||
<div class="bd-book-modal-columns">
|
<div class="bd-book-modal-columns">
|
||||||
<div class="bd-book-modal-column bd-is-cover">
|
<div class="bd-book-modal-column bd-is-cover">
|
||||||
{% include book-cover.html %}
|
{% include book/book-cover.html %}
|
||||||
</div>
|
</div>
|
||||||
<div class="bd-book-modal-column bd-is-content">
|
<div class="bd-book-modal-column bd-is-content">
|
||||||
{% include book-content.html show_cover=true %}
|
{% include book/book-content.html show_cover=true %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button class="bd-book-modal-close modal-close is-large" aria-label="close"></button>
|
<button class="bd-book-modal-close modal-close is-large" aria-label="close"></button>
|
||||||
</div>
|
</div>
|
||||||
@ -1,24 +1,24 @@
|
|||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-4">
|
<div class="column is-4">
|
||||||
{% assign tweet = site.data.love.tweetsById.868829487072464897 %}{% include tw.html tweet=tweet%}
|
{% assign tweet = site.data.love.tweetsById.868829487072464897 %}{% include elements/tw.html tweet=tweet%}
|
||||||
{% assign tweet = site.data.love.tweetsById.912690697416753152 %}{% include tw.html tweet=tweet%}
|
{% assign tweet = site.data.love.tweetsById.912690697416753152 %}{% include elements/tw.html tweet=tweet%}
|
||||||
{% assign tweet = site.data.love.tweetsById.907551723459416071 %}{% include tw.html tweet=tweet%}
|
{% assign tweet = site.data.love.tweetsById.907551723459416071 %}{% include elements/tw.html tweet=tweet%}
|
||||||
{% assign tweet = site.data.love.tweetsById.834140257054502913 %}{% include tw.html tweet=tweet%}
|
{% assign tweet = site.data.love.tweetsById.834140257054502913 %}{% include elements/tw.html tweet=tweet%}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="column is-4">
|
<div class="column is-4">
|
||||||
{% assign tweet = site.data.love.tweetsById.869284735440363520 %}{% include tw.html tweet=tweet%}
|
{% assign tweet = site.data.love.tweetsById.869284735440363520 %}{% include elements/tw.html tweet=tweet%}
|
||||||
{% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include tw.html tweet=tweet%}
|
{% assign tweet = site.data.love.tweetsById.910956939886043136 %}{% include elements/tw.html tweet=tweet%}
|
||||||
{% assign tweet = site.data.love.tweetsById.860885116909998080 %}{% include tw.html tweet=tweet%}
|
{% assign tweet = site.data.love.tweetsById.860885116909998080 %}{% include elements/tw.html tweet=tweet%}
|
||||||
{% assign tweet = site.data.love.tweetsById.835834634655174658 %}{% include tw.html tweet=tweet%}
|
{% assign tweet = site.data.love.tweetsById.835834634655174658 %}{% include elements/tw.html tweet=tweet%}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="column is-4">
|
<div class="column is-4">
|
||||||
{% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include tw.html tweet=tweet%}
|
{% assign tweet = site.data.love.tweetsById.874925154475929602 %}{% include elements/tw.html tweet=tweet%}
|
||||||
{% assign tweet = site.data.love.tweetsById.915580081938018304 %}{% include tw.html tweet=tweet%}
|
{% assign tweet = site.data.love.tweetsById.915580081938018304 %}{% include elements/tw.html tweet=tweet%}
|
||||||
{% assign tweet = site.data.love.tweetsById.903629781744439297 %}{% include tw.html tweet=tweet%}
|
{% assign tweet = site.data.love.tweetsById.903629781744439297 %}{% include elements/tw.html tweet=tweet%}
|
||||||
{% assign tweet = site.data.love.tweetsById.909653512010833920 %}{% include tw.html tweet=tweet%}
|
{% assign tweet = site.data.love.tweetsById.909653512010833920 %}{% include elements/tw.html tweet=tweet%}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -24,7 +24,7 @@
|
|||||||
|
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include anchor.html name=anchor_name %}
|
{% include elements/anchor.html name=anchor_name %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>{{ content | strip }}</p>
|
<p>{{ content | strip }}</p>
|
||||||
@ -1,10 +1,10 @@
|
|||||||
{% include native.html %}
|
{% include global/native.html %}
|
||||||
|
|
||||||
{% include book-banner.html %}
|
{% include book/book-banner.html %}
|
||||||
|
|
||||||
{% include sponsors.html %}
|
{% include global/sponsors.html %}
|
||||||
|
|
||||||
{% include newsletter.html %}
|
{% include global/newsletter.html %}
|
||||||
|
|
||||||
<footer class="footer">
|
<footer class="footer">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
@ -83,6 +83,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
{% include book-modal.html %}
|
{% include book/book-modal.html %}
|
||||||
|
|
||||||
{% include scripts.html %}
|
{% include global/scripts.html %}
|
||||||
@ -1,69 +0,0 @@
|
|||||||
<nav class="nav">
|
|
||||||
<div class="nav-left">
|
|
||||||
<a class="nav-item is-brand" href="{{ site.url }}">
|
|
||||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="nav-center">
|
|
||||||
<a class="nav-item" href="{{ site.data.meta.github }}">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fab fa-github"></i>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<a class="nav-item" href="{{ site.data.meta.twitter }}">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fab fa-twitter"></i>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span id="nav-toggle" class="nav-toggle">
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
<span></span>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<div id="nav-menu" class="nav-right nav-menu">
|
|
||||||
<a class="nav-item {% if page.route == 'index' %}is-active{% endif %}" href="{{ site.url }}/">
|
|
||||||
Home
|
|
||||||
</a>
|
|
||||||
<a class="is-hidden nav-item {% if page.route == 'templates' %}is-active{% endif %} {% if page.layout == 'templates' %}is-active{% endif %}" href="{{ site.url }}/templates/">
|
|
||||||
<span>Templates</span>
|
|
||||||
<span class="tag is-small is-success">New!</span>
|
|
||||||
</a>
|
|
||||||
<a class="nav-item {% if page.route == 'documentation' %}is-active{% endif %} {% if page.layout == 'documentation' %}is-active{% endif %}" href="{{ site.data.meta.documentation }}">
|
|
||||||
Documentation
|
|
||||||
</a>
|
|
||||||
<a class="nav-item {% if page.route == 'blog' %}is-active{% endif %}" href="{{ site.url }}/blog/">
|
|
||||||
Blog
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<div class="nav-item">
|
|
||||||
<div class="field is-grouped">
|
|
||||||
<p class="control">
|
|
||||||
<a id="twitter"
|
|
||||||
class="button"
|
|
||||||
data-social-network="Twitter"
|
|
||||||
data-social-action="tweet"
|
|
||||||
data-social-target="{{ site.url }}"
|
|
||||||
target="_blank"
|
|
||||||
href="https://twitter.com/intent/tweet?text={{ site.data.meta.title | urlencode }}&url={{ site.url }}&via=jgthms">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fab fa-twitter"></i>
|
|
||||||
</span>
|
|
||||||
<span>Tweet</span>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
<p class="control">
|
|
||||||
<a class="button is-primary" href="{{ site.data.meta.download }}">
|
|
||||||
<span class="icon">
|
|
||||||
<i class="fas fa-download"></i>
|
|
||||||
</span>
|
|
||||||
<span>Download</span>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
@ -50,10 +50,10 @@
|
|||||||
|
|
||||||
<div class="intro-partners">
|
<div class="intro-partners">
|
||||||
<div class="intro-sponsor">
|
<div class="intro-sponsor">
|
||||||
{% include sponsor.html %}
|
{% include index/sponsor.html %}
|
||||||
</div>
|
</div>
|
||||||
<div class="intro-carbon">
|
<div class="intro-carbon">
|
||||||
{% include carbon.html %}
|
{% include elements/carbon.html %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,24 +0,0 @@
|
|||||||
<nav class="navbar has-shadow">
|
|
||||||
<div class="container">
|
|
||||||
<div class="navbar-tabs">
|
|
||||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'basics' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/basics/">
|
|
||||||
Basics
|
|
||||||
</a>
|
|
||||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'sizes' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/sizes/">
|
|
||||||
Sizes
|
|
||||||
</a>
|
|
||||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'responsiveness' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/responsiveness/">
|
|
||||||
Responsiveness
|
|
||||||
</a>
|
|
||||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'nesting' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/nesting/">
|
|
||||||
Nesting
|
|
||||||
</a>
|
|
||||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'gap' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/gap/">
|
|
||||||
Gap
|
|
||||||
</a>
|
|
||||||
<a class="navbar-item is-tab {% if page.doc-subtab == 'options' %}is-active{% endif %}" href="{{ site.url }}/documentation/columns/options/">
|
|
||||||
Options
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
@ -1,41 +0,0 @@
|
|||||||
<div class="container">
|
|
||||||
<div class="columns">
|
|
||||||
<div class="column is-4">
|
|
||||||
<article class="bd-testimonial">
|
|
||||||
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">So, I was making an exam and in a matter of 30 minutes I had my structure complete with responsive, Bulma is crazy. Thanks <a href="https://twitter.com/jgthms">@jgthms</a></p>— Francisco Cruz (@atFranCruz) <a href="https://twitter.com/atFranCruz/status/868829487072464897">May 28, 2017</a></blockquote>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="bd-testimonial">
|
|
||||||
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey Jeremy! Been putting Bulma into a project during the last days - absolutely love it! Well done! 😍</p>— Simon Jaeger (@simonjaegr) <a href="https://twitter.com/simonjaegr/status/834140257054502913">February 21, 2017</a></blockquote>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="column is-4">
|
|
||||||
<article class="bd-testimonial">
|
|
||||||
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">Bulma, I think I'm in love. <a href="https://t.co/APYefmC1Bs">https://t.co/APYefmC1Bs</a> via <a href="https://twitter.com/jgthms">@jgthms</a></p>— Jesse Schoff (@jesseschoff) <a href="https://twitter.com/jesseschoff/status/869284735440363520">May 29, 2017</a></blockquote>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="bd-testimonial">
|
|
||||||
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr"><a href="https://t.co/ClYmBd8tGR">https://t.co/ClYmBd8tGR</a> is an impressive CSS framework. Flexbox grid, no JS, modular components (use what you need), Sass.<br><br>💯 <a href="https://twitter.com/jgthms">@jgthms</a>.</p>— scottgallant (@scottgallant) <a href="https://twitter.com/scottgallant/status/835834634655174658">February 26, 2017</a></blockquote>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="column is-4">
|
|
||||||
<article class="bd-testimonial">
|
|
||||||
<blockquote class="twitter-tweet" data-cards="hidden" data-lang="en"><p lang="en" dir="ltr">I usually hate having to write CSS, but I really like working with the lightweight Bulma (<a href="https://t.co/OAMLjKWzak">https://t.co/OAMLjKWzak</a>) by <a href="https://twitter.com/jgthms">@jgthms</a> so far 👍</p>— mario zupan (@mzupzup) <a href="https://twitter.com/mzupzup/status/874925154475929602">June 14, 2017</a></blockquote>
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<article class="bd-testimonial">
|
|
||||||
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr"><a href="https://twitter.com/jgthms">@jgthms</a> Hey.I just stopped by here to say thank you so much for Bulma. It made my website looks 100 times better 😍</p>— juliooooo (@juliooooo000) <a href="https://twitter.com/juliooooo000/status/819710615337857024">January 13, 2017</a></blockquote>
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bd-more-loves">
|
|
||||||
<p class="bd-more-loves-container">
|
|
||||||
<a class="button is-medium is-danger bd-rainbow" href="{{ site.url }}/love/">
|
|
||||||
<span>See more <strong>love</strong> 🤗</span>
|
|
||||||
</a>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
@ -1,9 +1,9 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en" class="{% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
|
<html lang="en" class="{% if page.route %}route-{{page.route}}{% elsif page.layout %}route-{{page.layout}}{% endif %}">
|
||||||
{% include head.html %}
|
{% include global/head.html %}
|
||||||
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
|
<body class="layout-{{ page.layout }}{% if page.doc-tab %} page-{{ page.doc-tab}}{% endif %}">
|
||||||
{% include deprecated.html %}
|
{% include global/deprecated.html %}
|
||||||
{{ content }}
|
{{ content }}
|
||||||
{% include footer.html %}
|
{% include global/footer.html %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -3,7 +3,7 @@ layout: default
|
|||||||
route: documentation
|
route: documentation
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include navbar.html id="Documentation" %}
|
{% include global/navbar.html id="Documentation" %}
|
||||||
|
|
||||||
{% assign current_category = page.doc-tab %}
|
{% assign current_category = page.doc-tab %}
|
||||||
{% assign current_link_id = page.breadcrumb | last %}
|
{% assign current_link_id = page.breadcrumb | last %}
|
||||||
@ -47,7 +47,7 @@ route: documentation
|
|||||||
</p>
|
</p>
|
||||||
{% if page.meta %}
|
{% if page.meta %}
|
||||||
{%
|
{%
|
||||||
include meta.html
|
include elements/meta.html
|
||||||
colors=page.meta.colors
|
colors=page.meta.colors
|
||||||
sizes=page.meta.sizes
|
sizes=page.meta.sizes
|
||||||
variables=page.meta.variables
|
variables=page.meta.variables
|
||||||
@ -57,7 +57,7 @@ route: documentation
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bd-header-carbon">
|
<div class="bd-header-carbon">
|
||||||
{% include carbon.html %}
|
{% include elements/carbon.html %}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
@ -6,7 +6,7 @@ breadcrumb:
|
|||||||
- blog
|
- blog
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include navbar.html id="Blog" %}
|
{% include global/navbar.html id="Blog" %}
|
||||||
|
|
||||||
<main class="bd-main">
|
<main class="bd-main">
|
||||||
<div class="bd-side-background"></div>
|
<div class="bd-side-background"></div>
|
||||||
@ -67,7 +67,7 @@ breadcrumb:
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bd-header-carbon">
|
<div class="bd-header-carbon">
|
||||||
{% include carbon.html %}
|
{% include elements/carbon.html %}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
.bd-expo
|
.bd-expo
|
||||||
background-color: $background
|
background-color: $white
|
||||||
padding: 1.5rem
|
padding: 1.5rem
|
||||||
|
|
||||||
.bd-website
|
.bd-website
|
||||||
|
|||||||
@ -1,6 +1,3 @@
|
|||||||
.bd-love
|
|
||||||
background-color: $background
|
|
||||||
|
|
||||||
.bd-testimonials
|
.bd-testimonials
|
||||||
background-color: $background
|
background-color: $background
|
||||||
|
|
||||||
@ -75,14 +72,7 @@
|
|||||||
display: flex
|
display: flex
|
||||||
justify-content: center
|
justify-content: center
|
||||||
|
|
||||||
// .bd-embrace
|
|
||||||
// background-color: $background
|
|
||||||
// border-radius: $radius
|
|
||||||
// padding: 1.5rem
|
|
||||||
|
|
||||||
+mobile
|
+mobile
|
||||||
.bd-love
|
|
||||||
padding: 1.5rem
|
|
||||||
.bd-hug
|
.bd-hug
|
||||||
margin: 1.5rem
|
margin: 1.5rem
|
||||||
.bd-embrace
|
.bd-embrace
|
||||||
@ -95,8 +85,6 @@
|
|||||||
margin-top: 0.75rem
|
margin-top: 0.75rem
|
||||||
|
|
||||||
+tablet
|
+tablet
|
||||||
.bd-love
|
|
||||||
padding: 3rem 1.5rem
|
|
||||||
.bd-embrace
|
.bd-embrace
|
||||||
align-items: center
|
align-items: center
|
||||||
display: flex
|
display: flex
|
||||||
|
|||||||
@ -11,8 +11,8 @@ $tw-grey: #697882
|
|||||||
|
|
||||||
.bd-tw
|
.bd-tw
|
||||||
background-color: #fff
|
background-color: #fff
|
||||||
border: 1px solid #e1e8ed
|
border: 2px solid #e1e8ed
|
||||||
border-radius: 5px
|
border-radius: $radius-large
|
||||||
color: $tw-grey
|
color: $tw-grey
|
||||||
flex-shrink: 0
|
flex-shrink: 0
|
||||||
font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif
|
font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif
|
||||||
|
|||||||
@ -89,7 +89,7 @@ bootstrap:
|
|||||||
<script defer src="{{ site.data.icons.fontawesome5 }}"></script>
|
<script defer src="{{ site.data.icons.fontawesome5 }}"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
{% include navbar.html id="Documentation" %}
|
{% include global/navbar.html id="Documentation" %}
|
||||||
|
|
||||||
<main class="bd-bootstrap">
|
<main class="bd-bootstrap">
|
||||||
<section class="hero is-medium">
|
<section class="hero is-medium">
|
||||||
@ -105,7 +105,7 @@ bootstrap:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-narrow">
|
<div class="column is-narrow">
|
||||||
{% include carbon.html %}
|
{% include elements/carbon.html %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -135,7 +135,7 @@ bootstrap:
|
|||||||
<div class="bd-pros-list">
|
<div class="bd-pros-list">
|
||||||
{% for pro in page.bulma %}
|
{% for pro in page.bulma %}
|
||||||
{%
|
{%
|
||||||
include pro.html
|
include content/pro.html
|
||||||
type=pro.type
|
type=pro.type
|
||||||
icon=pro.icon
|
icon=pro.icon
|
||||||
icon_brand=pro.icon_brand
|
icon_brand=pro.icon_brand
|
||||||
@ -156,7 +156,7 @@ bootstrap:
|
|||||||
<div class="bd-pros-list">
|
<div class="bd-pros-list">
|
||||||
{% for pro in page.bootstrap %}
|
{% for pro in page.bootstrap %}
|
||||||
{%
|
{%
|
||||||
include pro.html
|
include content/pro.html
|
||||||
type=pro.type
|
type=pro.type
|
||||||
icon=pro.icon
|
icon=pro.icon
|
||||||
icon_brand=pro.icon_brand
|
icon_brand=pro.icon_brand
|
||||||
@ -198,13 +198,13 @@ bootstrap:
|
|||||||
</tr>
|
</tr>
|
||||||
</tfoot>
|
</tfoot>
|
||||||
<tbody>
|
<tbody>
|
||||||
{% include comparison.html %}
|
{% include content/comparison.html %}
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{% include footer.html %}
|
{% include global/footer.html %}
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -4,7 +4,7 @@ layout: default
|
|||||||
route: backers
|
route: backers
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include navbar.html id="BackersNavbar" %}
|
{% include global/navbar.html id="BackersNavbar" %}
|
||||||
|
|
||||||
<section class="hero is-primary bd-is-patreon">
|
<section class="hero is-primary bd-is-patreon">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
@ -19,7 +19,7 @@ route: backers
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-narrow">
|
<div class="column is-narrow">
|
||||||
{% include carbon.html %}
|
{% include elements/carbon.html %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -6,7 +6,7 @@ breadcrumb:
|
|||||||
- blog
|
- blog
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include navbar.html id="Blog" %}
|
{% include global/navbar.html id="Blog" %}
|
||||||
|
|
||||||
<main class="bd-main">
|
<main class="bd-main">
|
||||||
<div class="bd-main-container container">
|
<div class="bd-main-container container">
|
||||||
@ -31,7 +31,7 @@ breadcrumb:
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bd-header-carbon">
|
<div class="bd-header-carbon">
|
||||||
{% include carbon.html %}
|
{% include elements/carbon.html %}
|
||||||
</div>
|
</div>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|||||||
@ -7,7 +7,7 @@ github_url: https://github.com/jgthms/bulma-start
|
|||||||
npm_url: https://www.npmjs.com/package/bulma-start
|
npm_url: https://www.npmjs.com/package/bulma-start
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include navbar.html id="BulmaStartHero" %}
|
{% include global/navbar.html id="BulmaStartHero" %}
|
||||||
|
|
||||||
<section class="hero is-success">
|
<section class="hero is-success">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
@ -22,7 +22,7 @@ npm_url: https://www.npmjs.com/package/bulma-start
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-narrow">
|
<div class="column is-narrow">
|
||||||
{% include carbon.html %}
|
{% include elements/carbon.html %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -47,7 +47,7 @@ npm_url: https://www.npmjs.com/package/bulma-start
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Install" %}
|
{% include elements/anchor.html name="Install" %}
|
||||||
|
|
||||||
{% highlight bash %}npm install bulma-start{% endhighlight %}
|
{% highlight bash %}npm install bulma-start{% endhighlight %}
|
||||||
|
|
||||||
@ -55,7 +55,7 @@ npm_url: https://www.npmjs.com/package/bulma-start
|
|||||||
|
|
||||||
{% highlight bash %}yarn add bulma-start{% endhighlight %}
|
{% highlight bash %}yarn add bulma-start{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="What’s included" %}
|
{% include elements/anchor.html name="What’s included" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>The <code>npm</code> dependencies included in <code>package.json</code> are:</p>
|
<p>The <code>npm</code> dependencies included in <code>package.json</code> are:</p>
|
||||||
|
|||||||
@ -11482,8 +11482,8 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
|||||||
|
|
||||||
.bd-tw {
|
.bd-tw {
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
border: 1px solid #e1e8ed;
|
border: 2px solid #e1e8ed;
|
||||||
border-radius: 5px;
|
border-radius: 6px;
|
||||||
color: #697882;
|
color: #697882;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif;
|
font-family: Helvetica, Roboto, "Segoe UI", Calibri, sans-serif;
|
||||||
@ -11715,7 +11715,7 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.bd-expo {
|
.bd-expo {
|
||||||
background-color: whitesmoke;
|
background-color: white;
|
||||||
padding: 1.5rem;
|
padding: 1.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -11796,10 +11796,6 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.bd-love {
|
|
||||||
background-color: whitesmoke;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bd-testimonials {
|
.bd-testimonials {
|
||||||
background-color: whitesmoke;
|
background-color: whitesmoke;
|
||||||
}
|
}
|
||||||
@ -11902,9 +11898,6 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 768px) {
|
@media screen and (max-width: 768px) {
|
||||||
.bd-love {
|
|
||||||
padding: 1.5rem;
|
|
||||||
}
|
|
||||||
.bd-hug {
|
.bd-hug {
|
||||||
margin: 1.5rem;
|
margin: 1.5rem;
|
||||||
}
|
}
|
||||||
@ -11923,9 +11916,6 @@ html.route-index .hero.is-primary a.column:hover .title strong {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (min-width: 769px), print {
|
@media screen and (min-width: 769px), print {
|
||||||
.bd-love {
|
|
||||||
padding: 3rem 1.5rem;
|
|
||||||
}
|
|
||||||
.bd-embrace {
|
.bd-embrace {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
@ -84,7 +84,7 @@ breadcrumb:
|
|||||||
</div>
|
</div>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include anchor.html name="Default gap" %}
|
{% include elements/anchor.html name="Default gap" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -96,7 +96,7 @@ breadcrumb:
|
|||||||
|
|
||||||
{{ columns_default_gap }}
|
{{ columns_default_gap }}
|
||||||
|
|
||||||
{% include anchor.html name="Gapless" %}
|
{% include elements/anchor.html name="Gapless" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -161,7 +161,7 @@ breadcrumb:
|
|||||||
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
|
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Variable gap" %}
|
{% include elements/anchor.html name="Variable gap" %}
|
||||||
|
|
||||||
<div class="field is-grouped is-grouped-multiline">
|
<div class="field is-grouped is-grouped-multiline">
|
||||||
<div class="control">
|
<div class="control">
|
||||||
@ -198,7 +198,7 @@ breadcrumb:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include klmn.html %}
|
{% include content/klmn.html %}
|
||||||
|
|
||||||
<div class="message is-warning">
|
<div class="message is-warning">
|
||||||
<div class="message-body">
|
<div class="message-body">
|
||||||
|
|||||||
@ -88,7 +88,7 @@ breadcrumb:
|
|||||||
</div>
|
</div>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include anchor.html name="Multiline" %}
|
{% include elements/anchor.html name="Multiline" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
|
<p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
|
||||||
@ -126,7 +126,7 @@ breadcrumb:
|
|||||||
|
|
||||||
{% highlight html %}{{ columns_multiline }}{% endhighlight %}
|
{% highlight html %}{{ columns_multiline }}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="Centering columns" %}
|
{% include elements/anchor.html name="Centering columns" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@ -42,7 +42,7 @@ breadcrumb:
|
|||||||
</div>
|
</div>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include anchor.html name="Mobile columns" %}
|
{% include elements/anchor.html name="Mobile columns" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -101,7 +101,7 @@ breadcrumb:
|
|||||||
|
|
||||||
{% highlight html %}{{ columns_desktop }}{% endhighlight %}
|
{% highlight html %}{{ columns_desktop }}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="Different column sizes per breakpoint" %}
|
{% include elements/anchor.html name="Different column sizes per breakpoint" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
|
<p>You can define a <strong>column size</strong> for <em>each</em> viewport size: mobile, tablet, and desktop.</p>
|
||||||
|
|||||||
@ -272,7 +272,7 @@ breadcrumb:
|
|||||||
{% highlight html %}{{ columns_sizes }}{% endhighlight %}
|
{% highlight html %}{{ columns_sizes }}{% endhighlight %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="12 columns system" %}
|
{% include elements/anchor.html name="12 columns system" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
|
<p>As the grid can be divided into <strong>12</strong> columns, there are size classes for each division:</p>
|
||||||
@ -511,7 +511,7 @@ breadcrumb:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Offset" %}
|
{% include elements/anchor.html name="Offset" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -559,7 +559,7 @@ breadcrumb:
|
|||||||
{% highlight html %}{{ columns_offset }}{% endhighlight %}
|
{% highlight html %}{{ columns_offset }}{% endhighlight %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Narrow column" %}
|
{% include elements/anchor.html name="Narrow column" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
|
<p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
|
||||||
|
|||||||
@ -170,50 +170,50 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<hr>
|
<hr>
|
||||||
{% include snippet.html content=breadcrumb_example horizontal=true clipped=true %}
|
{% include elements/snippet.html content=breadcrumb_example horizontal=true clipped=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Alignment" %}
|
{% include elements/anchor.html name="Alignment" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>.breadcrumb</code> container.</p>
|
<p>For alternative alignments, use the <code>is-centered</code> and <code>is-right</code> modifiers on the <code>.breadcrumb</code> container.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
|
{% include elements/snippet.html content=breadcrumb_centered_example horizontal=true clipped=true %}
|
||||||
|
|
||||||
{% include snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
|
{% include elements/snippet.html content=breadcrumb_right_example horizontal=true clipped=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Icons" %}
|
{% include elements/anchor.html name="Icons" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can use any of the <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> <strong>icons</strong>.</p>
|
<p>You can use any of the <a href="https://fontawesome.com/" target="_blank">Font Awesome</a> <strong>icons</strong>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
|
{% include elements/snippet.html content=breadcrumb_icons_example horizontal=true clipped=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Alternative separators" %}
|
{% include elements/anchor.html name="Alternative separators" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
|
<p>You can choose between <strong>4 additional separators</strong>: <code>has-arrow-separator</code> <code>has-bullet-separator</code> <code>has-dot-separator</code> and <code>has-succeeds-separator</code>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
|
{% include elements/snippet.html content=breadcrumb_arrow_example horizontal=true clipped=true %}
|
||||||
|
|
||||||
{% include snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
|
{% include elements/snippet.html content=breadcrumb_bullet_example horizontal=true clipped=true %}
|
||||||
|
|
||||||
{% include snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
|
{% include elements/snippet.html content=breadcrumb_dot_example horizontal=true clipped=true %}
|
||||||
|
|
||||||
{% include snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
|
{% include elements/snippet.html content=breadcrumb_succeeds_example horizontal=true clipped=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
|
{% include elements/snippet.html content=breadcrumb_small_example horizontal=true clipped=true %}
|
||||||
|
|
||||||
{% include snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
|
{% include elements/snippet.html content=breadcrumb_medium_example horizontal=true clipped=true %}
|
||||||
|
|
||||||
{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
|
{% include elements/snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
|
||||||
|
|
||||||
{% include variables.html type='component' %}
|
{% include elements/variables.html type='component' %}
|
||||||
|
|||||||
@ -178,4 +178,4 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html type='component' %}
|
{% include elements/variables.html type='component' %}
|
||||||
|
|||||||
@ -238,7 +238,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Dropdown content" %}
|
{% include elements/anchor.html name="Dropdown content" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -255,7 +255,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Hoverable or Toggable" %}
|
{% include elements/anchor.html name="Hoverable or Toggable" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -286,7 +286,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Right aligned" %}
|
{% include elements/anchor.html name="Right aligned" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -314,7 +314,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Dropup" %}
|
{% include elements/anchor.html name="Dropup" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -331,4 +331,4 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html type='component' %}
|
{% include elements/variables.html type='component' %}
|
||||||
|
|||||||
@ -51,6 +51,6 @@ meta:
|
|||||||
</aside>
|
</aside>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include snippet.html content=menu_example size="one-third" %}
|
{% include elements/snippet.html content=menu_example size="one-third" %}
|
||||||
|
|
||||||
{% include variables.html type='component' %}
|
{% include elements/variables.html type='component' %}
|
||||||
|
|||||||
@ -117,28 +117,28 @@ meta:
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include snippet.html content=message_example %}
|
{% include elements/snippet.html content=message_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Colors" %}
|
{% include elements/anchor.html name="Colors" %}
|
||||||
|
|
||||||
{% include snippet.html content=message_colors_example %}
|
{% include elements/snippet.html content=message_colors_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Message body only" %}
|
{% include elements/anchor.html name="Message body only" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can <strong>omit</strong> the message header:</p>
|
<p>You can <strong>omit</strong> the message header:</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=message_body_example %}
|
{% include elements/snippet.html content=message_body_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
|
|
||||||
{% include snippet.html content=message_small %}
|
{% include elements/snippet.html content=message_small %}
|
||||||
|
|
||||||
{% include snippet.html content=message_normal %}
|
{% include elements/snippet.html content=message_normal %}
|
||||||
|
|
||||||
{% include snippet.html content=message_medium %}
|
{% include elements/snippet.html content=message_medium %}
|
||||||
|
|
||||||
{% include snippet.html content=message_large %}
|
{% include elements/snippet.html content=message_large %}
|
||||||
|
|
||||||
{% include variables.html type='component' %}
|
{% include elements/variables.html type='component' %}
|
||||||
|
|||||||
@ -121,7 +121,7 @@ meta:
|
|||||||
{% highlight html %}{{ modal_card }}{% endhighlight %}
|
{% highlight html %}{{ modal_card }}{% endhighlight %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html type='component' %}
|
{% include elements/variables.html type='component' %}
|
||||||
|
|
||||||
<div id="modal" class="modal">
|
<div id="modal" class="modal">
|
||||||
<div class="modal-background"></div>
|
<div class="modal-background"></div>
|
||||||
|
|||||||
@ -586,7 +586,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Navbar brand" %}
|
{% include elements/anchor.html name="Navbar brand" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -622,7 +622,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Navbar burger" %}
|
{% include elements/anchor.html name="Navbar burger" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -654,7 +654,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Navbar menu" %}
|
{% include elements/anchor.html name="Navbar menu" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -705,7 +705,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Navbar start and navbar end" %}
|
{% include elements/anchor.html name="Navbar start and navbar end" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -729,7 +729,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
|
|
||||||
{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
|
{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="Navbar item" %}
|
{% include elements/anchor.html name="Navbar item" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -784,7 +784,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Transparent navbar" %}
|
{% include elements/anchor.html name="Transparent navbar" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -792,9 +792,9 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
|
{% include elements/snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Fixed navbar" %}
|
{% include elements/anchor.html name="Fixed navbar" %}
|
||||||
|
|
||||||
{% include elements/new-tag.html version="0.6.1" %}
|
{% include elements/new-tag.html version="0.6.1" %}
|
||||||
|
|
||||||
@ -822,7 +822,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Dropdown menu" %}
|
{% include elements/anchor.html name="Dropdown menu" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -1048,7 +1048,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
|
|
||||||
{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
|
{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="Colors" %}
|
{% include elements/anchor.html name="Colors" %}
|
||||||
|
|
||||||
<div class="tags has-addons">
|
<div class="tags has-addons">
|
||||||
<span class="tag">New!</span>
|
<span class="tag">New!</span>
|
||||||
@ -1115,5 +1115,5 @@ document.addEventListener('DOMContentLoaded', function () {
|
|||||||
{% include examples/navbar-color.html color="white" light=true %}
|
{% include examples/navbar-color.html color="white" light=true %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html type='component' %}
|
{% include elements/variables.html type='component' %}
|
||||||
|
|
||||||
|
|||||||
@ -183,7 +183,7 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=pagination_example horizontal=true more=true %}
|
{% include elements/snippet.html content=pagination_example horizontal=true more=true %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -191,7 +191,7 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=pagination_options_example horizontal=true more=true %}
|
{% include elements/snippet.html content=pagination_options_example horizontal=true more=true %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -199,11 +199,11 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=pagination_centered_example horizontal=true more=true %}
|
{% include elements/snippet.html content=pagination_centered_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include snippet.html content=pagination_right_example horizontal=true more=true %}
|
{% include elements/snippet.html content=pagination_right_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Styles" %}
|
{% include elements/anchor.html name="Styles" %}
|
||||||
|
|
||||||
{% include elements/new-tag.html version="0.6.2" %}
|
{% include elements/new-tag.html version="0.6.2" %}
|
||||||
|
|
||||||
@ -211,19 +211,19 @@ meta:
|
|||||||
Add the <code>is-rounded</code> modifier to have rounded pagination items.
|
Add the <code>is-rounded</code> modifier to have rounded pagination items.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{% include snippet.html content=pagination_rounded_example horizontal=true more=true %}
|
{% include elements/snippet.html content=pagination_rounded_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
|
|
||||||
<p class="content">
|
<p class="content">
|
||||||
The pagination comes in <strong>3 additional sizes</strong>.<br>
|
The pagination comes in <strong>3 additional sizes</strong>.<br>
|
||||||
You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
|
You only need to append the <strong>modifier</strong> <code>is-small</code>, <code>is-medium</code>, or <code>is-large</code> to the <code>pagination</code> component.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{% include snippet.html content=pagination_small_example horizontal=true more=true %}
|
{% include elements/snippet.html content=pagination_small_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include snippet.html content=pagination_medium_example horizontal=true more=true %}
|
{% include elements/snippet.html content=pagination_medium_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include snippet.html content=pagination_large_example horizontal=true more=true %}
|
{% include elements/snippet.html content=pagination_large_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include variables.html type='component' %}
|
{% include elements/variables.html type='component' %}
|
||||||
|
|||||||
@ -108,6 +108,6 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=panel_example size="one-third" %}
|
{% include elements/snippet.html content=panel_example size="one-third" %}
|
||||||
|
|
||||||
{% include variables.html type='component' %}
|
{% include elements/variables.html type='component' %}
|
||||||
|
|||||||
@ -358,11 +358,11 @@ meta:
|
|||||||
The <strong>default</strong> tabs style has a single border at the bottom.</p>
|
The <strong>default</strong> tabs style has a single border at the bottom.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=tabs_example horizontal=true %}
|
{% include elements/snippet.html content=tabs_example horizontal=true %}
|
||||||
|
|
||||||
{% include snippet.html content=tabs_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Alignment" %}
|
{% include elements/anchor.html name="Alignment" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -370,44 +370,44 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=tabs_centered_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_centered_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include snippet.html content=tabs_right_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_right_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Icons" %}
|
{% include elements/anchor.html name="Icons" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can use any of the <a href="http://fontawesome.io/">Font Awesome</a> <strong>icons</strong>.</p>
|
<p>You can use any of the <a href="http://fontawesome.io/">Font Awesome</a> <strong>icons</strong>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_icons_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include snippet.html content=tabs_icons_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_icons_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
<p>You can choose between <strong>3 additional sizes</strong>: <code>is-small</code> <code>is-medium</code> and <code>is-large</code>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=tabs_small_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_small_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include snippet.html content=tabs_medium_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_medium_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include snippet.html content=tabs_large_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_large_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Styles" %}
|
{% include elements/anchor.html name="Styles" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
|
If you want a more classic style with <strong>borders</strong>, just append the <code>is-boxed</code> modifier.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=tabs_boxed_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_boxed_example horizontal=true more=true %}
|
||||||
|
|
||||||
<p class="content">
|
<p class="content">
|
||||||
If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
|
If you want <strong>mutually exclusive</strong> tabs (like radio buttons where clicking one deselects all other ones), use the <code>is-toggle</code> modifier.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{% include snippet.html content=tabs_toggle_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_toggle_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include elements/new-tag.html version="0.6.2" %}
|
{% include elements/new-tag.html version="0.6.2" %}
|
||||||
|
|
||||||
@ -415,26 +415,26 @@ meta:
|
|||||||
If you use both <code>is-toggle</code> and <code>is-toggle-rounded</code>, the first and last items will be <strong>rounded</strong>.
|
If you use both <code>is-toggle</code> and <code>is-toggle-rounded</code>, the first and last items will be <strong>rounded</strong>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{% include snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_toggle_rounded_example horizontal=true more=true %}
|
||||||
|
|
||||||
<p class="content">
|
<p class="content">
|
||||||
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
|
If you want the tabs to take up the <strong>whole width</strong> available, use <code>is-fullwidth</code>.
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
{% include snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_fullwidth_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Combining" %}
|
{% include elements/anchor.html name="Combining" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
|
<p>You can <strong>combine</strong> different modifiers. For example, you can have <strong>centered boxed</strong> tabs, or <strong>fullwidth toggle</strong> ones.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_centered_boxed_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_toggle_fullwidth_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_centered_boxed_medium_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
|
{% include elements/snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include variables.html type='component' %}
|
{% include elements/variables.html type='component' %}
|
||||||
|
|||||||
@ -62,6 +62,6 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=box_example more=true %}
|
{% include elements/snippet.html content=box_example more=true %}
|
||||||
|
|
||||||
{% include variables.html type='element' %}
|
{% include elements/variables.html type='element' %}
|
||||||
|
|||||||
@ -463,7 +463,7 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=button_example %}
|
{% include elements/snippet.html content=button_example %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -485,23 +485,23 @@ meta:
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=button_tags_example %}
|
{% include elements/snippet.html content=button_tags_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Colors" %}
|
{% include elements/anchor.html name="Colors" %}
|
||||||
|
|
||||||
{% include snippet.html content=button_colors_a_example %}
|
{% include elements/snippet.html content=button_colors_a_example %}
|
||||||
|
|
||||||
{% include snippet.html content=button_colors_b_example %}
|
{% include elements/snippet.html content=button_colors_b_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
|
|
||||||
{% include snippet.html content=button_sizes_example %}
|
{% include elements/snippet.html content=button_sizes_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Styles" %}
|
{% include elements/anchor.html name="Styles" %}
|
||||||
|
|
||||||
<h4 class="subtitle">Outlined</h4>
|
<h4 class="subtitle">Outlined</h4>
|
||||||
|
|
||||||
{% include snippet.html content=button_outlined_example %}
|
{% include elements/snippet.html content=button_outlined_example %}
|
||||||
|
|
||||||
<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
|
<h4 class="subtitle">Inverted (the text color becomes the background color, and vice-versa)</h4>
|
||||||
|
|
||||||
@ -541,23 +541,23 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="States" %}
|
{% include elements/anchor.html name="States" %}
|
||||||
|
|
||||||
<h4 class="subtitle">Normal</h4>
|
<h4 class="subtitle">Normal</h4>
|
||||||
|
|
||||||
{% include snippet.html content=button_normal_example %}
|
{% include elements/snippet.html content=button_normal_example %}
|
||||||
|
|
||||||
<h4 class="subtitle">Hover</h4>
|
<h4 class="subtitle">Hover</h4>
|
||||||
|
|
||||||
{% include snippet.html content=button_hover_example %}
|
{% include elements/snippet.html content=button_hover_example %}
|
||||||
|
|
||||||
<h4 class="subtitle">Focus</h4>
|
<h4 class="subtitle">Focus</h4>
|
||||||
|
|
||||||
{% include snippet.html content=button_focus_example %}
|
{% include elements/snippet.html content=button_focus_example %}
|
||||||
|
|
||||||
<h4 class="subtitle">Active</h4>
|
<h4 class="subtitle">Active</h4>
|
||||||
|
|
||||||
{% include snippet.html content=button_active_example %}
|
{% include elements/snippet.html content=button_active_example %}
|
||||||
|
|
||||||
<h4 class="subtitle">Loading</h4>
|
<h4 class="subtitle">Loading</h4>
|
||||||
|
|
||||||
@ -617,7 +617,7 @@ meta:
|
|||||||
|
|
||||||
<h4 class="subtitle">With Font Awesome icons</h4>
|
<h4 class="subtitle">With Font Awesome icons</h4>
|
||||||
|
|
||||||
{% include snippet.html content=button_fa_example clipped=true %}
|
{% include elements/snippet.html content=button_fa_example clipped=true %}
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
@ -633,31 +633,31 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Button group" %}
|
{% include elements/anchor.html name="Button group" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you want to <strong>group</strong> buttons together on a <strong>single line</strong>, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
|
<p>If you want to <strong>group</strong> buttons together on a <strong>single line</strong>, use the <code>is-grouped</code> modifier on the <code>field</code> container:</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=button_group_example %}
|
{% include elements/snippet.html content=button_group_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Button addons" %}
|
{% include elements/anchor.html name="Button addons" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
|
<p>If you want to use buttons as <strong>addons</strong>, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=button_addons_example %}
|
{% include elements/snippet.html content=button_addons_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Button group with addons" %}
|
{% include elements/anchor.html name="Button group with addons" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can group together addons as well:</p>
|
<p>You can group together addons as well:</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=button_group_addons_example %}
|
{% include elements/snippet.html content=button_group_addons_example %}
|
||||||
|
|
||||||
{% include anchor.html name="List of buttons" %}
|
{% include elements/anchor.html name="List of buttons" %}
|
||||||
|
|
||||||
{% include elements/new-tag.html version="0.6.1" %}
|
{% include elements/new-tag.html version="0.6.1" %}
|
||||||
|
|
||||||
@ -775,4 +775,4 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html type='element' %}
|
{% include elements/variables.html type='element' %}
|
||||||
|
|||||||
@ -123,9 +123,9 @@ meta:
|
|||||||
<p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
|
<p>This <code>content</code> class can be used in <em>any</em> context where you just want to (or can only) write some <strong>text</strong>. For example, it's used for the paragraph you're currently reading.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=content_example %}
|
{% include elements/snippet.html content=content_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
|
<p>You can use the <code>is-small</code>, <code>is-medium</code> and <code>is-large</code> modifiers to change the font size.</p>
|
||||||
@ -173,4 +173,4 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html type='element' %}
|
{% include elements/variables.html type='element' %}
|
||||||
|
|||||||
@ -58,9 +58,9 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=cross_example %}
|
{% include elements/snippet.html content=cross_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -68,9 +68,9 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=cross_sizes_example %}
|
{% include elements/snippet.html content=cross_sizes_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Combinations" %}
|
{% include elements/anchor.html name="Combinations" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -78,4 +78,4 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=cross_elements_example %}
|
{% include elements/snippet.html content=cross_elements_example %}
|
||||||
|
|||||||
@ -82,7 +82,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="block bd-icon-size">
|
<div class="block bd-icon-size">
|
||||||
{% include snippet.html content=icon_example %}
|
{% include elements/snippet.html content=icon_example %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="message is-info">
|
<div class="message is-info">
|
||||||
@ -97,7 +97,7 @@ meta:
|
|||||||
By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.</p>
|
By default, the <code>icon</code> container will take up <em>exactly</em> <code>1.5rem x 1.5rem</code>. The icon itself is sized accordingly to the icon library you're using. For example, Font Awesome 5 icons will <strong>inherit</strong> the font size.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Colors" %}
|
{% include elements/anchor.html name="Colors" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -105,9 +105,9 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=icon_color_example %}
|
{% include elements/snippet.html content=icon_color_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -283,7 +283,7 @@ meta:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% include anchor.html name="Font Awesome variations" %}
|
{% include elements/anchor.html name="Font Awesome variations" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -426,7 +426,7 @@ meta:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% include anchor.html name="Material Design Icons" %}
|
{% include elements/anchor.html name="Material Design Icons" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -750,7 +750,7 @@ meta:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% include anchor.html name="Open Iconic" %}
|
{% include elements/anchor.html name="Open Iconic" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -848,7 +848,7 @@ meta:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% include anchor.html name="Ionicons" %}
|
{% include elements/anchor.html name="Ionicons" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -946,4 +946,4 @@ meta:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% include variables.html type='element' %}
|
{% include elements/variables.html type='element' %}
|
||||||
|
|||||||
@ -38,9 +38,9 @@ meta:
|
|||||||
<p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
|
<p>Because images can take a few seconds to load (or not at all), use the <code>.image</code> container to specify a <strong>precisely sized</strong> container so that your layout isn't broken because of image loading or image errors.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=image %}
|
{% include elements/snippet.html content=image %}
|
||||||
|
|
||||||
{% include anchor.html name="Fixed square images" %}
|
{% include elements/anchor.html name="Fixed square images" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
|
<p>There are <strong>7</strong> dimensions to choose from, useful for <strong>avatars</strong>:</p>
|
||||||
@ -58,15 +58,15 @@ meta:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% include anchor.html name="Retina images" %}
|
{% include elements/anchor.html name="Retina images" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
|
<p>Because the image is fixed in size, you can use an image that is <strong>twice as big</strong>. So for example, in a <code>128x128</code> container, you can use a <code>256x256</code> image, but resized to <strong>128x128</strong> pixels.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=retina_image %}
|
{% include elements/snippet.html content=retina_image %}
|
||||||
|
|
||||||
{% include anchor.html name="Responsive images with ratios" %}
|
{% include elements/anchor.html name="Responsive images with ratios" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>16 ratio modifiers</strong>, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):</p>
|
<p>If you don't know the exact dimensions but know the <strong>ratio</strong> instead, you can use one of the <strong>16 ratio modifiers</strong>, which include [common aspect ratios in still photography](https://en.wikipedia.org/wiki/Aspect_ratio_(image)#Still_photography):</p>
|
||||||
@ -161,4 +161,4 @@ meta:
|
|||||||
<p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
|
<p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html type='element' %}
|
{% include elements/variables.html type='element' %}
|
||||||
|
|||||||
@ -34,10 +34,10 @@ meta:
|
|||||||
{% endfor %}
|
{% endfor %}
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include snippet.html content=notification %}
|
{% include elements/snippet.html content=notification %}
|
||||||
|
|
||||||
{% include anchor.html name="Colors" %}
|
{% include elements/anchor.html name="Colors" %}
|
||||||
|
|
||||||
{% include snippet.html content=notification_colors %}
|
{% include elements/snippet.html content=notification_colors %}
|
||||||
|
|
||||||
{% include variables.html type='element' %}
|
{% include elements/variables.html type='element' %}
|
||||||
|
|||||||
@ -34,14 +34,14 @@ meta:
|
|||||||
<progress class="progress is-large" value="60" max="100">60%</progress>
|
<progress class="progress is-large" value="60" max="100">60%</progress>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include snippet.html content=progress %}
|
{% include elements/snippet.html content=progress %}
|
||||||
|
|
||||||
{% include anchor.html name="Colors" %}
|
{% include elements/anchor.html name="Colors" %}
|
||||||
|
|
||||||
{% include snippet.html content=progress_colors %}
|
{% include elements/snippet.html content=progress_colors %}
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
|
|
||||||
{% include snippet.html content=progress_sizes %}
|
{% include elements/snippet.html content=progress_sizes %}
|
||||||
|
|
||||||
{% include variables.html type='element' %}
|
{% include elements/variables.html type='element' %}
|
||||||
|
|||||||
@ -350,9 +350,9 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=table_example horizontal=true more=true %}
|
{% include elements/snippet.html content=table_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Modifiers" %}
|
{% include elements/anchor.html name="Modifiers" %}
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
@ -584,4 +584,4 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html type='element' %}
|
{% include elements/variables.html type='element' %}
|
||||||
|
|||||||
@ -202,7 +202,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Colors" %}
|
{% include elements/anchor.html name="Colors" %}
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-4">
|
<div class="column is-4">
|
||||||
@ -263,7 +263,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-4">
|
<div class="column is-4">
|
||||||
@ -286,7 +286,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Modifiers" %}
|
{% include elements/anchor.html name="Modifiers" %}
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-4">
|
<div class="column is-4">
|
||||||
@ -312,7 +312,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Combinations" %}
|
{% include elements/anchor.html name="Combinations" %}
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-4">
|
<div class="column is-4">
|
||||||
@ -343,7 +343,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="List of tags" %}
|
{% include elements/anchor.html name="List of tags" %}
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
@ -441,4 +441,4 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html type='element' %}
|
{% include elements/variables.html type='element' %}
|
||||||
|
|||||||
@ -82,7 +82,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
@ -174,4 +174,4 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html type='element' %}
|
{% include elements/variables.html type='element' %}
|
||||||
|
|||||||
@ -572,9 +572,9 @@ meta:
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=file %}
|
{% include elements/snippet.html content=file %}
|
||||||
|
|
||||||
{% include anchor.html name="Modifiers" %}
|
{% include elements/anchor.html name="Modifiers" %}
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column">
|
<div class="column">
|
||||||
@ -656,7 +656,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Colors" %}
|
{% include elements/anchor.html name="Colors" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -671,9 +671,9 @@ meta:
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=file_colors clipped=true %}
|
{% include elements/snippet.html content=file_colors clipped=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -692,15 +692,15 @@ meta:
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=file_sizes clipped=true %}
|
{% include elements/snippet.html content=file_sizes clipped=true %}
|
||||||
|
|
||||||
{% include snippet.html content=file_sizes_name clipped=true %}
|
{% include elements/snippet.html content=file_sizes_name clipped=true %}
|
||||||
|
|
||||||
{% include snippet.html content=file_sizes_boxed clipped=true %}
|
{% include elements/snippet.html content=file_sizes_boxed clipped=true %}
|
||||||
|
|
||||||
{% include snippet.html content=file_sizes_boxed_name clipped=true %}
|
{% include elements/snippet.html content=file_sizes_boxed_name clipped=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Alignment" %}
|
{% include elements/anchor.html name="Alignment" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -716,11 +716,11 @@ meta:
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=file_centered %}
|
{% include elements/snippet.html content=file_centered %}
|
||||||
|
|
||||||
{% include snippet.html content=file_right %}
|
{% include elements/snippet.html content=file_right %}
|
||||||
|
|
||||||
{% include anchor.html name="JavaScript" %}
|
{% include elements/anchor.html name="JavaScript" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -730,7 +730,7 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Variables" %}
|
{% include elements/anchor.html name="Variables" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@ -816,9 +816,9 @@ variables_form_keys:
|
|||||||
When combining several controls in a <strong>form</strong>, use the <code>.field</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
|
When combining several controls in a <strong>form</strong>, use the <code>.field</code> class as a <strong>container</strong>, to keep the spacing consistent.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=example more=true %}
|
{% include elements/snippet.html content=example more=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Form field" %}
|
{% include elements/anchor.html name="Form field" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>The <code>field</code> container is a simple container for:</p>
|
<p>The <code>field</code> container is a simple container for:</p>
|
||||||
@ -829,15 +829,15 @@ variables_form_keys:
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=field_example %}
|
{% include elements/snippet.html content=field_example %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>This container allows form fields to be <strong>spaced consistently</strong>.</p>
|
<p>This container allows form fields to be <strong>spaced consistently</strong>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=fields_example %}
|
{% include elements/snippet.html content=fields_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Form control" %}
|
{% include elements/anchor.html name="Form control" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>The <code>control</code> is a versatile container meant to <strong>enhance single form controls</strong>. Because it has the same height as a control elements, it can <strong class="has-text-danger">only contain</strong> the following elements:</p>
|
<p>The <code>control</code> is a versatile container meant to <strong>enhance single form controls</strong>. Because it has the same height as a control elements, it can <strong class="has-text-danger">only contain</strong> the following elements:</p>
|
||||||
@ -849,14 +849,14 @@ variables_form_keys:
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=control_input_example %}
|
{% include elements/snippet.html content=control_input_example %}
|
||||||
|
|
||||||
{% include snippet.html content=control_select_example %}
|
{% include elements/snippet.html content=control_select_example %}
|
||||||
|
|
||||||
{% include snippet.html content=control_button_example %}
|
{% include elements/snippet.html content=control_button_example %}
|
||||||
|
|
||||||
<!-- Font Awesome Icons -->
|
<!-- Font Awesome Icons -->
|
||||||
{% include anchor.html name="With icons" %}
|
{% include elements/anchor.html name="With icons" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
|
<p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
|
||||||
@ -880,7 +880,7 @@ variables_form_keys:
|
|||||||
<p>The size of the <strong>input</strong> will define the size of the icon container.</p>
|
<p>The size of the <strong>input</strong> will define the size of the icon container.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=icons_example clipped=true %}
|
{% include elements/snippet.html content=icons_example clipped=true %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -888,7 +888,7 @@ variables_form_keys:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=select_icons_example %}
|
{% include elements/snippet.html content=select_icons_example %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -896,21 +896,21 @@ variables_form_keys:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=has_icons_small_example %}
|
{% include elements/snippet.html content=has_icons_small_example %}
|
||||||
|
|
||||||
{% include snippet.html content=has_icons_normal_example clipped=true %}
|
{% include elements/snippet.html content=has_icons_normal_example clipped=true %}
|
||||||
|
|
||||||
{% include snippet.html content=has_icons_medium_example clipped=true %}
|
{% include elements/snippet.html content=has_icons_medium_example clipped=true %}
|
||||||
|
|
||||||
{% include snippet.html content=has_icons_large_example clipped=true %}
|
{% include elements/snippet.html content=has_icons_large_example clipped=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Form addons" %}
|
{% include elements/anchor.html name="Form addons" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you want to <strong>attach controls</strong> together, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
|
<p>If you want to <strong>attach controls</strong> together, use the <code>has-addons</code> modifier on the <code>field</code> container:</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=addons_example %}
|
{% include elements/snippet.html content=addons_example %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
|
<p>You can attach inputs, buttons, and dropdowns <strong>only</strong>.</p>
|
||||||
@ -920,29 +920,29 @@ variables_form_keys:
|
|||||||
<p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
|
<p>It can be useful to append a <a href="{{site.url}}/documentation/elements/button#static-button">static button</a>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=addons_static_example %}
|
{% include elements/snippet.html content=addons_static_example %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
|
<p>Use the <code>is-expanded</code> modifier on the element you want to fill up the remaining space (in this case, the input):</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=addons_expanded_example horizontal=true more=true %}
|
{% include elements/snippet.html content=addons_expanded_example horizontal=true more=true %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
|
<p>If you want a full width select dropdown, pair <code>control is-expanded</code> with <code>select is-fullwidth</code>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=addons_expanded_fullwidth_example %}
|
{% include elements/snippet.html content=addons_expanded_fullwidth_example %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifiers to alter the <strong>alignment</strong>.</p>
|
<p>Use the <code>has-addons-centered</code> or the <code>has-addons-right</code> modifiers to alter the <strong>alignment</strong>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=addons_center_example %}
|
{% include elements/snippet.html content=addons_center_example %}
|
||||||
|
|
||||||
{% include snippet.html content=addons_right_example %}
|
{% include elements/snippet.html content=addons_right_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Form group" %}
|
{% include elements/anchor.html name="Form group" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -950,16 +950,16 @@ variables_form_keys:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=group_example %}
|
{% include elements/snippet.html content=group_example %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
Use the <code>is-grouped-centered</code> or the <code>is-grouped-right</code> modifiers to alter the <strong>alignment</strong>.
|
Use the <code>is-grouped-centered</code> or the <code>is-grouped-right</code> modifiers to alter the <strong>alignment</strong>.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=group_centered_example %}
|
{% include elements/snippet.html content=group_centered_example %}
|
||||||
|
|
||||||
{% include snippet.html content=group_right_example %}
|
{% include elements/snippet.html content=group_right_example %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -967,7 +967,7 @@ variables_form_keys:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=group_expanded_example %}
|
{% include elements/snippet.html content=group_expanded_example %}
|
||||||
|
|
||||||
<div id="form-group-multiline" class="content">
|
<div id="form-group-multiline" class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -975,7 +975,7 @@ variables_form_keys:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=group_multiline_example clipped=true %}
|
{% include elements/snippet.html content=group_multiline_example clipped=true %}
|
||||||
|
|
||||||
<div class="message is-info">
|
<div class="message is-info">
|
||||||
<div class="message-header">
|
<div class="message-header">
|
||||||
@ -990,7 +990,7 @@ variables_form_keys:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Horizontal form" %}
|
{% include elements/anchor.html name="Horizontal form" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you want a <strong>horizontal</strong> form control, use the <code>is-horizontal</code> modifier on the <code>field</code> container, in which you include:</p>
|
<p>If you want a <strong>horizontal</strong> form control, use the <code>is-horizontal</code> modifier on the <code>field</code> container, in which you include:</p>
|
||||||
@ -1005,7 +1005,7 @@ variables_form_keys:
|
|||||||
<p>You can use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
|
<p>You can use <code>is-grouped</code> or <code>has-addons</code> for the child elements.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=horizontal_form_example horizontal=true more=true %}
|
{% include elements/snippet.html content=horizontal_form_example horizontal=true more=true %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -1027,9 +1027,9 @@ variables_form_keys:
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=field_label_example horizontal=true more=true %}
|
{% include elements/snippet.html content=field_label_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Variables" %}
|
{% include elements/anchor.html name="Variables" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@ -273,7 +273,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Colors" %}
|
{% include elements/anchor.html name="Colors" %}
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-half">
|
<div class="column is-half">
|
||||||
@ -284,7 +284,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-half">
|
<div class="column is-half">
|
||||||
@ -295,7 +295,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Styles" %}
|
{% include elements/anchor.html name="Styles" %}
|
||||||
|
|
||||||
{% include elements/new-tag.html version="0.6.2" %}
|
{% include elements/new-tag.html version="0.6.2" %}
|
||||||
|
|
||||||
@ -308,7 +308,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="States" %}
|
{% include elements/anchor.html name="States" %}
|
||||||
|
|
||||||
<h4 class="subtitle">Normal</h4>
|
<h4 class="subtitle">Normal</h4>
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
@ -405,7 +405,7 @@ meta:
|
|||||||
{% highlight html %}{{ static_example }}{% endhighlight %}
|
{% highlight html %}{{ static_example }}{% endhighlight %}
|
||||||
|
|
||||||
<!-- Font Awesome Icons -->
|
<!-- Font Awesome Icons -->
|
||||||
{% include anchor.html name="With Font Awesome icons" %}
|
{% include elements/anchor.html name="With Font Awesome icons" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
|
<p>You can append one of 2 <strong>modifiers</strong> on a control:</p>
|
||||||
@ -478,7 +478,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Variables" %}
|
{% include elements/anchor.html name="Variables" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@ -315,7 +315,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Colors" %}
|
{% include elements/anchor.html name="Colors" %}
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-half">
|
<div class="column is-half">
|
||||||
@ -326,7 +326,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Styles" %}
|
{% include elements/anchor.html name="Styles" %}
|
||||||
|
|
||||||
{% include elements/new-tag.html version="0.6.2" %}
|
{% include elements/new-tag.html version="0.6.2" %}
|
||||||
|
|
||||||
@ -339,7 +339,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-half">
|
<div class="column is-half">
|
||||||
|
|||||||
@ -132,7 +132,7 @@ meta:
|
|||||||
</div>
|
</div>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include snippet.html content=textarea_example %}
|
{% include elements/snippet.html content=textarea_example %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -140,33 +140,33 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=textarea_rows_example %}
|
{% include elements/snippet.html content=textarea_rows_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Colors" %}
|
{% include elements/anchor.html name="Colors" %}
|
||||||
|
|
||||||
{% include snippet.html content=colors_example %}
|
{% include elements/snippet.html content=colors_example %}
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
|
|
||||||
{% include snippet.html content=sizes_example %}
|
{% include elements/snippet.html content=sizes_example %}
|
||||||
|
|
||||||
{% include anchor.html name="States" %}
|
{% include elements/anchor.html name="States" %}
|
||||||
|
|
||||||
<h4 class="subtitle">Normal</h4>
|
<h4 class="subtitle">Normal</h4>
|
||||||
|
|
||||||
{% include snippet.html content=normal_example %}
|
{% include elements/snippet.html content=normal_example %}
|
||||||
|
|
||||||
<h4 class="subtitle">Hover</h4>
|
<h4 class="subtitle">Hover</h4>
|
||||||
|
|
||||||
{% include snippet.html content=hover_example %}
|
{% include elements/snippet.html content=hover_example %}
|
||||||
|
|
||||||
<h4 class="subtitle">Focus</h4>
|
<h4 class="subtitle">Focus</h4>
|
||||||
|
|
||||||
{% include snippet.html content=focus_example %}
|
{% include elements/snippet.html content=focus_example %}
|
||||||
|
|
||||||
<h4 class="subtitle">Loading</h4>
|
<h4 class="subtitle">Loading</h4>
|
||||||
|
|
||||||
{% include snippet.html content=loading_example %}
|
{% include elements/snippet.html content=loading_example %}
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
<div class="column is-half">
|
<div class="column is-half">
|
||||||
@ -184,7 +184,7 @@ meta:
|
|||||||
|
|
||||||
<h4 class="subtitle">Disabled</h4>
|
<h4 class="subtitle">Disabled</h4>
|
||||||
|
|
||||||
{% include snippet.html content=disabled_example %}
|
{% include elements/snippet.html content=disabled_example %}
|
||||||
|
|
||||||
<h4 class="subtitle">Readonly</h4>
|
<h4 class="subtitle">Readonly</h4>
|
||||||
|
|
||||||
@ -199,4 +199,4 @@ meta:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=readonly_example %}
|
{% include elements/snippet.html content=readonly_example %}
|
||||||
|
|||||||
@ -360,7 +360,7 @@ doc-subtab: columns
|
|||||||
|
|
||||||
{% highlight html %}{{ columns }}{% endhighlight %}
|
{% highlight html %}{{ columns }}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="Sizes" %}
|
{% include elements/anchor.html name="Sizes" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you want to change the <strong>size</strong> of a single column, you can use one the following classes:</p>
|
<p>If you want to change the <strong>size</strong> of a single column, you can use one the following classes:</p>
|
||||||
@ -685,7 +685,7 @@ doc-subtab: columns
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Offset" %}
|
{% include elements/anchor.html name="Offset" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -722,7 +722,7 @@ doc-subtab: columns
|
|||||||
|
|
||||||
{% highlight html %}{{ columns_offset }}{% endhighlight %}
|
{% highlight html %}{{ columns_offset }}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="Centering columns" %}
|
{% include elements/anchor.html name="Centering columns" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -782,7 +782,7 @@ doc-subtab: columns
|
|||||||
|
|
||||||
{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
|
{% highlight html %}{{ columns_mobile_multiline_centered }}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="Responsiveness" %}
|
{% include elements/anchor.html name="Responsiveness" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.</p>
|
<p>By default, columns are only activated from <strong>tablet</strong> onwards. This means columns are stacked on top of each other on <strong>mobile</strong>.</p>
|
||||||
@ -857,7 +857,7 @@ doc-subtab: columns
|
|||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
|
{% highlight html %}{{ columns_multiple_breakpoints }}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="Nesting" %}
|
{% include elements/anchor.html name="Nesting" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -918,7 +918,7 @@ doc-subtab: columns
|
|||||||
|
|
||||||
{% highlight html %}{{ columns_nesting }}{% endhighlight %}
|
{% highlight html %}{{ columns_nesting }}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="Multiline" %}
|
{% include elements/anchor.html name="Multiline" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
|
<p>Whenever you want to start a new line, you can close a <code>columns</code> container and start a new one. But you can also add the <code>is-multiline</code> modifier and add <strong>more</strong> column elements that would fit in a single row.</p>
|
||||||
@ -955,7 +955,7 @@ doc-subtab: columns
|
|||||||
|
|
||||||
{% highlight html %}{{ columns_multiline }}{% endhighlight %}
|
{% highlight html %}{{ columns_multiline }}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="Gapless" %}
|
{% include elements/anchor.html name="Gapless" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:</p>
|
<p>If you want to remove the <strong>space</strong> between the columns, add the <code>is-gapless</code> modifier on the <code>columns</code> container:</p>
|
||||||
@ -1018,7 +1018,7 @@ doc-subtab: columns
|
|||||||
</div>
|
</div>
|
||||||
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
|
{% highlight html %}{{ columns_gapless_multiline }}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="Narrow column" %}
|
{% include elements/anchor.html name="Narrow column" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
|
<p>If you want a column to only take the <strong>space it needs</strong>, use the <code>is-narrow</code> modifier. The other column(s) will fill up the remaining space.</p>
|
||||||
|
|||||||
@ -27,8 +27,8 @@ breadcrumb:
|
|||||||
|
|
||||||
{% include layout/main-close.html %}
|
{% include layout/main-close.html %}
|
||||||
|
|
||||||
{% include snippet.html content=footer_example horizontal=true more=true fullwidth=true %}
|
{% include elements/snippet.html content=footer_example horizontal=true more=true fullwidth=true %}
|
||||||
|
|
||||||
{% include layout/main-open.html %}
|
{% include layout/main-open.html %}
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include elements/variables.html %}
|
||||||
|
|||||||
@ -648,9 +648,9 @@ breadcrumb:
|
|||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
<section class="section is-fullwidth">
|
<section class="section is-fullwidth">
|
||||||
{% include snippet.html content=heroNavbarA horizontal=true more=true %}
|
{% include elements/snippet.html content=heroNavbarA horizontal=true more=true %}
|
||||||
{% include snippet.html content=heroNavbarB horizontal=true more=true %}
|
{% include elements/snippet.html content=heroNavbarB horizontal=true more=true %}
|
||||||
{% include snippet.html content=heroNavbarC horizontal=true more=true %}
|
{% include elements/snippet.html content=heroNavbarC horizontal=true more=true %}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{% include layout/main-open.html %}
|
{% include layout/main-open.html %}
|
||||||
|
|||||||
@ -185,22 +185,22 @@ breadcrumb:
|
|||||||
</nav>
|
</nav>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=nav_example horizontal=true more=true %}
|
{% include elements/snippet.html content=nav_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Centered level" %}
|
{% include elements/anchor.html name="Centered level" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
|
If you want a <strong>centered level</strong>, you can use as many <code>level-item</code> as you want, as long as they are <strong>direct</strong> children of the <code>level</code> container.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=nav_centered_example horizontal=true more=true %}
|
{% include elements/snippet.html content=nav_centered_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include snippet.html content=nav_centered_bis_example horizontal=true more=true %}
|
{% include elements/snippet.html content=nav_centered_bis_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Mobile level" %}
|
{% include elements/anchor.html name="Mobile level" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
|
By default, for space concerns, the level is vertical on mobile. If you want the level to be horizontal on mobile as well, add the <code>is-mobile</code> modifier on the <code>level</code> container.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=nav_mobile_example horizontal=true more=true %}
|
{% include elements/snippet.html content=nav_mobile_example horizontal=true more=true %}
|
||||||
|
|||||||
@ -200,18 +200,18 @@ breadcrumb:
|
|||||||
</article>
|
</article>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=media_example horizontal=true more=true %}
|
{% include elements/snippet.html content=media_example horizontal=true more=true %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
|
<p>You can include <em>any</em> other Bulma element, like inputs, textareas, icons, buttons... or even a <strong>nav bar</strong>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=media_bis_example horizontal=true more=true %}
|
{% include elements/snippet.html content=media_bis_example horizontal=true more=true %}
|
||||||
|
|
||||||
{% include anchor.html name="Nesting" %}
|
{% include elements/anchor.html name="Nesting" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
|
<p>You can nest media objects up to <strong>3 levels</strong> deep.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include snippet.html content=media_nested_example horizontal=true more=true %}
|
{% include elements/snippet.html content=media_nested_example horizontal=true more=true %}
|
||||||
|
|||||||
@ -33,4 +33,4 @@ breadcrumb:
|
|||||||
<p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
|
<p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include variables.html %}
|
{% include elements/variables.html %}
|
||||||
|
|||||||
@ -440,7 +440,7 @@ tile is-ancestor
|
|||||||
|
|
||||||
{% highlight html %}{{ tile_empty }}{% endhighlight %}
|
{% highlight html %}{{ tile_empty }}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="Example" %}
|
{% include elements/anchor.html name="Example" %}
|
||||||
|
|
||||||
<div class="tile is-ancestor">
|
<div class="tile is-ancestor">
|
||||||
<div class="tile is-vertical is-8">
|
<div class="tile is-vertical is-8">
|
||||||
@ -492,7 +492,7 @@ tile is-ancestor
|
|||||||
|
|
||||||
{% highlight html %}{{ tile_default }}{% endhighlight %}
|
{% highlight html %}{{ tile_default }}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="Modifiers" %}
|
{% include elements/anchor.html name="Modifiers" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
|
<p>The <code>tile</code> element has <strong>16 modifiers</strong>:</p>
|
||||||
@ -521,7 +521,7 @@ tile is-ancestor
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="How it works: Nesting" %}
|
{% include elements/anchor.html name="How it works: Nesting" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
|
<p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
|
||||||
@ -606,7 +606,7 @@ tile is-ancestor
|
|||||||
|
|
||||||
{% highlight html %}{{ tile_lorem }}{% endhighlight %}
|
{% highlight html %}{{ tile_lorem }}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="Nesting requirements" %}
|
{% include elements/anchor.html name="Nesting requirements" %}
|
||||||
|
|
||||||
<article class="message is-danger">
|
<article class="message is-danger">
|
||||||
<div class="message-header">
|
<div class="message-header">
|
||||||
@ -682,7 +682,7 @@ tile is-ancestor
|
|||||||
|
|
||||||
{% highlight html %}{{ tile_any_content }}{% endhighlight %}
|
{% highlight html %}{{ tile_any_content }}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="3 columns" %}
|
{% include elements/anchor.html name="3 columns" %}
|
||||||
|
|
||||||
<div class="tile is-ancestor">
|
<div class="tile is-ancestor">
|
||||||
<div class="tile is-parent">
|
<div class="tile is-parent">
|
||||||
@ -777,7 +777,7 @@ tile is-ancestor
|
|||||||
|
|
||||||
{% highlight html %}{{ tile_3_columns }}{% endhighlight %}
|
{% highlight html %}{{ tile_3_columns }}{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="4 columns" %}
|
{% include elements/anchor.html name="4 columns" %}
|
||||||
|
|
||||||
<div class="tile is-ancestor">
|
<div class="tile is-ancestor">
|
||||||
<div class="tile is-parent">
|
<div class="tile is-parent">
|
||||||
|
|||||||
@ -10,7 +10,7 @@ breadcrumb:
|
|||||||
- modifiers-color-helpers
|
- modifiers-color-helpers
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include anchor.html name="Text color" %}
|
{% include elements/anchor.html name="Text color" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -52,7 +52,7 @@ breadcrumb:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% include anchor.html name="Background color" %}
|
{% include elements/anchor.html name="Background color" %}
|
||||||
|
|
||||||
{% include elements/new-tag.html version="0.6.3" %}
|
{% include elements/new-tag.html version="0.6.3" %}
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,7 @@
|
|||||||
---
|
---
|
||||||
title: Responsive helpers
|
title: Responsive helpers
|
||||||
layout: documentation
|
layout: documentation
|
||||||
|
hide_categories: true
|
||||||
doc-tab: modifiers
|
doc-tab: modifiers
|
||||||
doc-subtab: responsive-helpers
|
doc-subtab: responsive-helpers
|
||||||
breadcrumb:
|
breadcrumb:
|
||||||
@ -57,7 +58,7 @@ breadcrumb:
|
|||||||
</td>
|
</td>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include anchor.html name="Show" %}
|
{% include elements/anchor.html name="Show" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -73,106 +74,114 @@ breadcrumb:
|
|||||||
<p>For example, here's how the <code>is-flex</code> helper works:</p>
|
<p>For example, here's how the <code>is-flex</code> helper works:</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<table class="table is-bordered">
|
{% include layout/main-close.html show_categories=true %}
|
||||||
{{ thead }}
|
|
||||||
<tbody>
|
<div class="container">
|
||||||
<tr>
|
<div class="table-container">
|
||||||
<td class="is-narrow">
|
<table class="table is-bordered">
|
||||||
<code>is-flex-mobile</code>
|
{{ thead }}
|
||||||
</td>
|
<tbody>
|
||||||
{{ flex }}
|
<tr>
|
||||||
{{ unchanged }}
|
<td class="is-narrow">
|
||||||
{{ unchanged }}
|
<code>is-flex-mobile</code>
|
||||||
{{ unchanged }}
|
</td>
|
||||||
{{ unchanged }}
|
{{ flex }}
|
||||||
</tr>
|
{{ unchanged }}
|
||||||
<tr>
|
{{ unchanged }}
|
||||||
<td class="is-narrow">
|
{{ unchanged }}
|
||||||
<code>is-flex-tablet-only</code>
|
{{ unchanged }}
|
||||||
</td>
|
</tr>
|
||||||
{{ unchanged }}
|
<tr>
|
||||||
{{ flex }}
|
<td class="is-narrow">
|
||||||
{{ unchanged }}
|
<code>is-flex-tablet-only</code>
|
||||||
{{ unchanged }}
|
</td>
|
||||||
{{ unchanged }}
|
{{ unchanged }}
|
||||||
</tr>
|
{{ flex }}
|
||||||
<tr>
|
{{ unchanged }}
|
||||||
<td class="is-narrow">
|
{{ unchanged }}
|
||||||
<code>is-flex-desktop-only</code>
|
{{ unchanged }}
|
||||||
</td>
|
</tr>
|
||||||
{{ unchanged }}
|
<tr>
|
||||||
{{ unchanged }}
|
<td class="is-narrow">
|
||||||
{{ flex }}
|
<code>is-flex-desktop-only</code>
|
||||||
{{ unchanged }}
|
</td>
|
||||||
{{ unchanged }}
|
{{ unchanged }}
|
||||||
</tr>
|
{{ unchanged }}
|
||||||
<tr>
|
{{ flex }}
|
||||||
<td class="is-narrow">
|
{{ unchanged }}
|
||||||
<code>is-flex-widescreen-only</code>
|
{{ unchanged }}
|
||||||
</td>
|
</tr>
|
||||||
{{ unchanged }}
|
<tr>
|
||||||
{{ unchanged }}
|
<td class="is-narrow">
|
||||||
{{ unchanged }}
|
<code>is-flex-widescreen-only</code>
|
||||||
{{ flex }}
|
</td>
|
||||||
{{ unchanged }}
|
{{ unchanged }}
|
||||||
</tr>
|
{{ unchanged }}
|
||||||
<tr>
|
{{ unchanged }}
|
||||||
<th colspan="5">
|
{{ flex }}
|
||||||
<p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
|
{{ unchanged }}
|
||||||
</th>
|
</tr>
|
||||||
</tr>
|
<tr>
|
||||||
<tr>
|
<th colspan="5">
|
||||||
<td class="is-narrow">
|
<p>Classes to display <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
|
||||||
<code>is-flex-touch</code>
|
</th>
|
||||||
</td>
|
</tr>
|
||||||
{{ flex }}
|
<tr>
|
||||||
{{ flex }}
|
<td class="is-narrow">
|
||||||
{{ unchanged }}
|
<code>is-flex-touch</code>
|
||||||
{{ unchanged }}
|
</td>
|
||||||
{{ unchanged }}
|
{{ flex }}
|
||||||
</tr>
|
{{ flex }}
|
||||||
<tr>
|
{{ unchanged }}
|
||||||
<td class="is-narrow">
|
{{ unchanged }}
|
||||||
<code>is-flex-tablet</code>
|
{{ unchanged }}
|
||||||
</td>
|
</tr>
|
||||||
{{ unchanged }}
|
<tr>
|
||||||
{{ flex }}
|
<td class="is-narrow">
|
||||||
{{ flex }}
|
<code>is-flex-tablet</code>
|
||||||
{{ flex }}
|
</td>
|
||||||
{{ flex }}
|
{{ unchanged }}
|
||||||
</tr>
|
{{ flex }}
|
||||||
<tr>
|
{{ flex }}
|
||||||
<td class="is-narrow">
|
{{ flex }}
|
||||||
<code>is-flex-desktop</code>
|
{{ flex }}
|
||||||
</td>
|
</tr>
|
||||||
{{ unchanged }}
|
<tr>
|
||||||
{{ unchanged }}
|
<td class="is-narrow">
|
||||||
{{ flex }}
|
<code>is-flex-desktop</code>
|
||||||
{{ flex }}
|
</td>
|
||||||
{{ flex }}
|
{{ unchanged }}
|
||||||
</tr>
|
{{ unchanged }}
|
||||||
<tr>
|
{{ flex }}
|
||||||
<td class="is-narrow">
|
{{ flex }}
|
||||||
<code>is-flex-widescreen</code>
|
{{ flex }}
|
||||||
</td>
|
</tr>
|
||||||
{{ unchanged }}
|
<tr>
|
||||||
{{ unchanged }}
|
<td class="is-narrow">
|
||||||
{{ unchanged }}
|
<code>is-flex-widescreen</code>
|
||||||
{{ flex }}
|
</td>
|
||||||
{{ flex }}
|
{{ unchanged }}
|
||||||
</tr>
|
{{ unchanged }}
|
||||||
<tr>
|
{{ unchanged }}
|
||||||
<td class="is-narrow">
|
{{ flex }}
|
||||||
<code>is-flex-fullhd</code>
|
{{ flex }}
|
||||||
</td>
|
</tr>
|
||||||
{{ unchanged }}
|
<tr>
|
||||||
{{ unchanged }}
|
<td class="is-narrow">
|
||||||
{{ unchanged }}
|
<code>is-flex-fullhd</code>
|
||||||
{{ unchanged }}
|
</td>
|
||||||
{{ flex }}
|
{{ unchanged }}
|
||||||
</tr>
|
{{ unchanged }}
|
||||||
</tbody>
|
{{ unchanged }}
|
||||||
</table>
|
{{ unchanged }}
|
||||||
|
{{ flex }}
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include layout/main-open.html %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -180,105 +189,113 @@ breadcrumb:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Hide" %}
|
{% include elements/anchor.html name="Hide" %}
|
||||||
|
|
||||||
<table class="table is-bordered">
|
{% include layout/main-close.html %}
|
||||||
{{ thead }}
|
|
||||||
<tbody>
|
<div class="container">
|
||||||
<tr>
|
<div class="table-container">
|
||||||
<td class="is-narrow">
|
<table class="table is-bordered">
|
||||||
<code>is-hidden-mobile</code>
|
{{ thead }}
|
||||||
</td>
|
<tbody>
|
||||||
{{ hidden }}
|
<tr>
|
||||||
{{ visible }}
|
<td class="is-narrow">
|
||||||
{{ visible }}
|
<code>is-hidden-mobile</code>
|
||||||
{{ visible }}
|
</td>
|
||||||
{{ visible }}
|
{{ hidden }}
|
||||||
</tr>
|
{{ visible }}
|
||||||
<tr>
|
{{ visible }}
|
||||||
<td class="is-narrow">
|
{{ visible }}
|
||||||
<code>is-hidden-tablet-only</code>
|
{{ visible }}
|
||||||
</td>
|
</tr>
|
||||||
{{ visible }}
|
<tr>
|
||||||
{{ hidden }}
|
<td class="is-narrow">
|
||||||
{{ visible }}
|
<code>is-hidden-tablet-only</code>
|
||||||
{{ visible }}
|
</td>
|
||||||
{{ visible }}
|
{{ visible }}
|
||||||
</tr>
|
{{ hidden }}
|
||||||
<tr>
|
{{ visible }}
|
||||||
<td class="is-narrow">
|
{{ visible }}
|
||||||
<code>is-hidden-desktop-only</code>
|
{{ visible }}
|
||||||
</td>
|
</tr>
|
||||||
{{ visible }}
|
<tr>
|
||||||
{{ visible }}
|
<td class="is-narrow">
|
||||||
{{ hidden }}
|
<code>is-hidden-desktop-only</code>
|
||||||
{{ visible }}
|
</td>
|
||||||
{{ visible }}
|
{{ visible }}
|
||||||
</tr>
|
{{ visible }}
|
||||||
<tr>
|
{{ hidden }}
|
||||||
<td class="is-narrow">
|
{{ visible }}
|
||||||
<code>is-hidden-widescreen-only</code>
|
{{ visible }}
|
||||||
</td>
|
</tr>
|
||||||
{{ visible }}
|
<tr>
|
||||||
{{ visible }}
|
<td class="is-narrow">
|
||||||
{{ visible }}
|
<code>is-hidden-widescreen-only</code>
|
||||||
{{ hidden }}
|
</td>
|
||||||
{{ visible }}
|
{{ visible }}
|
||||||
</tr>
|
{{ visible }}
|
||||||
<tr>
|
{{ visible }}
|
||||||
<th colspan="5">
|
{{ hidden }}
|
||||||
<p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
|
{{ visible }}
|
||||||
</th>
|
</tr>
|
||||||
</tr>
|
<tr>
|
||||||
<tr>
|
<th colspan="5">
|
||||||
<td class="is-narrow">
|
<p>Classes to hide <strong>up to</strong> or <strong>from</strong> a specific breakpoint</p>
|
||||||
<code>is-hidden-touch</code>
|
</th>
|
||||||
</td>
|
</tr>
|
||||||
{{ hidden }}
|
<tr>
|
||||||
{{ hidden }}
|
<td class="is-narrow">
|
||||||
{{ visible }}
|
<code>is-hidden-touch</code>
|
||||||
{{ visible }}
|
</td>
|
||||||
{{ visible }}
|
{{ hidden }}
|
||||||
</tr>
|
{{ hidden }}
|
||||||
<tr>
|
{{ visible }}
|
||||||
<td class="is-narrow">
|
{{ visible }}
|
||||||
<code>is-hidden-tablet</code>
|
{{ visible }}
|
||||||
</td>
|
</tr>
|
||||||
{{ visible }}
|
<tr>
|
||||||
{{ hidden }}
|
<td class="is-narrow">
|
||||||
{{ hidden }}
|
<code>is-hidden-tablet</code>
|
||||||
{{ hidden }}
|
</td>
|
||||||
{{ hidden }}
|
{{ visible }}
|
||||||
</tr>
|
{{ hidden }}
|
||||||
<tr>
|
{{ hidden }}
|
||||||
<td class="is-narrow">
|
{{ hidden }}
|
||||||
<code>is-hidden-desktop</code>
|
{{ hidden }}
|
||||||
</td>
|
</tr>
|
||||||
{{ visible }}
|
<tr>
|
||||||
{{ visible }}
|
<td class="is-narrow">
|
||||||
{{ hidden }}
|
<code>is-hidden-desktop</code>
|
||||||
{{ hidden }}
|
</td>
|
||||||
{{ hidden }}
|
{{ visible }}
|
||||||
</tr>
|
{{ visible }}
|
||||||
<tr>
|
{{ hidden }}
|
||||||
<td class="is-narrow">
|
{{ hidden }}
|
||||||
<code>is-hidden-widescreen</code>
|
{{ hidden }}
|
||||||
</td>
|
</tr>
|
||||||
{{ visible }}
|
<tr>
|
||||||
{{ visible }}
|
<td class="is-narrow">
|
||||||
{{ visible }}
|
<code>is-hidden-widescreen</code>
|
||||||
{{ hidden }}
|
</td>
|
||||||
{{ hidden }}
|
{{ visible }}
|
||||||
</tr>
|
{{ visible }}
|
||||||
<tr>
|
{{ visible }}
|
||||||
<td class="is-narrow">
|
{{ hidden }}
|
||||||
<code>is-hidden-fullhd</code>
|
{{ hidden }}
|
||||||
</td>
|
</tr>
|
||||||
{{ visible }}
|
<tr>
|
||||||
{{ visible }}
|
<td class="is-narrow">
|
||||||
{{ visible }}
|
<code>is-hidden-fullhd</code>
|
||||||
{{ visible }}
|
</td>
|
||||||
{{ hidden }}
|
{{ visible }}
|
||||||
</tr>
|
{{ visible }}
|
||||||
</tbody>
|
{{ visible }}
|
||||||
</table>
|
{{ visible }}
|
||||||
|
{{ hidden }}
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{% include layout/main-open.html %}
|
||||||
|
|||||||
@ -55,7 +55,7 @@ breadcrumb:
|
|||||||
</td>
|
</td>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include anchor.html name="Size" %}
|
{% include elements/anchor.html name="Size" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -85,7 +85,7 @@ breadcrumb:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% include anchor.html name="Responsive size" %}
|
{% include elements/anchor.html name="Responsive size" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -164,7 +164,7 @@ breadcrumb:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Colors" %}
|
{% include elements/anchor.html name="Colors" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -206,7 +206,7 @@ breadcrumb:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% include anchor.html name="Alignment" %}
|
{% include elements/anchor.html name="Alignment" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -245,7 +245,7 @@ breadcrumb:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% include anchor.html name="Responsive Alignment" %}
|
{% include elements/anchor.html name="Responsive Alignment" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -343,7 +343,7 @@ breadcrumb:
|
|||||||
|
|
||||||
{% include layout/main-open.html %}
|
{% include layout/main-open.html %}
|
||||||
|
|
||||||
{% include anchor.html name="Text transformation" %}
|
{% include elements/anchor.html name="Text transformation" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -382,7 +382,7 @@ breadcrumb:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% include anchor.html name="Text weight" %}
|
{% include elements/anchor.html name="Text weight" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@ -19,7 +19,7 @@ breadcrumb:
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="The <code>findColorInvert()</code> function" %}
|
{% include elements/anchor.html name="The <code>findColorInvert()</code> function" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>The <code>findColorInvert($color)</code> function takes a <strong>color</strong> as an input, and outputs either transparent <strong>black</strong> <code>rgba(#000, 0.7)</code> or <strong>white</strong> <code>#fff</code>:</p>
|
<p>The <code>findColorInvert($color)</code> function takes a <strong>color</strong> as an input, and outputs either transparent <strong>black</strong> <code>rgba(#000, 0.7)</code> or <strong>white</strong> <code>#fff</code>:</p>
|
||||||
|
|||||||
@ -24,7 +24,7 @@ $widescreen-enabled: false
|
|||||||
$fullhd-enabled: false
|
$fullhd-enabled: false
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include anchor.html name="Vertical by default" %}
|
{% include elements/anchor.html name="Vertical by default" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -38,7 +38,7 @@ $fullhd-enabled: false
|
|||||||
<p>You can however enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifier.</p>
|
<p>You can however enforce the <strong>horizontal</strong> layout for both <code>columns</code> or <code>nav</code> by appending the <code>is-mobile</code> modifier.</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Breakpoints" %}
|
{% include elements/anchor.html name="Breakpoints" %}
|
||||||
|
|
||||||
{% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.data.meta.github %}
|
{% assign variables_file_url = "/blob/master/sass/utilities/initial-variables.sass#L46,L57" | prepend: site.data.meta.github %}
|
||||||
{% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.data.meta.github %}
|
{% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L182,L226" | prepend: site.data.meta.github %}
|
||||||
@ -206,7 +206,7 @@ $fullhd-enabled: false
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% include anchor.html name="Disabling breakpoints" %}
|
{% include elements/anchor.html name="Disabling breakpoints" %}
|
||||||
|
|
||||||
{% include elements/new-tag.html version="0.6.3" %}
|
{% include elements/new-tag.html version="0.6.3" %}
|
||||||
|
|
||||||
@ -220,7 +220,7 @@ $fullhd-enabled: false
|
|||||||
{% highlight sass %}{{ scss_code }}{% endhighlight %}
|
{% highlight sass %}{{ scss_code }}{% endhighlight %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Variables" %}
|
{% include elements/anchor.html name="Variables" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@ -77,7 +77,7 @@ breadcrumb:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Code requirements" %}
|
{% include elements/anchor.html name="Code requirements" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -109,7 +109,7 @@ breadcrumb:
|
|||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
{% include anchor.html name="Starter template" %}
|
{% include elements/anchor.html name="Starter template" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -118,10 +118,10 @@ breadcrumb:
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="bd-example highlight-full">
|
<div class="bd-example highlight-full">
|
||||||
{% highlight html %}{% include getting-started.html %}{% endhighlight %}
|
{% highlight html %}{% include snippets/getting-started.html %}{% endhighlight %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="bulma-start" %}
|
{% include elements/anchor.html name="bulma-start" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@ -62,7 +62,7 @@ breadcrumb:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Initial variables" %}
|
{% include elements/anchor.html name="Initial variables" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -94,7 +94,7 @@ breadcrumb:
|
|||||||
These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
|
These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
{%
|
{%
|
||||||
include variables.html
|
include elements/variables.html
|
||||||
anchor_name = 'Derived variables'
|
anchor_name = 'Derived variables'
|
||||||
data = derived_variables
|
data = derived_variables
|
||||||
custom_message = custom_message
|
custom_message = custom_message
|
||||||
@ -105,7 +105,7 @@ breadcrumb:
|
|||||||
You can use the following <a href="{{ site.data.variables.base.generic.file_url }}" target="_blank">generic variables</a> for general <strong>customization</strong>. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
You can use the following <a href="{{ site.data.variables.base.generic.file_url }}" target="_blank">generic variables</a> for general <strong>customization</strong>. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
{%
|
{%
|
||||||
include variables.html
|
include elements/variables.html
|
||||||
anchor_name = 'Generic variables'
|
anchor_name = 'Generic variables'
|
||||||
tab = 'base'
|
tab = 'base'
|
||||||
subtab = 'generic'
|
subtab = 'generic'
|
||||||
|
|||||||
136
docs/expo.html
136
docs/expo.html
@ -5,6 +5,9 @@ share_image: "/images/expo/bulma-expo-share.png"
|
|||||||
share_description: "Get inspired! The Bulma Expo is a curated collection of the most beautiful websites designed with Bulma. It showcases how you can easily customize Bulma for your own personal or business needs."
|
share_description: "Get inspired! The Bulma Expo is a curated collection of the most beautiful websites designed with Bulma. It showcases how you can easily customize Bulma for your own personal or business needs."
|
||||||
layout: default
|
layout: default
|
||||||
route: expo
|
route: expo
|
||||||
|
breadcrumb:
|
||||||
|
- home
|
||||||
|
- expo
|
||||||
other:
|
other:
|
||||||
- name: Apache BookKeeper
|
- name: Apache BookKeeper
|
||||||
url: https://lucperkins.github.io/bookkeeper/
|
url: https://lucperkins.github.io/bookkeeper/
|
||||||
@ -139,76 +142,79 @@ websites:
|
|||||||
</div>
|
</div>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include navbar.html id="ExpoHero" %}
|
{% include global/navbar.html id="Expo" %}
|
||||||
|
|
||||||
<section class="hero is-success">
|
<main class="bd-main">
|
||||||
<div class="hero-body">
|
<div class="bd-main-container container">
|
||||||
<div class="container">
|
<div class="bd-duo">
|
||||||
<div class="columns is-vcentered">
|
<div class="bd-lead">
|
||||||
<div class="column">
|
{% include components/breadcrumb.html %}
|
||||||
<h1 class="title">
|
|
||||||
Expo
|
<header class="bd-header">
|
||||||
</h1>
|
<div class="bd-header-titles">
|
||||||
<p class="subtitle">
|
<h1 class="title">
|
||||||
How people used Bulma to design beautiful websites <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">😍</span>
|
Expo
|
||||||
</p>
|
</h1>
|
||||||
</div>
|
<p class="subtitle is-4">
|
||||||
<div class="column is-narrow">
|
How people used Bulma to design beautiful websites <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">😍</span>
|
||||||
{% include carbon.html %}
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bd-header-carbon">
|
||||||
|
{% include elements/carbon.html %}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="bd-content">
|
||||||
|
{{ embrace_expo }}
|
||||||
|
|
||||||
|
<div class="bd-websites">
|
||||||
|
{% for website in page.websites %}
|
||||||
|
{% assign imageName = website.name | slugify %}
|
||||||
|
{% assign imagePath = "/images/expo/" | prepend: site.url | append: imageName %}
|
||||||
|
<article class="bd-website {% if website.highlighted %}bd-is-highlighted{% endif %}">
|
||||||
|
<a class="bd-website-image" href="{{ website.url }}" target="_blank" rel="nofollow">
|
||||||
|
{% if website.highlighted %}
|
||||||
|
{% assign size1x = "1344x840" %}
|
||||||
|
{% assign size2x = "2688x1680" %}
|
||||||
|
<img
|
||||||
|
class="lazyload"
|
||||||
|
src="{{ site.url }}/images/placeholders/empty.png"
|
||||||
|
data-src="{{ imagePath }}-{{ size1x }}.jpg"
|
||||||
|
data-srcset="{{ imagePath }}-{{ size2x }}.jpg 2x,
|
||||||
|
{{ imagePath }}-{{ size1x }}.jpg 1x"
|
||||||
|
width="1344"
|
||||||
|
height="840">
|
||||||
|
{% else %}
|
||||||
|
{% assign size1x = "672x420" %}
|
||||||
|
{% assign size2x = "1344x840" %}
|
||||||
|
<img
|
||||||
|
class="lazyload"
|
||||||
|
src="{{ site.url }}/images/placeholders/empty.png"
|
||||||
|
data-src="{{ imagePath }}-{{ size1x }}.jpg"
|
||||||
|
data-srcset="{{ imagePath }}-{{ size2x }}.jpg 2x,
|
||||||
|
{{ imagePath }}-{{ size1x }}.jpg 1x"
|
||||||
|
width="672"
|
||||||
|
height="420">
|
||||||
|
{% endif %}
|
||||||
|
<span class="bd-website-shadow is-overlay"></span>
|
||||||
|
<span class="bd-website-overlay is-overlay"></span>
|
||||||
|
</a>
|
||||||
|
<h2 class="title is-5 bd-website-name is-marginless">
|
||||||
|
{{ website.name }}
|
||||||
|
</h2>
|
||||||
|
<p class="has-text-grey-light bd-website-date">
|
||||||
|
{{ website.date }}
|
||||||
|
</p>
|
||||||
|
</article>
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{{ embrace_expo }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<main class="bd-expo">
|
|
||||||
<div class="container">
|
|
||||||
{{ embrace_expo }}
|
|
||||||
|
|
||||||
<div class="bd-websites">
|
|
||||||
{% for website in page.websites %}
|
|
||||||
{% assign imageName = website.name | slugify %}
|
|
||||||
{% assign imagePath = "/images/expo/" | prepend: site.url | append: imageName %}
|
|
||||||
<article class="bd-website {% if website.highlighted %}bd-is-highlighted{% endif %}">
|
|
||||||
<a class="bd-website-image" href="{{ website.url }}" target="_blank" rel="nofollow">
|
|
||||||
{% if website.highlighted %}
|
|
||||||
{% assign size1x = "1344x840" %}
|
|
||||||
{% assign size2x = "2688x1680" %}
|
|
||||||
<img
|
|
||||||
class="lazyload"
|
|
||||||
src="{{ site.url }}/images/placeholders/empty.png"
|
|
||||||
data-src="{{ imagePath }}-{{ size1x }}.jpg"
|
|
||||||
data-srcset="{{ imagePath }}-{{ size2x }}.jpg 2x,
|
|
||||||
{{ imagePath }}-{{ size1x }}.jpg 1x"
|
|
||||||
width="1344"
|
|
||||||
height="840">
|
|
||||||
{% else %}
|
|
||||||
{% assign size1x = "672x420" %}
|
|
||||||
{% assign size2x = "1344x840" %}
|
|
||||||
<img
|
|
||||||
class="lazyload"
|
|
||||||
src="{{ site.url }}/images/placeholders/empty.png"
|
|
||||||
data-src="{{ imagePath }}-{{ size1x }}.jpg"
|
|
||||||
data-srcset="{{ imagePath }}-{{ size2x }}.jpg 2x,
|
|
||||||
{{ imagePath }}-{{ size1x }}.jpg 1x"
|
|
||||||
width="672"
|
|
||||||
height="420">
|
|
||||||
{% endif %}
|
|
||||||
<span class="bd-website-shadow is-overlay"></span>
|
|
||||||
<span class="bd-website-overlay is-overlay"></span>
|
|
||||||
</a>
|
|
||||||
<h2 class="title is-5 bd-website-name is-marginless">
|
|
||||||
{{ website.name }}
|
|
||||||
</h2>
|
|
||||||
<p class="has-text-grey-light bd-website-date">
|
|
||||||
{{ website.date }}
|
|
||||||
</p>
|
|
||||||
</article>
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{{ embrace_expo }}
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
|
|
||||||
<script src="{{ site.url }}/vendor/lazyload-2.0.0-beta.2.min.js"></script>
|
<script src="{{ site.url }}/vendor/lazyload-2.0.0-beta.2.min.js"></script>
|
||||||
|
|||||||
@ -110,7 +110,7 @@ extensions:
|
|||||||
height: 469
|
height: 469
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include navbar.html id="Extensions" %}
|
{% include global/navbar.html id="Extensions" %}
|
||||||
|
|
||||||
<section class="hero is-danger">
|
<section class="hero is-danger">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
@ -125,7 +125,7 @@ extensions:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-narrow">
|
<div class="column is-narrow">
|
||||||
{% include carbon.html %}
|
{% include elements/carbon.html %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -4,7 +4,7 @@ route: index
|
|||||||
fixed_navbar: true
|
fixed_navbar: true
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include navbar.html id="Index" %}
|
{% include global/navbar.html id="Index" %}
|
||||||
|
|
||||||
{% include index/intro.html %}
|
{% include index/intro.html %}
|
||||||
|
|
||||||
@ -52,7 +52,7 @@ fixed_navbar: true
|
|||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="bd-tws-home">
|
<section class="bd-tws-home">
|
||||||
{% include tws.html %}
|
{% include elements/tws.html %}
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section class="section is-medium">
|
<section class="section is-medium">
|
||||||
@ -472,7 +472,7 @@ fixed_navbar: true
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
{% include features.html %}
|
{% include index/features.html %}
|
||||||
|
|
||||||
<hr class="is-marginless">
|
<hr class="is-marginless">
|
||||||
|
|
||||||
|
|||||||
@ -2,6 +2,9 @@
|
|||||||
fulltitle: Love for Bulma 😍
|
fulltitle: Love for Bulma 😍
|
||||||
layout: default
|
layout: default
|
||||||
route: love
|
route: love
|
||||||
|
breadcrumb:
|
||||||
|
- home
|
||||||
|
- love
|
||||||
tweets:
|
tweets:
|
||||||
- id: "900692286744535041"
|
- id: "900692286744535041"
|
||||||
date: "2:12 PM - 24 Aug 2017"
|
date: "2:12 PM - 24 Aug 2017"
|
||||||
@ -13,44 +16,47 @@ tweets:
|
|||||||
retweets: "0"
|
retweets: "0"
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include navbar.html id="LoveHero" %}
|
{% include global/navbar.html id="Love" %}
|
||||||
|
|
||||||
<section class="hero bd-is-love bd-rainbow">
|
<main class="bd-main">
|
||||||
<div class="hero-body">
|
<div class="bd-main-container container">
|
||||||
<div class="container">
|
<div class="bd-duo">
|
||||||
<div class="columns is-vcentered">
|
<div class="bd-lead">
|
||||||
<div class="column">
|
{% include components/breadcrumb.html %}
|
||||||
<h1 class="title">
|
|
||||||
Love
|
<header class="bd-header">
|
||||||
</h1>
|
<div class="bd-header-titles">
|
||||||
<p class="subtitle">
|
<h1 class="title">
|
||||||
Happy thoughts from Twitter <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">😃</span>
|
Love
|
||||||
</p>
|
</h1>
|
||||||
</div>
|
<p class="subtitle is-4">
|
||||||
<div class="column is-narrow">
|
Happy thoughts from Twitter <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">😃</span>
|
||||||
{% include carbon.html %}
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bd-header-carbon">
|
||||||
|
{% include elements/carbon.html %}
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="bd-content">
|
||||||
|
<div class="bd-embrace">
|
||||||
|
<p class="bd-embrace-text">
|
||||||
|
Are you a Bulma fan too? <strong>Show your support!</strong> <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">🤗</span>
|
||||||
|
</p>
|
||||||
|
<p class="bd-embrace-button">
|
||||||
|
{% include elements/tw-button.html label="Tweet #bulmaio" %}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="bd-tws-love">
|
||||||
|
{% for tweetId in site.data.love.tweets reversed %}
|
||||||
|
{% assign tweet = site.data.love.tweetsById[tweetId] %}
|
||||||
|
{% include elements/tw.html tweet=tweet %}
|
||||||
|
{% endfor %}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<main class="bd-love">
|
|
||||||
<div class="container">
|
|
||||||
<div class="bd-embrace">
|
|
||||||
<p class="bd-embrace-text">
|
|
||||||
Are you a Bulma fan too? <strong>Show your support!</strong> <span style="font-size: 20px; margin-left: 2px; position: relative; top: 1px;">🤗</span>
|
|
||||||
</p>
|
|
||||||
<p class="bd-embrace-button">
|
|
||||||
{% include elements/tw-button.html label="Tweet #bulmaio" %}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="bd-tws-love">
|
|
||||||
{% for tweetId in site.data.love.tweets reversed %}
|
|
||||||
{% assign tweet = site.data.love.tweetsById[tweetId] %}
|
|
||||||
{% include tw.html tweet=tweet %}
|
|
||||||
{% endfor %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@ -41,7 +41,7 @@ images:
|
|||||||
</a>
|
</a>
|
||||||
{% endcapture %}
|
{% endcapture %}
|
||||||
|
|
||||||
{% include navbar.html id="MadeWithBulmaHero" %}
|
{% include global/navbar.html id="MadeWithBulmaHero" %}
|
||||||
|
|
||||||
<section class="hero is-primary">
|
<section class="hero is-primary">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
@ -56,7 +56,7 @@ images:
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="column is-narrow">
|
<div class="column is-narrow">
|
||||||
{% include carbon.html %}
|
{% include elements/carbon.html %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -100,7 +100,7 @@ images:
|
|||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
{% include anchor.html name="Usage" %}
|
{% include elements/anchor.html name="Usage" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
@ -136,7 +136,7 @@ images:
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="Badge snippets" %}
|
{% include elements/anchor.html name="Badge snippets" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@ -4,11 +4,6 @@ route: templates
|
|||||||
---
|
---
|
||||||
|
|
||||||
<section class="hero is-primary">
|
<section class="hero is-primary">
|
||||||
<div class="hero-head">
|
|
||||||
<div class="container">
|
|
||||||
{% include header.html %}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|||||||
@ -4,7 +4,7 @@ layout: default
|
|||||||
route: index
|
route: index
|
||||||
---
|
---
|
||||||
|
|
||||||
{% include navbar.html id="ThankYou" %}
|
{% include global/navbar.html id="ThankYou" %}
|
||||||
|
|
||||||
<section class="hero is-large has-text-centered">
|
<section class="hero is-large has-text-centered">
|
||||||
<div class="hero-body">
|
<div class="hero-body">
|
||||||
|
|||||||
@ -45,7 +45,7 @@ route: tiles
|
|||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% include anchor.html name="How it works: Nesting" %}
|
{% include elements/anchor.html name="How it works: Nesting" %}
|
||||||
|
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
|
<p>Everything is a tile! To create a grid of tiles, you only need to <strong>nest</strong> <code>tile</code> elements.</p>
|
||||||
@ -203,7 +203,7 @@ route: tiles
|
|||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="Nesting requirements" %}
|
{% include elements/anchor.html name="Nesting requirements" %}
|
||||||
|
|
||||||
<article class="message is-danger">
|
<article class="message is-danger">
|
||||||
<div class="message-header">
|
<div class="message-header">
|
||||||
@ -334,7 +334,7 @@ tile is-ancestor
|
|||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="3 columns" %}
|
{% include elements/anchor.html name="3 columns" %}
|
||||||
|
|
||||||
<div class="tile is-ancestor">
|
<div class="tile is-ancestor">
|
||||||
<div class="tile is-parent">
|
<div class="tile is-parent">
|
||||||
@ -522,7 +522,7 @@ tile is-ancestor
|
|||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
|
||||||
{% include anchor.html name="4 columns" %}
|
{% include elements/anchor.html name="4 columns" %}
|
||||||
|
|
||||||
<div class="tile is-ancestor">
|
<div class="tile is-ancestor">
|
||||||
<div class="tile is-parent">
|
<div class="tile is-parent">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user