From 45a31d7b866936c0bae9246dbec7a4cfb1d8b32c Mon Sep 17 00:00:00 2001 From: Jeremy Thomas Date: Sun, 2 Jul 2017 22:07:30 +0100 Subject: [PATCH] Add navbar documentation --- docs/_includes/bp/desktop.html | 1 + docs/_includes/bp/touch.html | 1 + docs/_javascript/main.js | 2 +- docs/_layouts/default.html | 1 - docs/css/bulma-docs.css | 51 +- docs/documentation/components/navbar.html | 701 +++++++++++++++++++++- docs/lib/main.js | 2 +- sass/components/navbar.sass | 47 +- sass/layout/hero.sass | 4 - 9 files changed, 742 insertions(+), 68 deletions(-) create mode 100644 docs/_includes/bp/desktop.html create mode 100644 docs/_includes/bp/touch.html diff --git a/docs/_includes/bp/desktop.html b/docs/_includes/bp/desktop.html new file mode 100644 index 00000000..4a70a0d2 --- /dev/null +++ b/docs/_includes/bp/desktop.html @@ -0,0 +1 @@ +>= 1000px diff --git a/docs/_includes/bp/touch.html b/docs/_includes/bp/touch.html new file mode 100644 index 00000000..abef7d34 --- /dev/null +++ b/docs/_includes/bp/touch.html @@ -0,0 +1 @@ +< 1000px diff --git a/docs/_javascript/main.js b/docs/_javascript/main.js index 5704d875..78db233b 100644 --- a/docs/_javascript/main.js +++ b/docs/_javascript/main.js @@ -67,7 +67,7 @@ document.addEventListener('DOMContentLoaded', () => { const expand = ''; $el.insertAdjacentHTML('beforeend', copy); - if ($el.firstElementChild.scrollHeight > 600) { + if ($el.firstElementChild.scrollHeight > 320) { $el.insertAdjacentHTML('beforeend', expand); } diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 0521f28a..39dbb71b 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -3,6 +3,5 @@ {% include head.html %} {{ content }} - {% include footer.html %} diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 20934aea..b150392f 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -4398,6 +4398,7 @@ a.navbar-item:hover, a.navbar-item.is-active, .navbar-link.is-active { + background-color: whitesmoke; color: #0a0a0a; } @@ -4436,9 +4437,11 @@ a.navbar-item.is-active, .navbar-dropdown a.navbar-item:hover { background-color: whitesmoke; + color: #0a0a0a; } .navbar-dropdown a.navbar-item.is-active { + background-color: whitesmoke; color: #00d1b2; } @@ -4475,12 +4478,12 @@ a.navbar-item.is-active, .navbar { height: 3.25rem; } - .navbar.is-transparent .navbar-brand .navbar-link:hover, - .navbar.is-transparent .navbar-brand > a.navbar-item:hover, - .navbar.is-transparent .navbar-start .navbar-link:hover, - .navbar.is-transparent .navbar-start > a.navbar-item:hover, - .navbar.is-transparent .navbar-end .navbar-link:hover, - .navbar.is-transparent .navbar-end > a.navbar-item:hover { + .navbar.is-transparent a.navbar-item:hover, .navbar.is-transparent a.navbar-item.is-active, + .navbar.is-transparent .navbar-link:hover, + .navbar.is-transparent .navbar-link.is-active { + background-color: transparent; + } + .navbar.is-transparent .navbar-item.is-active .navbar-link, .navbar.is-transparent .navbar-item.is-hoverable:hover .navbar-link { background-color: transparent; } .navbar-burger { @@ -4494,7 +4497,19 @@ a.navbar-item.is-active, .navbar-item.has-dropdown { align-items: stretch; } - .navbar-item.has-dropdown::after { + .navbar-item.is-active .navbar-link, .navbar-item.is-hoverable:hover .navbar-link { + background-color: whitesmoke; + color: #0a0a0a; + } + .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown { + display: block; + } + .navbar-item.is-active .navbar-dropdown.is-boxed, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed { + opacity: 1; + pointer-events: auto; + transform: translateY(0); + } + .navbar-link::after { border: 1px solid #00d1b2; border-right: 0; border-top: 0; @@ -4509,14 +4524,6 @@ a.navbar-item.is-active, right: 1.125em; top: 50%; } - .navbar-item.is-active .navbar-dropdown, .navbar-item.is-hoverable:hover .navbar-dropdown { - display: block; - } - .navbar-item.is-active .navbar-dropdown.is-boxed, .navbar-item.is-hoverable:hover .navbar-dropdown.is-boxed { - opacity: 1; - pointer-events: auto; - transform: translateY(0); - } .navbar-menu { flex-grow: 1; flex-shrink: 0; @@ -6209,13 +6216,6 @@ label.panel-block:hover { padding: 3rem 1.5rem; } -@media screen and (min-width: 1192px) { - .hero-body { - padding-left: 0; - padding-right: 0; - } -} - .hero { align-items: stretch; background-color: white; @@ -7866,8 +7866,13 @@ html.route-index #carbon { } .highlight pre { - max-height: 600px; + max-height: 320px; margin-bottom: 0 !important; + padding: 1.25em 1.5em; +} + +.highlight pre code { + padding: 0; } .structure { diff --git a/docs/documentation/components/navbar.html b/docs/documentation/components/navbar.html index 978a504e..b953277c 100644 --- a/docs/documentation/components/navbar.html +++ b/docs/documentation/components/navbar.html @@ -13,11 +13,19 @@ doc-subtab: navbar {% capture navbar_brand_example %} {% endcapture %} +{% capture navbar_burger_example %} +
+ + + +
+{% endcapture %} + {% capture navbar_brand_items_example %} {% endcapture %} +{% capture navbar_menu_example %} + +{% endcapture %} + +{% capture navbar_menu_active_example %} +
+ +
+ +
+ +
+{% endcapture %} + +{% capture navbar_start_end_example %} +
+
+ +
+ +
+ +
+
+{% endcapture %} + +{% capture navbar_item_link_example %} + + Home + +{% endcapture %} + +{% capture navbar_item_brand_example %} + + + +{% endcapture %} + +{% capture navbar_item_dropdown_example %} +
+ + Docs + + +
+ +
+
+{% endcapture %} + +{% capture navbar_item_dropdown_bis_example %} +
+ + Overview + +
+{% endcapture %} + +{% capture navbar_item_other_example %} +
+
+

+ + + + + Tweet + +

+

+ + + + + Download + +

+
+
+{% endcapture %} + +{% capture navbar_transparent_example %} +{% include navbar.html transparent=true boxed=true id="TransparentExample" %} +{% endcapture %} + +{% capture navbar_dropdown_example %} + +{% endcapture %} + +{% capture navbar_dropdown_hover_example %} + +{% endcapture %} + +{% capture navbar_dropdown_active_example %} + +{% endcapture %} + +{% capture navbar_dropdown_default_example %} + + +
+
+

+ Documentation +

+

+ Everything you need to create a website with Bulma +

+
+
+{% endcapture %} + +{% capture navbar_dropdown_boxed_example %} + + +
+
+

+ Documentation +

+

+ Everything you need to create a website with Bulma +

+
+
+{% endcapture %} + +{% capture navbar_dropdown_item_active_example %} + + +
+
+

+ Documentation +

+

+ Everything you need to create a website with Bulma +

+
+
+{% endcapture %} + +{% capture navbar_divider_example %} +
+{% endcapture %} +
-

Navbar

-

- A responsive horizontal navbar that can supports images, links, buttons, and dropdowns -

+
+
+

Navbar

+

+ A responsive horizontal navbar that can supports images, links, buttons, and dropdowns +

+
+ +
+

+ New! + 0.5.0 +

+ +
+
-

The new .navbar replaces the old .nav component. You can still access its documentation here.

+

The new navbar replaces the deprecated nav component, whose documentation you can still access temporarily here.

- The .navbar component is a responsive and versatile horizontal navigation bar with the following structure: + The navbar component is a responsive and versatile horizontal navigation bar with the following structure:

  • - .navbar the main container + navbar the main container
    • - .navbar-brand the left side, always visible, which usually contains the logo and optionally some links or icons + navbar-brand the left side, always visible, which usually contains the logo and optionally some links or icons
      • - .navbar-burger the hamburger icon, which toggles the navbar menu on touch devices + navbar-burger the hamburger icon, which toggles the navbar menu on touch devices
    • - .navbar-menu the right side, hidden on touch devices, visible on desktop + navbar-menu the right side, hidden on touch devices, visible on desktop
      • - .navbar-start the left part of the menu, which appears next to the navbar brand on desktop + navbar-start the left part of the menu, which appears next to the navbar brand on desktop
      • - .navbar-end the right part of the menu, which appears at the end of the navbar + navbar-end the right part of the menu, which appears at the end of the navbar
        • - .navbar-item each single item of the navbar, which can either be a a or a div + navbar-item each single item of the navbar, which can either be a a or a div
          • - .navbar-link a link as the sibling of a dropdown, with an arrow + navbar-link a link as the sibling of a dropdown, with an arrow
          • - .navbar-dropdown the dropdown menu, which can include navbar items and dividers + navbar-dropdown the dropdown menu, which can include navbar items and dividers
            • - .navbar-divider a horizontal line to separate navbar items + navbar-divider a horizontal line to separate navbar items
            • @@ -112,14 +429,14 @@ doc-subtab: navbar

            - The .navbar-brand is the left side of the navbar. It can contain: + The navbar-brand is the left side of the navbar. It can contain:

            • - a number of .navbar-item + a number of navbar-item
            • - the .navbar-burger as last child + the navbar-burger as last child
            @@ -128,7 +445,7 @@ doc-subtab: navbar

            - The navbar brand is always visible: on both touch devices (< 1000px) and desktop (1000px +). As a result, it is recommended to only use a few navbar items to avoid overflowing horizontally on small devices. + The navbar brand is always visible: on both touch devices {% include bp/touch.html %} and desktop {% include bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid overflowing horizontally on small devices.

            @@ -138,5 +455,347 @@ doc-subtab: navbar {% highlight html %}{{navbar_brand_items_example}}{% endhighlight %} +
            +

            + On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs. +

            +
            + +
            + +

            Navbar burger

            + +
            +

            + The navbar-burger is a hamburger menu that only appears on mobile. It has to appear as the last child of navbar-brand. +

            +
            + +
            +
            + + + +
            +
            + + {% highlight html %}{{ navbar_burger_example }}{% endhighlight %} + +
            +

            + You can add the modifier class is-active to turn it into a cross. +

            +
            + +
            +
            + + + +
            +
            + +
            + +

            Navbar menu

            + +
            +

            + The navbar-menu is the counterpart of the navbar brand. As such, it must appear as a direct child of navbar-brand, as a sibling of navbar-brand. +

            +
            + + {% highlight html %}{{navbar_menu_example}}{% endhighlight %} + +
            +

            + The navbar-menu is hidden on touch devices {% include bp/touch.html %}. You need to add the modifier class is-active to display it. +

            +
            + + {% highlight html %}{{navbar_menu_active_example}}{% endhighlight %} + +
            +

            + On desktop {% include bp/desktop.html %}, the navbar-menu will fill up the space available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children: +

            +
              +
            • + navbar-start +
              • +
            • + navbar-end +
              • +
            +
            + +
            + +

            Navbar start and navbar end

            + +
            +

            + The navbar-start and navbar-end are the two direct and only children of the navbar-menu. +

            +

            + On desktop {% include bp/desktop.html %}: +

            +
              +
            • + navbar-start will appear on the left +
              • +
            • + navbar-end will appear on the right +
              • +
            +

            + Each of them can contain any number of navbar-item. +

            +
            + + {% highlight html %}{{navbar_start_end_example}}{% endhighlight %} + +
            + +

            Navbar item

            + +
            +

            + A navbar-item is a repeatable element that can be: +

            +
              +
            • + a navigation link + {% highlight html %}{{ navbar_item_link_example }}{% endhighlight %} +
              • +
            • + a container for the brand logo + {% highlight html %}{{ navbar_item_brand_example }}{% endhighlight %} +
              • +
            • + the parent of a dropdown menu + {% highlight html %}{{ navbar_item_dropdown_example }}{% endhighlight %} +
              • +
            • + a child of a navbar dropdown + {% highlight html %}{{ navbar_item_dropdown_bis_example }}{% endhighlight %} +
              • +
            • + a container for almost anything you want, like a field + {% highlight html %}{{ navbar_item_other_example }}{% endhighlight %} +
              • +
            +

            + It can either be an anchor tag <a> or a <div>, as a direct child of either: +

            +
              +
            • + navbar +
              • +
            • + navbar-brand +
              • +
            • + navbar-start +
              • +
            • + navbar-end +
              • +
            • + navbar-dropdown +
              • +
            +
            + +
            + +

            Transparent navbar

            + +
            +

            + To seamlessly integrate the navbar in any visual context, you can add the is-transparent modifer on the navbar component. This will remove any hover or active background from the navbar items. +

            +
            + +
            + {{navbar_transparent_example}} +
            + + {% highlight html %}{{navbar_transparent_example}}{% endhighlight %} + +
            + + + +
            +

            + To create a dropdown menu, you will need 4 elements: +

            +
              +
            • + navbar-item with the has-dropdown modifier +
              • +
            • + navbar-link which contains the dropdown arrow +
              • +
            • + navbar-dropdown which can contain instances of navbar-item and navbar-divider +
              • +
            +
            + +
            +
            +
            + {{ navbar_dropdown_example }} +
            +
            + +
            + {% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %} +
            +
            + +

            + Show/hide the dropdown with either CSS or JavaScript +

            + +
            +

            + The navbar-dropdown is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. How the dropdown is displayed on desktop depends on the parent's class. +

            +

            + The navbar-item with the has-dropdown modifier, has 2 additional modifiers +

            +
              +
            • + is-hoverable: the dropdown will show up when hovering the parent navbar-item +
              • +
            • + is-active: the dropdown will show up all the time +
              • +
            +
            + +
            +

            + While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript. +

            +
            + +
            +
            +
            + {{ navbar_dropdown_hover_example }} +
            +
            + +
            + {% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %} +
            +
            + +
            +
            +
            + {{ navbar_dropdown_active_example }} +
            +
            + +
            + {% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %} +
            +
            + +

            + Styles for the dropdown menu +

            + +
            +

            + By default, the navbar-dropdown has: +

            +
              +
            • + a grey border-top +
              • +
            • + a border-radius at both bottom corners +
              • +
            +
            + +
            +
            +
            + {{ navbar_dropdown_default_example }} +
            +
            + +
            + {% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %} +
            +
            + +
            +

            + When having a transparent navbar, it is preferable to use the boxed version of the dropdown, by using the is-boxed modifier. +

            +
              +
            • + the grey border is removed +
              • +
            • + a slight inner shadow is added +
              • +
            • + all corners are rounded +
              • +
            • + the hover/active state is animated +
              • +
            +
            + +
            +
            +
            + {{ navbar_dropdown_boxed_example }} +
            +
            + +
            + {% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %} +
            +
            + +

            + Active dropdown navbar item +

            + +
            +
            +
            + {{ navbar_dropdown_item_active_example }} +
            +
            + +
            + {% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %} +
            +
            + +

            + Dropdown divider +

            + +
            +

            + You can add a navbar-divider to display a horizontal rule in a navbar-dropdown. +

            +
            + + {% highlight html %}{{ navbar_divider_example }}{% endhighlight %} +
diff --git a/docs/lib/main.js b/docs/lib/main.js index 6c48f632..bc885b54 100644 --- a/docs/lib/main.js +++ b/docs/lib/main.js @@ -69,7 +69,7 @@ document.addEventListener('DOMContentLoaded', function () { var expand = ''; $el.insertAdjacentHTML('beforeend', copy); - if ($el.firstElementChild.scrollHeight > 600) { + if ($el.firstElementChild.scrollHeight > 320) { $el.insertAdjacentHTML('beforeend', expand); } diff --git a/sass/components/navbar.sass b/sass/components/navbar.sass index 5678b808..31ee0200 100644 --- a/sass/components/navbar.sass +++ b/sass/components/navbar.sass @@ -5,6 +5,7 @@ $navbar-item: $grey-dark !default $navbar-item-hover: $black !default $navbar-item-hover-background: $background !default $navbar-item-active: $black !default +$navbar-item-active-background: $background !default $navbar-dropdown-background: $white !default $navbar-dropdown-border: $border !default @@ -13,8 +14,10 @@ $navbar-dropdown-arrow: $link !default $navbar-dropdown-radius: $radius-large !default $navbar-dropdown-z: 20 !default +$navbar-dropdown-item-hover: $black !default $navbar-dropdown-item-hover-background: $background !default $navbar-dropdown-item-active: $primary !default +$navbar-dropdown-item-active-background: $background !default $navbar-divider-background: $border !default @@ -49,6 +52,7 @@ a.navbar-item, background-color: $navbar-item-hover-background color: $navbar-item-hover &.is-active + background-color: $navbar-item-active-background color: $navbar-item-active .navbar-item @@ -76,7 +80,9 @@ a.navbar-item, a.navbar-item &:hover background-color: $navbar-dropdown-item-hover-background + color: $navbar-dropdown-item-hover &.is-active + background-color: $navbar-dropdown-item-active-background color: $navbar-dropdown-item-active .navbar-divider @@ -107,12 +113,15 @@ a.navbar-item, .navbar height: $navbar-height &.is-transparent - .navbar-brand, - .navbar-start, - .navbar-end - .navbar-link, - & > a.navbar-item - &:hover + a.navbar-item, + .navbar-link + &:hover, + &.is-active + background-color: transparent + .navbar-item + &.is-active, + &.is-hoverable:hover + .navbar-link background-color: transparent .navbar-burger display: none @@ -123,19 +132,23 @@ a.navbar-item, .navbar-item &.has-dropdown align-items: stretch - &::after - +arrow($navbar-dropdown-arrow) - margin-top: -0.375em - right: 1.125em - top: 50% &.is-active, &.is-hoverable:hover - .navbar-dropdown - display: block - &.is-boxed - opacity: 1 - pointer-events: auto - transform: translateY(0) + .navbar-link + background-color: $navbar-item-active-background + color: $navbar-item-active + .navbar-dropdown + display: block + &.is-boxed + opacity: 1 + pointer-events: auto + transform: translateY(0) + .navbar-link + &::after + +arrow($navbar-dropdown-arrow) + margin-top: -0.375em + right: 1.125em + top: 50% .navbar-menu flex-grow: 1 flex-shrink: 0 diff --git a/sass/layout/hero.sass b/sass/layout/hero.sass index 079b87e1..9c694c6e 100644 --- a/sass/layout/hero.sass +++ b/sass/layout/hero.sass @@ -42,10 +42,6 @@ flex-grow: 1 flex-shrink: 0 padding: 3rem 1.5rem - // Responsiveness - +from($widescreen) - padding-left: 0 - padding-right: 0 // Main container