# jgthms/bulma

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/jgthms-bulma).**

50,062 stars · 3,909 forks · CSS · mit

## Links

- GitHub: https://github.com/jgthms/bulma
- Homepage: https://bulma.io
- awesome-repositories: https://awesome-repositories.com/repository/jgthms-bulma.md

## Topics

`css` `css-framework` `design` `flexbox` `html`

## Description

Bulma is a design-agnostic CSS framework that provides a collection of pre-styled interface components and layout primitives. It is built to be independent of specific JavaScript frameworks or build tools, allowing developers to construct responsive web interfaces by applying standardized classes directly to semantic HTML markup.

The framework distinguishes itself through a utility-first approach that combines modular component styling with a flexible grid system. It leverages native CSS variables to manage design tokens, enabling real-time visual customization, automatic dark mode adaptation, and theme overrides without requiring code recompilation. This architecture ensures a consistent visual identity across projects while maintaining a lightweight footprint.

The project covers a comprehensive capability surface, including responsive layout containers, navigation systems, and interactive form controls. It provides granular helper classes for spacing, typography, and alignment, alongside preprocessor-driven tools that facilitate style reuse and modular component organization. These features collectively support rapid frontend prototyping and the implementation of cohesive design systems across modern web browsers.

## Tags

### User Interface & Experience

- [Buttons](https://awesome-repositories.com/f/user-interface-experience/buttons.md) — Provides a flexible button system with customizable colors, sizes, and visual states like loading or disabled. ([source](https://bulma.io/documentation/elements/button/))
- [Responsive Grid Frameworks](https://awesome-repositories.com/f/user-interface-experience/responsive-grid-frameworks.md) — A layout system that uses flexible containers and column classes to organize content across different screen sizes and device types.
- [Utility-First Styling](https://awesome-repositories.com/f/user-interface-experience/utility-first-styling.md) — Provides granular helper classes for spacing, alignment, and visibility to enable rapid layout construction without custom CSS.
- [Utility-First Styling Toolkits](https://awesome-repositories.com/f/user-interface-experience/utility-first-styling-toolkits.md) — A set of modular classes that provide direct control over spacing, typography, and alignment without requiring custom CSS rules.
- [CSS Component Libraries](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries.md) — A collection of pre-styled interface elements that developers apply to standard HTML markup to build responsive web layouts.
- [Design Systems](https://awesome-repositories.com/f/user-interface-experience/design-systems.md) — Standardizes visual identity across a project by using shared variables for colors, spacing, and typography to ensure a cohesive look.
- [Grid Systems](https://awesome-repositories.com/f/user-interface-experience/grid-systems.md) — Uses flexible box layout properties to distribute space and align elements within a responsive twelve-column grid structure.
- [Navigation Bars](https://awesome-repositories.com/f/user-interface-experience/navigation-bars.md) — Displays horizontal navigation bars that adapt to screen sizes while supporting links, images, and dropdown menus. ([source](https://bulma.io/documentation/components/navbar/))
- [UI Component Libraries](https://awesome-repositories.com/f/user-interface-experience/ui-component-libraries.md) — Creates consistent and reusable interface elements like buttons, cards, and navigation bars using a standardized set of CSS classes.
- [Card Layouts](https://awesome-repositories.com/f/user-interface-experience/card-layouts.md) — Provides flexible containers that organize images, text, and action buttons into structured, consistent card formats. ([source](https://bulma.io/documentation/components/card/))
- [Dark Mode Support](https://awesome-repositories.com/f/user-interface-experience/dark-mode-support.md) — Adapts interface colors to user system preferences by leveraging built-in CSS variables and theme-aware definitions. ([source](https://bulma.io/documentation/features/dark-mode/))
- [Design-Agnostic UI Foundations](https://awesome-repositories.com/f/user-interface-experience/design-agnostic-ui-foundations.md) — A lightweight styling layer that provides consistent visual defaults while remaining independent of specific JavaScript frameworks or build tools.
- [Flexbox Utilities](https://awesome-repositories.com/f/user-interface-experience/flexbox-utilities.md) — Provides utility classes to control element direction, wrapping, alignment, and sizing without writing custom CSS. ([source](https://bulma.io/documentation/helpers/flexbox-helpers/))
- [Grid Column Sizing](https://awesome-repositories.com/f/user-interface-experience/grid-column-sizing.md) — Provides a twelve-column grid system with support for specific widths, offsets, and narrow sizing configurations. ([source](https://bulma.io/documentation/columns/sizes/))
- [Modals](https://awesome-repositories.com/f/user-interface-experience/modals.md) — Renders floating containers that sit above page content to present focused information while dimming the background. ([source](https://bulma.io/documentation/components/modal/))
- [Responsive Breakpoints](https://awesome-repositories.com/f/user-interface-experience/responsive-breakpoints.md) — Applies media queries to component classes to ensure fluid layout adaptation across mobile, tablet, and desktop viewports.
- [Responsive Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-layouts.md) — Builds fluid and adaptive page structures that automatically adjust column widths and spacing across mobile, tablet, and desktop devices.
- [Spacing Utilities](https://awesome-repositories.com/f/user-interface-experience/spacing-utilities.md) — Provides responsive utility classes to adjust margin and padding on elements based on viewport width. ([source](https://bulma.io/documentation/helpers/spacing-helpers/))
- [Typography Utilities](https://awesome-repositories.com/f/user-interface-experience/typography-utilities.md) — Provides responsive utility classes to modify font size, weight, alignment, and family properties across screen sizes. ([source](https://bulma.io/documentation/helpers/typography-helpers/))
- [CSS Variable Customization](https://awesome-repositories.com/f/user-interface-experience/css-variable-customization.md) — Allows overriding native CSS variables directly in stylesheets to change component appearance without recompiling code. ([source](https://bulma.io/documentation/features/css-variables/))
- [Design Tokens](https://awesome-repositories.com/f/user-interface-experience/design-tokens.md) — Exposes design tokens through native variables to allow real-time visual customization and automatic dark mode support. ([source](https://bulma.io/documentation/helpers/palette-helpers/))
- [Dropdown Menus](https://awesome-repositories.com/f/user-interface-experience/dropdown-menus.md) — Displays hidden menus that reveal additional links or actions when triggered by user interaction. ([source](https://bulma.io/documentation/components/dropdown/))
- [Form Styling](https://awesome-repositories.com/f/user-interface-experience/form-styling.md) — Builds accessible and visually uniform input fields, checkboxes, and dropdowns that maintain a consistent appearance across all modern web browsers.
- [Layout Utilities](https://awesome-repositories.com/f/user-interface-experience/layout-utilities.md) — Provides utility classes to manage visibility, text alignment, and spacing without requiring custom CSS. ([source](https://bulma.io/documentation/helpers/other-helpers/))
- [Responsive Column Layouts](https://awesome-repositories.com/f/user-interface-experience/responsive-column-layouts.md) — Supports defining specific column widths for different screen breakpoints to ensure content adapts fluidly across devices. ([source](https://bulma.io/documentation/columns/responsiveness/))
- [Tabs](https://awesome-repositories.com/f/user-interface-experience/tabs.md) — Displays horizontal tabs that allow users to switch between content sections without reloading the page. ([source](https://bulma.io/documentation/components/tabs/))
- [Breadcrumbs](https://awesome-repositories.com/f/user-interface-experience/breadcrumbs.md) — Renders trails of links that show the user's current location within a website hierarchy for easy navigation. ([source](https://bulma.io/documentation/components/breadcrumb/))
- [Color Utilities](https://awesome-repositories.com/f/user-interface-experience/color-utilities.md) — Provides a predefined set of theme color classes to modify the foreground text or background color of components. ([source](https://bulma.io/documentation/helpers/color-helpers/))
- [Frontend Prototyping Tools](https://awesome-repositories.com/f/user-interface-experience/frontend-prototyping-tools.md) — Assembles complex web interfaces quickly by applying utility classes for spacing, alignment, and typography without writing custom CSS.
- [Horizontal Layouts](https://awesome-repositories.com/f/user-interface-experience/horizontal-layouts.md) — Provides row-based containers that keep text, buttons, and images neatly aligned side-by-side using flexible spacing rules. ([source](https://bulma.io/documentation/layout/level/))
- [Pagination](https://awesome-repositories.com/f/user-interface-experience/pagination.md) — Renders page numbers and navigation buttons to facilitate movement through large datasets or long documents. ([source](https://bulma.io/documentation/components/pagination/))
- [Responsive Column Constructions](https://awesome-repositories.com/f/user-interface-experience/responsive-column-constructions.md) — Enables flexible grid layouts that automatically distribute space among child elements based on defined column counts. ([source](https://bulma.io/documentation/columns/basics/))
- [Semantic Styling](https://awesome-repositories.com/f/user-interface-experience/semantic-styling.md) — Targets standard markup elements with CSS classes to maintain accessibility and structural integrity without requiring additional JavaScript.
- [Theme Definitions](https://awesome-repositories.com/f/user-interface-experience/theme-definitions.md) — Allows defining visual themes by overriding CSS variables to change component colors, spacing, and typography. ([source](https://bulma.io/documentation/features/themes/))
- [Vertical Menus](https://awesome-repositories.com/f/user-interface-experience/vertical-menus.md) — Renders vertical lists of navigation items that support nested sub-menus and active states for complex hierarchies. ([source](https://bulma.io/documentation/components/menu/))
- [Alert Messages](https://awesome-repositories.com/f/user-interface-experience/alert-messages.md) — Renders highlighted containers with distinct colors to draw attention to important notifications, warnings, or success messages. ([source](https://bulma.io/documentation/components/message/))
- [CSS Preprocessor Architectures](https://awesome-repositories.com/f/user-interface-experience/css-preprocessor-architectures.md) — Organizes styles into modular files that leverage preprocessor mixins and functions to generate consistent component variations.
- [Form Control Mixins](https://awesome-repositories.com/f/user-interface-experience/form-control-mixins.md) — Provides reusable mixins to apply consistent sizing, state, and layout properties to buttons and inputs. ([source](https://bulma.io/documentation/form/general/))
- [Media Objects](https://awesome-repositories.com/f/user-interface-experience/media-objects.md) — Provides layout components that pair images or icons with text blocks for balanced presentation of related information. ([source](https://bulma.io/documentation/layout/media-object/))
- [Radio Buttons](https://awesome-repositories.com/f/user-interface-experience/radio-buttons.md) — Provides styled HTML inputs for mutually exclusive selection groups that match design system requirements. ([source](https://bulma.io/documentation/form/radio/))
- [Responsive Utilities](https://awesome-repositories.com/f/user-interface-experience/responsive-utilities.md) — Provides responsive classes to show or hide content at specific breakpoints based on the current viewport width. ([source](https://bulma.io/documentation/helpers/visibility-helpers/))
- [Select Dropdowns](https://awesome-repositories.com/f/user-interface-experience/select-dropdowns.md) — Provides consistent dropdown menus that support multiple selections, custom colors, and integrated icons. ([source](https://bulma.io/documentation/form/select/))
- [Skeleton Loaders](https://awesome-repositories.com/f/user-interface-experience/skeleton-loaders.md) — Provides skeleton placeholders to indicate loading states while content is being fetched. ([source](https://bulma.io/documentation/features/skeletons/))
- [Text Inputs](https://awesome-repositories.com/f/user-interface-experience/text-inputs.md) — Provides responsive form controls for user data entry with consistent colors, sizes, and integrated icon styles. ([source](https://bulma.io/documentation/form/input/))
- [Typography](https://awesome-repositories.com/f/user-interface-experience/typography.md) — Provides semantic heading styles using predefined size classes to create visual hierarchy and depth. ([source](https://bulma.io/documentation/elements/title/))