{ "by_id": { "home": { "name": "Home", "path": "" }, "documentation": { "name": "Documentation", "subtitle": "Everything you need to create a website with Bulma", "path": "/documentation" }, "overview": { "name": "Overview", "subtitle": "An overview of what Bulma as a framework is all about", "path": "/documentation/overview" }, "overview-start": { "name": "Getting started", "subtitle": "You only need 1 CSS file to use Bulma", "path": "/documentation/overview/start" }, "overview-customize": { "name": "Customize", "subtitle": "Create your own theme with a simple set of variables", "path": "/documentation/overview/customize" }, "overview-classes": { "name": "CSS Classes", "subtitle": "Bulma is simply a collection of CSS classes. Write the HTML code you want.", "path": "/documentation/overview/classes" }, "overview-modular": { "name": "Modularity", "subtitle": "Just import what you need", "path": "/documentation/overview/modular" }, "overview-responsiveness": { "name": "Responsiveness", "subtitle": "Bulma is a mobile-first framework", "path": "/documentation/overview/responsiveness" }, "overview-variables": { "name": "Variables", "subtitle": "Easily customize Bulma to match your design", "path": "/documentation/overview/variables" }, "overview-colors": { "name": "Colors", "subtitle": "The colors that style most Bulma elements and components", "path": "/documentation/overview/colors" }, "overview-functions": { "name": "Functions", "subtitle": "Utility functions to calculate colors and other values", "path": "/documentation/overview/functions" }, "overview-mixins": { "name": "Mixins", "subtitle": "Utility mixins for custom elements and responsive helpers", "path": "/documentation/overview/mixins" }, "modifiers": { "name": "Modifiers", "subtitle": "An easy-to-read naming system designed for humans", "path": "/documentation/modifiers" }, "modifiers-syntax": { "name": "Syntax", "subtitle": "Most Bulma elements have alternative styles. To apply them, you only need to append one of the modifier classes. They all start with is- or has-.", "path": "/documentation/modifiers/syntax" }, "modifiers-helpers": { "name": "Helpers", "subtitle": "Apply helper classes to almost any element, in order to alter its style", "path": "/documentation/modifiers/helpers" }, "modifiers-responsive-helpers": { "name": "Responsive helpers", "subtitle": "Show/hide content depending on the width of the viewport", "path": "/documentation/modifiers/responsive-helpers" }, "modifiers-color-helpers": { "name": "Color helpers", "subtitle": "Change the color of the text and/or background", "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", "path": "/documentation/modifiers/typography-helpers" }, "columns": { "name": "Columns", "subtitle": "The power of Flexbox in a simple interface", "path": "/documentation/columns" }, "columns-basics": { "name": "Basics", "subtitle": "A simple way to build responsive columns", "path": "/documentation/columns/basics" }, "columns-gap": { "name": "Gap", "subtitle": Customize the gap between the columns, "path": "/documentation/columns/gap" }, "columns-nesting": { "name": "Nesting", "subtitle": "A simple way to build responsive columns", "path": "/documentation/columns/nesting" }, "columns-options": { "name": "Options", "subtitle": "Design different types of column layouts", "path": "/documentation/columns/options" }, "columns-responsiveness": { "name": "Responsiveness", "subtitle": "Handle different column layouts for each breakpoint", "path": "/documentation/columns/responsiveness" }, "columns-sizes": { "name": "Sizes", "subtitle": "Define the size of each column individually", "path": "/documentation/columns/sizes" }, "layout": { "name": "Layout", "subtitle": "Design the structure of your webpage with these CSS classes", "path": "/documentation/layout" }, "layout-container": { "name": "Container", "subtitle": "A simple container to center your content horizontally", "path": "/documentation/layout/container" }, "layout-level": { "name": "Level", "subtitle": "A multi-purpose horizontal level, which can contain almost any other element", "path": "/documentation/layout/level" }, "layout-media": { "name": "Media Object", "subtitle": "The famous media object prevalent in social media interfaces, but useful in any context", "path": "/documentation/layout/media" }, "layout-hero": { "name": "Hero", "subtitle": "An imposing hero banner to showcase something", "path": "/documentation/layout/hero" }, "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" }, "layout-footer": { "name": "Footer", "subtitle": "A simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc.", "path": "/documentation/layout/footer" }, "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" }, "form": { "name": "Form", "subtitle": "The indispensable form controls, designed for maximum clarity", "path": "/documentation/form" }, "form-general": { "name": "General", "subtitle": "All generic form controls, designed for consistency", "path": "/documentation/form/general" }, "form-input": { "name": "Input", "subtitle": "The text input and its variations", "path": "/documentation/form/input" }, "form-textarea": { "name": "Textarea", "subtitle": "The multiline textarea and its variations", "path": "/documentation/form/textarea" }, "form-select": { "name": "Select", "subtitle": "The browser built-in select dropdown, styled accordingly", "path": "/documentation/form/select" }, "form-checkbox": { "name": "Checkbox", "subtitle": "The 2-state checkbox in its native format", "path": "/documentation/form/checkbox" }, "form-radio": { "name": "Radio", "subtitle": "The mutually exclusive radio buttons in their native format", "path": "/documentation/form/radio" }, "form-file": { "name": "File", "subtitle": "A custom file upload input, without JavaScript", "path": "/documentation/form/file" }, "elements": { "name": "Elements", "subtitle": "Essential interface elements that only require a single CSS class", "path": "/documentation/elements" }, "elements-box": { "name": "Box", "subtitle": "A white box to contain other elements", "path": "/documentation/elements/box" }, "elements-button": { "name": "Button", "subtitle": "The classic button, in different colors, sizes, and states", "path": "/documentation/elements/button" }, "elements-content": { "name": "Content", "subtitle": "A single class to handle WYSIWYG generated content, where only HTML tags are available", "path": "/documentation/elements/content" }, "elements-delete": { "name": "Delete", "subtitle": "A versatile delete cross", "path": "/documentation/elements/delete" }, "elements-icon": { "name": "Icon", "subtitle": "Compatible with all icon font libraries, including Font Awesome 5", "path": "/documentation/elements/icon" }, "elements-image": { "name": "Image", "subtitle": "A container for responsive images", "path": "/documentation/elements/image" }, "elements-notification": { "name": "Notification", "subtitle": "Bold notification blocks, to alert your users of something", "path": "/documentation/elements/notification" }, "elements-progress": { "name": "Progress bars", "subtitle": "Native HTML progress bars", "path": "/documentation/elements/progress" }, "elements-table": { "name": "Table", "subtitle": "The inevitable HTML table, with special case cells", "path": "/documentation/elements/table" }, "elements-tag": { "name": "Tag", "subtitle": "Small tag labels to insert anywhere", "path": "/documentation/elements/tag" }, "elements-title": { "name": "Title", "subtitle": "Simple headings to add depth to your page", "path": "/documentation/elements/title" }, "components": { "name": "Components", "subtitle": "Advanced multi-part components with lots of possibilities", "path": "/documentation/components" }, "components-breadcrumb": { "name": "Breadcrumb", "subtitle": "A simple breadcrumb component to improve your navigation experience", "path": "/documentation/components/breadcrumb" }, "components-card": { "name": "Card", "subtitle": "An all-around flexible and composable component", "path": "/documentation/components/card" }, "components-dropdown": { "name": "Dropdown", "subtitle": "An interactive dropdown menu for discoverable content", "path": "/documentation/components/dropdown" }, "components-menu": { "name": "Menu", "subtitle": "A simple menu, for any type of vertical navigation", "path": "/documentation/components/menu" }, "components-message": { "name": "Message", "subtitle": "Colored message blocks, to emphasize part of your page", "path": "/documentation/components/message" }, "components-modal": { "name": "Modal", "subtitle": "A classic modal overlay, in which you can include any content you want", "path": "/documentation/components/modal" }, "components-navbar": { "name": "Navbar", "subtitle": "A responsive horizontal navbar that can support images, links, buttons, and dropdowns", "path": "/documentation/components/navbar" }, "components-pagination": { "name": "Pagination", "subtitle": "A responsive, usable, and flexible pagination", "path": "/documentation/components/pagination" }, "components-panel": { "name": "Panel", "subtitle": "A composable panel, for compact controls", "path": "/documentation/components/panel" }, "components-tabs": { "name": "Tabs", "subtitle": "Simple responsive horizontal navigation tabs, with different styles", "path": "/documentation/components/tabs" }, "blog": { "name": "Blog", "path": "/blog" }, "expo": { "name": "Expo", "subtitle": "Official Bulma showcase", "icon": "star", "color": "star", "path": "/expo" }, "love": { "name": "Love", "subtitle": "Fans of Bulma around the world", "color": "danger", "icon": "heart", "path": "/love" }, "more": { "name": "More", "path": "/more" }, "bulma-start": { "name": "Bulma start", "subtitle": "A tiny npm package to get started", "icon": "rocket", "color": "success", "path": "/bulma-start" }, "made-with-bulma": { "name": "Made with Bulma", "subtitle": "The official community badge", "icon": "certificate", "color": "primary", "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" }, "patreon-backers": { "name": "Patreon backers", "subtitle": "Everyone who is supporting Bulma", "icon_brand": "true", "icon": "patreon", "color": "patreon", "path": "/backers" }, "extensions": { "name": "Bulma extensions", "subtitle": "Side projects to enhance Bulma", "icon": "plug", "color": "orange", "path": "/extensions" } }, "more": [ "bulma-start", "made-with-bulma", "bootstrap", "patreon-backers", "extensions" ], "categories": { "overview": ["overview-start", "overview-classes", "overview-modular", "overview-responsiveness", "overview-variables", "overview-colors", "overview-functions", "overview-mixins"], "modifiers": ["modifiers-syntax", "modifiers-helpers", "modifiers-responsive-helpers", "modifiers-color-helpers", "modifiers-typography-helpers"], "columns": ["columns-basics", "columns-sizes", "columns-responsiveness", "columns-nesting", "columns-gap", "columns-options"], "layout": ["layout-container", "layout-level", "layout-media", "layout-hero", "layout-section", "layout-footer", "layout-tiles"], "form": ["form-general", "form-input", "form-textarea", "form-select", "form-checkbox", "form-radio", "form-file"], "elements": ["elements-box", "elements-button", "elements-content", "elements-delete", "elements-icon", "elements-image", "elements-notification", "elements-progress", "elements-table", "elements-tag", "elements-title"], "components": ["components-breadcrumb", "components-card", "components-dropdown", "components-menu", "components-message", "components-modal", "components-navbar", "components-pagination", "components-panel", "components-tabs"] } }