is- or has-.",
"color": "orange",
"icon": "code",
- "path": "/documentation/overview/modifiers"
+ "path": "/documentation/overview/modifiers/"
},
"modifiers-helpers": {
"name": "Helpers",
"subtitle": "Apply helper classes to almost any element, in order to alter its style",
"color": "danger",
"icon": "medkit",
- "path": "/documentation/modifiers/helpers"
+ "path": "/documentation/modifiers/helpers/"
},
"modifiers-responsive-helpers": {
"name": "Responsive helpers",
"subtitle": "Show/hide content depending on the width of the viewport",
"color": "primary",
"icon": "arrows-alt-h",
- "path": "/documentation/modifiers/responsive-helpers"
+ "path": "/documentation/modifiers/responsive-helpers/"
},
"modifiers-color-helpers": {
"name": "Color helpers",
"subtitle": "Change the color of the text and/or background",
"color": "info",
"icon": "tint",
- "path": "/documentation/modifiers/color-helpers"
+ "path": "/documentation/modifiers/color-helpers/"
},
"modifiers-typography-helpers": {
"name": "Typography helpers",
"subtitle": "Change the size and color of the text for one or multiple viewport width",
"color": "grey-dark",
"icon": "font",
- "path": "/documentation/modifiers/typography-helpers"
+ "path": "/documentation/modifiers/typography-helpers/"
},
"helpers": {
"name": "Helpers",
"subtitle": "Apply helper classes to almost any element, in order to alter their style",
"color": "danger",
"icon": "medkit",
- "path": "/documentation/helpers"
+ "path": "/documentation/helpers/"
},
"helpers-color": {
"name": "Color",
"subtitle": "Change the color of the text and/or background",
"color": "info",
"icon": "tint",
- "path": "/documentation/helpers/color-helpers"
+ "path": "/documentation/helpers/color-helpers/"
},
"helpers-typography": {
"name": "Typography",
"subtitle": "Change the size, weight, and other font properties of the text",
"color": "grey-dark",
"icon": "font",
- "path": "/documentation/helpers/typography-helpers"
+ "path": "/documentation/helpers/typography-helpers/"
},
"helpers-spacing": {
"name": "Spacing",
"subtitle": "Change the size and color of the text for one or multiple viewport width",
"color": "grey-dark",
"icon": "arrows-alt-h",
- "path": "/documentation/helpers/spacing-helpers"
+ "path": "/documentation/helpers/spacing-helpers/"
},
"helpers-visibility": {
"name": "Visibility",
"subtitle": "Show/hide content depending on the width of the viewport",
"color": "primary",
"icon": "eye",
- "path": "/documentation/helpers/visibility-helpers"
+ "path": "/documentation/helpers/visibility-helpers/"
},
"helpers-flexbox": {
"name": "Flexbox",
"subtitle": "Helpers for all Flexbox properties",
"color": "primary",
"icon": "ellipsis-h",
- "path": "/documentation/helpers/flexbox-helpers"
+ "path": "/documentation/helpers/flexbox-helpers/"
},
"helpers-other": {
"name": "Other",
"subtitle": "Other useful Bulma helpers",
"color": "primary",
"icon": "medkit",
- "path": "/documentation/helpers/other-helpers"
+ "path": "/documentation/helpers/other-helpers/"
},
"columns": {
"name": "Columns",
"subtitle": "The power of Flexbox in a simple interface",
"color": "star",
"icon": "columns",
- "path": "/documentation/columns"
+ "path": "/documentation/columns/"
},
"columns-basics": {
"name": "Basics",
"subtitle": "A simple way to build responsive columns",
"color": "star",
"icon": "columns",
- "path": "/documentation/columns/basics"
+ "path": "/documentation/columns/basics/"
},
"columns-sizes": {
"name": "Sizes",
"subtitle": "Define the size of each column individually",
"color": "success",
"icon": "expand-arrows-alt",
- "path": "/documentation/columns/sizes"
+ "path": "/documentation/columns/sizes/"
},
"columns-responsiveness": {
"name": "Responsiveness",
"subtitle": "Handle different column layouts for each breakpoint",
"color": "primary",
"icon": "arrows-alt-h",
- "path": "/documentation/columns/responsiveness"
+ "path": "/documentation/columns/responsiveness/"
},
"columns-nesting": {
"name": "Nesting",
"subtitle": "A simple way to build responsive columns",
"color": "danger",
"icon": "sitemap",
- "path": "/documentation/columns/nesting"
+ "path": "/documentation/columns/nesting/"
},
"columns-gap": {
"name": "Gap",
"subtitle": "Customize the gap between the columns",
"color": "info",
"icon": "pause",
- "path": "/documentation/columns/gap"
+ "path": "/documentation/columns/gap/"
},
"columns-options": {
"name": "Options",
"subtitle": "Design different types of column layouts",
"color": "grey",
"icon": "cogs",
- "path": "/documentation/columns/options"
+ "path": "/documentation/columns/options/"
},
"layout": {
"name": "Layout",
"subtitle": "Design the structure of your webpage with these CSS classes",
"color": "success",
"icon": "warehouse",
- "path": "/documentation/layout"
+ "path": "/documentation/layout/"
},
"layout-container": {
"name": "Container",
"subtitle": "A simple container to center your content horizontally",
- "path": "/documentation/layout/container",
+ "path": "/documentation/layout/container/",
"icon": "arrows-alt-h"
},
"layout-level": {
"name": "Level",
"subtitle": "A multi-purpose horizontal level, which can contain almost any other element",
- "path": "/documentation/layout/level",
+ "path": "/documentation/layout/level/",
"icon": "ruler-horizontal"
},
"layout-media": {
"name": "Media Object",
"subtitle": "The famous media object prevalent in social media interfaces, but useful in any context",
- "path": "/documentation/layout/media-object",
+ "path": "/documentation/layout/media-object/",
"icon": "th-list"
},
"layout-hero": {
"name": "Hero",
"subtitle": "An imposing hero banner to showcase something",
- "path": "/documentation/layout/hero",
+ "path": "/documentation/layout/hero/",
"icon": "star"
},
"layout-section": {
"name": "Section",
"subtitle": "A simple container to divide your page into sections, like the one you're currently reading",
- "path": "/documentation/layout/section",
+ "path": "/documentation/layout/section/",
"icon": "square"
},
"layout-footer": {
"name": "Footer",
"subtitle": "A simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc.",
- "path": "/documentation/layout/footer",
+ "path": "/documentation/layout/footer/",
"icon": "window-minimize"
},
"layout-tiles": {
"name": "Tiles",
"subtitle": "A single tile element to build 2-dimensional Metro-like, Pinterest-like, or whatever-you-like grids",
- "path": "/documentation/layout/tiles",
+ "path": "/documentation/layout/tiles/",
"icon": "th"
},
"form": {
@@ -361,7 +362,7 @@
"color": "link",
"icon_brand": "true",
"icon": "wpforms",
- "path": "/documentation/form"
+ "path": "/documentation/form/"
},
"form-general": {
"name": "General",
@@ -369,63 +370,63 @@
"color": "link",
"icon": "keyboard",
"icon_regular": "true",
- "path": "/documentation/form/general"
+ "path": "/documentation/form/general/"
},
"form-input": {
"name": "Input",
"subtitle": "The text input and its variations",
"color": "link",
"icon": "minus",
- "path": "/documentation/form/input"
+ "path": "/documentation/form/input/"
},
"form-textarea": {
"name": "Textarea",
"subtitle": "The multiline textarea and its variations",
"color": "link",
"icon": "square",
- "path": "/documentation/form/textarea"
+ "path": "/documentation/form/textarea/"
},
"form-select": {
"name": "Select",
"subtitle": "The browser built-in select dropdown, styled accordingly",
"color": "link",
"icon": "mouse-pointer",
- "path": "/documentation/form/select"
+ "path": "/documentation/form/select/"
},
"form-checkbox": {
"name": "Checkbox",
"subtitle": "The 2-state checkbox in its native format",
"color": "link",
"icon": "check-square",
- "path": "/documentation/form/checkbox"
+ "path": "/documentation/form/checkbox/"
},
"form-radio": {
"name": "Radio",
"subtitle": "The mutually exclusive radio buttons in their native format",
"color": "link",
"icon": "dot-circle",
- "path": "/documentation/form/radio"
+ "path": "/documentation/form/radio/"
},
"form-file": {
"name": "File",
"subtitle": "A custom file upload input, without JavaScript",
"color": "link",
"icon": "cloud-upload-alt",
- "path": "/documentation/form/file"
+ "path": "/documentation/form/file/"
},
"elements": {
"name": "Elements",
"subtitle": "Essential interface elements that only require a single CSS class",
"color": "orange",
"icon": "cube",
- "path": "/documentation/elements"
+ "path": "/documentation/elements/"
},
"elements-block": {
"name": "Block",
"subtitle": "Bulma's most basic spacer block",
"color": "grey",
"icon": "arrows-alt-v",
- "path": "/documentation/elements/block"
+ "path": "/documentation/elements/block/"
},
"elements-box": {
"name": "Box",
@@ -433,7 +434,7 @@
"color": "grey",
"icon": "square",
"icon_regular": "true",
- "path": "/documentation/elements/box"
+ "path": "/documentation/elements/box/"
},
"elements-button": {
"name": "Button",
@@ -441,104 +442,104 @@
"color": "success",
"icon": "hand-pointer",
"icon_regular": "true",
- "path": "/documentation/elements/button"
+ "path": "/documentation/elements/button/"
},
"elements-content": {
"name": "Content",
"subtitle": "A single class to handle WYSIWYG generated content, where only HTML tags are available",
"color": "primary",
"icon": "align-left",
- "path": "/documentation/elements/content"
+ "path": "/documentation/elements/content/"
},
"elements-delete": {
"name": "Delete",
"subtitle": "A versatile delete cross",
"color": "danger",
"icon": "times-circle",
- "path": "/documentation/elements/delete"
+ "path": "/documentation/elements/delete/"
},
"elements-icon": {
"name": "Icon",
"subtitle": "Compatible with all icon font libraries, including Font Awesome 5",
"icon": "font-awesome",
"icon_brand": "true",
- "path": "/documentation/elements/icon"
+ "path": "/documentation/elements/icon/"
},
"elements-image": {
"name": "Image",
"subtitle": "A container for responsive images",
"color": "purple",
"icon": "image",
- "path": "/documentation/elements/image"
+ "path": "/documentation/elements/image/"
},
"elements-notification": {
"name": "Notification",
"subtitle": "Bold notification blocks, to alert your users of something",
"color": "orange",
"icon": "exclamation-triangle",
- "path": "/documentation/elements/notification"
+ "path": "/documentation/elements/notification/"
},
"elements-progress": {
"name": "Progress bars",
"subtitle": "Native HTML progress bars",
"color": "warning",
"icon": "spinner",
- "path": "/documentation/elements/progress"
+ "path": "/documentation/elements/progress/"
},
"elements-table": {
"name": "Table",
"subtitle": "The inevitable HTML table, with special case cells",
"color": "info",
"icon": "table",
- "path": "/documentation/elements/table"
+ "path": "/documentation/elements/table/"
},
"elements-tag": {
"name": "Tag",
"subtitle": "Small tag labels to insert anywhere",
"color": "success",
"icon": "tag",
- "path": "/documentation/elements/tag"
+ "path": "/documentation/elements/tag/"
},
"elements-title": {
"name": "Title",
"subtitle": "Simple headings to add depth to your page",
"color": "black",
"icon": "heading",
- "path": "/documentation/elements/title"
+ "path": "/documentation/elements/title/"
},
"components": {
"name": "Components",
"subtitle": "Advanced multi-part components with lots of possibilities",
"color": "danger",
"icon": "cubes",
- "path": "/documentation/components"
+ "path": "/documentation/components/"
},
"components-breadcrumb": {
"name": "Breadcrumb",
"subtitle": "A simple breadcrumb component to improve your navigation experience",
"color": "star",
"icon": "ellipsis-h",
- "path": "/documentation/components/breadcrumb"
+ "path": "/documentation/components/breadcrumb/"
},
"components-card": {
"name": "Card",
"subtitle": "An all-around flexible and composable component",
"color": "success",
"icon": "id-card",
- "path": "/documentation/components/card"
+ "path": "/documentation/components/card/"
},
"components-dropdown": {
"name": "Dropdown",
"subtitle": "An interactive dropdown menu for discoverable content",
"color": "success",
"icon": "angle-down",
- "path": "/documentation/components/dropdown"
+ "path": "/documentation/components/dropdown/"
},
"components-menu": {
"name": "Menu",
"subtitle": "A simple menu, for any type of vertical navigation",
"icon": "bars",
- "path": "/documentation/components/menu"
+ "path": "/documentation/components/menu/"
},
"components-message": {
"name": "Message",
@@ -546,28 +547,28 @@
"color": "info",
"icon": "window-maximize",
"icon_regular": "true",
- "path": "/documentation/components/message"
+ "path": "/documentation/components/message/"
},
"components-modal": {
"name": "Modal",
"subtitle": "A classic modal overlay, in which you can include any content you want",
"color": "danger",
"icon": "clone",
- "path": "/documentation/components/modal"
+ "path": "/documentation/components/modal/"
},
"components-navbar": {
"name": "Navbar",
"subtitle": "A responsive horizontal navbar that can support images, links, buttons, and dropdowns",
"color": "primary",
"icon": "minus",
- "path": "/documentation/components/navbar"
+ "path": "/documentation/components/navbar/"
},
"components-pagination": {
"name": "Pagination",
"subtitle": "A responsive, usable, and flexible pagination",
"color": "orange",
"icon": "caret-square-right",
- "path": "/documentation/components/pagination"
+ "path": "/documentation/components/pagination/"
},
"components-panel": {
"name": "Panel",
@@ -575,21 +576,21 @@
"color": "grey-dark",
"icon": "list-alt",
"icon_regular": "true",
- "path": "/documentation/components/panel"
+ "path": "/documentation/components/panel/"
},
"components-tabs": {
"name": "Tabs",
"subtitle": "Simple responsive horizontal navigation tabs, with different styles",
"color": "purple",
"icon": "folder",
- "path": "/documentation/components/tabs"
+ "path": "/documentation/components/tabs/"
},
"videos": {
"name": "Videos",
"color": "success",
"icon": "play-circle",
"title": "Videos",
- "path": "/videos"
+ "path": "/videos/"
},
"blog": {
"name": "Blog",
@@ -597,7 +598,7 @@
"subtitle": "Stay updated with new features",
"color": "rss",
"icon": "rss",
- "path": "/blog"
+ "path": "/blog/"
},
"expo": {
"name": "Expo",
@@ -605,7 +606,7 @@
"subtitle": "Official Bulma showcase",
"icon": "star",
"color": "expo",
- "path": "/expo"
+ "path": "/expo/"
},
"love": {
"name": "Love",
@@ -613,7 +614,7 @@
"subtitle": "Fans of Bulma around the world",
"color": "love",
"icon": "heart",
- "path": "/love"
+ "path": "/love/"
},
"backers": {
"id": "backers",
@@ -621,14 +622,14 @@
"title": "Backers",
"color": "patreon",
"icon": "patreon",
- "path": "/backers",
+ "path": "/backers/",
"icon_brand": true,
"subtitle": "Everyone who is supporting Bulma via Patreon and GitHub",
"description": "Everyone who is supporting Bulma"
},
"more": {
"name": "More",
- "path": "/more"
+ "path": "/more/"
},
"bulma-start": {
"name": "Bulma start",
@@ -636,7 +637,7 @@
"subtitle": "A tiny npm package to get started",
"icon": "rocket",
"color": "success",
- "path": "/bulma-start"
+ "path": "/bulma-start/"
},
"made-with-bulma": {
"name": "Made with Bulma",
@@ -644,14 +645,14 @@
"subtitle": "The official community badge",
"icon": "certificate",
"color": "warning",
- "path": "/made-with-bulma"
+ "path": "/made-with-bulma/"
},
"bootstrap": {
"name": "Coming from Bootstrap",
"subtitle": "See how Bulma is an alternative to Bootstrap",
"icon": "exchange-alt",
"color": "bootstrap",
- "path": "/alternative-to-bootstrap"
+ "path": "/alternative-to-bootstrap/"
},
"patreon-backers": {
"name": "Patreon and GitHub backers",
@@ -659,7 +660,7 @@
"icon_brand": "true",
"icon": "patreon",
"color": "patreon",
- "path": "/backers"
+ "path": "/backers/"
},
"extensions": {
"name": "Bulma extensions",
@@ -667,7 +668,7 @@
"subtitle": "Side projects to enhance Bulma",
"icon": "plug",
"color": "extensions",
- "path": "/extensions"
+ "path": "/extensions/"
}
},
"navbar": ["videos", "expo", "love", "backers"],
diff --git a/docs/_includes/components/breakpoints-table.html b/docs/_includes/components/breakpoints-table.html
new file mode 100644
index 00000000..c056112a
--- /dev/null
+++ b/docs/_includes/components/breakpoints-table.html
@@ -0,0 +1,120 @@
+|
+ {{ breakpoint.name }} + {% if breakpoint.id == 'mobile' %} + Up to {{ breakpoint.to }}px
+ {% elsif breakpoint.id == 'fullhd' %}
+ {{ breakpoint.from }}px and above
+ {% else %}
+ Between {{ breakpoint.from }}px and {{ breakpoint.to }}px
+ {% endif %}
+ |
+ {% endfor %}
+ ||||
|---|---|---|---|---|
|
+ mobile + |
+
+ - + |
+ |||
|
+ - + |
+
+ tablet + |
+ |||
|
+ - + |
+
+ desktop + |
+ |||
|
+ - + |
+
+ widescreen + |
+ |||
|
+ - + |
+
+ fullhd + |
+ |||
|
+ - + |
+
+ tablet-only + |
+
+ - + |
+ ||
|
+ - + |
+
+ desktop-only + |
+
+ - + |
+ ||
|
+ - + |
+
+ widescreen-only + |
+
+ - + |
+ ||
|
+ touch + |
+
+ - + |
+ |||
|
+ until-widescreen + |
+
+ - + |
+ |||
|
+ until-fullhd + |
+
+ - + |
+ |||