library-mirrors/bulma
1
0
Fork 0
mirror of https://github.com/jgthms/bulma.git synced 2024-11-28 12:24:23 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add utilities documentation

Browse Source
This commit is contained in:
Jeremy Thomas 2021-09-19 23:36:15 +01:00
parent e145c9d680
commit f6c0cfc813
19 changed files with 1227 additions and 444 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

213
docs/_data/links.json
View File

@ -2,17 +2,17 @@
"by_id": { "by_id": {
"home": { "home": {
"name": "Home", "name": "Home",
"path": "" "path": "/"
}, },
"documentation": { "documentation": {
"name": "Documentation", "name": "Documentation",
"subtitle": "Everything you need to <strong>create a website</strong> with Bulma", "subtitle": "Everything you need to <strong>create a website</strong> with Bulma",
"path": "/documentation" "path": "/documentation/"
}, },
"become-sponsor": { "become-sponsor": {
"name": "Become a Bulma sponsor", "name": "Become a Bulma sponsor",
"subtitle": "Sponsor Bulma and Open Source via <a href=\"https://www.patreon.com/jgthms\" target=\"_blank\">Patreon</a> and <a href=\"https://github.com/sponsors/jgthms\" target=\"_blank\">GitHub</a>", "subtitle": "Sponsor Bulma and Open Source via <a href=\"https://www.patreon.com/jgthms\" target=\"_blank\">Patreon</a> and <a href=\"https://github.com/sponsors/jgthms\" target=\"_blank\">GitHub</a>",
"path": "/become-a-bulma-sponsor" "path": "/become-a-bulma-sponsor/"
}, },
"bulma-book": { "bulma-book": {
"name": "The official Bulma book", "name": "The official Bulma book",
@ -20,28 +20,28 @@
"subtitle": "A step-by-step guide that teaches you how to build a web interface from scratch using Bulma", "subtitle": "A step-by-step guide that teaches you how to build a web interface from scratch using Bulma",
"icon": "bookmark", "icon": "bookmark",
"color": "bleeding", "color": "bleeding",
"path": "/the-official-bulma-book" "path": "/the-official-bulma-book/"
}, },
"overview": { "overview": {
"name": "Overview", "name": "Overview",
"subtitle": "An overview of what Bulma as a <strong>framework</strong> is all about", "subtitle": "An overview of what Bulma as a <strong>framework</strong> is all about",
"color": "primary", "color": "primary",
"icon": "eye", "icon": "eye",
"path": "/documentation/overview" "path": "/documentation/overview/"
}, },
"overview-start": { "overview-start": {
"name": "Start", "name": "Start",
"subtitle": "You only need <strong>1 CSS file</strong> to use Bulma", "subtitle": "You only need <strong>1 CSS file</strong> to use Bulma",
"color": "danger", "color": "danger",
"icon": "rocket", "icon": "rocket",
"path": "/documentation/overview/start" "path": "/documentation/overview/start/"
}, },
"overview-customize": { "overview-customize": {
"name": "Customize", "name": "Customize",
"subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>", "subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
"color": "purple", "color": "purple",
"icon": "paint-brush", "icon": "paint-brush",
"path": "/documentation/overview/customize" "path": "/documentation/overview/customize/"
}, },
"overview-classes": { "overview-classes": {
"name": "CSS classes", "name": "CSS classes",
@ -49,98 +49,99 @@
"color": "link", "color": "link",
"icon_brand": "true", "icon_brand": "true",
"icon": "css3", "icon": "css3",
"path": "/documentation/overview/classes" "path": "/documentation/overview/classes/"
}, },
"overview-modular": { "overview-modular": {
"name": "Modularity", "name": "Modularity",
"subtitle": "Just import what you <strong>need</strong>", "subtitle": "Just import what you <strong>need</strong>",
"color": "success", "color": "success",
"icon": "cubes", "icon": "cubes",
"path": "/documentation/overview/modular" "path": "/documentation/overview/modular/"
}, },
"overview-responsiveness": { "overview-responsiveness": {
"name": "Responsiveness", "name": "Responsiveness",
"subtitle": "Bulma is a <strong>mobile-first</strong> framework", "subtitle": "Bulma is a <strong>mobile-first</strong> framework",
"color": "primary", "color": "primary",
"icon": "arrows-alt-h", "icon": "arrows-alt-h",
"path": "/documentation/overview/responsiveness" "path": "/documentation/overview/responsiveness/"
}, },
"overview-variables": { "overview-variables": {
"name": "Variables", "name": "Variables",
"subtitle": "See how Bulma uses <strong>Sass variables</strong> to allow easy customization", "subtitle": "See how Bulma uses <strong>Sass variables</strong> to allow easy customization",
"color": "grey", "color": "grey",
"icon": "cogs", "icon": "cogs",
"path": "/documentation/overview/variables" "path": "/documentation/overview/variables/"
}, },
"overview-colors": { "overview-colors": {
"name": "Colors", "name": "Colors",
"subtitle": "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components", "subtitle": "The <strong>colors</strong> that <strong>style</strong> most Bulma elements and components",
"color": "info", "color": "info",
"icon": "tint", "icon": "tint",
"path": "/documentation/overview/colors" "path": "/documentation/overview/colors/"
}, },
"utilities": { "utilities": {
"name": "Utilities", "name": "Utilities",
"subtitle": "Sass tools used by Bulma and available for you", "subtitle": "Sass tools used by Bulma and available for you",
"color": "primary", "color": "primary",
"icon": "eye", "icon": "tools",
"path": "/documentation/utilities" "path": "/documentation/utilities/"
}, },
"utilities-functions": { "utilities-functions": {
"name": "Functions", "name": "Functions",
"subtitle": "Utility functions to calculate colors and other values", "subtitle": "Utility functions to calculate colors and other values",
"color": "orange", "color": "orange",
"icon": "code", "icon": "code",
"path": "/documentation/utilities/functions" "path": "/documentation/utilities/functions/"
}, },
"utilities-mixins": { "utilities-mixins": {
"name": "Mixins", "name": "Mixins",
"subtitle": "Utility mixins for custom elements and responsive helpers", "subtitle": "Utility mixins for custom elements and other CSS helpers",
"color": "purple", "color": "purple",
"icon": "plus", "icon": "equals",
"path": "/documentation/utilities/mixins" "path": "/documentation/utilities/mixins/"
}, },
"utilities-responsive-mixins": { "utilities-responsive-mixins": {
"name": "Responsive Mixins", "name": "Responsive mixins",
"subtitle": "Utility mixins for custom elements and responsive helpers", "subtitle": "Mixins that allows you to define different styles for each screen size",
"color": "purple", "color": "purple",
"icon": "plus", "icon": "arrows-alt-h",
"path": "/documentation/utilities/responsive-mixins" "path": "/documentation/utilities/responsive-mixins/"
}, },
"utilities-extends": { "utilities-extends": {
"name": "Extends", "name": "Extends",
"subtitle": "Utility mixins for custom elements and responsive helpers", "subtitle": "Sass extends to keep your CSS code DRY",
"color": "purple", "color": "purple",
"icon": "plus", "icon": "percentage",
"path": "/documentation/utilities/extends" "path": "/documentation/utilities/extends/"
}, },
"utilities-control-mixins": { "utilities-control-mixins": {
"name": "Controls", "name": "Form Control mixins",
"subtitle": "Utility mixins for custom elements and responsive helpers", "subtitle": "Mixins for Bulma's buttons and form controls",
"color": "purple", "color": "purple",
"icon": "plus", "icon": "hand-pointer",
"path": "/documentation/utilities/controls" "icon_regular": "true",
"path": "/documentation/utilities/control-mixins/"
}, },
"customize": { "customize": {
"name": "Customize", "name": "Customize",
"subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>", "subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
"color": "purple", "color": "purple",
"icon": "paint-brush", "icon": "paint-brush",
"path": "/documentation/customize" "path": "/documentation/customize/"
}, },
"customize-concepts": { "customize-concepts": {
"name": "Concepts", "name": "Concepts",
"subtitle": "What makes Bulma <strong>customizable</strong>", "subtitle": "What makes Bulma <strong>customizable</strong>",
"color": "info", "color": "info",
"icon": "lightbulb", "icon": "lightbulb",
"path": "/documentation/customize/concepts" "path": "/documentation/customize/concepts/"
}, },
"customize-variables": { "customize-variables": {
"name": "Variables", "name": "Variables",
"subtitle": "See how Bulma uses <strong>Sass variables</strong> to allow easy customization", "subtitle": "See how Bulma uses <strong>Sass variables</strong> to allow easy customization",
"color": "grey", "color": "grey",
"icon": "cogs", "icon": "cogs",
"path": "/documentation/customize/variables" "path": "/documentation/customize/variables/"
}, },
"customize-node-sass": { "customize-node-sass": {
"name": "With node-sass", "name": "With node-sass",
@ -148,7 +149,7 @@
"color": "danger", "color": "danger",
"icon_brand": "true", "icon_brand": "true",
"icon": "npm", "icon": "npm",
"path": "/documentation/customize/with-node-sass" "path": "/documentation/customize/with-node-sass/"
}, },
"customize-sass-cli": { "customize-sass-cli": {
"name": "With Sass CLI", "name": "With Sass CLI",
@ -156,7 +157,7 @@
"color": "purple", "color": "purple",
"icon_brand": "true", "icon_brand": "true",
"icon": "sass", "icon": "sass",
"path": "/documentation/customize/with-sass-cli" "path": "/documentation/customize/with-sass-cli/"
}, },
"customize-webpack": { "customize-webpack": {
"name": "With webpack", "name": "With webpack",
@ -164,195 +165,195 @@
"color": "warning", "color": "warning",
"icon_brand": "true", "icon_brand": "true",
"icon": "js", "icon": "js",
"path": "/documentation/customize/with-webpack" "path": "/documentation/customize/with-webpack/"
}, },
"modifiers": { "modifiers": {
"name": "Modifiers", "name": "Modifiers",
"subtitle": "An <strong>easy-to-read</strong> naming system designed for humans", "subtitle": "An <strong>easy-to-read</strong> naming system designed for humans",
"color": "grey", "color": "grey",
"icon": "cogs", "icon": "cogs",
"path": "/documentation/modifiers" "path": "/documentation/modifiers/"
}, },
"overview-modifiers": { "overview-modifiers": {
"name": "Modifiers syntax", "name": "Modifiers syntax",
"subtitle": "Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>. They all start with <code>is-</code> or <code>has-</code>.", "subtitle": "Most Bulma elements have <strong>alternative</strong> styles. To apply them, you only need to append one of the <strong>modifier classes</strong>. They all start with <code>is-</code> or <code>has-</code>.",
"color": "orange", "color": "orange",
"icon": "code", "icon": "code",
"path": "/documentation/overview/modifiers" "path": "/documentation/overview/modifiers/"
}, },
"modifiers-helpers": { "modifiers-helpers": {
"name": "Helpers", "name": "Helpers",
"subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter its style", "subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter its style",
"color": "danger", "color": "danger",
"icon": "medkit", "icon": "medkit",
"path": "/documentation/modifiers/helpers" "path": "/documentation/modifiers/helpers/"
}, },
"modifiers-responsive-helpers": { "modifiers-responsive-helpers": {
"name": "Responsive helpers", "name": "Responsive helpers",
"subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport", "subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport",
"color": "primary", "color": "primary",
"icon": "arrows-alt-h", "icon": "arrows-alt-h",
"path": "/documentation/modifiers/responsive-helpers" "path": "/documentation/modifiers/responsive-helpers/"
}, },
"modifiers-color-helpers": { "modifiers-color-helpers": {
"name": "Color helpers", "name": "Color helpers",
"subtitle": "Change the <strong>color</strong> of the text and/or background", "subtitle": "Change the <strong>color</strong> of the text and/or background",
"color": "info", "color": "info",
"icon": "tint", "icon": "tint",
"path": "/documentation/modifiers/color-helpers" "path": "/documentation/modifiers/color-helpers/"
}, },
"modifiers-typography-helpers": { "modifiers-typography-helpers": {
"name": "Typography helpers", "name": "Typography helpers",
"subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width", "subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
"color": "grey-dark", "color": "grey-dark",
"icon": "font", "icon": "font",
"path": "/documentation/modifiers/typography-helpers" "path": "/documentation/modifiers/typography-helpers/"
}, },
"helpers": { "helpers": {
"name": "Helpers", "name": "Helpers",
"subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter their style", "subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter their style",
"color": "danger", "color": "danger",
"icon": "medkit", "icon": "medkit",
"path": "/documentation/helpers" "path": "/documentation/helpers/"
}, },
"helpers-color": { "helpers-color": {
"name": "Color", "name": "Color",
"subtitle": "Change the <strong>color</strong> of the text and/or background", "subtitle": "Change the <strong>color</strong> of the text and/or background",
"color": "info", "color": "info",
"icon": "tint", "icon": "tint",
"path": "/documentation/helpers/color-helpers" "path": "/documentation/helpers/color-helpers/"
}, },
"helpers-typography": { "helpers-typography": {
"name": "Typography", "name": "Typography",
"subtitle": "Change the <strong>size</strong>, weight, and other font properties of the text", "subtitle": "Change the <strong>size</strong>, weight, and other font properties of the text",
"color": "grey-dark", "color": "grey-dark",
"icon": "font", "icon": "font",
"path": "/documentation/helpers/typography-helpers" "path": "/documentation/helpers/typography-helpers/"
}, },
"helpers-spacing": { "helpers-spacing": {
"name": "Spacing", "name": "Spacing",
"subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width", "subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
"color": "grey-dark", "color": "grey-dark",
"icon": "arrows-alt-h", "icon": "arrows-alt-h",
"path": "/documentation/helpers/spacing-helpers" "path": "/documentation/helpers/spacing-helpers/"
}, },
"helpers-visibility": { "helpers-visibility": {
"name": "Visibility", "name": "Visibility",
"subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport", "subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport",
"color": "primary", "color": "primary",
"icon": "eye", "icon": "eye",
"path": "/documentation/helpers/visibility-helpers" "path": "/documentation/helpers/visibility-helpers/"
}, },
"helpers-flexbox": { "helpers-flexbox": {
"name": "Flexbox", "name": "Flexbox",
"subtitle": "Helpers for all <strong>Flexbox</strong> properties", "subtitle": "Helpers for all <strong>Flexbox</strong> properties",
"color": "primary", "color": "primary",
"icon": "ellipsis-h", "icon": "ellipsis-h",
"path": "/documentation/helpers/flexbox-helpers" "path": "/documentation/helpers/flexbox-helpers/"
}, },
"helpers-other": { "helpers-other": {
"name": "Other", "name": "Other",
"subtitle": "Other useful Bulma helpers", "subtitle": "Other useful Bulma helpers",
"color": "primary", "color": "primary",
"icon": "medkit", "icon": "medkit",
"path": "/documentation/helpers/other-helpers" "path": "/documentation/helpers/other-helpers/"
}, },
"columns": { "columns": {
"name": "Columns", "name": "Columns",
"subtitle": "The power of <strong>Flexbox</strong> in a simple interface", "subtitle": "The power of <strong>Flexbox</strong> in a simple interface",
"color": "star", "color": "star",
"icon": "columns", "icon": "columns",
"path": "/documentation/columns" "path": "/documentation/columns/"
}, },
"columns-basics": { "columns-basics": {
"name": "Basics", "name": "Basics",
"subtitle": "A simple way to build <strong>responsive columns</strong>", "subtitle": "A simple way to build <strong>responsive columns</strong>",
"color": "star", "color": "star",
"icon": "columns", "icon": "columns",
"path": "/documentation/columns/basics" "path": "/documentation/columns/basics/"
}, },
"columns-sizes": { "columns-sizes": {
"name": "Sizes", "name": "Sizes",
"subtitle": "Define the <strong>size</strong> of each column <strong>individually</strong>", "subtitle": "Define the <strong>size</strong> of each column <strong>individually</strong>",
"color": "success", "color": "success",
"icon": "expand-arrows-alt", "icon": "expand-arrows-alt",
"path": "/documentation/columns/sizes" "path": "/documentation/columns/sizes/"
}, },
"columns-responsiveness": { "columns-responsiveness": {
"name": "Responsiveness", "name": "Responsiveness",
"subtitle": "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>", "subtitle": "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>",
"color": "primary", "color": "primary",
"icon": "arrows-alt-h", "icon": "arrows-alt-h",
"path": "/documentation/columns/responsiveness" "path": "/documentation/columns/responsiveness/"
}, },
"columns-nesting": { "columns-nesting": {
"name": "Nesting", "name": "Nesting",
"subtitle": "A simple way to build <strong>responsive columns</strong>", "subtitle": "A simple way to build <strong>responsive columns</strong>",
"color": "danger", "color": "danger",
"icon": "sitemap", "icon": "sitemap",
"path": "/documentation/columns/nesting" "path": "/documentation/columns/nesting/"
}, },
"columns-gap": { "columns-gap": {
"name": "Gap", "name": "Gap",
"subtitle": "Customize the <strong>gap</strong> between the columns", "subtitle": "Customize the <strong>gap</strong> between the columns",
"color": "info", "color": "info",
"icon": "pause", "icon": "pause",
"path": "/documentation/columns/gap" "path": "/documentation/columns/gap/"
}, },
"columns-options": { "columns-options": {
"name": "Options", "name": "Options",
"subtitle": "Design different <strong>types</strong> of column layouts", "subtitle": "Design different <strong>types</strong> of column layouts",
"color": "grey", "color": "grey",
"icon": "cogs", "icon": "cogs",
"path": "/documentation/columns/options" "path": "/documentation/columns/options/"
}, },
"layout": { "layout": {
"name": "Layout", "name": "Layout",
"subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes", "subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes",
"color": "success", "color": "success",
"icon": "warehouse", "icon": "warehouse",
"path": "/documentation/layout" "path": "/documentation/layout/"
}, },
"layout-container": { "layout-container": {
"name": "Container", "name": "Container",
"subtitle": "A simple <strong>container</strong> to center your content horizontally", "subtitle": "A simple <strong>container</strong> to center your content horizontally",
"path": "/documentation/layout/container", "path": "/documentation/layout/container/",
"icon": "arrows-alt-h" "icon": "arrows-alt-h"
}, },
"layout-level": { "layout-level": {
"name": "Level", "name": "Level",
"subtitle": "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element", "subtitle": "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element",
"path": "/documentation/layout/level", "path": "/documentation/layout/level/",
"icon": "ruler-horizontal" "icon": "ruler-horizontal"
}, },
"layout-media": { "layout-media": {
"name": "Media Object", "name": "Media Object",
"subtitle": "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context", "subtitle": "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context",
"path": "/documentation/layout/media-object", "path": "/documentation/layout/media-object/",
"icon": "th-list" "icon": "th-list"
}, },
"layout-hero": { "layout-hero": {
"name": "Hero", "name": "Hero",
"subtitle": "An imposing <strong>hero banner</strong> to showcase something", "subtitle": "An imposing <strong>hero banner</strong> to showcase something",
"path": "/documentation/layout/hero", "path": "/documentation/layout/hero/",
"icon": "star" "icon": "star"
}, },
"layout-section": { "layout-section": {
"name": "Section", "name": "Section",
"subtitle": "A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading", "subtitle": "A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading",
"path": "/documentation/layout/section", "path": "/documentation/layout/section/",
"icon": "square" "icon": "square"
}, },
"layout-footer": { "layout-footer": {
"name": "Footer", "name": "Footer",
"subtitle": "A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.", "subtitle": "A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.",
"path": "/documentation/layout/footer", "path": "/documentation/layout/footer/",
"icon": "window-minimize" "icon": "window-minimize"
}, },
"layout-tiles": { "layout-tiles": {
"name": "Tiles", "name": "Tiles",
"subtitle": "A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids", "subtitle": "A <strong>single tile</strong> element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids",
"path": "/documentation/layout/tiles", "path": "/documentation/layout/tiles/",
"icon": "th" "icon": "th"
}, },
"form": { "form": {
@ -361,7 +362,7 @@
"color": "link", "color": "link",
"icon_brand": "true", "icon_brand": "true",
"icon": "wpforms", "icon": "wpforms",
"path": "/documentation/form" "path": "/documentation/form/"
}, },
"form-general": { "form-general": {
"name": "General", "name": "General",
@ -369,63 +370,63 @@
"color": "link", "color": "link",
"icon": "keyboard", "icon": "keyboard",
"icon_regular": "true", "icon_regular": "true",
"path": "/documentation/form/general" "path": "/documentation/form/general/"
}, },
"form-input": { "form-input": {
"name": "Input", "name": "Input",
"subtitle": "The <strong>text input</strong> and its variations", "subtitle": "The <strong>text input</strong> and its variations",
"color": "link", "color": "link",
"icon": "minus", "icon": "minus",
"path": "/documentation/form/input" "path": "/documentation/form/input/"
}, },
"form-textarea": { "form-textarea": {
"name": "Textarea", "name": "Textarea",
"subtitle": "The multiline <strong>textarea</strong> and its variations", "subtitle": "The multiline <strong>textarea</strong> and its variations",
"color": "link", "color": "link",
"icon": "square", "icon": "square",
"path": "/documentation/form/textarea" "path": "/documentation/form/textarea/"
}, },
"form-select": { "form-select": {
"name": "Select", "name": "Select",
"subtitle": "The browser built-in <strong>select dropdown</strong>, styled accordingly", "subtitle": "The browser built-in <strong>select dropdown</strong>, styled accordingly",
"color": "link", "color": "link",
"icon": "mouse-pointer", "icon": "mouse-pointer",
"path": "/documentation/form/select" "path": "/documentation/form/select/"
}, },
"form-checkbox": { "form-checkbox": {
"name": "Checkbox", "name": "Checkbox",
"subtitle": "The 2-state <strong>checkbox</strong> in its native format", "subtitle": "The 2-state <strong>checkbox</strong> in its native format",
"color": "link", "color": "link",
"icon": "check-square", "icon": "check-square",
"path": "/documentation/form/checkbox" "path": "/documentation/form/checkbox/"
}, },
"form-radio": { "form-radio": {
"name": "Radio", "name": "Radio",
"subtitle": "The mutually exclusive <strong>radio buttons</strong> in their native format", "subtitle": "The mutually exclusive <strong>radio buttons</strong> in their native format",
"color": "link", "color": "link",
"icon": "dot-circle", "icon": "dot-circle",
"path": "/documentation/form/radio" "path": "/documentation/form/radio/"
}, },
"form-file": { "form-file": {
"name": "File", "name": "File",
"subtitle": "A custom <strong>file upload</strong> input, without JavaScript", "subtitle": "A custom <strong>file upload</strong> input, without JavaScript",
"color": "link", "color": "link",
"icon": "cloud-upload-alt", "icon": "cloud-upload-alt",
"path": "/documentation/form/file" "path": "/documentation/form/file/"
}, },
"elements": { "elements": {
"name": "Elements", "name": "Elements",
"subtitle": "Essential interface elements that only require a <strong>single CSS class</strong>", "subtitle": "Essential interface elements that only require a <strong>single CSS class</strong>",
"color": "orange", "color": "orange",
"icon": "cube", "icon": "cube",
"path": "/documentation/elements" "path": "/documentation/elements/"
}, },
"elements-block": { "elements-block": {
"name": "Block", "name": "Block",
"subtitle": "Bulma's most basic spacer <strong>block</strong>", "subtitle": "Bulma's most basic spacer <strong>block</strong>",
"color": "grey", "color": "grey",
"icon": "arrows-alt-v", "icon": "arrows-alt-v",
"path": "/documentation/elements/block" "path": "/documentation/elements/block/"
}, },
"elements-box": { "elements-box": {
"name": "Box", "name": "Box",
@ -433,7 +434,7 @@
"color": "grey", "color": "grey",
"icon": "square", "icon": "square",
"icon_regular": "true", "icon_regular": "true",
"path": "/documentation/elements/box" "path": "/documentation/elements/box/"
}, },
"elements-button": { "elements-button": {
"name": "Button", "name": "Button",
@ -441,104 +442,104 @@
"color": "success", "color": "success",
"icon": "hand-pointer", "icon": "hand-pointer",
"icon_regular": "true", "icon_regular": "true",
"path": "/documentation/elements/button" "path": "/documentation/elements/button/"
}, },
"elements-content": { "elements-content": {
"name": "Content", "name": "Content",
"subtitle": "A single class to handle <strong>WYSIWYG</strong> generated content, where only <strong>HTML tags</strong> are available", "subtitle": "A single class to handle <strong>WYSIWYG</strong> generated content, where only <strong>HTML tags</strong> are available",
"color": "primary", "color": "primary",
"icon": "align-left", "icon": "align-left",
"path": "/documentation/elements/content" "path": "/documentation/elements/content/"
}, },
"elements-delete": { "elements-delete": {
"name": "Delete", "name": "Delete",
"subtitle": "A versatile <strong>delete</strong> cross", "subtitle": "A versatile <strong>delete</strong> cross",
"color": "danger", "color": "danger",
"icon": "times-circle", "icon": "times-circle",
"path": "/documentation/elements/delete" "path": "/documentation/elements/delete/"
}, },
"elements-icon": { "elements-icon": {
"name": "Icon", "name": "Icon",
"subtitle": "Compatible with all icon font libraries, including <strong>Font Awesome 5</strong>", "subtitle": "Compatible with all icon font libraries, including <strong>Font Awesome 5</strong>",
"icon": "font-awesome", "icon": "font-awesome",
"icon_brand": "true", "icon_brand": "true",
"path": "/documentation/elements/icon" "path": "/documentation/elements/icon/"
}, },
"elements-image": { "elements-image": {
"name": "Image", "name": "Image",
"subtitle": "A container for <strong>responsive images</strong>", "subtitle": "A container for <strong>responsive images</strong>",
"color": "purple", "color": "purple",
"icon": "image", "icon": "image",
"path": "/documentation/elements/image" "path": "/documentation/elements/image/"
}, },
"elements-notification": { "elements-notification": {
"name": "Notification", "name": "Notification",
"subtitle": "Bold <strong>notification</strong> blocks, to alert your users of something", "subtitle": "Bold <strong>notification</strong> blocks, to alert your users of something",
"color": "orange", "color": "orange",
"icon": "exclamation-triangle", "icon": "exclamation-triangle",
"path": "/documentation/elements/notification" "path": "/documentation/elements/notification/"
}, },
"elements-progress": { "elements-progress": {
"name": "Progress bars", "name": "Progress bars",
"subtitle": "Native HTML <strong>progress</strong> bars", "subtitle": "Native HTML <strong>progress</strong> bars",
"color": "warning", "color": "warning",
"icon": "spinner", "icon": "spinner",
"path": "/documentation/elements/progress" "path": "/documentation/elements/progress/"
}, },
"elements-table": { "elements-table": {
"name": "Table", "name": "Table",
"subtitle": "The inevitable HTML <strong>table</strong>, with special case cells", "subtitle": "The inevitable HTML <strong>table</strong>, with special case cells",
"color": "info", "color": "info",
"icon": "table", "icon": "table",
"path": "/documentation/elements/table" "path": "/documentation/elements/table/"
}, },
"elements-tag": { "elements-tag": {
"name": "Tag", "name": "Tag",
"subtitle": "Small <strong>tag labels</strong> to insert anywhere", "subtitle": "Small <strong>tag labels</strong> to insert anywhere",
"color": "success", "color": "success",
"icon": "tag", "icon": "tag",
"path": "/documentation/elements/tag" "path": "/documentation/elements/tag/"
}, },
"elements-title": { "elements-title": {
"name": "Title", "name": "Title",
"subtitle": "Simple <strong>headings</strong> to add depth to your page", "subtitle": "Simple <strong>headings</strong> to add depth to your page",
"color": "black", "color": "black",
"icon": "heading", "icon": "heading",
"path": "/documentation/elements/title" "path": "/documentation/elements/title/"
}, },
"components": { "components": {
"name": "Components", "name": "Components",
"subtitle": "Advanced multi-part components with lots of possibilities", "subtitle": "Advanced multi-part components with lots of possibilities",
"color": "danger", "color": "danger",
"icon": "cubes", "icon": "cubes",
"path": "/documentation/components" "path": "/documentation/components/"
}, },
"components-breadcrumb": { "components-breadcrumb": {
"name": "Breadcrumb", "name": "Breadcrumb",
"subtitle": "A simple <strong>breadcrumb</strong> component to improve your navigation experience", "subtitle": "A simple <strong>breadcrumb</strong> component to improve your navigation experience",
"color": "star", "color": "star",
"icon": "ellipsis-h", "icon": "ellipsis-h",
"path": "/documentation/components/breadcrumb" "path": "/documentation/components/breadcrumb/"
}, },
"components-card": { "components-card": {
"name": "Card", "name": "Card",
"subtitle": "An all-around flexible and composable component", "subtitle": "An all-around flexible and composable component",
"color": "success", "color": "success",
"icon": "id-card", "icon": "id-card",
"path": "/documentation/components/card" "path": "/documentation/components/card/"
}, },
"components-dropdown": { "components-dropdown": {
"name": "Dropdown", "name": "Dropdown",
"subtitle": "An interactive <strong>dropdown menu</strong> for discoverable content", "subtitle": "An interactive <strong>dropdown menu</strong> for discoverable content",
"color": "success", "color": "success",
"icon": "angle-down", "icon": "angle-down",
"path": "/documentation/components/dropdown" "path": "/documentation/components/dropdown/"
}, },
"components-menu": { "components-menu": {
"name": "Menu", "name": "Menu",
"subtitle": "A simple <strong>menu</strong>, for any type of vertical navigation", "subtitle": "A simple <strong>menu</strong>, for any type of vertical navigation",
"icon": "bars", "icon": "bars",
"path": "/documentation/components/menu" "path": "/documentation/components/menu/"
}, },
"components-message": { "components-message": {
"name": "Message", "name": "Message",
@ -546,28 +547,28 @@
"color": "info", "color": "info",
"icon": "window-maximize", "icon": "window-maximize",
"icon_regular": "true", "icon_regular": "true",
"path": "/documentation/components/message" "path": "/documentation/components/message/"
}, },
"components-modal": { "components-modal": {
"name": "Modal", "name": "Modal",
"subtitle": "A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want", "subtitle": "A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want",
"color": "danger", "color": "danger",
"icon": "clone", "icon": "clone",
"path": "/documentation/components/modal" "path": "/documentation/components/modal/"
}, },
"components-navbar": { "components-navbar": {
"name": "Navbar", "name": "Navbar",
"subtitle": "A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns", "subtitle": "A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns",
"color": "primary", "color": "primary",
"icon": "minus", "icon": "minus",
"path": "/documentation/components/navbar" "path": "/documentation/components/navbar/"
}, },
"components-pagination": { "components-pagination": {
"name": "Pagination", "name": "Pagination",
"subtitle": "A responsive, usable, and flexible <strong>pagination</strong>", "subtitle": "A responsive, usable, and flexible <strong>pagination</strong>",
"color": "orange", "color": "orange",
"icon": "caret-square-right", "icon": "caret-square-right",
"path": "/documentation/components/pagination" "path": "/documentation/components/pagination/"
}, },
"components-panel": { "components-panel": {
"name": "Panel", "name": "Panel",
@ -575,21 +576,21 @@
"color": "grey-dark", "color": "grey-dark",
"icon": "list-alt", "icon": "list-alt",
"icon_regular": "true", "icon_regular": "true",
"path": "/documentation/components/panel" "path": "/documentation/components/panel/"
}, },
"components-tabs": { "components-tabs": {
"name": "Tabs", "name": "Tabs",
"subtitle": "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles", "subtitle": "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles",
"color": "purple", "color": "purple",
"icon": "folder", "icon": "folder",
"path": "/documentation/components/tabs" "path": "/documentation/components/tabs/"
}, },
"videos": { "videos": {
"name": "Videos", "name": "Videos",
"color": "success", "color": "success",
"icon": "play-circle", "icon": "play-circle",
"title": "Videos", "title": "Videos",
"path": "/videos" "path": "/videos/"
}, },
"blog": { "blog": {
"name": "Blog", "name": "Blog",
@ -597,7 +598,7 @@
"subtitle": "Stay updated with new features", "subtitle": "Stay updated with new features",
"color": "rss", "color": "rss",
"icon": "rss", "icon": "rss",
"path": "/blog" "path": "/blog/"
}, },
"expo": { "expo": {
"name": "Expo", "name": "Expo",
@ -605,7 +606,7 @@
"subtitle": "Official Bulma showcase", "subtitle": "Official Bulma showcase",
"icon": "star", "icon": "star",
"color": "expo", "color": "expo",
"path": "/expo" "path": "/expo/"
}, },
"love": { "love": {
"name": "Love", "name": "Love",
@ -613,7 +614,7 @@
"subtitle": "Fans of Bulma around the world", "subtitle": "Fans of Bulma around the world",
"color": "love", "color": "love",
"icon": "heart", "icon": "heart",
"path": "/love" "path": "/love/"
}, },
"backers": { "backers": {
"id": "backers", "id": "backers",
@ -621,14 +622,14 @@
"title": "Backers", "title": "Backers",
"color": "patreon", "color": "patreon",
"icon": "patreon", "icon": "patreon",
"path": "/backers", "path": "/backers/",
"icon_brand": true, "icon_brand": true,
"subtitle": "Everyone who is supporting Bulma via Patreon and GitHub", "subtitle": "Everyone who is supporting Bulma via Patreon and GitHub",
"description": "Everyone who is supporting Bulma" "description": "Everyone who is supporting Bulma"
}, },
"more": { "more": {
"name": "More", "name": "More",
"path": "/more" "path": "/more/"
}, },
"bulma-start": { "bulma-start": {
"name": "Bulma start", "name": "Bulma start",
@ -636,7 +637,7 @@
"subtitle": "A tiny npm package to get started", "subtitle": "A tiny npm package to get started",
"icon": "rocket", "icon": "rocket",
"color": "success", "color": "success",
"path": "/bulma-start" "path": "/bulma-start/"
}, },
"made-with-bulma": { "made-with-bulma": {
"name": "Made with Bulma", "name": "Made with Bulma",
@ -644,14 +645,14 @@
"subtitle": "The official community badge", "subtitle": "The official community badge",
"icon": "certificate", "icon": "certificate",
"color": "warning", "color": "warning",
"path": "/made-with-bulma" "path": "/made-with-bulma/"
}, },
"bootstrap": { "bootstrap": {
"name": "Coming from Bootstrap", "name": "Coming from Bootstrap",
"subtitle": "See how Bulma is an alternative to Bootstrap", "subtitle": "See how Bulma is an alternative to Bootstrap",
"icon": "exchange-alt", "icon": "exchange-alt",
"color": "bootstrap", "color": "bootstrap",
"path": "/alternative-to-bootstrap" "path": "/alternative-to-bootstrap/"
}, },
"patreon-backers": { "patreon-backers": {
"name": "Patreon and GitHub backers", "name": "Patreon and GitHub backers",
@ -659,7 +660,7 @@
"icon_brand": "true", "icon_brand": "true",
"icon": "patreon", "icon": "patreon",
"color": "patreon", "color": "patreon",
"path": "/backers" "path": "/backers/"
}, },
"extensions": { "extensions": {
"name": "Bulma extensions", "name": "Bulma extensions",
@ -667,7 +668,7 @@
"subtitle": "Side projects to enhance Bulma", "subtitle": "Side projects to enhance Bulma",
"icon": "plug", "icon": "plug",
"color": "extensions", "color": "extensions",
"path": "/extensions" "path": "/extensions/"
} }
}, },
"navbar": ["videos", "expo", "love", "backers"], "navbar": ["videos", "expo", "love", "backers"],

120
docs/_includes/components/breakpoints-table.html Normal file
View File

@ -0,0 +1,120 @@
<div class="table-container">
<table class="table is-bordered">
<thead>
<tr>
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
<th style="width: 20%;">
{{ 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>
<tbody>
<tr>
<td>
<p class="notification is-primary">mobile</p>
</td>
<td colspan="4">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td>
<p class="notification">-</p>
</td>
<td colspan="4">
<p class="notification is-primary">tablet</p>
</td>
</tr>
<tr>
<td colspan="2">
<p class="notification">-</p>
</td>
<td colspan="3">
<p class="notification is-primary">desktop</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="notification">-</p>
</td>
<td colspan="2">
<p class="notification is-primary">widescreen</p>
</td>
</tr>
<tr>
<td colspan="4">
<p class="notification">-</p>
</td>
<td>
<p class="notification is-primary">fullhd</p>
</td>
</tr>
<tr>
<td>
<p class="notification">-</p>
</td>
<td>
<p class="notification is-primary">tablet-only</p>
</td>
<td colspan="3">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="2">
<p class="notification">-</p>
</td>
<td>
<p class="notification is-primary">desktop-only</p>
</td>
<td colspan="2">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="notification">-</p>
</td>
<td>
<p class="notification is-primary">widescreen-only</p>
</td>
<td>
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="2">
<p class="notification is-primary">touch</p>
</td>
<td colspan="3">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="notification is-primary">until-widescreen</p>
</td>
<td colspan="2">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="4">
<p class="notification is-primary">until-fullhd</p>
</td>
<td colspan="1">
<p class="notification">-</p>
</td>
</tr>
</tbody>
</table>
</div>

1
docs/_includes/elements/snippet-inline.html Normal file
View File

@ -0,0 +1 @@
<div class="bd-snippet-inline">{% highlight sass %}{{ include.content }}{% endhighlight %}</div>

2
docs/_includes/global/navbar-item.html
View File

@ -11,7 +11,7 @@
is-active is-active
{% endif %} {% endif %}
" "
href="{{ site.url }}{{ link.path }}/"> href="{{ site.url }}{{ link.path }}">
<span class="icon has-text-{{ link.color }}"> <span class="icon has-text-{{ link.color }}">
<i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i> <i class="{% if link.icon_brand %}fab{% elsif link.icon_regular %}far{% else %}fas{% endif %} fa-{{ link.icon }}"></i>
</span> </span>

12
docs/_layouts/documentation.html
View File

@ -20,7 +20,17 @@ route: documentation
<button class="button is-primary is-light bd-fat-button is-small" id="docsSideButton">Show sidebar</button> <button class="button is-primary is-light bd-fat-button is-small" id="docsSideButton">Show sidebar</button>
</header> </header>
<div id="docs" class="bd-docs {% if page.fullwidth %}bd-is-fullwidth{% else %}bd-is-contained{% endif %}"> <div
id="docs"
class="
bd-docs
{% if page.fullwidth %}
bd-is-fullwidth
{% else %}
bd-is-contained
{% endif %}
{% if page.fullmain %}bd-is-full-main{% endif %}
">
<div id="docsNavOverlay" class="bd-docs-overlay"></div> <div id="docsNavOverlay" class="bd-docs-overlay"></div>
<nav id="docsNav" class="bd-docs-nav {% if page.fullwidth %}bd-stickied{% endif %}"> <nav id="docsNav" class="bd-docs-nav {% if page.fullwidth %}bd-stickied{% endif %}">

16
docs/_sass/components/code.scss
View File

@ -37,6 +37,20 @@
z-index: 1; z-index: 1;
} }
.bd-snippet-inline {
display: inline-block;
margin-bottom: -0.25em;
vertical-align: bottom;
.highlight pre {
padding: 0.5em 0.75em 0.625em;
}
.button.bd-copy {
display: none;
}
}
.bd-snippet { .bd-snippet {
@extend %block; @extend %block;
--snippet-spacing: #{$block-spacing}; --snippet-spacing: #{$block-spacing};
@ -159,7 +173,7 @@
&::before { &::before {
background: linear-gradient(0deg, var(--hl-background), transparent); background: linear-gradient(0deg, var(--hl-background), transparent);
bottom: 0; bottom: 0;
content: ''; content: "";
display: block; display: block;
left: 0; left: 0;
position: absolute; position: absolute;

9
docs/_sass/components/color.scss Normal file
View File

@ -0,0 +1,9 @@
.bd-color {
border-radius: 2px;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
display: inline-block;
float: left;
height: 24px;
margin-right: 8px;
width: 24px;
}

4
docs/_sass/components/variables.scss
View File

@ -30,14 +30,14 @@
pre { pre {
overflow: visible; overflow: visible;
padding: 0; padding: 0.25em 0.5em 0.375em;
white-space: pre-wrap; white-space: pre-wrap;
white-space: break-spaces; white-space: break-spaces;
} }
} }
.bd-copy { .bd-copy {
font-size: 0.5em !important; font-size: 0.75em !important;
right: 0; right: 0;
top: 0; top: 0;
} }

24
docs/_sass/examples/mixins.scss
View File

@ -160,3 +160,27 @@
@include ltr-property("margin", 1rem, false); @include ltr-property("margin", 1rem, false);
border-radius: 0.25em; border-radius: 0.25em;
} }
.bulma-control-mixin {
@include control;
background: deeppink;
color: white;
&.is-small {
@include control-small;
}
&.is-medium {
@include control-medium;
}
&.is-large {
@include control-large;
}
}
.bulma-control-extend {
@extend %control;
background: mediumblue;
color: white;
}

14
docs/_sass/pages/docs.scss
View File

@ -150,6 +150,16 @@
display: none; display: none;
} }
.bd-docs.bd-is-full-main {
.bd-docs-main {
grid-column: 2 / span 2;
}
.bd-docs-side {
display: none;
}
}
.bd-docs.bd-is-fullwidth { .bd-docs.bd-is-fullwidth {
display: block; display: block;
@ -199,7 +209,7 @@
&::after { &::after {
align-items: center; align-items: center;
bottom: 0; bottom: 0;
content: '•'; content: "•";
display: flex; display: flex;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
@ -236,7 +246,7 @@
&::after { &::after {
align-items: center; align-items: center;
bottom: 0; bottom: 0;
content: '•'; content: "•";
display: flex; display: flex;
justify-content: center; justify-content: center;
position: absolute; position: absolute;

1
docs/bulma-docs.scss
View File

@ -221,6 +221,7 @@ $navbar-breakpoint: $tablet;
@import "./_sass/components/fortyfour"; @import "./_sass/components/fortyfour";
@import "./_sass/components/spacing-table"; @import "./_sass/components/spacing-table";
@import "./_sass/components/survey"; @import "./_sass/components/survey";
@import "./_sass/components/color";
@import "./_sass/pages/index"; @import "./_sass/pages/index";
@import "./_sass/pages/docs"; @import "./_sass/pages/docs";

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

@ -5,7 +5,7 @@
.file-name, .pagination-previous, .file-name, .pagination-previous,
.pagination-next, .pagination-next,
.pagination-link, .pagination-link,
.pagination-ellipsis { .pagination-ellipsis, .bulma-control-extend {
-moz-appearance: none; -moz-appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
align-items: center; align-items: center;
@ -29,19 +29,19 @@
.file-name:focus, .pagination-previous:focus, .file-name:focus, .pagination-previous:focus,
.pagination-next:focus, .pagination-next:focus,
.pagination-link:focus, .pagination-link:focus,
.pagination-ellipsis:focus, .is-focused.button, .is-focused.input, .is-focused.textarea, .select select.is-focused, .is-focused.file-cta, .pagination-ellipsis:focus, .bulma-control-extend:focus, .is-focused.button, .is-focused.input, .is-focused.textarea, .select select.is-focused, .is-focused.file-cta,
.is-focused.file-name, .is-focused.pagination-previous, .is-focused.file-name, .is-focused.pagination-previous,
.is-focused.pagination-next, .is-focused.pagination-next,
.is-focused.pagination-link, .is-focused.pagination-link,
.is-focused.pagination-ellipsis, .button:active, .input:active, .textarea:active, .select select:active, .file-cta:active, .is-focused.pagination-ellipsis, .is-focused.bulma-control-extend, .button:active, .input:active, .textarea:active, .select select:active, .file-cta:active,
.file-name:active, .pagination-previous:active, .file-name:active, .pagination-previous:active,
.pagination-next:active, .pagination-next:active,
.pagination-link:active, .pagination-link:active,
.pagination-ellipsis:active, .is-active.button, .is-active.input, .is-active.textarea, .select select.is-active, .is-active.file-cta, .pagination-ellipsis:active, .bulma-control-extend:active, .is-active.button, .is-active.input, .is-active.textarea, .select select.is-active, .is-active.file-cta,
.is-active.file-name, .is-active.pagination-previous, .is-active.file-name, .is-active.pagination-previous,
.is-active.pagination-next, .is-active.pagination-next,
.is-active.pagination-link, .is-active.pagination-link,
.is-active.pagination-ellipsis { .is-active.pagination-ellipsis, .is-active.bulma-control-extend {
outline: none; outline: none;
} }
@ -49,7 +49,7 @@
.file-name[disabled], .pagination-previous[disabled], .file-name[disabled], .pagination-previous[disabled],
.pagination-next[disabled], .pagination-next[disabled],
.pagination-link[disabled], .pagination-link[disabled],
.pagination-ellipsis[disabled], .pagination-ellipsis[disabled], .bulma-control-extend[disabled],
fieldset[disabled] .button, fieldset[disabled] .button,
fieldset[disabled] .input, fieldset[disabled] .input,
fieldset[disabled] .textarea, fieldset[disabled] .textarea,
@ -60,7 +60,8 @@ fieldset[disabled] .file-name,
fieldset[disabled] .pagination-previous, fieldset[disabled] .pagination-previous,
fieldset[disabled] .pagination-next, fieldset[disabled] .pagination-next,
fieldset[disabled] .pagination-link, fieldset[disabled] .pagination-link,
fieldset[disabled] .pagination-ellipsis { fieldset[disabled] .pagination-ellipsis,
fieldset[disabled] .bulma-control-extend {
cursor: not-allowed; cursor: not-allowed;
} }
@ -183,7 +184,8 @@ fieldset[disabled] .pagination-ellipsis {
} }
.button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after { .button.is-loading::after, .loader, .select.is-loading::after, .control.is-loading::after {
animation: spinAround 500ms infinite linear; -webkit-animation: spinAround 500ms infinite linear;
animation: spinAround 500ms infinite linear;
border: 2px solid #dbdbdb; border: 2px solid #dbdbdb;
border-radius: 9999px; border-radius: 9999px;
border-right-color: transparent; border-right-color: transparent;
@ -324,7 +326,9 @@ html {
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
} }
article, article,
@ -450,6 +454,15 @@ table th {
color: #363636; color: #363636;
} }
@-webkit-keyframes spinAround {
from {
transform: rotate(0deg);
}
to {
transform: rotate(359deg);
}
}
@keyframes spinAround { @keyframes spinAround {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
@ -4414,10 +4427,14 @@ div.icon-text {
} }
.progress:indeterminate { .progress:indeterminate {
animation-duration: 1.5s; -webkit-animation-duration: 1.5s;
animation-iteration-count: infinite; animation-duration: 1.5s;
animation-name: moveIndeterminate; -webkit-animation-iteration-count: infinite;
animation-timing-function: linear; animation-iteration-count: infinite;
-webkit-animation-name: moveIndeterminate;
animation-name: moveIndeterminate;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
background-color: #ededed; background-color: #ededed;
background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%); background-image: linear-gradient(to right, #4a4a4a 30%, #ededed 30%);
background-position: top left; background-position: top left;
@ -4449,6 +4466,15 @@ div.icon-text {
height: 1.5rem; height: 1.5rem;
} }
@-webkit-keyframes moveIndeterminate {
from {
background-position: 200% 0;
}
to {
background-position: -200% 0;
}
}
@keyframes moveIndeterminate { @keyframes moveIndeterminate {
from { from {
background-position: 200% 0; background-position: 200% 0;
@ -12504,6 +12530,8 @@ label.panel-block:hover {
flex-basis: 0; flex-basis: 0;
flex-grow: 1; flex-grow: 1;
flex-shrink: 1; flex-shrink: 1;
min-height: -webkit-min-content;
min-height: -moz-min-content;
min-height: min-content; min-height: min-content;
} }
@ -17136,6 +17164,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
.bd-anchors { .bd-anchors {
padding: var(--docs-side-padding); padding: var(--docs-side-padding);
position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
} }
@ -17571,6 +17600,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
.bd-categories { .bd-categories {
--height: 1.25; --height: 1.25;
padding: var(--docs-side-padding); padding: var(--docs-side-padding);
position: -webkit-sticky;
position: sticky; position: sticky;
top: 0; top: 0;
} }
@ -17746,6 +17776,20 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
z-index: 1; z-index: 1;
} }
.bd-snippet-inline {
display: inline-block;
margin-bottom: -0.25em;
vertical-align: bottom;
}
.bd-snippet-inline .highlight pre {
padding: 0.5em 0.75em 0.625em;
}
.bd-snippet-inline .button.bd-copy {
display: none;
}
.bd-snippet { .bd-snippet {
--snippet-spacing: 1.5rem; --snippet-spacing: 1.5rem;
font-size: 1rem; font-size: 1rem;
@ -17840,7 +17884,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
.bd-snippet-code.bd-is-more.bd-is-more-clipped .highlight::before { .bd-snippet-code.bd-is-more.bd-is-more-clipped .highlight::before {
background: linear-gradient(0deg, var(--hl-background), transparent); background: linear-gradient(0deg, var(--hl-background), transparent);
bottom: 0; bottom: 0;
content: ''; content: "";
display: block; display: block;
left: 0; left: 0;
position: absolute; position: absolute;
@ -19076,13 +19120,13 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
.bd-var .highlight pre { .bd-var .highlight pre {
overflow: visible; overflow: visible;
padding: 0; padding: 0.25em 0.5em 0.375em;
white-space: pre-wrap; white-space: pre-wrap;
white-space: break-spaces; white-space: break-spaces;
} }
.bd-var .bd-copy { .bd-var .bd-copy {
font-size: 0.5em !important; font-size: 0.75em !important;
right: 0; right: 0;
top: 0; top: 0;
} }
@ -19456,6 +19500,16 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
margin-right: 1em; margin-right: 1em;
} }
.bd-color {
border-radius: 2px;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1), inset 0 0 0 1px rgba(0, 0, 0, 0.1);
display: inline-block;
float: left;
height: 24px;
margin-right: 8px;
width: 24px;
}
:root { :root {
--bd-index-vertical: 1.5rem; --bd-index-vertical: 1.5rem;
--bd-index-gap: 3rem; --bd-index-gap: 3rem;
@ -19687,6 +19741,12 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
.bd-docs-toggles { .bd-docs-toggles {
display: none; display: none;
} }
.bd-docs.bd-is-full-main .bd-docs-main {
grid-column: 2 / span 2;
}
.bd-docs.bd-is-full-main .bd-docs-side {
display: none;
}
.bd-docs.bd-is-fullwidth { .bd-docs.bd-is-fullwidth {
display: block; display: block;
} }
@ -19730,7 +19790,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
.bd-docs.bd-is-fullwidth .bd-docs-nav:not(:hover) .bd-category a::after { .bd-docs.bd-is-fullwidth .bd-docs-nav:not(:hover) .bd-category a::after {
align-items: center; align-items: center;
bottom: 0; bottom: 0;
content: '•'; content: "•";
display: flex; display: flex;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
@ -19765,7 +19825,7 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
.bd-docs.bd-is-fullwidth .bd-docs-side:not(:hover) .bd-anchors-list li::after { .bd-docs.bd-is-fullwidth .bd-docs-side:not(:hover) .bd-anchors-list li::after {
align-items: center; align-items: center;
bottom: 0; bottom: 0;
content: '•'; content: "•";
display: flex; display: flex;
justify-content: center; justify-content: center;
position: absolute; position: absolute;
@ -20967,7 +21027,8 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
--device-md-width: 24px; --device-md-width: 24px;
--device-lg-height: 40px; --device-lg-height: 40px;
--device-lg-width: 48px; --device-lg-width: 48px;
animation: bdDeviceBounce 3.5s infinite; -webkit-animation: bdDeviceBounce 3.5s infinite;
animation: bdDeviceBounce 3.5s infinite;
border: 0 solid hsl(var(--device-deg), 100%, 53%); border: 0 solid hsl(var(--device-deg), 100%, 53%);
border-width: var(--device-y) var(--device-x); border-width: var(--device-y) var(--device-x);
border-radius: 0.375em; border-radius: 0.375em;
@ -21012,6 +21073,44 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
color: #333333; color: #333333;
} }
@-webkit-keyframes bdDeviceBounce {
0% {
--device-deg: var(--device-sm-deg);
height: var(--device-sm-height);
width: var(--device-sm-width);
}
28% {
--device-deg: var(--device-sm-deg);
height: var(--device-sm-height);
width: var(--device-sm-width);
}
33% {
--device-deg: var(--device-md-deg);
height: var(--device-md-height);
width: var(--device-md-width);
}
62% {
--device-deg: var(--device-md-deg);
height: var(--device-md-height);
width: var(--device-md-width);
}
67% {
--device-deg: var(--device-lg-deg);
height: var(--device-lg-height);
width: var(--device-lg-width);
}
95% {
--device-deg: var(--device-lg-deg);
height: var(--device-lg-height);
width: var(--device-lg-width);
}
100% {
--device-deg: var(--device-sm-deg);
height: var(--device-sm-height);
width: var(--device-sm-width);
}
}
@keyframes bdDeviceBounce { @keyframes bdDeviceBounce {
0% { 0% {
--device-deg: var(--device-sm-deg); --device-deg: var(--device-sm-deg);
@ -21050,6 +21149,15 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
} }
} }
@-webkit-keyframes bdGrow {
from {
transform: scale(0);
}
to {
transform: scale(1);
}
}
@keyframes bdGrow { @keyframes bdGrow {
from { from {
transform: scale(0); transform: scale(0);
@ -21059,6 +21167,17 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
} }
} }
@-webkit-keyframes bdSlideDown {
from {
opacity: 0;
transform: translateY(-1rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bdSlideDown { @keyframes bdSlideDown {
from { from {
opacity: 0; opacity: 0;
@ -21070,6 +21189,17 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
} }
} }
@-webkit-keyframes bdSlideUp {
from {
opacity: 0;
transform: translateY(1rem);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes bdSlideUp { @keyframes bdSlideUp {
from { from {
opacity: 0; opacity: 0;
@ -21082,67 +21212,96 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
} }
.bd-focus-item .title, .bd-focus-item .subtitle, .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3, .bd-focus-css3, .bd-focus-github { .bd-focus-item .title, .bd-focus-item .subtitle, .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop, .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3, .bd-focus-css3, .bd-focus-github {
animation-duration: 500ms; -webkit-animation-duration: 500ms;
animation-fill-mode: both; animation-duration: 500ms;
animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86); -webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
animation-timing-function: cubic-bezier(0.14, 0.71, 0.29, 0.86);
transform-origin: center center; transform-origin: center center;
} }
.bd-focus-item .title { .bd-focus-item .title {
animation-name: bdSlideDown; -webkit-animation-name: bdSlideDown;
animation-name: bdSlideDown;
} }
.bd-focus-item .subtitle { .bd-focus-item .subtitle {
animation-name: bdSlideUp; -webkit-animation-name: bdSlideUp;
animation-name: bdSlideUp;
} }
.bd-focus-item:nth-child(1) .title { .bd-focus-item:nth-child(1) .title {
animation-delay: 0; -webkit-animation-delay: 0;
animation-delay: 0;
} }
.bd-focus-item:nth-child(1) .subtitle { .bd-focus-item:nth-child(1) .subtitle {
animation-delay: 125ms; -webkit-animation-delay: 125ms;
animation-delay: 125ms;
} }
.bd-focus-item:nth-child(2) .title { .bd-focus-item:nth-child(2) .title {
animation-delay: 500ms; -webkit-animation-delay: 500ms;
animation-delay: 500ms;
} }
.bd-focus-item:nth-child(2) .subtitle { .bd-focus-item:nth-child(2) .subtitle {
animation-delay: 625ms; -webkit-animation-delay: 625ms;
animation-delay: 625ms;
} }
.bd-focus-item:nth-child(3) .title { .bd-focus-item:nth-child(3) .title {
animation-delay: 1000ms; -webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
} }
.bd-focus-item:nth-child(3) .subtitle { .bd-focus-item:nth-child(3) .subtitle {
animation-delay: 1125ms; -webkit-animation-delay: 1125ms;
animation-delay: 1125ms;
} }
.bd-focus-item:nth-child(4) .title { .bd-focus-item:nth-child(4) .title {
animation-delay: 1500ms; -webkit-animation-delay: 1500ms;
animation-delay: 1500ms;
} }
.bd-focus-item:nth-child(4) .subtitle { .bd-focus-item:nth-child(4) .subtitle {
animation-delay: 1625ms; -webkit-animation-delay: 1625ms;
animation-delay: 1625ms;
} }
.bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop { .bd-focus-mobile, .bd-focus-tablet, .bd-focus-desktop {
animation-name: bdGrow; -webkit-animation-name: bdGrow;
animation-name: bdGrow;
transform-origin: bottom center; transform-origin: bottom center;
} }
.bd-focus-mobile { .bd-focus-mobile {
animation-delay: 0; -webkit-animation-delay: 0;
animation-delay: 0;
} }
.bd-focus-tablet { .bd-focus-tablet {
animation-delay: 250ms; -webkit-animation-delay: 250ms;
animation-delay: 250ms;
} }
.bd-focus-desktop { .bd-focus-desktop {
animation-delay: 500ms; -webkit-animation-delay: 500ms;
animation-delay: 500ms;
}
@-webkit-keyframes bdCube1 {
0% {
transform: translate3d(0, -50px, 0);
opacity: 0;
}
25%,
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
} }
@keyframes bdCube1 { @keyframes bdCube1 {
@ -21157,6 +21316,18 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
} }
} }
@-webkit-keyframes bdCube2 {
0% {
transform: translate3d(-40px, 30px, 0);
opacity: 0;
}
25%,
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes bdCube2 { @keyframes bdCube2 {
0% { 0% {
transform: translate3d(-40px, 30px, 0); transform: translate3d(-40px, 30px, 0);
@ -21169,6 +21340,18 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
} }
} }
@-webkit-keyframes bdCube3 {
0% {
transform: translate3d(40px, 30px, 0);
opacity: 0;
}
25%,
100% {
transform: translate3d(0, 0, 0);
opacity: 1;
}
}
@keyframes bdCube3 { @keyframes bdCube3 {
0% { 0% {
transform: translate3d(40px, 30px, 0); transform: translate3d(40px, 30px, 0);
@ -21182,24 +21365,42 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
} }
.bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 { .bd-focus-cube-1, .bd-focus-cube-2, .bd-focus-cube-3 {
animation-direction: alternate; -webkit-animation-direction: alternate;
animation-duration: 2000ms; animation-direction: alternate;
animation-iteration-count: infinite; -webkit-animation-duration: 2000ms;
animation-duration: 2000ms;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
} }
.bd-focus-cube-1 { .bd-focus-cube-1 {
animation-delay: 500ms; -webkit-animation-delay: 500ms;
animation-name: bdCube1; animation-delay: 500ms;
-webkit-animation-name: bdCube1;
animation-name: bdCube1;
} }
.bd-focus-cube-2 { .bd-focus-cube-2 {
animation-name: bdCube2; -webkit-animation-name: bdCube2;
animation-delay: 750ms; animation-name: bdCube2;
-webkit-animation-delay: 750ms;
animation-delay: 750ms;
} }
.bd-focus-cube-3 { .bd-focus-cube-3 {
animation-name: bdCube3; -webkit-animation-name: bdCube3;
animation-delay: 1000ms; animation-name: bdCube3;
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
}
@-webkit-keyframes bdFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
} }
@keyframes bdFadeIn { @keyframes bdFadeIn {
@ -21211,6 +21412,17 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
} }
} }
@-webkit-keyframes bdSlowIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes bdSlowIn { @keyframes bdSlowIn {
from { from {
opacity: 0; opacity: 0;
@ -21222,6 +21434,17 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
} }
} }
@-webkit-keyframes bdScaleIn {
from {
opacity: 0;
transform: scale(0);
}
to {
opacity: 1;
transform: scale(1);
}
}
@keyframes bdScaleIn { @keyframes bdScaleIn {
from { from {
opacity: 0; opacity: 0;
@ -21234,14 +21457,103 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
} }
.bd-focus-css3 { .bd-focus-css3 {
animation-delay: 1000ms; -webkit-animation-delay: 1000ms;
animation-name: bdScaleIn; animation-delay: 1000ms;
-webkit-animation-name: bdScaleIn;
animation-name: bdScaleIn;
} }
.bd-focus-github { .bd-focus-github {
animation-delay: 1500ms; -webkit-animation-delay: 1500ms;
animation-duration: 1500ms; animation-delay: 1500ms;
animation-name: bdJellyPop; -webkit-animation-duration: 1500ms;
animation-duration: 1500ms;
-webkit-animation-name: bdJellyPop;
animation-name: bdJellyPop;
}
@-webkit-keyframes bdJellyPop {
0% {
opacity: 0;
transform: matrix3d(0.1, 0, 0, 0, 0, 0.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
3.4% {
opacity: 1;
transform: matrix3d(0.384, 0, 0, 0, 0, 0.466, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
4.7% {
transform: matrix3d(0.505, 0, 0, 0, 0, 0.639, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
6.81% {
transform: matrix3d(0.693, 0, 0, 0, 0, 0.904, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
9.41% {
transform: matrix3d(0.895, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
10.21% {
transform: matrix3d(0.947, 0, 0, 0, 0, 1.204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
13.61% {
transform: matrix3d(1.111, 0, 0, 0, 0, 1.299, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
14.11% {
transform: matrix3d(1.127, 0, 0, 0, 0, 1.298, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
17.52% {
transform: matrix3d(1.187, 0, 0, 0, 0, 1.216, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
18.72% {
transform: matrix3d(1.191, 0, 0, 0, 0, 1.169, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
21.32% {
transform: matrix3d(1.177, 0, 0, 0, 0, 1.062, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
24.32% {
transform: matrix3d(1.135, 0, 0, 0, 0, 0.964, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
25.23% {
transform: matrix3d(1.121, 0, 0, 0, 0, 0.944, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
29.03% {
transform: matrix3d(1.057, 0, 0, 0, 0, 0.907, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
29.93% {
transform: matrix3d(1.043, 0, 0, 0, 0, 0.909, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
35.54% {
transform: matrix3d(0.981, 0, 0, 0, 0, 0.966, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
36.74% {
transform: matrix3d(0.974, 0, 0, 0, 0, 0.981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
41.04% {
transform: matrix3d(0.965, 0, 0, 0, 0, 1.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
44.44% {
transform: matrix3d(0.969, 0, 0, 0, 0, 1.029, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
52.15% {
transform: matrix3d(0.992, 0, 0, 0, 0, 1.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
59.86% {
transform: matrix3d(1.005, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
63.26% {
transform: matrix3d(1.007, 0, 0, 0, 0, 0.993, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
75.28% {
transform: matrix3d(1.001, 0, 0, 0, 0, 1.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
85.49% {
transform: matrix3d(0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
90.69% {
transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
100% {
opacity: 1;
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
}
} }
@keyframes bdJellyPop { @keyframes bdJellyPop {
@ -21337,18 +21649,23 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
.bd-best-list { .bd-best-list {
align-items: stretch; align-items: stretch;
animation-duration: 93.6s; -webkit-animation-duration: 93.6s;
animation-iteration-count: infinite; animation-duration: 93.6s;
animation-timing-function: linear; -webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
display: flex; display: flex;
left: 0; left: 0;
position: absolute; position: absolute;
top: 1.5rem; top: 1.5rem;
animation-name: bdBestCarousel; -webkit-animation-name: bdBestCarousel;
animation-name: bdBestCarousel;
} }
.bd-best-list:hover { .bd-best-list:hover {
animation-play-state: paused; -webkit-animation-play-state: paused;
animation-play-state: paused;
} }
.bd-best-item { .bd-best-item {
@ -21396,6 +21713,12 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
width: auto; width: auto;
} }
@-webkit-keyframes bdBestCarousel {
100% {
transform: translateX(calc(-100% + 3120px));
}
}
@keyframes bdBestCarousel { @keyframes bdBestCarousel {
100% { 100% {
transform: translateX(calc(-100% + 3120px)); transform: translateX(calc(-100% + 3120px));
@ -22369,7 +22692,8 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
} }
.bulma-loader-mixin { .bulma-loader-mixin {
animation: spinAround 500ms infinite linear; -webkit-animation: spinAround 500ms infinite linear;
animation: spinAround 500ms infinite linear;
border: 2px solid #dbdbdb; border: 2px solid #dbdbdb;
border-radius: 9999px; border-radius: 9999px;
border-right-color: transparent; border-right-color: transparent;
@ -22551,3 +22875,54 @@ a.has-text-bootstrap-dark:hover, a.has-text-bootstrap-dark:focus {
margin-left: 1rem; margin-left: 1rem;
border-radius: 0.25em; border-radius: 0.25em;
} }
.bulma-control-mixin {
-moz-appearance: none;
-webkit-appearance: none;
align-items: center;
border: 1px solid transparent;
border-radius: 0.375em;
box-shadow: none;
display: inline-flex;
font-size: 1rem;
height: 2.5em;
justify-content: flex-start;
line-height: 1.5;
padding-bottom: calc(0.5em - 1px);
padding-left: calc(0.75em - 1px);
padding-right: calc(0.75em - 1px);
padding-top: calc(0.5em - 1px);
position: relative;
vertical-align: top;
background: deeppink;
color: white;
}
.bulma-control-mixin:focus, .bulma-control-mixin.is-focused, .bulma-control-mixin:active, .bulma-control-mixin.is-active {
outline: none;
}
.bulma-control-mixin[disabled],
fieldset[disabled] .bulma-control-mixin {
cursor: not-allowed;
}
.bulma-control-mixin.is-small {
border-radius: 2px;
font-size: 0.75rem;
}
.bulma-control-mixin.is-medium {
font-size: 1.25rem;
}
.bulma-control-mixin.is-large {
font-size: 1.5rem;
}
.bulma-control-extend {
background: mediumblue;
color: white;
}
/*# sourceMappingURL=bulma-docs.css.map */

2
docs/css/bulma-docs.min.css vendored
View File

File diff suppressed because one or more lines are too long

163
docs/documentation/overview/responsiveness.html
View File

@ -44,7 +44,7 @@ $fullhd-enabled: false
{% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L81,L129" | prepend: site.data.meta.github %} {% assign mixins_file_url = "/blob/master/sass/utilities/mixins.sass#L81,L129" | prepend: site.data.meta.github %}
<div class="content"> <div class="content">
<p>Bulma has <a href="{{ variables_file_url }}" target="_blank">5 breakpoints</a>:</p> <p>Bulma has <a href="{{ variables_file_url }}" target="_blank">4 breakpoints</a> which defines <strong>5 screen sizes</strong>:</p>
<ul> <ul>
{% for breakpoint_hash in site.data.breakpoints %} {% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %} {% assign breakpoint = breakpoint_hash[1] %}
@ -52,160 +52,17 @@ $fullhd-enabled: false
{% endfor %} {% endfor %}
</ul> </ul>
<p>Bulma uses <a href="{{ mixins_file_url }}" target="_blank">9 responsive mixins</a>:</p> <p>To make use of these breakpoints, Bulma provides <a href="{{ site.url }}/documentation/utilities/responsive-mixins/">9 responsive mixins</a>.</p>
<ul>
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
{% case breakpoint.id %}
{% when 'mobile' %}
<li>
<code>={{ breakpoint.id }}</code><br>
until <code>{{ breakpoint.to }}px</code>
</li>
{% when 'fullhd' %}
<li>
<code>={{ breakpoint.id }}</code><br>
from <code>{{ breakpoint.from }}px</code>
</li>
{% else %}
<li>
<code>={{ breakpoint.id }}</code><br>
from <code>{{ breakpoint.from }}px</code>
</li>
<li>
<code>={{ breakpoint.id }}-only</code><br>
from <code>{{ breakpoint.from }}px</code> and until <code>{{ breakpoint.to }}px</code>
</li>
{% if breakpoint.id == 'tablet' %}
<li>
<code>=touch</code><br>
until <code>{{ breakpoint.to }}px</code>
</li>
{% endif %}
{% endcase %}
{% endfor %}
</ul>
</div> </div>
<div class="table-container"> {% include components/breakpoints-table.html %}
<table class="table is-bordered">
<thead> {% assign urm_link = site.data.links.by_id['utilities-responsive-mixins'] %}
<tr>
{% for breakpoint_hash in site.data.breakpoints %} <div class="content">
{% assign breakpoint = breakpoint_hash[1] %} <p>
<th style="width: 20%;"> To simplify using these breakpoints, Bulma provides <a href="{{ site.url }}{{ urm_link.path }}">easy-to-use responsive mixins</a>.
{{ breakpoint.name }}<br> </p>
{% 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>
<tbody>
<tr>
<td>
<p class="notification is-success">mobile</p>
</td>
<td colspan="4">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td>
<p class="notification">-</p>
</td>
<td colspan="4">
<p class="notification is-success">tablet</p>
</td>
</tr>
<tr>
<td colspan="2">
<p class="notification">-</p>
</td>
<td colspan="3">
<p class="notification is-success">desktop</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="notification">-</p>
</td>
<td colspan="2">
<p class="notification is-success">widescreen</p>
</td>
</tr>
<tr>
<td colspan="4">
<p class="notification">-</p>
</td>
<td>
<p class="notification is-success">fullhd</p>
</td>
</tr>
<tr>
<td>
<p class="notification">-</p>
</td>
<td>
<p class="notification is-success">tablet-only</p>
</td>
<td colspan="3">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="2">
<p class="notification">-</p>
</td>
<td>
<p class="notification is-success">desktop-only</p>
</td>
<td colspan="2">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="notification">-</p>
</td>
<td>
<p class="notification is-success">widescreen-only</p>
</td>
<td>
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="2">
<p class="notification is-success">touch</p>
</td>
<td colspan="3">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="notification is-success">until-widescreen</p>
</td>
<td colspan="2">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="4">
<p class="notification is-success">until-fullhd</p>
</td>
<td colspan="1">
<p class="notification">-</p>
</td>
</tr>
</tbody>
</table>
</div> </div>
{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %} {% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %}

13
docs/documentation/utilities.html Normal file
View File

@ -0,0 +1,13 @@
---
title: Utilities
layout: documentation
doc-tab: utilities
hide_tabs: true
hide_pagination: true
breadcrumb:
- home
- documentation
- utilities
---
{% include components/links.html category_id='utilities' %}

176
docs/documentation/utilities/control-mixins.html
View File

@ -1,68 +1,130 @@
--- ---
title: Mixins title: Form Control Mixins
layout: documentation layout: documentation
doc-tab: overview doc-tab: utilities
doc-subtab: mixins doc-subtab: control-mixins
breadcrumb: breadcrumb:
- home - home
- documentation - documentation
- overview - utilities
- overview-mixins - utilities-control-mixins
--- ---
<div class="table-container"> <div class="content">
<table class="table is-bordered"> <p>
<tr> In Bulma, the <strong>form controls</strong> are an essential part of the framework. They comprise the following elements:
<td><code>=arrow($color)</code></td> </p>
<td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
</tr> <ul>
<tr> <li>
<td><code>=block</code></td> <code>.button</code>
<td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td> </li>
</tr> <li>
<tr> <code>.input</code>
<td><code>=clearfix</code></td> </li>
<td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td> <li>
</tr> <code>.select</code>
<tr> </li>
<td><code>=center($size)</code></td> <li>
<td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td> <code>.file-cta</code>
</tr> <code>.file-name</code>
<tr> </li>
<td><code>=delete</code></td> <li>
<td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td> <code>.pagination-previous</code>
</tr> <code>.pagination-next</code>
<tr> <code>.pagination-link</code>
<td><code>=fa($size, $dimensions)</code></td> <code>.pagination-ellipsis</code>
<td>Sets the style of a Font Awesome icon container.</td> </li>
</tr> </ul>
<tr>
<td><code>=hamburger($dimensions)</code></td> <p>
<td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td> The <code>control()</code> mixin ensures <strong>consistency</strong> by providing a set of styles that are shared between all these form controls. You can use it to create additional controls:
</tr> </p>
<tr>
<td><code>=loader</code></td>
<td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
</tr>
<tr>
<td><code>=overflow-touch</code></td>
<td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
</tr>
<tr>
<td><code>=overlay($offset: 0)</code></td>
<td>Makes the element overlay its parent container, like the transparent modal background.</td>
</tr>
<tr>
<td><code>=placeholder</code></td>
<td>Sets the styles of an input placeholder.</td>
</tr>
<tr>
<td><code>=unselectable</code></td>
<td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
</tr>
</table>
</div> </div>
{% highlight sass %}.bulma-control-mixin {
@include control;
background: deeppink;
color: white;
}{% endhighlight %}
{% capture control-mixin %}
<button class="bulma-control-mixin">
My control
</button>
{% endcapture %}
{% include elements/snippet.html content=control-mixin %}
{% include elements/anchor.html name="Sizes" %}
<div class="content"> <div class="content">
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p> <p>
Controls have a default font size of <code>$size-normal</code> also come in <strong>3 additional sizes</strong>, which can be accessed via 3 additional mixins:
</p>
<ul>
<li>
{% include elements/snippet-inline.html content="@include control-small;" %} with a font size <code>$size-small</code>
</li>
<li>
{% include elements/snippet-inline.html content="@include control-medium;" %} with a font size <code>$size-medium</code>
</li>
<li>
{% include elements/snippet-inline.html content="@include control-large;" %} with a font size <code>$size-large</code>
</li>
</ul>
</div> </div>
{% highlight sass %}.bulma-control-mixin {
&.is-small {
@include control-small;
}
&.is-medium {
@include control-medium;
}
&.is-large {
@include control-large;
}
}{% endhighlight %}
{% capture control-mixin-sizes %}
<button class="bulma-control-mixin is-small">
Small
</button>
<button class="bulma-control-mixin">
Normal
</button>
<button class="bulma-control-mixin is-medium">
Medium
</button>
<button class="bulma-control-mixin is-large">
Large
</button>
{% endcapture %}
{% include elements/snippet.html content=control-mixin-sizes %}
{% include elements/anchor.html name="Control placeholder" %}
<div class="content">
<p>
The <code>control()</code> mixin also exists as <a href="https://sass-lang.com/documentation/at-rules/extend#placeholder-selectors" target="_blank">Sass placeholder</a> <code>%control</code>
</p>
</div>
{% highlight sass %}.bulma-control-extend {
@extend %control;
background: mediumblue;
color: white;
}{% endhighlight %}
{% capture control-extend %}
<button class="bulma-control-extend">
My control
</button>
{% endcapture %}
{% include elements/snippet.html content=control-extend %}

109
docs/documentation/utilities/extends.html
View File

@ -1,68 +1,59 @@
--- ---
title: Mixins title: Extends
layout: documentation layout: documentation
doc-tab: overview doc-tab: utilities
doc-subtab: mixins doc-subtab: extends
breadcrumb: breadcrumb:
- home - home
- documentation - documentation
- overview - utilities
- overview-mixins - utilities-extends
--- ---
<div class="table-container">
<table class="table is-bordered">
<tr>
<td><code>=arrow($color)</code></td>
<td>Creates a CSS-only down arrow. Used for the dropdown select.</td>
</tr>
<tr>
<td><code>=block</code></td>
<td>Defines a margin-bottom of 1.5rem, except when the element is the last child. Used for almost all block elements.</td>
</tr>
<tr>
<td><code>=clearfix</code></td>
<td>Adds a clearfix at the end of the element. Used for the "is-clearfix" helper.</td>
</tr>
<tr>
<td><code>=center($size)</code></td>
<td>Positions an element in the exact center of its parent. Used for the spinner in a loading button.</td>
</tr>
<tr>
<td><code>=delete</code></td>
<td>Creates a CSS-only cross. Used for the delete element in modals, messages, tags...</td>
</tr>
<tr>
<td><code>=fa($size, $dimensions)</code></td>
<td>Sets the style of a Font Awesome icon container.</td>
</tr>
<tr>
<td><code>=hamburger($dimensions)</code></td>
<td>Creates a CSS-only hamburger menu with 3 bars. Used for the "nav-toggle".</td>
</tr>
<tr>
<td><code>=loader</code></td>
<td>Creates a CSS-only loading spinner. Used for the ".loader" element, and for input and button spinners.</td>
</tr>
<tr>
<td><code>=overflow-touch</code></td>
<td>Sets the style of a container so that it keeps momentum when scrolling on iOS devices.</td>
</tr>
<tr>
<td><code>=overlay($offset: 0)</code></td>
<td>Makes the element overlay its parent container, like the transparent modal background.</td>
</tr>
<tr>
<td><code>=placeholder</code></td>
<td>Sets the styles of an input placeholder.</td>
</tr>
<tr>
<td><code>=unselectable</code></td>
<td>Turns the element unselectable. Used for buttons to prevent selection when clicking.</td>
</tr>
</table>
</div>
<div class="content"> <div class="content">
<p>These mixins are already used throughout Bulma, but you can use them as well to extend your own styles.</p> <p>
In Bulma, a lot of element <strong>share</strong> a set of styles. While mixins allow sharing, they repeat the CSS rules everytime they are used.
</p>
<p>
To avoid the repetition, Bulma uses the <code>@extend</code> rule to share code. This rule tells Sass that one selector should inherit the styles of another. <a href="https://sass-lang.com/documentation/at-rules/extend" target="_blank">Learn more about the extend rule</a>.
</p>
<p>
Instead of creating CSS classes that might not be used to be the <strong>source</strong> of the set of styles, Bulma uses Sass <strong>placeholders</strong>:
</p>
<ul>
<li>
{% include elements/snippet-inline.html content="%control" %}
</li>
<li>
{% include elements/snippet-inline.html content="%unselectable" %}
</li>
<li>
{% include elements/snippet-inline.html content="%arrow" %}
</li>
<li>
{% include elements/snippet-inline.html content="%block" %}
</li>
<li>
{% include elements/snippet-inline.html content="%delete" %}
</li>
<li>
{% include elements/snippet-inline.html content="%loader" %}
</li>
<li>
{% include elements/snippet-inline.html content="%overlay" %}
</li>
<li>
{% include elements/snippet-inline.html content="%reset" %}
</li>
</ul>
{% assign mixins_link = site.data.links.by_id['utilities-mixins'] %}
{% assign controls_link = site.data.links.by_id['utilities-control-mixins'] %}
<p>
Each of these placeholders are simply the <code>@extend</code> version of their <a href="{{ site.url }}{{ mixins_link.path }}">corresponding mixins</a> (here for the <a href="{{ site.url }}{{ controls_link.path }}">control mixin</a>).
</p>
</div> </div>

81
docs/documentation/utilities/functions.html
View File

@ -1,13 +1,13 @@
--- ---
title: Functions title: Functions
layout: documentation layout: documentation
doc-tab: overview doc-tab: utilities
doc-subtab: functions doc-subtab: functions
breadcrumb: breadcrumb:
- home - home
- documentation - documentation
- overview - utilities
- overview-functions - utilities-functions
--- ---
<div class="content"> <div class="content">
@ -203,6 +203,7 @@ breadcrumb:
<br> <br>
For example, this shade of <span class="bd-color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black: For example, this shade of <span class="bd-color" style="background: hsl(294, 71%, 79%); float: none; height: 16px; width: 16px; margin-right: 0; vertical-align: middle;"></span> purple has a color luminance of <code>0.5529</code>. It can be preferable to set a color invert of white instead of transparent black:
</p> </p>
<div class="table-container"> <div class="table-container">
<table class="table is-bordered"> <table class="table is-bordered">
<tbody> <tbody>
@ -252,3 +253,77 @@ breadcrumb:
The <code>findLightColor($color)</code> and <code>findDarkColor($color)</code> functions take a <strong>color</strong> as an input, and output that color's light and dark versions respectively</code>: The <code>findLightColor($color)</code> and <code>findDarkColor($color)</code> functions take a <strong>color</strong> as an input, and output that color's light and dark versions respectively</code>:
</p> </p>
</div> </div>
<div class="table-container">
<table class="table is-bordered">
<thead>
<tr>
<th>color</th>
<th>findLightColor</th>
<th>findDarkColor</th>
</tr>
</thead>
<tbody>
<tr>
<td>
{% include elements/color-square.html value="hsl(171deg, 100%, 41%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(171deg, 100%, 96%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(171deg, 100%, 29%)" %}
</td>
</tr>
<tr>
<td>
{% include elements/color-square.html value="hsl(229deg 53% 53%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(229deg 52% 96%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(229deg 53% 47%)" %}
</td>
</tr>
<tr>
<td>
{% include elements/color-square.html value="hsl(153deg 53% 53%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(153deg 52% 96%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(153deg 53% 31%)" %}
</td>
</tr>
<tr>
<td>
{% include elements/color-square.html value="hsl(44deg 100% 77%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(45deg 100% 96%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(44deg 100% 29%)" %}
</td>
</tr>
<tr>
<td>
{% include elements/color-square.html value="hsl(348deg 86% 61%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(347deg 90% 96%)" %}
</td>
<td>
{% include elements/color-square.html value="hsl(348deg 86% 43%)" %}
</td>
</tr>
</tbody>
</table>
</div>

224
docs/documentation/utilities/responsive-mixins.html
View File

@ -1,11 +1,231 @@
--- ---
title: Mixins title: Responsive Mixins
layout: documentation layout: documentation
doc-tab: utilities doc-tab: utilities
doc-subtab: mixins doc-subtab: responsive-mixins
fullmain: true
breadcrumb: breadcrumb:
- home - home
- documentation - documentation
- utilities - utilities
- utilities-responsive-mixins - utilities-responsive-mixins
--- ---
<div class="content">
<p>
Bulma is <strong>responsive by default</strong>. <a href="{{ site.url}}/overview/responsiveness/">Learn more about Bulma's responsiveness</a>.
</p>
<div class="content">
By having <strong>4 breakpoints</strong> and supporting <strong>5 screen sizes</strong>, Bulma can support a lot of different setups. To simplify your development process, the framework provides several <strong>responsive mixins</strong> that you can use to create a <strong>responsive design</strong>:
</div>
</div>
{% capture inc-mobile %}
@include mobile {
// Styles applied
// below $tablet
}
{% endcapture %}
{% capture inc-tablet %}
@include tablet {
// Styles applied
// above $tablet
}
{% endcapture %}
{% capture inc-tablet-only %}
@include tablet-only {
// Styles applied
// between $tablet
// and $desktop
}
{% endcapture %}
{% capture inc-desktop-only %}
@include desktop-only {
// Styles applied
// between $desktop
// and $widescreen
}
{% endcapture %}
{% capture inc-widescreen-only %}
@include widescreen-only {
// Styles applied
// between $widescreen
// and $fullhd
}
{% endcapture %}
{% capture inc-desktop %}
@include desktop {
// Styles applied
// above $desktop
}
{% endcapture %}
{% capture inc-widescreen %}
@include widescreen {
// Styles applied
// above $widescreen
}
{% endcapture %}
{% capture inc-fullhd %}
@include fullhd {
// Styles applied
// above $fullhd
}
{% endcapture %}
{% capture inc-touch %}
@include touch {
// Styles applied
// below $desktop
}
{% endcapture %}
{% capture inc-until-widescreen %}
@include until-widescreen {
// Styles applied
// below $widescreen
}
{% endcapture %}
{% capture inc-until-fullhd %}
@include until {
// Styles applied
// below $fullhd
}
{% endcapture %}
<div class="table-container">
<table class="table is-bordered">
<thead>
<tr>
{% for breakpoint_hash in site.data.breakpoints %}
{% assign breakpoint = breakpoint_hash[1] %}
<th style="width: 20%;">
{{ 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>
<tbody>
<tr>
<td>
{% highlight sass %}{{ inc-mobile }}{% endhighlight %}
</td>
<td colspan="4">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td>
<p class="notification">-</p>
</td>
<td colspan="4">
{% highlight sass %}{{ inc-tablet }}{% endhighlight %}
</td>
</tr>
<tr>
<td colspan="2">
<p class="notification">-</p>
</td>
<td colspan="3">
{% highlight sass %}{{ inc-desktop }}{% endhighlight %}
</td>
</tr>
<tr>
<td colspan="3">
<p class="notification">-</p>
</td>
<td colspan="2">
{% highlight sass %}{{ inc-widescreen }}{% endhighlight %}
</td>
</tr>
<tr>
<td colspan="4">
<p class="notification">-</p>
</td>
<td>
{% highlight sass %}{{ inc-fullhd }}{% endhighlight %}
</td>
</tr>
<tr>
<td>
<p class="notification">-</p>
</td>
<td>
{% highlight sass %}{{ inc-tablet-only }}{% endhighlight %}
</td>
<td colspan="3">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="2">
<p class="notification">-</p>
</td>
<td>
{% highlight sass %}{{ inc-desktop-only }}{% endhighlight %}
</td>
<td colspan="2">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="notification">-</p>
</td>
<td>
{% highlight sass %}{{ inc-widescreen-only }}{% endhighlight %}
</td>
<td>
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="2">
{% highlight sass %}{{ inc-touch }}{% endhighlight %}
</td>
<td colspan="3">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="3">
{% highlight sass %}{{ inc-until-widescreen }}{% endhighlight %}
</td>
<td colspan="2">
<p class="notification">-</p>
</td>
</tr>
<tr>
<td colspan="4">
{% highlight sass %}{{ inc-until-fullhd }}{% endhighlight %}
</td>
<td colspan="1">
<p class="notification">-</p>
</td>
</tr>
</tbody>
</table>
</div>
{% assign or_link = site.data.links.by_id['overview-responsiveness'] %}
<div class="content">
<p>
Learn more about <a href="{{ site.url }}{{ or_link.path }}">Bulma responsiveness</a>.
</p>
</div>