mirror of
https://github.com/jgthms/bulma
synced 2026-03-20 04:14:29 -07:00
Docs/variables data (#1314)
* Replace variables.json with colors.json and update related files accordingly * Add variables data files * Update variables include template and all related files to use new variables data * Fix mobile breakpoint id typo in responsivness docs page * Fix Liquid syntax error in made-with-bulma docs page * Update bulma sass files count in modular docs page * Use breakpoints data in responsiveness helpers docs page * Use breakpoints and variables data in typography helpers docs page * Add missing page titles in docs pages front matter
This commit is contained in:
bstashio
@@ -1,16 +1,8 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: breadcrumb
|
||||
variables:
|
||||
- name: $breadcrumb-item-color
|
||||
value: $text-light
|
||||
- name: $breadcrumb-item-hover-color
|
||||
value: $link-hover
|
||||
- name: $breadcrumb-item-active-color
|
||||
value: $text-strong
|
||||
- name: $breadcrumb-item-separator-color
|
||||
value: $text
|
||||
---
|
||||
|
||||
{% include subnav-components.html %}
|
||||
@@ -206,7 +198,7 @@ variables:
|
||||
|
||||
{% include snippet.html content=breadcrumb_large_example horizontal=true clipped=true %}
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,22 +1,8 @@
|
||||
---
|
||||
title: Card
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: card
|
||||
variables:
|
||||
- name: $card-color
|
||||
value: $text
|
||||
- name: $card-background-color
|
||||
value: $white
|
||||
- name: $card-shadow
|
||||
value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
- name: $card-header-color
|
||||
value: $text-strong
|
||||
- name: $card-header-shadow
|
||||
value: 0 1px 2px rgba($black, 0.1)
|
||||
- name: $card-header-weight
|
||||
value: $weight-bold
|
||||
- name: $card-footer-border-top
|
||||
value: 1px solid $border
|
||||
---
|
||||
|
||||
{% capture card_example %}
|
||||
@@ -198,7 +184,7 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,32 +1,8 @@
|
||||
---
|
||||
title: Dropdown
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: dropdown
|
||||
variables:
|
||||
- name: $dropdown-content-background-color
|
||||
value: $white
|
||||
- name: $dropdown-content-arrow
|
||||
value: $link
|
||||
- name: $dropdown-content-offset
|
||||
value: 4px
|
||||
- name: $dropdown-content-radius
|
||||
value: $radius
|
||||
- name: $dropdown-content-shadow
|
||||
value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
- name: $dropdown-content-z
|
||||
value: 20
|
||||
- name: $dropdown-item-color
|
||||
value: $grey-dark
|
||||
- name: $dropdown-item-hover-color
|
||||
value: $black
|
||||
- name: $dropdown-item-hover-background-color
|
||||
value: $background
|
||||
- name: $dropdown-item-active-color
|
||||
value: $primary-invert
|
||||
- name: $dropdown-item-active-background-color
|
||||
value: $primary
|
||||
- name: $dropdown-divider-background-color
|
||||
value: $border
|
||||
---
|
||||
|
||||
{% capture dropdown_example %}
|
||||
@@ -368,7 +344,7 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,24 +1,8 @@
|
||||
---
|
||||
title: Menu
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: menu
|
||||
variables:
|
||||
- name: $menu-item-color
|
||||
value: $text
|
||||
- name: $menu-item-radius
|
||||
value: $radius-small
|
||||
- name: $menu-item-hover-color
|
||||
value: $text-strong
|
||||
- name: $menu-item-hover-background-color
|
||||
value: $background
|
||||
- name: $menu-item-active-color
|
||||
value: $link-invert
|
||||
- name: $menu-item-active-background-color
|
||||
value: $link
|
||||
- name: $menu-list-border-left
|
||||
value: 1px solid $border
|
||||
- name: $menu-label-color
|
||||
value: $text-light
|
||||
---
|
||||
|
||||
{% capture menu_example %}
|
||||
@@ -75,7 +59,7 @@ variables:
|
||||
|
||||
{% include snippet.html content=menu_example size="one-third" %}
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,32 +1,8 @@
|
||||
---
|
||||
title: Message
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: message
|
||||
variables:
|
||||
- name: $message-background-color
|
||||
value: $background
|
||||
- name: $message-radius
|
||||
value: $radius
|
||||
- name: $message-header-background-color
|
||||
value: $text
|
||||
- name: $message-header-color
|
||||
value: $text-invert
|
||||
- name: $message-header-padding
|
||||
value: 0.5em 0.75em
|
||||
- name: $message-header-radius
|
||||
value: $radius
|
||||
- name: $message-body-border
|
||||
value: 1px solid $border
|
||||
- name: $message-body-color
|
||||
value: $text
|
||||
- name: $message-body-padding
|
||||
value: 1em 1.25em
|
||||
- name: $message-body-radius
|
||||
value: $radius
|
||||
- name: $message-body-pre-background-color
|
||||
value: $white
|
||||
- name: $message-body-pre-code-background-color
|
||||
value: transparent
|
||||
---
|
||||
|
||||
{% capture message_example %}
|
||||
@@ -51,7 +27,7 @@ variables:
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% for color in site.data.variables.justColors %}
|
||||
{% for color in site.data.colors.justColors %}
|
||||
<article class="message is-{{ color }}">
|
||||
<div class="message-header">
|
||||
<p>{{ color | capitalize }}</p>
|
||||
@@ -123,7 +99,7 @@ variables:
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
</div>
|
||||
</article>
|
||||
{% for color in site.data.variables.justColors %}
|
||||
{% for color in site.data.colors.justColors %}
|
||||
<article class="message is-{{ color }}">
|
||||
<div class="message-body">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <strong>Pellentesque risus mi</strong>, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum <a>felis venenatis</a> efficitur. Aenean ac <em>eleifend lacus</em>, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula, id porttitor mi magna a neque. Donec dui urna, vehicula et sem eget, facilisis sodales sem.
|
||||
@@ -173,7 +149,7 @@ variables:
|
||||
|
||||
{% include snippet.html content=message_large %}
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,50 +1,8 @@
|
||||
---
|
||||
title: Modal
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: modal
|
||||
variables:
|
||||
- name: $modal-z
|
||||
value: 20
|
||||
- name: $modal-background-background-color
|
||||
value: rgba($black, 0.86)
|
||||
- name: $modal-content-width
|
||||
value: 640px
|
||||
- name: $modal-content-margin-mobile
|
||||
value: 20px
|
||||
- name: $modal-content-spacing-mobile
|
||||
value: 160px
|
||||
- name: $modal-content-spacing-tablet
|
||||
value: 40px
|
||||
- name: $modal-close-dimensions
|
||||
value: 40px
|
||||
- name: $modal-close-right
|
||||
value: 20px
|
||||
- name: $modal-close-top
|
||||
value: 20px
|
||||
- name: $modal-card-spacing
|
||||
value: 40px
|
||||
- name: $modal-card-head-background-color
|
||||
value: $background
|
||||
- name: $modal-card-head-border-bottom
|
||||
value: 1px solid $border
|
||||
- name: $modal-card-head-padding
|
||||
value: 20px
|
||||
- name: $modal-card-head-radius
|
||||
value: $radius-large
|
||||
- name: $modal-card-title-color
|
||||
value: $text-strong
|
||||
- name: $modal-card-title-line-height
|
||||
value: 1
|
||||
- name: $modal-card-title-size
|
||||
value: $size-4
|
||||
- name: $modal-card-foot-radius
|
||||
value: $radius-large
|
||||
- name: $modal-card-foot-border-top
|
||||
value: 1px solid $border
|
||||
- name: $modal-card-body-background-color
|
||||
value: $white
|
||||
- name: $modal-card-body-padding
|
||||
value: 20px
|
||||
---
|
||||
|
||||
{% capture modal %}
|
||||
@@ -169,7 +127,7 @@ variables:
|
||||
{% highlight html %}{{ modal_card }}{% endhighlight %}
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,64 +1,8 @@
|
||||
---
|
||||
title: Navbar
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: navbar
|
||||
variables:
|
||||
- name: $navbar-background-color
|
||||
value: $white
|
||||
- name: $navbar-height
|
||||
value: 3.25rem
|
||||
- name: $navbar-item-color
|
||||
value: $grey-dark
|
||||
- name: $navbar-item-hover-color
|
||||
value: $black
|
||||
- name: $navbar-item-hover-background-color
|
||||
value: $background
|
||||
- name: $navbar-item-active-color
|
||||
value: $black
|
||||
- name: $navbar-item-active-background-color
|
||||
value: transparent
|
||||
- name: $navbar-item-img-max-height
|
||||
value: 1.75rem
|
||||
- name: $navbar-tab-hover-background-color
|
||||
value: transparent
|
||||
- name: $navbar-tab-hover-border-bottom-color
|
||||
value: $primary
|
||||
- name: $navbar-tab-active-color
|
||||
value: $primary
|
||||
- name: $navbar-tab-active-background-color
|
||||
value: transparent
|
||||
- name: $navbar-tab-active-border-bottom-color
|
||||
value: $primary
|
||||
- name: $navbar-tab-active-border-bottom-style
|
||||
value: solid
|
||||
- name: $navbar-tab-active-border-bottom-width
|
||||
value: 3px
|
||||
- name: $navbar-dropdown-background-color
|
||||
value: $white
|
||||
- name: $navbar-dropdown-border-top
|
||||
value: 1px solid $border
|
||||
- name: $navbar-dropdown-offset
|
||||
value: -4px
|
||||
- name: $navbar-dropdown-arrow
|
||||
value: $link
|
||||
- name: $navbar-dropdown-radius
|
||||
value: $radius-large
|
||||
- name: $navbar-dropdown-z
|
||||
value: 20
|
||||
- name: $navbar-dropdown-boxed-radius
|
||||
value: $radius-large
|
||||
- name: $navbar-dropdown-boxed-shadow
|
||||
value: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
- name: $navbar-dropdown-item-hover-color
|
||||
value: $black
|
||||
- name: $navbar-dropdown-item-hover-background-color
|
||||
value: $background
|
||||
- name: $navbar-dropdown-item-active-color
|
||||
value: $primary
|
||||
- name: $navbar-dropdown-item-active-background-color
|
||||
value: $background
|
||||
- name: $navbar-divider-background-color
|
||||
value: $border
|
||||
---
|
||||
|
||||
{% include subnav-components.html %}
|
||||
@@ -1072,7 +1016,7 @@ document.addEventListener('DOMContentLoaded', function () {
|
||||
{% include examples/navbar-color.html color="white" light=true %}
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,40 +1,8 @@
|
||||
---
|
||||
title: Pagination
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: pagination
|
||||
variables:
|
||||
- name: $pagination-color
|
||||
value: $grey-darker
|
||||
- name: $pagination-border-color
|
||||
value: $grey-lighter
|
||||
- name: $pagination-margin
|
||||
value: -0.25rem
|
||||
- name: $pagination-hover-color
|
||||
value: $link-hover
|
||||
- name: $pagination-hover-border-color
|
||||
value: $link-hover-border
|
||||
- name: $pagination-focus-color
|
||||
value: $link-focus
|
||||
- name: $pagination-focus-border-color
|
||||
value: $link-focus-border
|
||||
- name: $pagination-active-color
|
||||
value: $link-active
|
||||
- name: $pagination-active-border-color
|
||||
value: $link-active-border
|
||||
- name: $pagination-disabled-color
|
||||
value: $grey
|
||||
- name: $pagination-disabled-background-color
|
||||
value: $grey-lighter
|
||||
- name: $pagination-disabled-border-color
|
||||
value: $grey-lighter
|
||||
- name: $pagination-current-color
|
||||
value: $link-invert
|
||||
- name: $pagination-current-background-color
|
||||
value: $link
|
||||
- name: $pagination-current-border-color
|
||||
value: $link
|
||||
- name: $pagination-ellipsis-color
|
||||
value: $grey-light
|
||||
---
|
||||
|
||||
{% capture pagination_example %}
|
||||
@@ -238,7 +206,7 @@ variables:
|
||||
|
||||
{% include snippet.html content=pagination_large_example horizontal=true more=true %}
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,46 +1,8 @@
|
||||
---
|
||||
title: Panel
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: panel
|
||||
variables:
|
||||
- name: $panel-item-border
|
||||
value: 1px solid $border
|
||||
- name: $panel-heading-background-color
|
||||
value: $background
|
||||
- name: $panel-heading-color
|
||||
value: $text-strong
|
||||
- name: $panel-heading-line-height
|
||||
value: 1.25
|
||||
- name: $panel-heading-padding
|
||||
value: 0.5em 0.75em
|
||||
- name: $panel-heading-radius
|
||||
value: $radius
|
||||
- name: $panel-heading-size
|
||||
value: 1.25em
|
||||
- name: $panel-heading-weight
|
||||
value: $weight-light
|
||||
- name: $panel-tab-border-bottom
|
||||
value: 1px solid $border
|
||||
- name: $panel-tab-active-border-bottom-color
|
||||
value: $link-active-border
|
||||
- name: $panel-tab-active-color
|
||||
value: $link-active
|
||||
- name: $panel-list-item-color
|
||||
value: $text
|
||||
- name: $panel-list-item-hover-color
|
||||
value: $link
|
||||
- name: $panel-block-color
|
||||
value: $text-strong
|
||||
- name: $panel-block-hover-background-color
|
||||
value: $background
|
||||
- name: $panel-block-active-border-left-color
|
||||
value: $link
|
||||
- name: $panel-block-active-color
|
||||
value: $link-active
|
||||
- name: $panel-block-active-icon-color
|
||||
value: $link
|
||||
- name: $panel-icon-color
|
||||
value: $text-light
|
||||
---
|
||||
|
||||
{% capture panel_example %}
|
||||
@@ -154,7 +116,7 @@ variables:
|
||||
|
||||
{% include snippet.html content=panel_example size="one-third" %}
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,56 +1,8 @@
|
||||
---
|
||||
title: Tabs
|
||||
layout: documentation
|
||||
doc-tab: components
|
||||
doc-subtab: tabs
|
||||
variables:
|
||||
- name: $tabs-border-bottom-color
|
||||
value: $border
|
||||
- name: $tabs-border-bottom-style
|
||||
value: solid
|
||||
- name: $tabs-border-bottom-width
|
||||
value: 1px
|
||||
- name: $tabs-link-color
|
||||
value: $text
|
||||
- name: $tabs-link-hover-border-bottom-color
|
||||
value: $text-strong
|
||||
- name: $tabs-link-hover-color
|
||||
value: $text-strong
|
||||
- name: $tabs-link-active-border-bottom-color
|
||||
value: $primary
|
||||
- name: $tabs-link-active-color
|
||||
value: $primary
|
||||
- name: $tabs-link-padding
|
||||
value: 0.5em 1em
|
||||
- name: $tabs-boxed-link-radius
|
||||
value: $radius
|
||||
- name: $tabs-boxed-link-hover-background-color
|
||||
value: $background
|
||||
- name: $tabs-boxed-link-hover-border-bottom-color
|
||||
value: $border
|
||||
- name: $tabs-boxed-link-active-background-color
|
||||
value: $white
|
||||
- name: $tabs-boxed-link-active-border-color
|
||||
value: $border
|
||||
- name: $tabs-boxed-link-active-border-bottom-color
|
||||
value: transparent
|
||||
- name: $tabs-toggle-link-border-color
|
||||
value: $border
|
||||
- name: $tabs-toggle-link-border-style
|
||||
value: solid
|
||||
- name: $tabs-toggle-link-border-width
|
||||
value: 1px
|
||||
- name: $tabs-toggle-link-hover-background-color
|
||||
value: $background
|
||||
- name: $tabs-toggle-link-hover-border-color
|
||||
value: $border-hover
|
||||
- name: $tabs-toggle-link-radius
|
||||
value: $radius
|
||||
- name: $tabs-toggle-link-active-background-color
|
||||
value: $primary
|
||||
- name: $tabs-toggle-link-active-border-color
|
||||
value: $primary
|
||||
- name: $tabs-toggle-link-active-color
|
||||
value: $primary-invert
|
||||
---
|
||||
|
||||
{% capture tabs_example %}
|
||||
@@ -453,7 +405,7 @@ variables:
|
||||
|
||||
{% include snippet.html content=tabs_toggle_fullwidth_large_example horizontal=true more=true %}
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html type='component' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,21 +3,6 @@ title: Box
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: box
|
||||
variables:
|
||||
- name: $box-color
|
||||
value: $text
|
||||
- name: $box-background-color
|
||||
value: $white
|
||||
- name: $box-radius
|
||||
value: $radius-large
|
||||
- name: $box-shadow
|
||||
value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
|
||||
- name: $box-padding
|
||||
value: 1.25rem
|
||||
- name: $box-link-hover-shadow
|
||||
value: 0 2px 3px rgba($black, 0.1), 0 0 0 1px $link
|
||||
- name: $box-link-active-shadow
|
||||
value: inset 0 1px 2px rgba($black, 0.2), 0 0 0 1px $link
|
||||
---
|
||||
|
||||
{% include subnav-elements.html %}
|
||||
@@ -81,7 +66,7 @@ variables:
|
||||
|
||||
{% include snippet.html content=box_example more=true %}
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,49 +3,6 @@ title: Button
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: button
|
||||
variables:
|
||||
- name: $button-color
|
||||
value: $grey-darker
|
||||
- name: $button-background-color
|
||||
value: $white
|
||||
- name: $button-border-color
|
||||
value: $grey-lighter
|
||||
- name: $button-hover-color
|
||||
value: $link-hover
|
||||
- name: $button-hover-border-color
|
||||
value: $link-hover-border
|
||||
- name: $button-focus-color
|
||||
value: $link-focus
|
||||
- name: $button-focus-border-color
|
||||
value: $link-focus-border
|
||||
- name: $button-focus-box-shadow-size
|
||||
value: 0 0 0 0.125em
|
||||
- name: $button-focus-box-shadow-color
|
||||
value: rgba($link, 0.25)
|
||||
- name: $button-active-color
|
||||
value: $link-active
|
||||
- name: $button-active-border-color
|
||||
value: $link-active-border
|
||||
- name: $button-link-color
|
||||
value: $text
|
||||
- name: $button-link-hover-background-color
|
||||
value: $background
|
||||
- name: $button-link-hover-color
|
||||
value: $text-strong
|
||||
- name: $button-disabled-background-color
|
||||
value: $white
|
||||
- name: $button-disabled-border-color
|
||||
value: $grey-lighter
|
||||
- name: $button-disabled-shadow
|
||||
value: none
|
||||
- name: $button-disabled-opacity
|
||||
value: 0.5
|
||||
- name: $button-static-color
|
||||
value: $grey
|
||||
- name: $button-static-background-color
|
||||
value: $white-ter
|
||||
- name: $button-static-border-color
|
||||
value: $grey-lighter
|
||||
---
|
||||
|
||||
{% capture button_example %}
|
||||
@@ -615,7 +572,7 @@ variables:
|
||||
|
||||
{% include snippet.html content=button_group_addons_example %}
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,39 +3,6 @@ title: Content
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: content
|
||||
variables:
|
||||
- name: $content-heading-color
|
||||
value: $text-strong
|
||||
- name: $content-heading-weight
|
||||
value: $weight-normal
|
||||
- name: $content-heading-line-height
|
||||
value: 1.125
|
||||
- name: $content-blockquote-background-color
|
||||
value: $background
|
||||
- name: $content-blockquote-border-left
|
||||
value: 5px solid $border
|
||||
- name: $content-blockquote-padding
|
||||
value: 1.25em 1.5em
|
||||
- name: $content-pre-padding
|
||||
value: 1.25em 1.5em
|
||||
- name: $content-table-cell-border
|
||||
value: 1px solid $border
|
||||
- name: $content-table-cell-border-width
|
||||
value: 0 0 1px
|
||||
- name: $content-table-cell-padding
|
||||
value: 0.5em 0.75em
|
||||
- name: $content-table-cell-heading-color
|
||||
value: $text-strong
|
||||
- name: $content-table-row-hover-background-color
|
||||
value: $background
|
||||
- name: $content-table-head-cell-border-width
|
||||
value: 0 0 2px
|
||||
- name: $content-table-head-cell-color
|
||||
value: $text-strong
|
||||
- name: $content-table-foot-cell-border-width
|
||||
value: 2px 0 0
|
||||
- name: $content-table-foot-cell-color
|
||||
value: $text-strong
|
||||
---
|
||||
|
||||
{% capture content_pre %}
|
||||
@@ -214,7 +181,7 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html element=true %}
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -6,16 +6,6 @@ mdi: true
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: icon
|
||||
variables:
|
||||
- name: $icon-dimensions
|
||||
value: 1.5rem
|
||||
- name: $icon-dimensions-small
|
||||
value: 1rem
|
||||
- name: $icon-dimensions-medium
|
||||
value: 2rem
|
||||
- name: $icon-dimensions-large
|
||||
value: 3rem
|
||||
|
||||
---
|
||||
|
||||
{% capture icon_example %}
|
||||
@@ -954,7 +944,7 @@ variables:
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -11,9 +11,6 @@ dimensions:
|
||||
- 64
|
||||
- 96
|
||||
- 128
|
||||
variables:
|
||||
- name: $dimensions
|
||||
value: 16 24 32 48 64 96 128
|
||||
---
|
||||
|
||||
{% capture image %}
|
||||
@@ -122,7 +119,7 @@ variables:
|
||||
<p>The <code>.image</code> container will take up the <strong>whole width</strong> while maintaining the perfect ratio.</p>
|
||||
</div>
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,13 +3,6 @@ title: Notification
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: notification
|
||||
variables:
|
||||
- name: $notification-background-color
|
||||
value: $background
|
||||
- name: $notification-radius
|
||||
value: $radius
|
||||
- name: $notification-padding
|
||||
value: 1.25rem 2.5rem 1.25rem 1.5rem
|
||||
---
|
||||
|
||||
{% capture notification %}
|
||||
@@ -22,7 +15,7 @@ variables:
|
||||
{% endcapture %}
|
||||
|
||||
{% capture notification_colors %}
|
||||
{% for color in site.data.variables.justColors %}
|
||||
{% for color in site.data.colors.justColors %}
|
||||
<div class="notification is-{{ color }}">
|
||||
<button class="delete"></button>
|
||||
Primar lorem ipsum dolor sit amet, consectetur
|
||||
@@ -55,7 +48,7 @@ variables:
|
||||
|
||||
{% include snippet.html content=notification_colors %}
|
||||
|
||||
{% include variables.html %}
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,11 +3,6 @@ title: Progress Bar
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: progress
|
||||
variables:
|
||||
- name: $progress-bar-background-color
|
||||
value: $border
|
||||
- name: $progress-value-background-color
|
||||
value: $text
|
||||
---
|
||||
|
||||
{% capture progress %}
|
||||
@@ -57,7 +52,7 @@ variables:
|
||||
|
||||
{% include snippet.html content=progress_sizes %}
|
||||
|
||||
{% include variables.html element=true %}
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,37 +3,6 @@ title: Table
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: table
|
||||
variables:
|
||||
- name: $table-color
|
||||
value: $grey-darker
|
||||
- name: $table-background-color
|
||||
value: $white
|
||||
- name: $table-cell-border
|
||||
value: 1px solid $grey-lighter
|
||||
- name: $table-cell-border-width
|
||||
value: 0 0 1px
|
||||
- name: $table-cell-padding
|
||||
value: 0.5em 0.75em
|
||||
- name: $table-cell-heading-color
|
||||
value: $text-strong
|
||||
- name: $table-head-cell-border-width
|
||||
value: 0 0 2px
|
||||
- name: $table-head-cell-color
|
||||
value: $text-strong
|
||||
- name: $table-foot-cell-border-width
|
||||
value: 2px 0 0
|
||||
- name: $table-foot-cell-color
|
||||
value: $text-strong
|
||||
- name: $table-row-hover-background-color
|
||||
value: $white-bis
|
||||
- name: $table-row-active-background-color
|
||||
value: $primary
|
||||
- name: $table-row-active-color
|
||||
value: $primary-invert
|
||||
- name: $table-striped-row-even-background-color
|
||||
value: $white-bis
|
||||
- name: $table-striped-row-even-hover-background-color
|
||||
value: $white-ter
|
||||
---
|
||||
|
||||
{% capture table_example %}
|
||||
@@ -623,7 +592,7 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html element=true %}
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,15 +3,6 @@ title: Tags
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: tag
|
||||
variables:
|
||||
- name: $tag-background-color
|
||||
value: $background
|
||||
- name: $tag-color
|
||||
value: $text
|
||||
- name: $tag-radius
|
||||
value: $radius
|
||||
- name: $tag-delete-margin
|
||||
value: 1px
|
||||
---
|
||||
|
||||
{% capture tag %}
|
||||
@@ -456,6 +447,6 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html element=true %}
|
||||
{% include variables.html type='element' %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,27 +3,6 @@ title: Title and Subtitle
|
||||
layout: documentation
|
||||
doc-tab: elements
|
||||
doc-subtab: title
|
||||
variables:
|
||||
- name: $title-color
|
||||
value: $grey-darker
|
||||
- name: $title-size
|
||||
value: $size-3
|
||||
- name: $title-weight
|
||||
value: $weight-semibold
|
||||
- name: $title-strong-color
|
||||
value: inherit
|
||||
- name: $title-strong-weight
|
||||
value: inherit
|
||||
- name: $subtitle-color
|
||||
value: $grey-dark
|
||||
- name: $subtitle-size
|
||||
value: $size-5
|
||||
- name: $subtitle-weight
|
||||
value: $weight-normal
|
||||
- name: $subtitle-strong-color
|
||||
value: $grey-darker
|
||||
- name: $subtitle-strong-weight
|
||||
value: $weight-semibold
|
||||
---
|
||||
|
||||
{% capture default %}
|
||||
@@ -203,7 +182,7 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html element=true %}
|
||||
{% include variables.html type='element' %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -4,27 +4,17 @@ layout: documentation
|
||||
doc-tab: form
|
||||
doc-subtab: file
|
||||
file_name: "Screen Shot 2017-07-29 at 15.54.25.png"
|
||||
variables:
|
||||
- name: $file-border-color
|
||||
value: transparent
|
||||
- name: $file-radius
|
||||
value: $radius
|
||||
- name: $file-cta-background-color
|
||||
value: $white-ter
|
||||
- name: $file-cta-color
|
||||
value: $grey-dark
|
||||
- name: $file-cta-hover-color
|
||||
value: $grey-darker
|
||||
- name: $file-cta-active-color
|
||||
value: $grey-darker
|
||||
- name: $file-name-border-color
|
||||
value: $file-cta-background-color
|
||||
- name: $file-name-border-style
|
||||
value: solid
|
||||
- name: $file-name-border-width
|
||||
value: 1px 1px 1px 0
|
||||
- name: $file-name-max-width
|
||||
value: 16em
|
||||
variables_keys:
|
||||
- file-border-color
|
||||
- file-radius
|
||||
- file-cta-background-color
|
||||
- file-cta-color
|
||||
- file-cta-hover-color
|
||||
- file-cta-active-color
|
||||
- file-name-border-color
|
||||
- file-name-border-style
|
||||
- file-name-border-width
|
||||
- file-name-max-width
|
||||
---
|
||||
|
||||
{% capture file %}
|
||||
@@ -749,7 +739,41 @@ variables:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include variables.html element=true %}
|
||||
{% include anchor.html name="Variables" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use <a href="{{ site.github | append: '/blob/master/sass/elements/form.sass#L25,L36' }}" target="_blank">these variables</a> to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
{% for key in page.variables_keys %}
|
||||
{% assign variable = site.data.variables.elements.form.vars[key] %}
|
||||
<tr>
|
||||
<td>
|
||||
<code>{{ variable.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ variable.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,21 +3,15 @@ title: Form controls
|
||||
layout: documentation
|
||||
doc-tab: form
|
||||
doc-subtab: general
|
||||
variables:
|
||||
- name: $control-radius
|
||||
value: $radius
|
||||
- name: $control-radius-small
|
||||
value: $radius-small
|
||||
- name: $control-padding-vertical
|
||||
value: calc(0.375em - 1px)
|
||||
- name: $control-padding-horizontal
|
||||
value: calc(0.625em - 1px)
|
||||
- name: $label-color
|
||||
value: $grey-darker
|
||||
- name: $label-weight
|
||||
value: $weight-bold
|
||||
- name: $help-size
|
||||
value: $size-small
|
||||
variables_controls_keys:
|
||||
- control-radius
|
||||
- control-radius-small
|
||||
- control-padding-vertical
|
||||
- control-padding-horizontal
|
||||
variables_form_keys:
|
||||
- label-color
|
||||
- label-weight
|
||||
- help-size
|
||||
---
|
||||
|
||||
{% capture example %}
|
||||
@@ -1027,10 +1021,53 @@ variables:
|
||||
</div>
|
||||
|
||||
{% include snippet.html content=field_label_example horizontal=true more=true %}
|
||||
|
||||
{% include anchor.html name="Variables" %}
|
||||
|
||||
{% capture custom_message %}Form elements can be <strong>customized</strong> using the following generic variables. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endcapture %}
|
||||
<div class="content">
|
||||
<p>
|
||||
Form elements can be <strong>customized</strong> using the following generic variables. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{% include variables.html custom_message = custom_message %}
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
{% for key in page.variables_controls_keys %}
|
||||
{% assign variable = site.data.variables.utilities.controls.vars[key] %}
|
||||
<tr>
|
||||
<td>
|
||||
<code>{{ variable.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ variable.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% for key in page.variables_form_keys %}
|
||||
{% assign variable = site.data.variables.elements.form.vars[key] %}
|
||||
<tr>
|
||||
<td>
|
||||
<code>{{ variable.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ variable.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,37 +3,24 @@ title: Input
|
||||
layout: documentation
|
||||
doc-tab: form
|
||||
doc-subtab: input
|
||||
variables:
|
||||
- name: $input-color
|
||||
value: $grey-darker
|
||||
- name: $input-background-color
|
||||
value: $white
|
||||
- name: $input-border-color
|
||||
value: $grey-lighter
|
||||
- name: $input-shadow
|
||||
value: inset 0 1px 2px rgba($black, 0.1)
|
||||
- name: $input-hover-color
|
||||
value: $grey-darker
|
||||
- name: $input-hover-border-color
|
||||
value: $grey-light
|
||||
- name: $input-focus-color
|
||||
value: $grey-darker
|
||||
- name: $input-focus-border-color
|
||||
value: $link
|
||||
- name: $input-disabled-color
|
||||
value: $text-light
|
||||
- name: $input-disabled-background-color
|
||||
value: $background
|
||||
- name: $input-disabled-border-color
|
||||
value: $background
|
||||
- name: $input-arrow
|
||||
value: $link
|
||||
- name: $input-icon-color
|
||||
value: $grey-lighter
|
||||
- name: $input-icon-active-color
|
||||
value: $grey
|
||||
- name: $input-radius
|
||||
value: $radius
|
||||
variables_keys:
|
||||
- input-color
|
||||
- input-background-color
|
||||
- input-border-color
|
||||
- input-shadow
|
||||
- input-hover-color
|
||||
- input-hover-border-color
|
||||
- input-focus-color
|
||||
- input-focus-border-color
|
||||
- input-focus-box-shadow-size
|
||||
- input-focus-box-shadow-color
|
||||
- input-disabled-color
|
||||
- input-disabled-background-color
|
||||
- input-disabled-border-color
|
||||
- input-arrow
|
||||
- input-icon-color
|
||||
- input-icon-active-color
|
||||
- input-radius
|
||||
---
|
||||
|
||||
{% capture input_example %}
|
||||
@@ -484,7 +471,41 @@ variables:
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% include variables.html element=true %}
|
||||
{% include anchor.html name="Variables" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use <a href="{{ site.github | append: '/blob/master/sass/elements/form.sass#L1,L23' }}" target="_blank">these variables</a> to <strong>customize</strong> this element. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
{% for key in page.variables_keys %}
|
||||
{% assign variable = site.data.variables.elements.form.vars[key] %}
|
||||
<tr>
|
||||
<td>
|
||||
<code>{{ variable.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ variable.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,9 +3,6 @@ title: Footer
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: footer
|
||||
variables:
|
||||
- name: $footer-background-color
|
||||
value: $background
|
||||
---
|
||||
|
||||
{% include subnav-layout.html %}
|
||||
@@ -33,6 +30,6 @@ variables:
|
||||
|
||||
{% include snippet.html content=footer_example horizontal=true more=true %}
|
||||
|
||||
{% include variables.html layout=true %}
|
||||
{% include variables.html %}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Level
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: level
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
---
|
||||
title: Media Object
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: media-object
|
||||
|
||||
@@ -3,13 +3,6 @@ title: Section
|
||||
layout: documentation
|
||||
doc-tab: layout
|
||||
doc-subtab: section
|
||||
variables:
|
||||
- name: $section-padding
|
||||
value: 3rem 1.5rem
|
||||
- name: $section-padding-medium
|
||||
value: 9rem 1.5rem
|
||||
- name: $section-padding-large
|
||||
value: 18rem 1.5rem
|
||||
---
|
||||
|
||||
{% include subnav-layout.html %}
|
||||
@@ -44,7 +37,7 @@ variables:
|
||||
<p>You can use the modifiers <code>is-medium</code> and <code>is-large</code> to change the <strong>spacing</strong>.</p>
|
||||
</div>
|
||||
|
||||
{% include variables.html layout=true %}
|
||||
{% include variables.html %}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -11,26 +11,19 @@ doc-subtab: responsive-helpers
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Mobile<br>
|
||||
Up to <code>768px</code>
|
||||
</th>
|
||||
<th>
|
||||
Tablet<br>
|
||||
Between <code>769px</code> and <code>1007px</code>
|
||||
</th>
|
||||
<th>
|
||||
Desktop<br>
|
||||
Between <code>1008px</code> and <code>1199px</code>
|
||||
</th>
|
||||
<th>
|
||||
Widescreen<br>
|
||||
Between <code>1200px</code> and <code>1391px</code>
|
||||
</th>
|
||||
<th>
|
||||
FullHD<br>
|
||||
Above <code>1392px</code>
|
||||
</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th>
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% endcapture %}
|
||||
|
||||
@@ -5,39 +5,35 @@ doc-tab: modifiers
|
||||
doc-subtab: typography-helpers
|
||||
---
|
||||
|
||||
{% assign initial_vars = site.data.variables.utilities.initial-variables.vars %}
|
||||
{% assign sizes = site.data.variables.utilities.derived-variables.vars.sizes.value | split: ' ' %}
|
||||
|
||||
{% capture thead %}
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Class
|
||||
</th>
|
||||
<th>
|
||||
Mobile<br>
|
||||
Up to <code>768px</code>
|
||||
</th>
|
||||
<th>
|
||||
Tablet<br>
|
||||
Between <code>769px</code> and <code>1007px</code>
|
||||
</th>
|
||||
<th>
|
||||
Desktop<br>
|
||||
Between <code>1008px</code> and <code>1199px</code>
|
||||
</th>
|
||||
<th>
|
||||
Widescreen<br>
|
||||
Between <code>1200px</code> and <code>1391px</code>
|
||||
</th>
|
||||
<th>
|
||||
FullHD<br>
|
||||
Above <code>1392px</code>
|
||||
</th>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<th>
|
||||
{{ breakpoint.name }}<br>
|
||||
{% if breakpoint.id == 'mobile' %}
|
||||
Up to <code>{{ breakpoint.to }}px</code>
|
||||
{% elsif breakpoint.id == 'fullhd' %}
|
||||
<code>{{ breakpoint.from }}px</code> and above
|
||||
{% else %}
|
||||
Between <code>{{ breakpoint.from }}px</code> and <code>{{ breakpoint.to }}px</code>
|
||||
{% endif %}
|
||||
</th>
|
||||
{% endfor %}
|
||||
</tr>
|
||||
</thead>
|
||||
{% endcapture %}
|
||||
|
||||
{% capture size1 %}
|
||||
<td class="is-narrow">
|
||||
<p class="notification is-success"><code>3rem</code></p>
|
||||
<p class="notification is-success"><code>{{ initial_vars.size-1.value }}</code></p>
|
||||
</td>
|
||||
{% endcapture %}
|
||||
|
||||
@@ -66,7 +62,7 @@ doc-subtab: typography-helpers
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
There are <strong>7 sizes</strong> to choose from:
|
||||
There are <strong>{{ sizes | size }} sizes</strong> to choose from:
|
||||
</p>
|
||||
</div>
|
||||
|
||||
@@ -82,34 +78,13 @@ doc-subtab: typography-helpers
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><code>is-size-1</code></td>
|
||||
<td><code>3rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-2</code></td>
|
||||
<td><code>2.5rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-3</code></td>
|
||||
<td><code>2rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-4</code></td>
|
||||
<td><code>1.5rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-5</code></td>
|
||||
<td><code>1.25rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-6</code></td>
|
||||
<td><code>1rem</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><code>is-size-7</code></td>
|
||||
<td><code>0.75rem</code></td>
|
||||
</tr>
|
||||
{% for size in sizes %}
|
||||
<tr>
|
||||
{% assign key = 'size-' | append: forloop.index %}
|
||||
<td><code>is-size-{{ forloop.index }}</code></td>
|
||||
<td><code>{{ initial_vars[key].value }}</code></td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
|
||||
@@ -4,16 +4,16 @@ layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: colors
|
||||
colors:
|
||||
- id: "white"
|
||||
- id: "black"
|
||||
- id: "light"
|
||||
- id: "dark"
|
||||
- id: "primary"
|
||||
- id: "link"
|
||||
- id: "info"
|
||||
- id: "success"
|
||||
- id: "warning"
|
||||
- id: "danger"
|
||||
- white
|
||||
- black
|
||||
- light
|
||||
- dark
|
||||
- primary
|
||||
- link
|
||||
- info
|
||||
- success
|
||||
- warning
|
||||
- danger
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
@@ -47,8 +47,8 @@ colors:
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for color in page.colors %}
|
||||
{% assign derivedColor = site.data.variables.derived.colors | where: "id", color.id | first %}
|
||||
{% assign initialColor = site.data.variables.initial.colors | where: "id", derivedColor.valueId | first %}
|
||||
{% assign derivedColor = site.data.colors.derived | where: "id", color | first %}
|
||||
{% assign initialColor = site.data.colors.initial | where: "id", derivedColor.valueId | first %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ derivedColor.id | capitalize }}</strong>
|
||||
@@ -70,7 +70,7 @@ colors:
|
||||
{% include elements/color-square.html value=derivedColor.invertValue %}
|
||||
</td>
|
||||
{% elsif derivedColor.invertId %}
|
||||
{% assign invertColor = site.data.variables.initial.colors | where: "id", derivedColor.invertId | first %}
|
||||
{% assign invertColor = site.data.colors.initial | where: "id", derivedColor.invertId | first %}
|
||||
<td>
|
||||
<code>${{ derivedColor.invertId }}</code>
|
||||
</td>
|
||||
|
||||
@@ -16,7 +16,7 @@ doc-subtab: modular
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
Bulma consists of <strong>40</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
|
||||
Bulma consists of <strong>39</strong> <code>.sass</code> files that you can import <strong>individually.</strong>
|
||||
</p>
|
||||
<p>
|
||||
For example, let's say you only want the Bulma <strong>columns.</strong>
|
||||
|
||||
@@ -3,17 +3,12 @@ title: Responsiveness
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: responsiveness
|
||||
variables:
|
||||
- name: $gap
|
||||
value: 32px
|
||||
- name: $tablet
|
||||
value: 769px
|
||||
- name: $desktop
|
||||
value: 960px + (2 * $gap)
|
||||
- name: $widescreen
|
||||
value: 1152px + (2 * $gap)
|
||||
- name: $fullhd
|
||||
value: 1344px + (2 * $gap)
|
||||
variables_keys:
|
||||
- gap
|
||||
- tablet
|
||||
- desktop
|
||||
- widescreen
|
||||
- fullhd
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
@@ -47,7 +42,7 @@ variables:
|
||||
<ul>
|
||||
{% for breakpoint_hash in site.data.breakpoints %}
|
||||
{% assign breakpoint = breakpoint_hash[1] %}
|
||||
<li>{% if breakpoint.id == 'fullhd' %}<span class="tag is-success">New!</span> {% endif %}<code>{{ breakpoint.id }}</code>: {% if breakpoint.id == 'Mobile' %}up to <code>{{ breakpoint.to }}px</code>{% else %}from <code>{{ breakpoint.from }}px</code>{% endif %}</li>
|
||||
<li>{% if breakpoint.id == 'fullhd' %}<span class="tag is-success">New!</span> {% endif %}<code>{{ breakpoint.id }}</code>: {% if breakpoint.id == 'mobile' %}up to <code>{{ breakpoint.to }}px</code>{% else %}from <code>{{ breakpoint.from }}px</code>{% endif %}</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
@@ -190,9 +185,41 @@ variables:
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
{% capture custom_message %}You can use <a href="{{ variables_file_url }}" target="_blank">these variables</a> to <strong>customize</strong> the responsive breakpoints. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.{% endcapture %}
|
||||
|
||||
{% include variables.html custom_message = custom_message %}
|
||||
{% include anchor.html name="Variables" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
You can use <a href="{{ variables_file_url }}" target="_blank">these variables</a> to <strong>customize</strong> the responsive breakpoints. Simply set one or multiple of these variables <em>before</em> importing Bulma. <a href="{{ site.url }}/documentation/overview/customize/">Learn how</a>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tfoot>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Default value</th>
|
||||
</tr>
|
||||
</tfoot>
|
||||
<tbody>
|
||||
{% for key in page.variables_keys %}
|
||||
{% assign variable = site.data.variables.utilities.initial-variables.vars[key] %}
|
||||
<tr>
|
||||
<td>
|
||||
<code>{{ variable.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ variable.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -3,234 +3,6 @@ title: Variables
|
||||
layout: documentation
|
||||
doc-tab: overview
|
||||
doc-subtab: variables
|
||||
initial_colors:
|
||||
- name: $black
|
||||
value: hsl(0, 0%, 4%)
|
||||
- name: $black-bis
|
||||
value: hsl(0, 0%, 7%)
|
||||
- name: $black-ter
|
||||
value: hsl(0, 0%, 14%)
|
||||
- name: $grey-darker
|
||||
value: hsl(0, 0%, 21%)
|
||||
- name: $grey-dark
|
||||
value: hsl(0, 0%, 29%)
|
||||
- name: $grey
|
||||
value: hsl(0, 0%, 48%)
|
||||
- name: $grey-light
|
||||
value: hsl(0, 0%, 71%)
|
||||
- name: $grey-lighter
|
||||
value: hsl(0, 0%, 86%)
|
||||
- name: $white-ter
|
||||
value: hsl(0, 0%, 96%)
|
||||
- name: $white-bis
|
||||
value: hsl(0, 0%, 98%)
|
||||
- name: $white
|
||||
value: hsl(0, 0%, 100%)
|
||||
- name: $orange
|
||||
value: hsl(14, 100%, 53%)
|
||||
- name: $yellow
|
||||
value: hsl(48, 100%, 67%)
|
||||
- name: $green
|
||||
value: hsl(141, 71%, 48%)
|
||||
- name: $turquoise
|
||||
value: hsl(171, 100%, 41%)
|
||||
- name: $cyan
|
||||
value: hsl(204, 86%, 53%)
|
||||
- name: $cyan
|
||||
value: hsl(204, 86%, 53%)
|
||||
- name: $blue
|
||||
value: hsl(217, 71%, 53%)
|
||||
- name: $purple
|
||||
value: hsl(271, 100%, 71%)
|
||||
- name: $red
|
||||
value: hsl(348, 100%, 61%)
|
||||
initial_variables:
|
||||
- name: $family-sans-serif
|
||||
value: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif
|
||||
- name: $family-monospace
|
||||
value: monospace
|
||||
- name: $render-mode
|
||||
value: optimizeLegibility
|
||||
- name: $size-1
|
||||
value: 3rem
|
||||
- name: $size-2
|
||||
value: 2.5rem
|
||||
- name: $size-3
|
||||
value: 2rem
|
||||
- name: $size-4
|
||||
value: 1.5rem
|
||||
- name: $size-5
|
||||
value: 1.25rem
|
||||
- name: $size-6
|
||||
value: 1rem
|
||||
- name: $size-7
|
||||
value: 0.75rem
|
||||
- name: $weight-light
|
||||
value: 300
|
||||
- name: $weight-normal
|
||||
value: 400
|
||||
- name: $weight-medium
|
||||
value: 500
|
||||
- name: $weight-semibold
|
||||
value: 600
|
||||
- name: $weight-bold
|
||||
value: 700
|
||||
- name: $gap
|
||||
value: 32px
|
||||
- name: $tablet
|
||||
value: 769px
|
||||
- name: $desktop
|
||||
value: 960px + (2 * $gap)
|
||||
- name: $widescreen
|
||||
value: 1152px + (2 * $gap)
|
||||
- name: $fullhd
|
||||
value: 1344px + (2 * $gap)
|
||||
- name: $easing
|
||||
value: ease-out
|
||||
- name: $radius-small
|
||||
value: 2px
|
||||
- name: $radius
|
||||
value: 3px
|
||||
- name: $radius-large
|
||||
value: 5px
|
||||
- name: $speed
|
||||
value: 86ms
|
||||
derived_variables:
|
||||
- name: $primary
|
||||
value: $turquoise
|
||||
- name: $link
|
||||
value: $blue
|
||||
- name: $info
|
||||
value: $cyan
|
||||
- name: $success
|
||||
value: $green
|
||||
- name: $warning
|
||||
value: $yellow
|
||||
- name: $danger
|
||||
value: $red
|
||||
- name: $light
|
||||
value: $white-ter
|
||||
- name: $dark
|
||||
value: $grey-darker
|
||||
- name: $orange-invert
|
||||
value: findColorInvert($orange)
|
||||
- name: $yellow-invert
|
||||
value: findColorInvert($yellow)
|
||||
- name: $green-invert
|
||||
value: findColorInvert($green)
|
||||
- name: $turquoise-invert
|
||||
value: findColorInvert($turquoise)
|
||||
- name: $blue-invert
|
||||
value: findColorInvert($blue)
|
||||
- name: $purple-invert
|
||||
value: findColorInvert($purple)
|
||||
- name: $red-invert
|
||||
value: findColorInvert($red)
|
||||
- name: $primary-invert
|
||||
value: $turquoise-invert
|
||||
- name: $info-invert
|
||||
value: $blue-invert
|
||||
- name: $success-invert
|
||||
value: $green-invert
|
||||
- name: $warning-invert
|
||||
value: $yellow-invert
|
||||
- name: $danger-invert
|
||||
value: $red-invert
|
||||
- name: $light-invert
|
||||
value: $dark
|
||||
- name: $dark-invert
|
||||
value: $light
|
||||
- name: $background
|
||||
value: $white-ter
|
||||
- name: $border
|
||||
value: $grey-lighter
|
||||
- name: $border-hover
|
||||
value: $grey-light
|
||||
- name: $text
|
||||
value: $grey-dark
|
||||
- name: $text-invert
|
||||
value: findColorInvert($text)
|
||||
- name: $text-light
|
||||
value: $grey
|
||||
- name: $text-strong
|
||||
value: $grey-darker
|
||||
- name: $code
|
||||
value: $red
|
||||
- name: $code-background
|
||||
value: $background
|
||||
- name: $pre
|
||||
value: $text
|
||||
- name: $pre-background
|
||||
value: $background
|
||||
- name: $link
|
||||
value: $blue
|
||||
- name: $link-invert
|
||||
value: $blue-invert
|
||||
- name: $link-visited
|
||||
value: $purple
|
||||
- name: $link-hover
|
||||
value: $grey-darker
|
||||
- name: $link-hover-border
|
||||
value: $grey-light
|
||||
- name: $link-focus
|
||||
value: $grey-darker
|
||||
- name: $link-focus-border
|
||||
value: $blue
|
||||
- name: $link-active
|
||||
value: $grey-darker
|
||||
- name: $link-active-border
|
||||
value: $grey-dark
|
||||
- name: $family-primary
|
||||
value: $family-sans-serif
|
||||
- name: $family-code
|
||||
value: $family-monospace
|
||||
- name: $size-small
|
||||
value: $size-7
|
||||
- name: $size-normal
|
||||
value: $size-6
|
||||
- name: $size-medium
|
||||
value: $size-5
|
||||
- name: $size-large
|
||||
value: $size-4
|
||||
- name: $colors
|
||||
value: '("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))'
|
||||
- name: $shades
|
||||
value: '("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis)'
|
||||
- name: $sizes
|
||||
value: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6
|
||||
generic_variables:
|
||||
- name: $body-background-color
|
||||
value: '#fff'
|
||||
- name: $body-size
|
||||
value: 16px
|
||||
- name: $body-rendering
|
||||
value: optimizeLegibility
|
||||
- name: $body-family
|
||||
value: $family-primary
|
||||
- name: $body-color
|
||||
value: $text
|
||||
- name: $body-weight
|
||||
value: $weight-normal
|
||||
- name: $body-line-height
|
||||
value: 1.5
|
||||
- name: $code-family
|
||||
value: $family-code
|
||||
- name: $code-padding
|
||||
value: 0.25em 0.5em 0.25em
|
||||
- name: $code-weight
|
||||
value: normal
|
||||
- name: $code-size
|
||||
value: 0.875em
|
||||
- name: $hr-background-color
|
||||
value: $border
|
||||
- name: $hr-height
|
||||
value: 1px
|
||||
- name: $hr-margin
|
||||
value: 1.5rem 0
|
||||
- name: $strong-color
|
||||
value: $text-strong
|
||||
- name: $strong-weight
|
||||
value: $weight-bold
|
||||
---
|
||||
|
||||
{% include subnav-overview.html %}
|
||||
@@ -241,6 +13,11 @@ generic_variables:
|
||||
<h2 class="subtitle">Easily <strong>customize</strong> Bulma to match your design</h2>
|
||||
|
||||
<hr>
|
||||
|
||||
{% assign initial_variables = site.data.variables.utilities.initial-variables %}
|
||||
{% assign initial_vars = initial_variables.vars %}
|
||||
{% assign derived_variables = site.data.variables.utilities.derived-variables %}
|
||||
{% assign derived_vars = derived_variables.vars %}
|
||||
|
||||
<div class="content">
|
||||
<p>Bulma has <strong>two</strong> variable files divided into <strong>4</strong> sections:</p>
|
||||
@@ -248,10 +25,10 @@ generic_variables:
|
||||
<li>
|
||||
<strong>Initial variables</strong>: where you define variables by <strong>literal value</strong>, like:
|
||||
<ul>
|
||||
<li><strong>colors</strong>: <code>$blue: hsl(217, 71%, 53%)</code></li>
|
||||
<li><strong>font sizes</strong>: <code>$size-1: 3rem</code></li>
|
||||
<li><strong>dimensions</strong>: <code>$gap: 32px</code></li>
|
||||
<li><strong>other values</strong>: <code>$easing: ease-out</code> or <code>$radius-large: 5px</code></li>
|
||||
<li><strong>colors</strong>: <code>{{ initial_vars.blue.name }}: {{ initial_vars.blue.value }}</code></li>
|
||||
<li><strong>font sizes</strong>: <code>{{ initial_vars.size-1.name }}: {{ initial_vars.size-1.value }}</code></li>
|
||||
<li><strong>dimensions</strong>: <code>{{ initial_vars.gap.name }}: {{ initial_vars.gap.value }}</code></li>
|
||||
<li><strong>other values</strong>: <code>{{ initial_vars.easing.name }}: {{ initial_vars.easing.value }}</code> or <code>{{ initial_vars.radius-large.name }}: {{ initial_vars.radius-large.value }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
@@ -260,25 +37,25 @@ generic_variables:
|
||||
<li>
|
||||
<strong>Primary colors</strong> derived from the initial variables:
|
||||
<ul>
|
||||
<li><code>$primary: $turquoise</code></li>
|
||||
<li><code>$link: $blue</code></li>
|
||||
<li><code>$info: $cyan</code></li>
|
||||
<li><code>$success: $green</code></li>
|
||||
<li><code>$warning: $yellow</code></li>
|
||||
<li><code>$danger: $red</code></li>
|
||||
<li><code>$dark: $grey-darker</code></li>
|
||||
<li><code>$text: $grey-dark</code></li>
|
||||
<li><code>{{ derived_vars.primary.name }}: {{ derived_vars.primary.value }}</code></li>
|
||||
<li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code></li>
|
||||
<li><code>{{ derived_vars.info.name }}: {{ derived_vars.info.value }}</code></li>
|
||||
<li><code>{{ derived_vars.success.name }}: {{ derived_vars.success.value }}</code></li>
|
||||
<li><code>{{ derived_vars.warning.name }}: {{ derived_vars.warning.value }}</code></li>
|
||||
<li><code>{{ derived_vars.danger.name }}: {{ derived_vars.danger.value }}</code></li>
|
||||
<li><code>{{ derived_vars.dark.name }}: {{ derived_vars.dark.value }}</code></li>
|
||||
<li><code>{{ derived_vars.text.name }}: {{ derived_vars.text.value }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><code>$background: $white-ter</code>: a general background color</li>
|
||||
<li><code>$link: $primary</code>: the links use the primary color</li>
|
||||
<li><code>$family-primary: $family-sans-serif</code>: the primary font family is the sans-serif one</li>
|
||||
<li><code>{{ derived_vars.background.name }}: {{ derived_vars.background.value }}</code>: a general background color</li>
|
||||
<li><code>{{ derived_vars.link.name }}: {{ derived_vars.link.value }}</code>: the links use the primary color</li>
|
||||
<li><code>{{ derived_vars.family-primary.name }}: {{ derived_vars.family-primary.value }}</code>: the primary font family is the sans-serif one</li>
|
||||
<li>
|
||||
<strong>Lists and maps</strong> which are collections so already defined variables:
|
||||
<ul>
|
||||
<li><code>$colors: ("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert), "link": ($link, $link-invert), "info": ($info, $info-invert), "success": ($success, $success-invert), "warning": ($warning, $warning-invert), "danger": ($danger, $danger-invert))</code></li>
|
||||
<li><code>$shades: ("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis)</code></li>
|
||||
<li><code>$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6</code></li>
|
||||
<li><code>{{ derived_vars.colors.name }}: {{ derived_vars.colors.value }}</code></li>
|
||||
<li><code>{{ derived_vars.shades.name }}: {{ derived_vars.shades.value }}</code></li>
|
||||
<li><code>{{ derived_vars.sizes.name }}: {{ derived_vars.sizes.value }}</code></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
@@ -293,74 +70,52 @@ generic_variables:
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
These are variables with a <strong>literal</strong> value.
|
||||
These are <a href="{{ initial_variables.file_url }}" target="_blank">variables</a> with a <strong>literal</strong> value.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered is-striped">
|
||||
{% for color in page.initial_colors %}
|
||||
<tr>
|
||||
<td>
|
||||
<code style="white-space: nowrap;">{{ color.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<span class="bd-color" style="background: {{ color.value }};"></span>
|
||||
<code>{{ color.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% for variable in page.initial_variables %}
|
||||
<tr>
|
||||
<td>
|
||||
<code style="white-space: nowrap;">{{ variable.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ variable.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Derived variables" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
These are variables with a value that <strong>references</strong> another variable.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered is-striped">
|
||||
{% for variable in page.derived_variables %}
|
||||
<tr>
|
||||
<td>
|
||||
<code style="white-space: nowrap;">{{ variable.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
<code>{{ variable.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
|
||||
{% include anchor.html name="Generic variables" %}
|
||||
|
||||
<div class="content">
|
||||
<p>
|
||||
The following generic variables are provided in <code>./sass/base/generic.sass</code>.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<table class="table is-bordered is-striped">
|
||||
{% for variable in page.generic_variables %}
|
||||
<tbody>
|
||||
{% for variable_hash in initial_vars %}
|
||||
{% assign variable = variable_hash[1] %}
|
||||
{% assign starts_with = variable.value | slice: 0, 3 %}
|
||||
<tr>
|
||||
<td>
|
||||
<code style="white-space: nowrap;">{{ variable.name }}</code>
|
||||
</td>
|
||||
<td>
|
||||
{% if starts_with == 'hsl' %}
|
||||
<span class="bd-color" style="background: {{ variable.value }};"></span>
|
||||
{% endif %}
|
||||
<code>{{ variable.value }}</code>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tbody>
|
||||
</table>
|
||||
|
||||
{% capture custom_message %}
|
||||
These are <a href="{{ derived_variables.file_url }}" target="_blank">variables</a> with a value that <strong>references</strong> another variable.
|
||||
{% endcapture %}
|
||||
{%
|
||||
include variables.html
|
||||
anchor_name = 'Derived variables'
|
||||
data = derived_variables
|
||||
custom_message = custom_message
|
||||
table_class = 'is-bordered is-striped'
|
||||
%}
|
||||
|
||||
{% capture custom_message %}
|
||||
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 %}
|
||||
{%
|
||||
include variables.html
|
||||
anchor_name = 'Generic variables'
|
||||
tab = 'base'
|
||||
subtab = 'generic'
|
||||
custom_message = custom_message
|
||||
table_class = 'is-bordered is-striped'
|
||||
%}
|
||||
|
||||
</div>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user