Contents
Bulma
A simple CSS framework without JavaScript: flexbox columns, readable classes, components and Sass customisation.
1.Getting started
- What Bulma isThe Bulma CSS framework: styles only with no JavaScript, flexbox columns, readable class names, how it differs from Bootstrap and how to load it from a CDN.
- Installing with npm and ViteHow to add Bulma to a Vite project: installing the package, importing the styles in main.js, running and building.
- The is- and has- modifiersHow Bulma class names work: the main element class, the is- and has- modifiers, and breakpoint suffixes such as -mobile and -desktop.
2.Page layout
- Columns: the basicsBulma's column grid: a columns block with column children, sharing the row equally, stacking on phones and the is-mobile modifier.
- Columns: sizes, responsiveness, gapsColumn widths in words and numbers, is-narrow and offsets, different sizes on different screens, wrapping, gaps between columns and nested columns.
- The gridBulma 1.0's new CSS Grid layout: a grid block with cell children, minimum cell width, a fixed number of columns, spanning cells and gaps.
- Container, section and footerThe page skeleton in Bulma: container limits the width, section adds spacing around a block, footer styles the bottom of the page, block separates elements.
- Hero and levelHero, a large banner at the top of a page, with its colours, heights and the hero-head and hero-foot parts; level, a horizontal bar with items on the left and right.
3.Helpers
- Headings and textThe title and subtitle elements, the content class for ordinary text and typography helpers: size, weight, alignment and case.
- Colours and colour helpersBulma's palette: the main colours primary, link, info, success, warning and danger, the has-text and has-background helpers, light and dark shades and numbered shades from 00 to 100.
- Spacing, flexbox and visibilityMargin and padding helpers m- and p- with sides and a scale from 0 to 6, flexbox helpers and classes that hide elements on different screens.
4.Elements and components
- ButtonsThe button element: colours, light and outlined variants, sizes, loading and disabled states, button groups with buttons and toggle groups with has-addons.
- Box, card and mediaThe simple box block, the card with an image, header, content and footer, the image element with aspect ratios and the media object for reviews and comments.
- The navbarA site header with navbar: logo, links on the left and right, a dropdown item, the burger button for phones and the few lines of JavaScript that make it work.
- Menu, breadcrumb, tabs, paginationThe menu sidebar for an admin page, breadcrumb, tabs and pagination; marking the active item and switching tabs.
- FormsForm fields in Bulma: the field and control wrappers, input, textarea, select, checkboxes and radios, help text, icons in fields, has-addons fields with a button and is-grouped groups.
- Notifications, messages, tags, progressFeedback elements: notification with a close button, message with a header, tag labels and tags groups, the progress bar.
- Modal and dropdownThe modal and dropdown elements in Bulma: markup, the is-active class, a short JavaScript to open and close them, and a hover dropdown with no script.
- TablesThe table element: styling an ordinary HTML table, the is-striped, is-hoverable, is-bordered, is-narrow and is-fullwidth modifiers, a selected row and scrolling on narrow screens.
5.Themes and customisation
- Dark modeDark mode in Bulma 1.0: automatic switching from the system setting, forcing a theme with data-theme and theme-dark, a JavaScript toggle button and the build without dark mode.
- Customising with CSS variablesHow to restyle Bulma 1.0 without a build step: the global --bulma-primary-h, -s and -l variables, font and radius, per-component variables and where they apply.
- Customising with SassBuilding Bulma from its Sass sources in a Vite project: variables in @use with, custom colours through $custom-colors and loading only the parts of the framework you need.