mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-28 12:24:23 +00:00
Top-level pages
This commit is contained in:
Jeremy Thomas
parent
5ffedabb07
commit
6b53425544
@ -1,19 +1,5 @@
|
||||
{
|
||||
"navbar_items": [
|
||||
{
|
||||
"id": "templates",
|
||||
"color": "has-text-info",
|
||||
"fa_type": "fas",
|
||||
"fa_icon": "fa-code",
|
||||
"title": "Templates"
|
||||
},
|
||||
{
|
||||
"id": "videos",
|
||||
"color": "has-text-success",
|
||||
"fa_type": "fas",
|
||||
"fa_icon": "fa-play-circle",
|
||||
"title": "Videos"
|
||||
},
|
||||
{
|
||||
"id": "blog",
|
||||
"color": "bd-has-text-rss",
|
||||
|
||||
@ -6,46 +6,62 @@
|
||||
},
|
||||
"documentation": {
|
||||
"name": "Documentation",
|
||||
"subtitle": "Everything you need to <strong>create a website</strong> with Bulma",
|
||||
"path": "/documentation"
|
||||
},
|
||||
"overview": {
|
||||
"name": "Overview",
|
||||
"subtitle": "An overview of what Bulma as a <strong>framework</strong> is all about",
|
||||
"path": "/documentation/overview"
|
||||
},
|
||||
"overview-start": {
|
||||
"name": "Start",
|
||||
"name": "Getting started",
|
||||
"subtitle": "You only need <strong>1 CSS file</strong> to use Bulma",
|
||||
"path": "/documentation/overview/start"
|
||||
},
|
||||
"overview-customize": {
|
||||
"name": "Customize",
|
||||
"subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
|
||||
"path": "/documentation/overview/customize"
|
||||
},
|
||||
"overview-classes": {
|
||||
"name": "Classes",
|
||||
"name": "CSS Classes",
|
||||
"subtitle": "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want.",
|
||||
"path": "/documentation/overview/classes"
|
||||
},
|
||||
"overview-modular": {
|
||||
"name": "Modular",
|
||||
"name": "Modularity",
|
||||
"subtitle": "Just import what you <strong>need</strong>",
|
||||
"path": "/documentation/overview/modular"
|
||||
},
|
||||
"overview-responsiveness": {
|
||||
"name": "Responsiveness",
|
||||
"subtitle": "Bulma is a <strong>mobile-first</strong> framework",
|
||||
"path": "/documentation/overview/responsiveness"
|
||||
},
|
||||
"overview-variables": {
|
||||
"name": "Variables",
|
||||
"subtitle": "Easily <strong>customize</strong> Bulma to match your design",
|
||||
"path": "/documentation/overview/variables"
|
||||
},
|
||||
"overview-colors": {
|
||||
"name": "Colors",
|
||||
"subtitle": "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components",
|
||||
"path": "/documentation/overview/colors"
|
||||
},
|
||||
"overview-functions": {
|
||||
"name": "Functions",
|
||||
"subtitle": "Utility functions to calculate colors and other values",
|
||||
"path": "/documentation/overview/functions"
|
||||
},
|
||||
"overview-mixins": {
|
||||
"name": "Mixins",
|
||||
"subtitle": "Utility mixins for custom elements and responsive helpers",
|
||||
"path": "/documentation/overview/mixins"
|
||||
},
|
||||
"modifiers": {
|
||||
"name": "Modifiers",
|
||||
"subtitle": "An <strong>easy-to-read</strong> naming system designed for humans",
|
||||
"path": "/documentation/modifiers"
|
||||
},
|
||||
"modifiers-syntax": {
|
||||
@ -70,6 +86,7 @@
|
||||
},
|
||||
"columns": {
|
||||
"name": "Columns",
|
||||
"subtitle": "The power of <strong>Flexbox</strong> in a simple interface",
|
||||
"path": "/documentation/columns"
|
||||
},
|
||||
"columns-basics": {
|
||||
@ -98,6 +115,7 @@
|
||||
},
|
||||
"layout": {
|
||||
"name": "Layout",
|
||||
"subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes",
|
||||
"path": "/documentation/layout"
|
||||
},
|
||||
"layout-level": {
|
||||
@ -251,8 +269,9 @@
|
||||
},
|
||||
"categories": {
|
||||
"overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"],
|
||||
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
|
||||
"modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"],
|
||||
"columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"],
|
||||
"layout": ["layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"],
|
||||
"form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"],
|
||||
"elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"],
|
||||
"components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"]
|
||||
|
||||
28
docs/_includes/components/docs.html
Normal file
28
docs/_includes/components/docs.html
Normal file
@ -0,0 +1,28 @@
|
||||
<nav class="bd-docs">
|
||||
{% for category in site.data.links.categories %}
|
||||
{% assign category_id = category[0] %}
|
||||
{% assign category_links = category[1] %}
|
||||
{% assign category_link = site.data.links.by_id[category_id] %}
|
||||
|
||||
<article class="bd-doc">
|
||||
<h2 class="bd-doc-title title is-5">
|
||||
<a href="{{ site.url }}{{ category_link.path }}">
|
||||
<strong>{{ category_link.name }}</strong>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<div class="bd-doc-content">
|
||||
<ul class="bd-doc-list">
|
||||
{% for link_id in category_links %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
<li {% if link_id == current_link_id %}class="is-current"{% endif %}>
|
||||
<a href="{{ site.url }}{{ link.path }}">
|
||||
{{ link.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</article>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
21
docs/_includes/components/links.html
Normal file
21
docs/_includes/components/links.html
Normal file
@ -0,0 +1,21 @@
|
||||
<nav class="bd-links">
|
||||
{% if include.category_id %}
|
||||
{% assign category_id = include.category_id %}
|
||||
{% assign category_links = site.data.links.categories[category_id] %}
|
||||
{% else %}
|
||||
{% assign category_links = site.data.links.categories %}
|
||||
{% endif %}
|
||||
|
||||
{% for link_id in category_links %}
|
||||
{% if include.category_id %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
{% else %}
|
||||
{% assign thingy = link_id[0] %}
|
||||
{% assign link = site.data.links.by_id[thingy] %}
|
||||
{% endif %}
|
||||
<a class="bd-link" href="{{ site.url }}{{ link.path }}">
|
||||
<h2 class="bd-link-name">{{ link.name }}</h2>
|
||||
<p class="bd-link-subtitle">{{ link.subtitle }}</p>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
31
docs/_includes/elements/categories-nav.html
Normal file
31
docs/_includes/elements/categories-nav.html
Normal file
@ -0,0 +1,31 @@
|
||||
<nav id="categories" class="bd-categories">
|
||||
{% for category in site.data.links.categories %}
|
||||
{% assign category_id = category[0] %}
|
||||
{% assign category_links = category[1] %}
|
||||
{% assign category_link = site.data.links.by_id[category_id] %}
|
||||
|
||||
<div class="bd-category {% if category_id == current_category %}is-active{% endif %}">
|
||||
<header class="bd-category-header">
|
||||
<a class="bd-category-toggle">
|
||||
<span class="icon">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="bd-category-name" href="{{ site.url }}{{ category_link.path }}">
|
||||
<strong>{{ category_link.name }}</strong>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<ul class="bd-category-list">
|
||||
{% for link_id in category_links %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
<li {% if link_id == current_link_id %}class="is-current"{% endif %}>
|
||||
<a href="{{ site.url }}{{ link.path }}">
|
||||
{{ link.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
@ -1,8 +1,14 @@
|
||||
{% assign current_category = page.doc-tab %}
|
||||
{% assign current_link_id = page.breadcrumb | last %}
|
||||
{% assign category_links = site.data.links.categories[current_category] %}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="bd-side">
|
||||
<!-- Empty on purpose -->
|
||||
{% if include.show_categories %}
|
||||
{% include elements/categories-nav.html %}
|
||||
{% endif %}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
<img src="{{ site.url }}/images/bulma-logo.png" alt="{{ site.data.meta.title }}" width="112" height="28">
|
||||
</a>
|
||||
|
||||
<!-- <a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<a class="navbar-item is-hidden-desktop" href="{{ site.data.meta.github }}" target="_blank">
|
||||
<span class="icon" style="color: #333;">
|
||||
<i class="fab fa-lg fa-github"></i>
|
||||
</span>
|
||||
@ -14,7 +14,7 @@
|
||||
<span class="icon" style="color: #55acee;">
|
||||
<i class="fab fa-lg fa-twitter"></i>
|
||||
</span>
|
||||
</a> -->
|
||||
</a>
|
||||
|
||||
<div id="navbarBurger" class="navbar-burger burger" data-target="navMenu{{ include.id }}">
|
||||
<span></span>
|
||||
|
||||
@ -25,6 +25,30 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
// });
|
||||
// }
|
||||
|
||||
// Sidebar links
|
||||
|
||||
const $categories = getAll('#categories .bd-category');
|
||||
|
||||
if ($categories.length > 0) {
|
||||
$categories.forEach(el => {
|
||||
const toggle_el = el.querySelector('.bd-category-toggle');
|
||||
|
||||
toggle_el.addEventListener('click', event => {
|
||||
closeCategories(el);
|
||||
el.classList.toggle('is-active');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function closeCategories(current_el) {
|
||||
$categories.forEach(el => {
|
||||
if (current_el == el) {
|
||||
return;
|
||||
}
|
||||
el.classList.remove('is-active');
|
||||
});
|
||||
}
|
||||
|
||||
// Meta links
|
||||
|
||||
const $metalinks = getAll('#meta a');
|
||||
@ -36,7 +60,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
const target = $el.getAttribute('href');
|
||||
const $target = document.getElementById(target.substring(1));
|
||||
$target.scrollIntoView(true);
|
||||
// window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
@ -289,8 +312,8 @@ document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
// translateHeader(window.scrollY, false);
|
||||
|
||||
let ticking = false;
|
||||
let lastY = 0;
|
||||
// let ticking = false;
|
||||
// let lastY = 0;
|
||||
|
||||
// window.addEventListener('scroll', function() {
|
||||
// const currentY = window.scrollY;
|
||||
|
||||
@ -7,6 +7,7 @@ route: documentation
|
||||
|
||||
{% assign current_category = page.doc-tab %}
|
||||
{% assign current_link_id = page.breadcrumb | last %}
|
||||
{% assign current_link = site.data.links.by_id[current_link_id] %}
|
||||
{% assign category_links = site.data.links.categories[current_category] %}
|
||||
|
||||
{% for link_id in category_links %}
|
||||
@ -73,7 +74,11 @@ route: documentation
|
||||
{{ page.title }}
|
||||
</h1>
|
||||
<p class="subtitle is-4">
|
||||
{{ page.subtitle }}
|
||||
{% if current_link.subtitle %}
|
||||
{{ current_link.subtitle }}
|
||||
{% else %}
|
||||
{{ page.subtitle }}
|
||||
{% endif %}
|
||||
</p>
|
||||
{% if page.meta %}
|
||||
{%
|
||||
@ -95,42 +100,27 @@ route: documentation
|
||||
{{ content }}
|
||||
</div>
|
||||
|
||||
<nav class="bd-prev-next-bis">
|
||||
{% if previous_link %}
|
||||
<a class="bd-prev-next-bis-previous" href="{{ site.url }}{{ previous_link.path }}" title="{{ previous_link.name }}">
|
||||
← {{ previous_link.name }}
|
||||
</a>
|
||||
{% endif %}
|
||||
|
||||
{% if next_link %}
|
||||
<a class="bd-prev-next-bis-next" href="{{ site.url }}{{ next_link.path }}" title="{{ next_link.name }}">
|
||||
{{ next_link.name }} →
|
||||
</a>
|
||||
{% endif %}
|
||||
</nav>
|
||||
|
||||
{% include elements/improve-page.html %}
|
||||
</div>
|
||||
|
||||
<aside class="bd-side">
|
||||
<nav class="bd-categories">
|
||||
{% for category in site.data.links.categories %}
|
||||
<div class="bd-category">
|
||||
{% assign category_id = category[0] %}
|
||||
{% assign category_links = category[1] %}
|
||||
|
||||
{% assign category_link = site.data.links.by_id[category_id] %}
|
||||
|
||||
<header class="bd-category-header">
|
||||
<a class="bd-category-toggle">
|
||||
<span class="icon">
|
||||
<i class="fas fa-chevron-down"></i>
|
||||
</span>
|
||||
</a>
|
||||
<a class="bd-category-name" href="{{ site.url }}{{ category_link.path }}">
|
||||
<strong>{{ category_link.name }}</strong>
|
||||
</a>
|
||||
</header>
|
||||
|
||||
<ul class="bd-category-list {% if category_id == current_category %}is-active{% endif %}">
|
||||
{% for link_id in category_links %}
|
||||
{% assign link = site.data.links.by_id[link_id] %}
|
||||
<li {% if link_id == current_link_id %}class="is-current"{% endif %}>
|
||||
<a href="{{ site.url }}{{ link.path }}">
|
||||
{{ link.name }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</nav>
|
||||
{% unless page.hide_categories %}
|
||||
{% include elements/categories-nav.html %}
|
||||
{% endunless %}
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -46,7 +46,7 @@
|
||||
// Snippet
|
||||
.bd-snippet
|
||||
+block
|
||||
border: 1px solid $yellow
|
||||
border: 2px solid $background
|
||||
margin-top: 2rem
|
||||
position: relative
|
||||
&::before
|
||||
|
||||
@ -40,8 +40,12 @@ $carbon-poweredby-height: 20px
|
||||
min-height: $carbon-height
|
||||
position: relative
|
||||
&:hover
|
||||
.carbon-img
|
||||
opacity: 0.9
|
||||
.carbon-img::after
|
||||
+overlay
|
||||
background-color: rgba(#000, 0.05)
|
||||
content: ""
|
||||
display: block
|
||||
right: $carbon-spacing
|
||||
.carbon-img
|
||||
bottom: 0
|
||||
float: left
|
||||
@ -70,7 +74,7 @@ $carbon-poweredby-height: 20px
|
||||
color: $link
|
||||
.carbon-poweredby
|
||||
bottom: 0
|
||||
color: $text-light
|
||||
color: $grey-light
|
||||
display: inline
|
||||
font-size: $size-small
|
||||
line-height: $carbon-poweredby-height
|
||||
|
||||
@ -1,6 +1,8 @@
|
||||
.highlight
|
||||
background-color: #f5f5f5
|
||||
color: #586e75
|
||||
pre
|
||||
font-size: 12px
|
||||
.c
|
||||
color: #93a1a1
|
||||
.err,
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
$main-spacing: 2.5rem
|
||||
|
||||
.bd-main
|
||||
overflow: hidden
|
||||
position: relative
|
||||
@ -32,6 +30,20 @@ $main-spacing: 2.5rem
|
||||
&:hover
|
||||
background-color: $background
|
||||
|
||||
.bd-prev-next-bis
|
||||
border-top: 2px solid $background
|
||||
display: flex
|
||||
justify-content: space-between
|
||||
margin-top: $main-spacing
|
||||
a
|
||||
margin-top: $main-spacing / 2
|
||||
|
||||
.bd-prev-next-bis-previous
|
||||
margin-right: auto
|
||||
|
||||
.bd-prev-next-bis-next
|
||||
margin-left: auto
|
||||
|
||||
.bd-header
|
||||
border-bottom: 2px solid $background
|
||||
margin-bottom: $main-spacing
|
||||
@ -72,6 +84,12 @@ $main-spacing: 2.5rem
|
||||
color: $link
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.5rem
|
||||
&.is-active
|
||||
.bd-category-toggle
|
||||
.icon
|
||||
transform: rotate(180deg)
|
||||
.bd-category-list
|
||||
display: block
|
||||
|
||||
.bd-category-header
|
||||
position: relative
|
||||
@ -84,6 +102,9 @@ $main-spacing: 2.5rem
|
||||
justify-content: flex-end
|
||||
.icon
|
||||
font-size: 0.75rem
|
||||
transform-origin: center
|
||||
transition-duration: $speed
|
||||
transition-property: transform
|
||||
|
||||
.bd-category-name
|
||||
color: $text-strong
|
||||
@ -101,8 +122,6 @@ $main-spacing: 2.5rem
|
||||
color: $link
|
||||
a
|
||||
color: $text-light
|
||||
&.is-active
|
||||
display: block
|
||||
|
||||
+touch
|
||||
.bd-lead,
|
||||
@ -146,7 +165,7 @@ $sidebar-width: 14rem
|
||||
.bd-header-carbon
|
||||
flex-grow: 0
|
||||
flex-shrink: 0
|
||||
margin: -15px 0 -15px 1.5rem
|
||||
margin: -15px 0 -15px $main-spacing
|
||||
width: $carbon-width
|
||||
.bd-side
|
||||
padding: 3rem 0 3rem 1.5rem
|
||||
|
||||
@ -1,6 +1,75 @@
|
||||
.bd-links
|
||||
counter-reset: bd-links
|
||||
|
||||
.bd-link
|
||||
border-radius: $radius-large
|
||||
color: $text-light
|
||||
display: block
|
||||
font-size: $size-5
|
||||
padding: 1rem 3rem 1.5rem
|
||||
strong
|
||||
font-weight: $weight-semibold
|
||||
&:hover
|
||||
background-color: $white-bis
|
||||
|
||||
.bd-link-name
|
||||
position: relative
|
||||
&::before
|
||||
color: $link
|
||||
counter-increment: bd-links
|
||||
content: counter(bd-links)
|
||||
font-weight: $weight-normal
|
||||
position: absolute
|
||||
right: calc(100% + 0.625em)
|
||||
|
||||
+desktop
|
||||
.bd-links
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
.bd-link
|
||||
width: 50%
|
||||
|
||||
.bd-link-name
|
||||
color: $text-strong
|
||||
font-size: $size-4
|
||||
font-weight: $weight-semibold
|
||||
|
||||
.bd-docs
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
|
||||
.bd-doc
|
||||
margin: 0 3rem 1.5rem 0
|
||||
+mobile
|
||||
min-width: calc(50% - 3rem)
|
||||
+tablet
|
||||
min-width: calc(33.3333% - 3rem)
|
||||
|
||||
.bd-doc-title
|
||||
color: $text-strong
|
||||
a
|
||||
color: currentColor
|
||||
&:hover
|
||||
color: $link
|
||||
&:not(:last-child)
|
||||
margin-bottom: 0.75rem
|
||||
|
||||
.bd-boxes
|
||||
display: flex
|
||||
flex-wrap: wrap
|
||||
justify-content: space-between
|
||||
|
||||
.bd-box
|
||||
border: 4px solid $background
|
||||
border-radius: $radius
|
||||
|
||||
.bd-box-header
|
||||
text-align: center
|
||||
|
||||
.bd-typo
|
||||
text-align: center
|
||||
&:not(:first-child)
|
||||
margin-top: 3rem
|
||||
margin-top: $main-spacing
|
||||
|
||||
.bd-has-text-rss
|
||||
color: $rss
|
||||
@ -22,10 +91,9 @@ $navbar-items: ("documentation": $primary, "templates": $info, "videos": $succes
|
||||
|
||||
.bd-navbar-item-expo
|
||||
&:hover
|
||||
color: #744F09 !important
|
||||
color: #8F6900 !important
|
||||
.icon
|
||||
color: #FF7B00 !important
|
||||
|
||||
color: #F4B300 !important
|
||||
|
||||
.bd-special-shadow
|
||||
background-image: linear-gradient(rgba(#000, 0.1), rgba(#000, 0))
|
||||
|
||||
@ -13,6 +13,7 @@ $star: #FFD257
|
||||
$rss: #f26522
|
||||
|
||||
$carbon-width: 300px
|
||||
$main-spacing: 3rem
|
||||
|
||||
@import "../bulma"
|
||||
@import "./_sass/main"
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,8 +1,9 @@
|
||||
---
|
||||
title: Documentation
|
||||
subtitle: "Everything you need to <strong>create a website</strong> with Bulma"
|
||||
layout: documentation
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
---
|
||||
|
||||
{% include components/links.html %}
|
||||
|
||||
11
docs/documentation/columns.html
Normal file
11
docs/documentation/columns.html
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Columns
|
||||
layout: documentation
|
||||
doc-tab: columns
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- columns
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='columns' %}
|
||||
11
docs/documentation/components.html
Normal file
11
docs/documentation/components.html
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Components
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- components
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='components' %}
|
||||
11
docs/documentation/elements.html
Normal file
11
docs/documentation/elements.html
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Elements
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- elements
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='elements' %}
|
||||
@ -1,9 +1,11 @@
|
||||
---
|
||||
title: Form
|
||||
subtitle: "All <strong>form controls</strong>"
|
||||
layout: documentation
|
||||
doc-tab: form
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- form
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='form' %}
|
||||
|
||||
11
docs/documentation/modifiers.html
Normal file
11
docs/documentation/modifiers.html
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Modifiers
|
||||
layout: documentation
|
||||
doc-tab: modifiers
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- modifiers
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='modifiers' %}
|
||||
@ -2,6 +2,7 @@
|
||||
title: Typography helpers
|
||||
subtitle: "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width"
|
||||
layout: documentation
|
||||
hide_categories: true
|
||||
doc-tab: modifiers
|
||||
doc-subtab: typography-helpers
|
||||
breadcrumb:
|
||||
@ -96,7 +97,7 @@ breadcrumb:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include layout/main-close.html %}
|
||||
{% include layout/main-close.html show_categories=true %}
|
||||
|
||||
<div class="container">
|
||||
<div class="table-container">
|
||||
|
||||
11
docs/documentation/overview.html
Normal file
11
docs/documentation/overview.html
Normal file
@ -0,0 +1,11 @@
|
||||
---
|
||||
title: Overview
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
breadcrumb:
|
||||
- home
|
||||
- documentation
|
||||
- overview
|
||||
---
|
||||
|
||||
{% include components/links.html category_id='overview' %}
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
title: CSS classes
|
||||
subtitle: "Bulma is simply a <strong>collection</strong> of CSS classes. Write the HTML code you want."
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: classes
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
title: Colors
|
||||
subtitle: "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: colors
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
title: Customize Bulma with Sass
|
||||
subtitle: "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: customize
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
title: Functions
|
||||
subtitle: "Utility functions to calculate colors and other values"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: functions
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
title: Mixins
|
||||
subtitle: "Utility mixins for custom elements and responsive helpers"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: mixins
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
title: Modularity
|
||||
subtitle: "Just import what you <strong>need</strong>"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: modular
|
||||
@ -99,5 +98,8 @@ breadcrumb:
|
||||
<code>[disabled]</code>
|
||||
</li>
|
||||
</ul>
|
||||
{% highlight html %}{{ buttons }}{% endhighlight %}
|
||||
|
||||
<div class="bd-snippet-code highlight-full">
|
||||
{% highlight html %}{{ buttons }}{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
title: Responsiveness
|
||||
subtitle: "Bulma is a <strong>mobile-first</strong> framework"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: responsiveness
|
||||
@ -36,7 +35,7 @@ $fullhd-enabled: false
|
||||
<li>the <code>level</code> component will show its children stacked vertically</li>
|
||||
<li>the <code>nav</code> menu will be hidden</li>
|
||||
</ul>
|
||||
<p>For example, you can 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>
|
||||
|
||||
{% include anchor.html name="Breakpoints" %}
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
title: Getting started with Bulma
|
||||
subtitle: "You only need <strong>1 CSS file</strong> to use Bulma"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: start
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
---
|
||||
title: Variables
|
||||
subtitle: "Easily <strong>customize</strong> Bulma to match your design"
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: variables
|
||||
|
||||
@ -27,6 +27,30 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
// });
|
||||
// }
|
||||
|
||||
// Sidebar links
|
||||
|
||||
var $categories = getAll('#categories .bd-category');
|
||||
|
||||
if ($categories.length > 0) {
|
||||
$categories.forEach(function (el) {
|
||||
var toggle_el = el.querySelector('.bd-category-toggle');
|
||||
|
||||
toggle_el.addEventListener('click', function (event) {
|
||||
closeCategories(el);
|
||||
el.classList.toggle('is-active');
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
function closeCategories(current_el) {
|
||||
$categories.forEach(function (el) {
|
||||
if (current_el == el) {
|
||||
return;
|
||||
}
|
||||
el.classList.remove('is-active');
|
||||
});
|
||||
}
|
||||
|
||||
// Meta links
|
||||
|
||||
var $metalinks = getAll('#meta a');
|
||||
@ -38,7 +62,6 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
var target = $el.getAttribute('href');
|
||||
var $target = document.getElementById(target.substring(1));
|
||||
$target.scrollIntoView(true);
|
||||
// window.history.replaceState(null, document.title, `${window.location.origin}${window.location.pathname}${target}`);
|
||||
return false;
|
||||
});
|
||||
});
|
||||
@ -289,8 +312,8 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
|
||||
// translateHeader(window.scrollY, false);
|
||||
|
||||
var ticking = false;
|
||||
var lastY = 0;
|
||||
// let ticking = false;
|
||||
// let lastY = 0;
|
||||
|
||||
// window.addEventListener('scroll', function() {
|
||||
// const currentY = window.scrollY;
|
||||
|
||||
@ -46,7 +46,7 @@ $weight-bold: 700 !default
|
||||
// Responsiveness
|
||||
|
||||
// The container horizontal gap, which acts as the offset for breakpoints
|
||||
$gap: 32px !default
|
||||
$gap: 64px !default
|
||||
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
|
||||
$tablet: 769px !default
|
||||
// 960px container + 4rem
|
||||
@ -62,8 +62,8 @@ $fullhd-enabled: true !default
|
||||
|
||||
$easing: ease-out !default
|
||||
$radius-small: 2px !default
|
||||
$radius: 3px !default
|
||||
$radius-large: 5px !default
|
||||
$radius: 4px !default
|
||||
$radius-large: 6px !default
|
||||
$radius-rounded: 290486px !default
|
||||
$speed: 86ms !default
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user