mirror of
https://github.com/jgthms/bulma.git
synced 2024-11-14 11:14:24 +00:00
Switch to Font Awesome 5
This commit is contained in:
Jeremy Thomas
parent
f09a0ec38f
commit
0f694f95c6
@ -2,7 +2,7 @@
|
||||
"by_id": {
|
||||
"home": {
|
||||
"name": "Home",
|
||||
"icon": "fa-solid fa-house",
|
||||
"icon": "fas fa-house",
|
||||
"path": "/"
|
||||
},
|
||||
"docs": {
|
||||
@ -10,27 +10,27 @@
|
||||
"long_name": "Documentation",
|
||||
"subtitle": "Everything you need to <strong>create a website</strong> with Bulma",
|
||||
"color": "primary",
|
||||
"icon": "fa-solid fa-book",
|
||||
"icon": "fas fa-book",
|
||||
"path": "/documentation/"
|
||||
},
|
||||
"code": {
|
||||
"name": "Templates",
|
||||
"subtitle": "Bulma templates to get started",
|
||||
"color": "link",
|
||||
"icon": "fa-solid fa-code",
|
||||
"icon": "fas fa-code",
|
||||
"path": "/bulma-templates/"
|
||||
},
|
||||
"blog": {
|
||||
"name": "Bulma Blog",
|
||||
"subtitle": "Stay updated with new features",
|
||||
"color": "rss",
|
||||
"icon": "fa-solid fa-rss",
|
||||
"icon": "fas fa-rss",
|
||||
"path": "/blog/"
|
||||
},
|
||||
"expo": {
|
||||
"name": "Expo",
|
||||
"subtitle": "Official Bulma showcase",
|
||||
"icon": "fa-solid fa-star",
|
||||
"icon": "fas fa-star",
|
||||
"color": "expo",
|
||||
"path": "/expo/"
|
||||
},
|
||||
@ -38,7 +38,7 @@
|
||||
"name": "Love",
|
||||
"subtitle": "Fans of Bulma around the world",
|
||||
"color": "love",
|
||||
"icon": "fa-solid fa-heart",
|
||||
"icon": "fas fa-heart",
|
||||
"path": "/love/"
|
||||
},
|
||||
"github": {
|
||||
@ -46,7 +46,7 @@
|
||||
"subtitle": "Open Source on GitHub",
|
||||
"icon_only": true,
|
||||
"color": "github",
|
||||
"icon": "fa-brands fa-github-alt fa-lg",
|
||||
"icon": "fab fa-github-alt fa-lg",
|
||||
"href": "https://github.com/jgthms/bulma"
|
||||
},
|
||||
"twitter": {
|
||||
@ -54,21 +54,21 @@
|
||||
"subtitle": "Follow me on Twitter",
|
||||
"icon_only": true,
|
||||
"color": "twitter",
|
||||
"icon": "fa-brands fa-twitter fa-lg",
|
||||
"icon": "fab fa-twitter fa-lg",
|
||||
"href": "https://twitter.com/jgthms"
|
||||
},
|
||||
"sponsor": {
|
||||
"name": "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>",
|
||||
"color": "patreon",
|
||||
"icon": "fa-brands fa-patreon",
|
||||
"icon": "fab fa-patreon",
|
||||
"path": "/become-a-bulma-sponsor/"
|
||||
},
|
||||
"brand": {
|
||||
"name": "Bulma Brand",
|
||||
"subtitle": "The official Bulma logos",
|
||||
"color": "primary",
|
||||
"icon": "fa-solid fa-medal",
|
||||
"icon": "fas fa-medal",
|
||||
"path": "/brand/"
|
||||
},
|
||||
"backers": {
|
||||
@ -76,7 +76,7 @@
|
||||
"name": "Backers",
|
||||
"title": "Backers",
|
||||
"color": "patreon",
|
||||
"icon": "fa-solid fa-hand-holding-heart",
|
||||
"icon": "fas fa-hand-holding-heart",
|
||||
"path": "/backers/",
|
||||
"subtitle": "Everyone who is supporting Bulma via Patreon and GitHub",
|
||||
"description": "Everyone who is supporting Bulma"
|
||||
@ -84,7 +84,7 @@
|
||||
"bootstrap": {
|
||||
"name": "Coming from Bootstrap",
|
||||
"subtitle": "See how Bulma is an alternative to Bootstrap",
|
||||
"icon": "fa-solid fa-exchange-alt",
|
||||
"icon": "fas fa-exchange-alt",
|
||||
"color": "bootstrap",
|
||||
"path": "/alternative-to-bootstrap/"
|
||||
},
|
||||
@ -92,7 +92,7 @@
|
||||
"name": "Bulma Extensions",
|
||||
"title": "Extensions",
|
||||
"subtitle": "Side projects to enhance Bulma",
|
||||
"icon": "fa-solid fa-plug",
|
||||
"icon": "fas fa-plug",
|
||||
"color": "extensions",
|
||||
"path": "/extensions/"
|
||||
},
|
||||
@ -100,14 +100,14 @@
|
||||
"name": "Made with Bulma",
|
||||
"title": "Badge",
|
||||
"subtitle": "The official community badge",
|
||||
"icon": "fa-solid fa-certificate",
|
||||
"icon": "fas fa-certificate",
|
||||
"color": "warning",
|
||||
"path": "/made-with-bulma/"
|
||||
},
|
||||
"patreon-backers": {
|
||||
"name": "Patreon and GitHub backers",
|
||||
"subtitle": "Everyone who is supporting Bulma",
|
||||
"icon": "fa-solid fa-patreon",
|
||||
"icon": "fas fa-patreon",
|
||||
"color": "patreon",
|
||||
"path": "/backers/"
|
||||
},
|
||||
@ -115,631 +115,631 @@
|
||||
"name": "Start",
|
||||
"subtitle": "An overview of what Bulma as a <strong>framework</strong> is all about",
|
||||
"color": "start",
|
||||
"icon": "fa-solid fa-arrow-right",
|
||||
"icon": "fas fa-arrow-right",
|
||||
"path": "/documentation/start/"
|
||||
},
|
||||
"start-overview": {
|
||||
"name": "Overview",
|
||||
"subtitle": "You only need <strong>1 CSS file</strong> to use Bulma",
|
||||
"color": "start",
|
||||
"icon": "fa-regular fa-eye",
|
||||
"icon": "far fa-eye",
|
||||
"path": "/documentation/start/overview/"
|
||||
},
|
||||
"start-installation": {
|
||||
"name": "Installation",
|
||||
"subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
|
||||
"color": "start",
|
||||
"icon": "fa-solid fa-download",
|
||||
"icon": "fas fa-download",
|
||||
"path": "/documentation/start/installation/"
|
||||
},
|
||||
"start-alternative-versions": {
|
||||
"name": "Alternative Versions",
|
||||
"subtitle": "Use one of the <strong>pre-built</strong> alternative versions of Bulma",
|
||||
"color": "start",
|
||||
"icon": "fa-solid fa-download",
|
||||
"icon": "fas fa-download",
|
||||
"path": "/documentation/start/alternative-versions/"
|
||||
},
|
||||
"start-syntax": {
|
||||
"name": "Syntax",
|
||||
"subtitle": "<strong>How to use</strong> Bulma components and their alternative styles",
|
||||
"color": "start",
|
||||
"icon": "fa-solid fa-code",
|
||||
"icon": "fas fa-code",
|
||||
"path": "/documentation/start/syntax/"
|
||||
},
|
||||
"start-modular": {
|
||||
"name": "Modularity",
|
||||
"subtitle": "Just import what you <strong>need</strong>",
|
||||
"color": "start",
|
||||
"icon": "fa-solid fa-cubes",
|
||||
"icon": "fas fa-cubes",
|
||||
"path": "/documentation/start/modular/"
|
||||
},
|
||||
"start-responsiveness": {
|
||||
"name": "Responsiveness",
|
||||
"subtitle": "Bulma is a <strong>mobile-first</strong> framework",
|
||||
"color": "start",
|
||||
"icon": "fa-solid fa-arrows-left-right",
|
||||
"icon": "fas fa-arrows-alt-h",
|
||||
"path": "/documentation/start/responsiveness/"
|
||||
},
|
||||
"start-migrating": {
|
||||
"name": "Migrating to v1",
|
||||
"subtitle": "How to <strong>migrate</strong> to Bulma v1",
|
||||
"color": "start",
|
||||
"icon": "fa-solid fa-arrows-left-right",
|
||||
"icon": "fas fa-arrow-up",
|
||||
"path": "/documentation/start/migrating-to-v1/"
|
||||
},
|
||||
"features": {
|
||||
"name": "Features",
|
||||
"subtitle": "What makes Bulma <strong>special</strong>",
|
||||
"color": "danger",
|
||||
"icon": "fa-solid fa-wand-magic-sparkles",
|
||||
"icon": "fas fa-wand-magic-sparkles",
|
||||
"path": "/documentation/features/"
|
||||
},
|
||||
"features-auto-color": {
|
||||
"name": "Automatic Color",
|
||||
"subtitle": "Change the color of your text automatically based on the background",
|
||||
"color": "danger",
|
||||
"icon": "fa-solid fa-droplet",
|
||||
"icon": "fas fa-droplet",
|
||||
"path": "/documentation/features/auto-color/"
|
||||
},
|
||||
"features-color-palettes": {
|
||||
"name": "Color Palettes",
|
||||
"subtitle": "Input <strong>1 color</strong>, Receive <strong>dozens</strong> of different <strong>shades</strong> for that color",
|
||||
"color": "danger",
|
||||
"icon": "fa-solid fa-swatchbook",
|
||||
"icon": "fas fa-swatchbook",
|
||||
"path": "/documentation/features/color-palettes/"
|
||||
},
|
||||
"features-css-variables": {
|
||||
"name": "CSS Variables",
|
||||
"subtitle": "Customizing with <strong>CSS only</strong>",
|
||||
"color": "danger",
|
||||
"icon": "fa-brands fa-css3",
|
||||
"icon": "fab fa-css3",
|
||||
"path": "/documentation/features/css-variables/"
|
||||
},
|
||||
"features-dark-mode": {
|
||||
"name": "Dark Mode",
|
||||
"subtitle": "Bulma comes with an <strong>automatic Dark mode</strong>",
|
||||
"color": "danger",
|
||||
"icon": "fa-solid fa-moon",
|
||||
"icon": "fas fa-moon",
|
||||
"path": "/documentation/features/dark-mode/"
|
||||
},
|
||||
"features-skeletons": {
|
||||
"name": "Skeletons",
|
||||
"subtitle": "Transform almost any Bulma component into a <strong>skeleton loader</strong>, or use one of the pre-built utility elements",
|
||||
"color": "danger",
|
||||
"icon": "fa-solid fa-swatchbook",
|
||||
"icon": "fas fa-spinner",
|
||||
"path": "/documentation/features/skeletons/"
|
||||
},
|
||||
"features-smart-columns": {
|
||||
"name": "Smart Columns",
|
||||
"subtitle": "The <strong>simplest</strong> column system",
|
||||
"color": "danger",
|
||||
"icon": "fa-solid fa-chart-simple fa-flip-vertical",
|
||||
"icon": "fas fa-chart-simple fa-flip-vertical",
|
||||
"path": "/documentation/features/smart-columns/"
|
||||
},
|
||||
"features-smart-grid": {
|
||||
"name": "Smart Grid",
|
||||
"subtitle": "A <strong>responsive 2D</strong> CSS Grid",
|
||||
"color": "danger",
|
||||
"icon": "fa-solid fa-grip",
|
||||
"icon": "fas fa-grip",
|
||||
"path": "/documentation/features/smart-grid/"
|
||||
},
|
||||
"features-themes": {
|
||||
"name": "Themes",
|
||||
"subtitle": "How Bulma styles its components with <strong>CSS variables</strong>",
|
||||
"color": "danger",
|
||||
"icon": "fa-solid fa-palette",
|
||||
"icon": "fas fa-palette",
|
||||
"path": "/documentation/features/themes/"
|
||||
},
|
||||
"sass": {
|
||||
"name": "Sass Utilities",
|
||||
"subtitle": "<strong>Sass tools</strong> used by Bulma and available for you",
|
||||
"color": "primary",
|
||||
"icon": "fa-brands fa-sass",
|
||||
"icon": "fab fa-sass",
|
||||
"path": "/documentation/sass/"
|
||||
},
|
||||
"sass-extends": {
|
||||
"name": "Extends",
|
||||
"subtitle": "Sass extends to keep your <strong>CSS code DRY</strong>",
|
||||
"color": "sass",
|
||||
"icon": "fa-solid fa-percentage",
|
||||
"icon": "fas fa-percentage",
|
||||
"path": "/documentation/sass/extends/"
|
||||
},
|
||||
"sass-form-control-mixins": {
|
||||
"name": "Form Control mixins",
|
||||
"subtitle": "<strong>Mixins</strong> for Bulma's buttons and form controls",
|
||||
"color": "sass",
|
||||
"icon": "fa-regular fa-square-check",
|
||||
"icon": "far fa-hand-pointer",
|
||||
"path": "/documentation/sass/form-control-mixins/"
|
||||
},
|
||||
"sass-functions": {
|
||||
"name": "Functions",
|
||||
"subtitle": "<strong>Utility functions</strong> to calculate colors and other values",
|
||||
"color": "orange",
|
||||
"icon": "fa-solid fa-code",
|
||||
"icon": "fas fa-code",
|
||||
"path": "/documentation/sass/functions/"
|
||||
},
|
||||
"sass-mixins": {
|
||||
"name": "Mixins",
|
||||
"subtitle": "Utility mixins for custom elements and other CSS helpers",
|
||||
"color": "sass",
|
||||
"icon": "fa-solid fa-at",
|
||||
"icon": "fas fa-at",
|
||||
"path": "/documentation/sass/mixins/"
|
||||
},
|
||||
"sass-responsive-mixins": {
|
||||
"name": "Responsive mixins",
|
||||
"subtitle": "Mixins that allows you to define different styles for each screen size",
|
||||
"color": "sass",
|
||||
"icon": "fa-solid fa-arrows-left-right",
|
||||
"icon": "fas fa-arrows-alt-h",
|
||||
"path": "/documentation/sass/responsive-mixins/"
|
||||
},
|
||||
"customize": {
|
||||
"name": "Customize",
|
||||
"subtitle": "Create your <strong>own theme</strong> with a simple set of <strong>variables</strong>",
|
||||
"color": "sass",
|
||||
"icon": "fa-solid fa-paint-brush",
|
||||
"icon": "fas fa-paint-brush",
|
||||
"path": "/documentation/customize/"
|
||||
},
|
||||
"customize-concepts": {
|
||||
"name": "Concepts",
|
||||
"subtitle": "What makes Bulma <strong>customizable</strong>",
|
||||
"color": "info",
|
||||
"icon": "fa-solid fa-lightbulb",
|
||||
"icon": "fas fa-lightbulb",
|
||||
"path": "/documentation/customize/concepts/"
|
||||
},
|
||||
"customize-with-sass": {
|
||||
"name": "With Sass",
|
||||
"subtitle": "Customize Bulma with Sass variables",
|
||||
"color": "sass",
|
||||
"icon": "fa-brands fa-sass",
|
||||
"icon": "fab fa-sass",
|
||||
"path": "/documentation/customize/with-sass/"
|
||||
},
|
||||
"customize-with-css-variables": {
|
||||
"name": "With CSS Variables",
|
||||
"subtitle": "See how Bulma uses <strong>Sass variables</strong> to allow easy customization",
|
||||
"color": "grey",
|
||||
"icon": "fa-brands fa-css3",
|
||||
"icon": "fab fa-css3",
|
||||
"path": "/documentation/customize/with-css-variables/"
|
||||
},
|
||||
"customize-sass-list": {
|
||||
"name": "List of Sass variables",
|
||||
"subtitle": "All <strong>Sass</strong> variables defined by Bulma",
|
||||
"color": "grey",
|
||||
"icon": "fa-solid fa-list",
|
||||
"icon": "fas fa-list",
|
||||
"path": "/documentation/customize/list-of-sass-variables/"
|
||||
},
|
||||
"library": {
|
||||
"name": "CSS Library",
|
||||
"subtitle": "The core of the Bulma framework",
|
||||
"color": "link",
|
||||
"icon": "fa-solid fa-cubes",
|
||||
"icon": "fas fa-cubes",
|
||||
"path": "/documentation/library/"
|
||||
},
|
||||
"columns": {
|
||||
"name": "Columns",
|
||||
"subtitle": "The power of <strong>Flexbox</strong> in a simple interface",
|
||||
"color": "link",
|
||||
"icon": "fa-solid fa-chart-simple fa-flip-vertical",
|
||||
"icon": "fas fa-columns",
|
||||
"path": "/documentation/columns/"
|
||||
},
|
||||
"columns-basics": {
|
||||
"name": "Basics",
|
||||
"subtitle": "A simple way to build <strong>responsive columns</strong>",
|
||||
"color": "link",
|
||||
"icon": "fa-solid fa-columns",
|
||||
"icon": "fas fa-columns",
|
||||
"path": "/documentation/columns/basics/"
|
||||
},
|
||||
"columns-sizes": {
|
||||
"name": "Sizes",
|
||||
"subtitle": "Define the <strong>size</strong> of each column <strong>individually</strong>",
|
||||
"color": "success",
|
||||
"icon": "fa-solid fa-up-right-and-down-left-from-center",
|
||||
"icon": "fas fa-up-right-and-down-left-from-center",
|
||||
"path": "/documentation/columns/sizes/"
|
||||
},
|
||||
"columns-responsiveness": {
|
||||
"name": "Responsiveness",
|
||||
"subtitle": "Handle <strong>different</strong> column layouts for each <strong>breakpoint</strong>",
|
||||
"color": "primary",
|
||||
"icon": "fa-solid fa-arrows-left-right",
|
||||
"icon": "fas fa-arrows-left-right",
|
||||
"path": "/documentation/columns/responsiveness/"
|
||||
},
|
||||
"columns-nesting": {
|
||||
"name": "Nesting",
|
||||
"subtitle": "A simple way to build <strong>responsive columns</strong>",
|
||||
"color": "danger",
|
||||
"icon": "fa-solid fa-sitemap",
|
||||
"icon": "fas fa-sitemap",
|
||||
"path": "/documentation/columns/nesting/"
|
||||
},
|
||||
"columns-gap": {
|
||||
"name": "Gap",
|
||||
"subtitle": "Customize the <strong>gap</strong> between the columns",
|
||||
"color": "info",
|
||||
"icon": "fa-solid fa-arrows-left-right-to-line",
|
||||
"icon": "fas fa-arrows-left-right-to-line",
|
||||
"path": "/documentation/columns/gap/"
|
||||
},
|
||||
"columns-options": {
|
||||
"name": "Options",
|
||||
"subtitle": "Design different <strong>types</strong> of column layouts",
|
||||
"color": "grey",
|
||||
"icon": "fa-solid fa-cogs",
|
||||
"icon": "fas fa-cogs",
|
||||
"path": "/documentation/columns/options/"
|
||||
},
|
||||
"grid": {
|
||||
"name": "Grid",
|
||||
"subtitle": "A <strong>2 dimensional</strong> layout component",
|
||||
"icon": "fa-solid fa-grip",
|
||||
"icon": "fas fa-th",
|
||||
"path": "/documentation/grid/"
|
||||
},
|
||||
"grid-smart": {
|
||||
"name": "Smart Grid",
|
||||
"subtitle": "A <strong>smart</strong> 2D grid with <strong>flexible</strong> columns",
|
||||
"icon": "fa-solid fa-lightbulb",
|
||||
"icon": "fas fa-lightbulb",
|
||||
"path": "/documentation/grid/smart-grid/"
|
||||
},
|
||||
"grid-fixed": {
|
||||
"name": "Fixed Grid",
|
||||
"subtitle": "A customizable 2D <strong>fixed</strong> grid",
|
||||
"icon": "fa-solid fa-grip",
|
||||
"icon": "fas fa-grip",
|
||||
"path": "/documentation/grid/fixed-grid/"
|
||||
},
|
||||
"grid-cells": {
|
||||
"name": "Grid Cells",
|
||||
"subtitle": "Adjust the width and height of each <strong>individual cell</strong>",
|
||||
"icon": "fa-solid fa-square",
|
||||
"icon": "fas fa-square",
|
||||
"path": "/documentation/grid/grid-cells/"
|
||||
},
|
||||
"grid-playground": {
|
||||
"name": "Playground",
|
||||
"subtitle": "<strong>Try out</strong> the Bulma 2D Grid",
|
||||
"icon": "fa-solid fa-code",
|
||||
"icon": "fas fa-code",
|
||||
"path": "/documentation/grid/playground/"
|
||||
},
|
||||
"layout": {
|
||||
"name": "Layout",
|
||||
"subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes",
|
||||
"color": "success",
|
||||
"icon": "fa-solid fa-border-none",
|
||||
"icon": "fas fa-border-none",
|
||||
"path": "/documentation/layout/"
|
||||
},
|
||||
"layout-container": {
|
||||
"name": "Container",
|
||||
"subtitle": "A simple <strong>container</strong> to center your content horizontally",
|
||||
"path": "/documentation/layout/container/",
|
||||
"icon": "fa-solid fa-arrows-alt-h"
|
||||
"icon": "fas fa-arrows-alt-h"
|
||||
},
|
||||
"layout-level": {
|
||||
"name": "Level",
|
||||
"subtitle": "A multi-purpose <strong>horizontal level</strong>, which can contain almost any other element",
|
||||
"path": "/documentation/layout/level/",
|
||||
"icon": "fa-solid fa-ruler-horizontal"
|
||||
"icon": "fas fa-ruler-horizontal"
|
||||
},
|
||||
"layout-media": {
|
||||
"name": "Media Object",
|
||||
"subtitle": "The famous <strong>media object</strong> prevalent in social media interfaces, but useful in any context",
|
||||
"path": "/documentation/layout/media-object/",
|
||||
"icon": "fa-solid fa-th-list"
|
||||
"icon": "fas fa-th-list"
|
||||
},
|
||||
"layout-hero": {
|
||||
"name": "Hero",
|
||||
"subtitle": "An imposing <strong>hero banner</strong> to showcase something",
|
||||
"path": "/documentation/layout/hero/",
|
||||
"icon": "fa-solid fa-star"
|
||||
"icon": "fas fa-star"
|
||||
},
|
||||
"layout-section": {
|
||||
"name": "Section",
|
||||
"subtitle": "A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading",
|
||||
"path": "/documentation/layout/section/",
|
||||
"icon": "fa-solid fa-square"
|
||||
"icon": "fas fa-square"
|
||||
},
|
||||
"layout-footer": {
|
||||
"name": "Footer",
|
||||
"subtitle": "A simple responsive <strong>footer</strong> which can include anything: lists, headings, columns, icons, buttons, etc.",
|
||||
"path": "/documentation/layout/footer/",
|
||||
"icon": "fa-solid fa-window-minimize"
|
||||
"icon": "fas fa-window-minimize"
|
||||
},
|
||||
"form": {
|
||||
"name": "Form",
|
||||
"subtitle": "The indispensable <strong>form controls</strong>, designed for maximum clarity",
|
||||
"color": "link",
|
||||
"icon": "fa-solid fa-align-left fa-flip-vertical",
|
||||
"icon": "fas fa-align-left fa-flip-vertical",
|
||||
"path": "/documentation/form/"
|
||||
},
|
||||
"form-general": {
|
||||
"name": "General",
|
||||
"subtitle": "All generic <strong>form controls</strong>, designed for consistency",
|
||||
"color": "link",
|
||||
"icon": "fa-solid fa-keyboard",
|
||||
"icon": "fas fa-keyboard",
|
||||
"path": "/documentation/form/general/"
|
||||
},
|
||||
"form-input": {
|
||||
"name": "Input",
|
||||
"subtitle": "The <strong>text input</strong> and its variations",
|
||||
"color": "link",
|
||||
"icon": "fa-solid fa-minus",
|
||||
"icon": "fas fa-minus",
|
||||
"path": "/documentation/form/input/"
|
||||
},
|
||||
"form-textarea": {
|
||||
"name": "Textarea",
|
||||
"subtitle": "The multiline <strong>textarea</strong> and its variations",
|
||||
"color": "link",
|
||||
"icon": "fa-solid fa-square",
|
||||
"icon": "fas fa-square",
|
||||
"path": "/documentation/form/textarea/"
|
||||
},
|
||||
"form-select": {
|
||||
"name": "Select",
|
||||
"subtitle": "The browser built-in <strong>select dropdown</strong>, styled accordingly",
|
||||
"color": "link",
|
||||
"icon": "fa-solid fa-mouse-pointer",
|
||||
"icon": "fas fa-mouse-pointer",
|
||||
"path": "/documentation/form/select/"
|
||||
},
|
||||
"form-checkbox": {
|
||||
"name": "Checkbox",
|
||||
"subtitle": "The 2-state <strong>checkbox</strong> in its native format",
|
||||
"color": "link",
|
||||
"icon": "fa-solid fa-check-square",
|
||||
"icon": "fas fa-check-square",
|
||||
"path": "/documentation/form/checkbox/"
|
||||
},
|
||||
"form-radio": {
|
||||
"name": "Radio",
|
||||
"subtitle": "The mutually exclusive <strong>radio buttons</strong> in their native format",
|
||||
"color": "link",
|
||||
"icon": "fa-solid fa-dot-circle",
|
||||
"icon": "fas fa-dot-circle",
|
||||
"path": "/documentation/form/radio/"
|
||||
},
|
||||
"form-file": {
|
||||
"name": "File",
|
||||
"subtitle": "A custom <strong>file upload</strong> input, without JavaScript",
|
||||
"color": "link",
|
||||
"icon": "fa-solid fa-cloud-upload-alt",
|
||||
"icon": "fas fa-cloud-upload-alt",
|
||||
"path": "/documentation/form/file/"
|
||||
},
|
||||
"elements": {
|
||||
"name": "Elements",
|
||||
"subtitle": "Essential interface elements that only require a <strong>single CSS class</strong>",
|
||||
"color": "orange",
|
||||
"icon": "fa-solid fa-cube",
|
||||
"icon": "fas fa-cube",
|
||||
"path": "/documentation/elements/"
|
||||
},
|
||||
"elements-block": {
|
||||
"name": "Block",
|
||||
"subtitle": "Bulma's most basic spacer <strong>block</strong>",
|
||||
"color": "grey",
|
||||
"icon": "fa-solid fa-arrows-alt-v",
|
||||
"icon": "fas fa-arrows-alt-v",
|
||||
"path": "/documentation/elements/block/"
|
||||
},
|
||||
"elements-box": {
|
||||
"name": "Box",
|
||||
"subtitle": "A white <strong>box</strong> to contain other elements",
|
||||
"color": "grey",
|
||||
"icon": "fa-solid fa-square",
|
||||
"icon": "fas fa-square",
|
||||
"path": "/documentation/elements/box/"
|
||||
},
|
||||
"elements-button": {
|
||||
"name": "Button",
|
||||
"subtitle": "The classic <strong>button</strong>, in different colors, sizes, and states",
|
||||
"color": "success",
|
||||
"icon": "fa-solid fa-hand-pointer",
|
||||
"icon": "fas fa-hand-pointer",
|
||||
"path": "/documentation/elements/button/"
|
||||
},
|
||||
"elements-content": {
|
||||
"name": "Content",
|
||||
"subtitle": "A single class to handle <strong>WYSIWYG</strong> generated content, where only <strong>HTML tags</strong> are available",
|
||||
"color": "primary",
|
||||
"icon": "fa-solid fa-align-left",
|
||||
"icon": "fas fa-align-left",
|
||||
"path": "/documentation/elements/content/"
|
||||
},
|
||||
"elements-delete": {
|
||||
"name": "Delete",
|
||||
"subtitle": "A versatile <strong>delete</strong> cross",
|
||||
"color": "danger",
|
||||
"icon": "fa-solid fa-times-circle",
|
||||
"icon": "fas fa-times-circle",
|
||||
"path": "/documentation/elements/delete/"
|
||||
},
|
||||
"elements-icon": {
|
||||
"name": "Icon",
|
||||
"subtitle": "Compatible with all icon font libraries, including <strong>Font Awesome 5</strong>",
|
||||
"icon": "fa-solid fa-font-awesome",
|
||||
"icon": "fas fa-font-awesome",
|
||||
"path": "/documentation/elements/icon/"
|
||||
},
|
||||
"elements-image": {
|
||||
"name": "Image",
|
||||
"subtitle": "A container for <strong>responsive images</strong>",
|
||||
"color": "sass",
|
||||
"icon": "fa-solid fa-image",
|
||||
"icon": "fas fa-image",
|
||||
"path": "/documentation/elements/image/"
|
||||
},
|
||||
"elements-notification": {
|
||||
"name": "Notification",
|
||||
"subtitle": "Bold <strong>notification</strong> blocks, to alert your users of something",
|
||||
"color": "orange",
|
||||
"icon": "fa-solid fa-exclamation-triangle",
|
||||
"icon": "fas fa-exclamation-triangle",
|
||||
"path": "/documentation/elements/notification/"
|
||||
},
|
||||
"elements-progress": {
|
||||
"name": "Progress bars",
|
||||
"subtitle": "Native HTML <strong>progress</strong> bars",
|
||||
"color": "warning",
|
||||
"icon": "fa-solid fa-spinner",
|
||||
"icon": "fas fa-spinner",
|
||||
"path": "/documentation/elements/progress/"
|
||||
},
|
||||
"elements-table": {
|
||||
"name": "Table",
|
||||
"subtitle": "The inevitable HTML <strong>table</strong>, with special case cells",
|
||||
"color": "info",
|
||||
"icon": "fa-solid fa-table",
|
||||
"icon": "fas fa-table",
|
||||
"path": "/documentation/elements/table/"
|
||||
},
|
||||
"elements-tag": {
|
||||
"name": "Tag",
|
||||
"subtitle": "Small <strong>tag labels</strong> to insert anywhere",
|
||||
"color": "success",
|
||||
"icon": "fa-solid fa-tag",
|
||||
"icon": "fas fa-tag",
|
||||
"path": "/documentation/elements/tag/"
|
||||
},
|
||||
"elements-title": {
|
||||
"name": "Title",
|
||||
"subtitle": "Simple <strong>headings</strong> to add depth to your page",
|
||||
"color": "black",
|
||||
"icon": "fa-solid fa-heading",
|
||||
"icon": "fas fa-heading",
|
||||
"path": "/documentation/elements/title/"
|
||||
},
|
||||
"components": {
|
||||
"name": "Components",
|
||||
"subtitle": "Advanced multi-part components with lots of possibilities",
|
||||
"color": "danger",
|
||||
"icon": "fa-solid fa-cubes",
|
||||
"icon": "fas fa-cubes",
|
||||
"path": "/documentation/components/"
|
||||
},
|
||||
"components-breadcrumb": {
|
||||
"name": "Breadcrumb",
|
||||
"subtitle": "A simple <strong>breadcrumb</strong> component to improve your navigation experience",
|
||||
"color": "star",
|
||||
"icon": "fa-solid fa-ellipsis-h",
|
||||
"icon": "fas fa-ellipsis-h",
|
||||
"path": "/documentation/components/breadcrumb/"
|
||||
},
|
||||
"components-card": {
|
||||
"name": "Card",
|
||||
"subtitle": "An all-around flexible and composable component",
|
||||
"color": "success",
|
||||
"icon": "fa-solid fa-id-card",
|
||||
"icon": "fas fa-id-card",
|
||||
"path": "/documentation/components/card/"
|
||||
},
|
||||
"components-dropdown": {
|
||||
"name": "Dropdown",
|
||||
"subtitle": "An interactive <strong>dropdown menu</strong> for discoverable content",
|
||||
"color": "success",
|
||||
"icon": "fa-solid fa-angle-down",
|
||||
"icon": "fas fa-angle-down",
|
||||
"path": "/documentation/components/dropdown/"
|
||||
},
|
||||
"components-menu": {
|
||||
"name": "Menu",
|
||||
"subtitle": "A simple <strong>menu</strong>, for any type of vertical navigation",
|
||||
"icon": "fa-solid fa-bars",
|
||||
"icon": "fas fa-bars",
|
||||
"path": "/documentation/components/menu/"
|
||||
},
|
||||
"components-message": {
|
||||
"name": "Message",
|
||||
"subtitle": "Colored <strong>message</strong> blocks, to emphasize part of your page",
|
||||
"color": "info",
|
||||
"icon": "fa-solid fa-window-maximize",
|
||||
"icon": "fas fa-window-maximize",
|
||||
"path": "/documentation/components/message/"
|
||||
},
|
||||
"components-modal": {
|
||||
"name": "Modal",
|
||||
"subtitle": "A classic <strong>modal</strong> overlay, in which you can include <em>any</em> content you want",
|
||||
"color": "danger",
|
||||
"icon": "fa-solid fa-clone",
|
||||
"icon": "fas fa-clone",
|
||||
"path": "/documentation/components/modal/"
|
||||
},
|
||||
"components-navbar": {
|
||||
"name": "Navbar",
|
||||
"subtitle": "A responsive horizontal <strong>navbar</strong> that can support images, links, buttons, and dropdowns",
|
||||
"color": "primary",
|
||||
"icon": "fa-solid fa-minus",
|
||||
"icon": "fas fa-minus",
|
||||
"path": "/documentation/components/navbar/"
|
||||
},
|
||||
"components-pagination": {
|
||||
"name": "Pagination",
|
||||
"subtitle": "A responsive, usable, and flexible <strong>pagination</strong>",
|
||||
"color": "orange",
|
||||
"icon": "fa-solid fa-caret-square-right",
|
||||
"icon": "fas fa-caret-square-right",
|
||||
"path": "/documentation/components/pagination/"
|
||||
},
|
||||
"components-panel": {
|
||||
"name": "Panel",
|
||||
"subtitle": "A composable <strong>panel</strong>, for compact controls",
|
||||
"color": "grey-dark",
|
||||
"icon": "fa-solid fa-list-alt",
|
||||
"icon": "fas fa-list-alt",
|
||||
"path": "/documentation/components/panel/"
|
||||
},
|
||||
"components-tabs": {
|
||||
"name": "Tabs",
|
||||
"subtitle": "Simple responsive horizontal navigation <strong>tabs</strong>, with different styles",
|
||||
"color": "sass",
|
||||
"icon": "fa-solid fa-folder",
|
||||
"icon": "fas fa-folder",
|
||||
"path": "/documentation/components/tabs/"
|
||||
},
|
||||
"skeletons": {
|
||||
"name": "Skeletons",
|
||||
"subtitle": "Design the <strong>structure</strong> of your webpage with these CSS classes",
|
||||
"color": "success",
|
||||
"icon": "fa-solid fa-border-none",
|
||||
"icon": "fas fa-border-none",
|
||||
"path": "/documentation/skeletons/"
|
||||
},
|
||||
"helpers": {
|
||||
"name": "Helpers",
|
||||
"subtitle": "Apply <strong>helper classes</strong> to almost any element, in order to alter their style",
|
||||
"color": "success",
|
||||
"icon": "fa-brands fa-css3",
|
||||
"icon": "fab fa-css3",
|
||||
"path": "/documentation/helpers/"
|
||||
},
|
||||
"helpers-color": {
|
||||
"name": "Color",
|
||||
"subtitle": "Change the <strong>color</strong> of the text and/or background",
|
||||
"color": "success",
|
||||
"icon": "fa-solid fa-tint",
|
||||
"icon": "fas fa-tint",
|
||||
"path": "/documentation/helpers/color-helpers/"
|
||||
},
|
||||
"helpers-palette": {
|
||||
"name": "Color Palette",
|
||||
"subtitle": "Use a color's <strong>palette</strong> as text color and/or background",
|
||||
"color": "success",
|
||||
"icon": "fa-solid fa-swatchbook",
|
||||
"icon": "fas fa-swatchbook",
|
||||
"path": "/documentation/helpers/palette-helpers/"
|
||||
},
|
||||
"helpers-css-grid": {
|
||||
"name": "CSS Grid",
|
||||
"subtitle": "Change the <strong>color</strong> of the text and/or background",
|
||||
"color": "success",
|
||||
"icon": "fa-solid fa-grip",
|
||||
"icon": "fas fa-grip",
|
||||
"path": "/documentation/helpers/css-grid-helpers/"
|
||||
},
|
||||
"helpers-flexbox": {
|
||||
"name": "Flexbox",
|
||||
"subtitle": "Helpers for all <strong>Flexbox</strong> properties",
|
||||
"color": "success",
|
||||
"icon": "fa-solid fa-chart-simple fa-flip-vertical",
|
||||
"icon": "far fa-square",
|
||||
"path": "/documentation/helpers/flexbox-helpers/"
|
||||
},
|
||||
"helpers-positioning": {
|
||||
"name": "Positioning",
|
||||
"subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
|
||||
"color": "success-dark",
|
||||
"icon": "fa-solid fa-arrows-up-down-left-right",
|
||||
"icon": "fas fa-mouse-pointer",
|
||||
"path": "/documentation/helpers/spacing-helpers/"
|
||||
},
|
||||
"helpers-sizing": {
|
||||
"name": "Sizing",
|
||||
"subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
|
||||
"color": "success-dark",
|
||||
"icon": "fa-solid fa-up-right-and-down-left-from-center",
|
||||
"icon": "fas fa-expand-arrows-alt",
|
||||
"path": "/documentation/helpers/spacing-helpers/"
|
||||
},
|
||||
"helpers-spacing": {
|
||||
"name": "Spacing",
|
||||
"subtitle": "Change the <strong>size</strong> and <strong>color</strong> of the text for one or multiple viewport width",
|
||||
"color": "success-dark",
|
||||
"icon": "fa-solid fa-arrows-left-right-to-line",
|
||||
"icon": "fas fa-arrows-alt-h",
|
||||
"path": "/documentation/helpers/spacing-helpers/"
|
||||
},
|
||||
"helpers-typography": {
|
||||
"name": "Typography",
|
||||
"subtitle": "Change the <strong>size</strong>, weight, and other font properties of the text",
|
||||
"color": "success",
|
||||
"icon": "fa-solid fa-font",
|
||||
"icon": "fas fa-font",
|
||||
"path": "/documentation/helpers/typography-helpers/"
|
||||
},
|
||||
"helpers-visibility": {
|
||||
"name": "Visibility",
|
||||
"subtitle": "<strong>Show/hide content</strong> depending on the width of the viewport",
|
||||
"color": "success",
|
||||
"icon": "fa-regular fa-eye",
|
||||
"icon": "far fa-eye",
|
||||
"path": "/documentation/helpers/visibility-helpers/"
|
||||
},
|
||||
"helpers-other": {
|
||||
"name": "Other",
|
||||
"subtitle": "Other useful Bulma helpers",
|
||||
"color": "success",
|
||||
"icon": "fa-solid fa-ellipsis-h",
|
||||
"icon": "fas fa-ellipsis-h",
|
||||
"path": "/documentation/helpers/other-helpers/"
|
||||
}
|
||||
},
|
||||
|
||||
@ -4,7 +4,7 @@
|
||||
|
||||
<div class="bd-footer-iframe">
|
||||
<a href="https://twitter.com/jgthms" class="button is-twitter" data-related="jgthms:Creator of Bulma">
|
||||
<span class="icon"><i class="fa-brands fa-twitter"></i></span>
|
||||
<span class="icon"><i class="fab fa-twitter"></i></span>
|
||||
<span>Follow @jgthms</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -4,12 +4,12 @@
|
||||
|
||||
<div class="bd-footer-iframe">
|
||||
<a href="https://twitter.com/share" class="button is-twitter" data-text="{{ site.data.meta.title }}" data-url="{{ site.url }}" data-count="horizontal" data-via="jgthms" data-related="jgthms:Creator of Bulma">
|
||||
<span class="icon"><i class="fa-brands fa-twitter"></i></span>
|
||||
<span class="icon"><i class="fab fa-twitter"></i></span>
|
||||
<span>Twitter</span>
|
||||
</a>
|
||||
|
||||
<a class="button is-facebook" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fbulma.io">
|
||||
<span class="icon"><i class="fa-brands fa-facebook"></i></span>
|
||||
<span class="icon"><i class="fab fa-facebook"></i></span>
|
||||
<span>Facebook</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@ -10,21 +10,21 @@
|
||||
<tr>
|
||||
<th>
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-sass"><i class="fa-brands fa-sass"></i></span>
|
||||
<span class="icon has-text-sass"><i class="fab fa-sass"></i></span>
|
||||
<span>Sass Variable</span>
|
||||
</div>
|
||||
</th>
|
||||
{% unless include.hide_css_vars %}
|
||||
<th>
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-link"><i class="fa-brands fa-css3"></i></span>
|
||||
<span class="icon has-text-link"><i class="fab fa-css3"></i></span>
|
||||
<span>CSS Variable</span>
|
||||
</div>
|
||||
</th>
|
||||
{% endunless %}
|
||||
<th>
|
||||
<div class="icon-text">
|
||||
<span class="icon has-text-success"><i class="fa-solid fa-code"></i></span>
|
||||
<span class="icon has-text-success"><i class="fas fa-code"></i></span>
|
||||
<span>Value</span>
|
||||
</div>
|
||||
</th>
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
<section class="bd-hero is-{{ include.variant }}">
|
||||
<div class="bd-hero-body">
|
||||
<h1 class="bd-hero-title">
|
||||
<h1 class="bd-hero-title algolia-lvl0">
|
||||
{{ include.title }}
|
||||
</h1>
|
||||
|
||||
<hr class="bd-hr">
|
||||
|
||||
<h2 class="bd-hero-subtitle">
|
||||
<h2 class="bd-hero-subtitle algolia-lvl1">
|
||||
{{ include.subtitle }}
|
||||
</h2>
|
||||
|
||||
|
||||
@ -20,7 +20,7 @@
|
||||
|
||||
{% if include.has_sublist %}
|
||||
<span class="icon is-small">
|
||||
<i class="fa-solid fa-angle-right"></i>
|
||||
<i class="fas fa-angle-right"></i>
|
||||
</span>
|
||||
{% endif %}
|
||||
</a>
|
||||
|
||||
@ -1,26 +1,26 @@
|
||||
<div class="bd-menu">
|
||||
<div class="bd-menu-section is-start">
|
||||
{% include docs/menu-heading.html icon="fa-solid fa-arrow-right" label="Start Here" %}
|
||||
{% include docs/menu-heading.html icon="fas fa-arrow-right" label="Start Here" %}
|
||||
{% include docs/menu-list.html category_id="start" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-menu-section is-features">
|
||||
{% include docs/menu-heading.html icon="fa-solid fa-medal" label="Features" %}
|
||||
{% include docs/menu-heading.html icon="fas fa-medal" label="Features" %}
|
||||
{% include docs/menu-list.html category_id="features" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-menu-section is-sass">
|
||||
{% include docs/menu-heading.html icon="fa-brands fa-sass" label="Sass Tools" %}
|
||||
{% include docs/menu-heading.html icon="fab fa-sass" label="Sass Tools" %}
|
||||
{% include docs/menu-list.html category_id="sass" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-menu-section is-custom">
|
||||
{% include docs/menu-heading.html icon="fa-solid fa-palette" label="Customization" %}
|
||||
{% include docs/menu-heading.html icon="fas fa-palette" label="Customization" %}
|
||||
{% include docs/menu-list.html category_id="customize" %}
|
||||
</div>
|
||||
|
||||
<div class="bd-menu-section is-library">
|
||||
{% include docs/menu-heading.html icon="fa-solid fa-code" label="CSS Library" %}
|
||||
{% include docs/menu-heading.html icon="fas fa-code" label="CSS Library" %}
|
||||
|
||||
{% assign columns_size = site.data.links.categories.columns | size %}
|
||||
{% assign grid_size = site.data.links.categories.grid | size %}
|
||||
@ -59,7 +59,7 @@
|
||||
</div>
|
||||
|
||||
<div class="bd-menu-section is-utilities">
|
||||
{% include docs/menu-heading.html icon="fa-brands fa-css3" label="CSS Helpers" %}
|
||||
{% include docs/menu-heading.html icon="fab fa-css3" label="CSS Helpers" %}
|
||||
{% include docs/menu-list.html category_id="helpers" %}
|
||||
</div>
|
||||
|
||||
|
||||
@ -15,6 +15,8 @@
|
||||
{%- endif %}
|
||||
</title>
|
||||
|
||||
<link rel="stylesheet" href="{{ site.url }}/vendor/fontawesome-free-5.15.2-web/css/all.min.css">
|
||||
|
||||
{% if page.fontawesome4 %}
|
||||
<link rel="stylesheet" href="{{ site.data.icons.fontawesome4 }}">
|
||||
{% endif %}
|
||||
|
||||
@ -13,7 +13,7 @@
|
||||
|
||||
<button class="bd-nav-item is-search is-icon">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-magnifying-glass fa-lg"></i>
|
||||
<i class="fas fa-search fa-lg"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@ -22,7 +22,7 @@
|
||||
data-target="js-more"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-ellipsis fa-lg"></i>
|
||||
<i class="fas fa-ellipsis-h fa-lg"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
@ -86,25 +86,25 @@
|
||||
aria-label="System mode"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fas fa-display" aria-hidden="true"></i>
|
||||
<i class="fas fa-desktop" aria-hidden="true"></i>
|
||||
</span>
|
||||
<span>System</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="bd-nav-search is-hidden">
|
||||
<div class="bd-nav-search">
|
||||
<button
|
||||
class="bd-nav-item is-search-desktop is-icon js-burger"
|
||||
data-target="js-search"
|
||||
>
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-magnifying-glass fa-lg"></i>
|
||||
<i class="fas fa-search fa-lg"></i>
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div id="js-search" class="bd-nav-menu is-search js-menu">
|
||||
<input id="form-search" class="input" type="text" placeholder="Search" />
|
||||
<input id="algoliaSearch" class="input" type="text" placeholder="Search" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@ -11,14 +11,14 @@
|
||||
{% assign href = site.data.links.by_id['features'].path %}
|
||||
{% include website/feature.html
|
||||
id="modern"
|
||||
icon="fa-brands fa-css3 fa-xl"
|
||||
icon="fab fa-css3 fa-xl"
|
||||
title="Modern"
|
||||
subtitle="Flexbox + Grid + CSS Variables"
|
||||
href=href %}
|
||||
{% assign href = site.data.links.by_id['customize'].path %}
|
||||
{% include website/feature.html
|
||||
id="easy"
|
||||
icon="fa-solid fa-star-of-life fa-xl"
|
||||
icon="fas fa-star-of-life fa-xl"
|
||||
title="Easy"
|
||||
subtitle="Download. Customize. Done."
|
||||
href=href
|
||||
@ -27,7 +27,7 @@
|
||||
{{ href }}
|
||||
{% include website/feature.html
|
||||
id="free"
|
||||
icon="fa-brands fa-github-alt fa-xl"
|
||||
icon="fab fa-github-alt fa-xl"
|
||||
title="Free"
|
||||
subtitle="Open Source on GitHub"
|
||||
href=href
|
||||
|
||||
@ -119,7 +119,7 @@
|
||||
</p>
|
||||
|
||||
<span class="thing bd-home-knowledge">
|
||||
<span class="icon"> <i class="fa-solid fa-circle-check"></i></span>
|
||||
<span class="icon"> <i class="fas fa-circle-check"></i></span>
|
||||
<strong>No CSS knowledge required!</strong>
|
||||
</span>
|
||||
|
||||
|
||||
@ -16,8 +16,15 @@
|
||||
{% include global/native.html %}
|
||||
{% include global/about.html %}
|
||||
|
||||
<script src="https://kit.fontawesome.com/418563224c.js" crossorigin="anonymous"></script>
|
||||
<script src="{{ site.url }}/assets/vendor/clipboard-2.0.11.min.js"></script>
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
|
||||
<script type="text/javascript"> docsearch({
|
||||
apiKey: 'cb93c14bebd90678e789c946d95ea94d',
|
||||
indexName: 'bulma',
|
||||
inputSelector: '#algoliaSearch',
|
||||
debug: false // Set debug to true if you want to inspect the dropdown
|
||||
});
|
||||
</script>
|
||||
<script src="{{ site.url }}/assets/javascript/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -13,7 +13,7 @@ route: documentation
|
||||
<div class="bd-docs-overlay js-toggle" data-target="js-docs"></div>
|
||||
|
||||
<button id="js-menu-toggle" class="button bd-docs-button js-toggle" data-target="js-docs">
|
||||
<i class="fa-solid fa-arrow-right-from-bracket"></i>
|
||||
<i class="fas fa-arrow-right-from-bracket"></i>
|
||||
</button>
|
||||
|
||||
<div class="bd-docs-menu">
|
||||
@ -32,7 +32,7 @@ route: documentation
|
||||
prints=page.hero_prints
|
||||
%}
|
||||
|
||||
<div class="bd-docs-content">
|
||||
<div class="bd-docs-content algolia-content">
|
||||
{% if page.markdown %}
|
||||
<div class="content">{{ content }}</div>
|
||||
{% else %}
|
||||
|
||||
@ -121,7 +121,7 @@
|
||||
margin-left: calc(-0.5 * var(--p));
|
||||
margin-top: calc(-0.5 * var(--p));
|
||||
|
||||
.fa-solid {
|
||||
.fas {
|
||||
transition-duration: cv.getVar("duration");
|
||||
transition-property: transform;
|
||||
}
|
||||
@ -159,7 +159,7 @@
|
||||
&.is-active {
|
||||
padding-left: calc(var(--menu-width) + var(--p));
|
||||
|
||||
.bd-docs-button .fa-solid {
|
||||
.bd-docs-button .fas {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
|
||||
@ -35784,7 +35784,7 @@ has-background-moon.is-hoverable:active {
|
||||
margin-left: calc(-0.5 * var(--p));
|
||||
margin-top: calc(-0.5 * var(--p));
|
||||
}
|
||||
.bd-docs.is-fullwidth .bd-docs-button .fa-solid {
|
||||
.bd-docs.is-fullwidth .bd-docs-button .fas {
|
||||
transition-duration: var(--bulma-duration);
|
||||
transition-property: transform;
|
||||
}
|
||||
@ -35816,7 +35816,7 @@ has-background-moon.is-hoverable:active {
|
||||
.bd-docs.is-fullwidth.is-active {
|
||||
padding-left: calc(var(--menu-width) + var(--p));
|
||||
}
|
||||
.bd-docs.is-fullwidth.is-active .bd-docs-button .fa-solid {
|
||||
.bd-docs.is-fullwidth.is-active .bd-docs-button .fas {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
.bd-docs.is-fullwidth.is-active .bd-docs-menu {
|
||||
|
||||
2
docs/assets/css/website.min.css
vendored
2
docs/assets/css/website.min.css
vendored
File diff suppressed because one or more lines are too long
@ -5,9 +5,9 @@ title: Official Bulma Documentation
|
||||
subtitle: Everything you need to create a website with Bulma.
|
||||
hero_prints:
|
||||
- label: "Creative Commons"
|
||||
icon: "fa-brands fa-creative-commons"
|
||||
icon: "fab fa-creative-commons"
|
||||
- label: "Contribute on GitHub"
|
||||
icon: "fa-solid fa-code-pull-request"
|
||||
icon: "fas fa-code-pull-request"
|
||||
---
|
||||
{% assign category_ids = site.data.links.category_ids %}
|
||||
|
||||
|
||||
@ -133,7 +133,7 @@ Your project folder should look like this:
|
||||
<td>
|
||||
<div class="icon-text has-text-html">
|
||||
<span class="icon">
|
||||
<i class="fa-brands fa-html5"></i>
|
||||
<i class="fab fa-html5"></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
@ -144,7 +144,7 @@ Your project folder should look like this:
|
||||
<td>
|
||||
<div class="icon-text has-text-css">
|
||||
<span class="icon">
|
||||
<i class="fa-brands fa-css3"></i>
|
||||
<i class="fab fa-css3"></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
@ -155,7 +155,7 @@ Your project folder should look like this:
|
||||
<td>
|
||||
<div class="icon-text has-text-success">
|
||||
<span class="icon">
|
||||
<i class="fa-solid fa-code"></i>
|
||||
<i class="fas fa-code"></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
@ -166,7 +166,7 @@ Your project folder should look like this:
|
||||
<td>
|
||||
<div class="icon-text has-text-sass">
|
||||
<span class="icon">
|
||||
<i class="fa-brands fa-sass"></i>
|
||||
<i class="fab fa-sass"></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
@ -177,7 +177,7 @@ Your project folder should look like this:
|
||||
<td>
|
||||
<div class="icon-text has-text-js">
|
||||
<span class="icon">
|
||||
<i class="fa-brands fa-js"></i>
|
||||
<i class="fab fa-js"></i>
|
||||
</span>
|
||||
</div>
|
||||
</td>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user