library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2025-01-09 15:44:25 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add fullheight hero with navbar documentation

Browse Source
This commit is contained in:
Jeremy Thomas 2018-10-07 17:46:48 +02:00
parent b3bf4ea1cf
commit 462336f602
3 changed files with 103 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
docs/_includes/examples/navbar-basic.html Normal file
View File

@ -0,0 +1,23 @@
<nav class="navbar">
<div class="container">
<div id="navMenu" class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<a class="navbar-item">
Documentation
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<div class="buttons">
<a class="button is-dark">Github</a>
<a class="button is-link">Download</a>
</div>
</div>
</div>
</div>
</div>
</nav>

8
docs/css/bulma-docs.css
View File

@ -10131,12 +10131,12 @@ label.panel-block:hover {
}
}
.hero.is-halfheight .hero-body, .hero.is-fullheight .hero-body {
.hero.is-halfheight .hero-body, .hero.is-fullheight .hero-body, .hero.is-fullheight-with-navbar .hero-body {
align-items: center;
display: flex;
}
.hero.is-halfheight .hero-body > .container, .hero.is-fullheight .hero-body > .container {
.hero.is-halfheight .hero-body > .container, .hero.is-fullheight .hero-body > .container, .hero.is-fullheight-with-navbar .hero-body > .container {
flex-grow: 1;
flex-shrink: 1;
}
@ -10149,6 +10149,10 @@ label.panel-block:hover {
min-height: 100vh;
}
.hero.is-fullheight-with-navbar {
min-height: calc(100vh - 3.25rem);
}
.hero-video {
overflow: hidden;
}

91
docs/documentation/layout/hero.html
View File

@ -13,7 +13,7 @@ breadcrumb:
meta:
colors: true
sizes: true
variables: true
variables: false
---
<div class="content">
@ -76,9 +76,9 @@ meta:
<section class="section">
<div class="container">
{% include elements/anchor.html name="Colors" %}
<h4 class="subtitle">
As with buttons, you can choose one of the <strong>7 different colors</strong>:
</h4>
<div class="content">
As with buttons, you can choose one of the <strong>7 different colors</strong>:
</div>
</div>
</section>
@ -207,9 +207,9 @@ meta:
<section class="section">
<div class="container">
{% include elements/anchor.html name="Gradients" %}
<h4 class="subtitle">
<div class="content">
By adding the <code>is-bold</code> modifier, you can generate a subtle <strong>gradient</strong>
</h4>
</div>
</div>
</section>
@ -331,9 +331,22 @@ meta:
<section class="section">
<div class="container">
{% include elements/anchor.html name="Sizes" %}
<h4 class="subtitle">
You can have even more imposing banners by using one of <strong>3 different sizes</strong>
</h4>
<div class="content">
<p>
You can have even more imposing banners by using one of <strong>3 different sizes</strong>:
</p>
<ul>
<li>
medium
</li>
<li>
large
</li>
<li>
fullheight
</li>
</ul>
</div>
</div>
</section>
@ -403,10 +416,10 @@ meta:
<div class="hero-body">
<div class="container">
<p class="title">
Full Height title
Fullheight title
</p>
<p class="subtitle">
Full Height subtitle
Fullheight subtitle
</p>
</div>
</div>
@ -418,10 +431,10 @@ meta:
<div class="hero-body">
<div class="container">
<h1 class="title">
Full Height title
Fullheight title
</h1>
<h2 class="subtitle">
Full Height subtitle
Fullheight subtitle
</h2>
</div>
</div>
@ -429,12 +442,56 @@ meta:
{% endhighlight %}
</section>
<!-- Fullheight with navbar -->
<section class="section">
<div class="container">
{% include elements/anchor.html name="Full height hero" %}
<h4 class="subtitle">And vertically centered</h4>
{% include elements/anchor.html name="Fullheight with navbar" %}
{% include elements/new-tag.html version="0.7.2" %}
<div class="content">
<p>You can split the hero in <strong>3 vertical parts</strong>:</p>
<p>
If you are using a <a href="{{ site.url }}/documentation/components/navbar/#fixed-navbar">fixed navbar</a>, you can use the <code>is-fullheight-with-navbar</code> modifier on the hero for it to occupy the viewport height minus the navbar height.
</p>
</div>
</div>
</section>
<div class="bd-example is-fullwidth">
{% include examples/navbar-basic.html %}
<section class="hero is-success is-fullheight-with-navbar">
<div class="hero-body">
<div class="container">
<p class="title">
Fullheight title
</p>
<p class="subtitle">
Fullheight subtitle
</p>
</div>
</div>
</section>
</div>
{% highlight html %}
<section class="hero is-success is-fullheight">
<div class="hero-body">
<div class="container">
<h1 class="title">
Fullheight title
</h1>
<h2 class="subtitle">
Fullheight subtitle
</h2>
</div>
</div>
</section>
{% endhighlight %}
<!-- Fullheight with 3 parts -->
<section class="section">
<div class="container">
{% include elements/anchor.html name="Fullheight hero in 3 parts" %}
<div class="content">
<p>To obtain a hero that will cover the whole height of the viewport, you can split it in <strong>3 vertical parts</strong>:</p>
<ul>
<li>
<code>hero</code>
@ -679,4 +736,4 @@ meta:
{% include layout/main-open.html %}
{% include elements/variables.html type='component' %}
{% include elements/variables.html type='component' hide_content=true %}