library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-10-17 09:04:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add highlight

Browse Source
This commit is contained in:
Jeremy Thomas 2017-07-02 17:34:44 +01:00
parent 270d37d2d4
commit d5372f08af
8 changed files with 86 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
docs/_includes/blog-hero.html
View File

@ -1,5 +1,5 @@
<div class="container"> <div class="container">
{% include navbar.html %} {% include navbar.html id="BlogHero" %}
</div> </div>
<section class="hero is-primary"> <section class="hero is-primary">

4
docs/_includes/navbar.html
View File

@ -16,14 +16,14 @@
</span> </span>
</a> </a>
<div id="navBurger" class="navbar-burger"> <div class="navbar-burger burger" data-target="navMenu{{ include.id }}">
<span></span> <span></span>
<span></span> <span></span>
<span></span> <span></span>
</div> </div>
</div> </div>
<div id="navMenu" class="navbar-menu"> <div id="navMenu{{ include.id }}" class="navbar-menu">
<div class="navbar-start"> <div class="navbar-start">
<a class="navbar-item {% if page.route == 'index' %}is-active{% endif %}" href="{{ site.url }}/"> <a class="navbar-item {% if page.route == 'index' %}is-active{% endif %}" href="{{ site.url }}/">
Home Home

18
docs/_javascript/main.js
View File

@ -1,14 +1,18 @@
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {
// Navbar burger menu // Toggles
const $navBurger = document.getElementById('navBurger'); const $burgers = getAll('.burger');
const $navMenu = document.getElementById('navMenu'); const $fries = getAll('.fries');
if ($navBurger) { if ($burgers.length > 0) {
$navBurger.addEventListener('click', () => { $burgers.forEach($el => {
$navBurger.classList.toggle('is-active'); $el.addEventListener('click', () => {
$navMenu.classList.toggle('is-active'); const target = $el.dataset.target;
const $target = document.getElementById(target);
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
}); });
} }

1
docs/_layouts/default.html
View File

@ -3,5 +3,6 @@
{% include head.html %} {% include 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 %}">
{{ content }} {{ content }}
{% include footer.html %}
</body> </body>
</html> </html>

2
docs/_layouts/documentation.html
View File

@ -4,7 +4,7 @@ route: documentation
--- ---
<div class="container"> <div class="container">
{% include navbar.html %} {% include navbar.html id="Documentation" %}
</div> </div>
<section class="hero is-primary"> <section class="hero is-primary">

60
docs/documentation/components/navbar.html
View File

@ -7,7 +7,31 @@ doc-subtab: navbar
{% include subnav-components.html %} {% include subnav-components.html %}
{% capture navbar_example %} {% capture navbar_example %}
{% include navbar.html %} {% include navbar.html id="Example" %}
{% endcapture %}
{% capture navbar_brand_example %}
<nav class="navbar">
<div class="navbar-brand">
<!-- nav items, nav burger ... -->
</div>
</nav>
{% endcapture %}
{% capture navbar_brand_items_example %}
<nav class="navbar">
<div class="navbar-brand">
<a class="navbar-item" href="{{ site.url }}">
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.title }}" width="112" height="28">
</a>
<div class="navbar-burger">
<span></span>
<span></span>
<span></span>
</div>
</div>
</nav>
{% endcapture %} {% endcapture %}
<section class="section"> <section class="section">
@ -35,7 +59,7 @@ doc-subtab: navbar
<code>.navbar</code> the <strong>main</strong> container <code>.navbar</code> the <strong>main</strong> container
<ul> <ul>
<li> <li>
<code>.navbar-brand</code> the <strong>left side</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons <code>.navbar-brand</code> the <strong>left side</strong>, <strong class="has-text-success">always visible</strong>, which usually contains the <strong>logo</strong> and optionally some links or icons
<ul> <ul>
<li> <li>
<code>.navbar-burger</code> the <strong>hamburger</strong> icon, which toggles the navbar menu on touch devices <code>.navbar-burger</code> the <strong>hamburger</strong> icon, which toggles the navbar menu on touch devices
@ -82,5 +106,37 @@ doc-subtab: navbar
{% highlight html %}{{navbar_example}}{% endhighlight %} {% highlight html %}{{navbar_example}}{% endhighlight %}
<hr>
<h3 class="title">Navbar brand</h3>
<div class="content">
<p>
The <code>.navbar-brand</code> is the left side of the navbar. It can contain:
</p>
<ul>
<li>
a number of <code>.navbar-item</code>
</li>
<li>
the <code>.navbar-burger</code> as last child
</li>
</ul>
</div>
{% highlight html %}{{navbar_brand_example}}{% endhighlight %}
<div class="content">
<p>
The navbar brand is <strong>always visible</strong>: on both touch devices (< 1000px) and desktop (1000px +). As a result, it is recommended to only use a few navbar items to avoid <strong>overflowing</strong> horizontally on small devices.
</p>
</div>
<div class="example is-paddingless">
{{navbar_brand_items_example}}
</div>
{% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}
</div> </div>
</section> </section>

2
docs/index.html
View File

@ -4,7 +4,7 @@ route: index
--- ---
<div class="container"> <div class="container">
{% include navbar.html transparent=true boxed=true %} {% include navbar.html id="Index" transparent=true boxed=true %}
</div> </div>
<section class="hero is-medium has-text-centered"> <section class="hero is-medium has-text-centered">

18
docs/lib/main.js
View File

@ -2,15 +2,19 @@
document.addEventListener('DOMContentLoaded', function () { document.addEventListener('DOMContentLoaded', function () {
// Navbar burger menu // Toggles
var $navBurger = document.getElementById('navBurger'); var $burgers = getAll('.burger');
var $navMenu = document.getElementById('navMenu'); var $fries = getAll('.fries');
if ($navBurger) { if ($burgers.length > 0) {
$navBurger.addEventListener('click', function () { $burgers.forEach(function ($el) {
$navBurger.classList.toggle('is-active'); $el.addEventListener('click', function () {
$navMenu.classList.toggle('is-active'); var target = $el.dataset.target;
var $target = document.getElementById(target);
$el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
}); });
} }