Bulma is a modern CSS framework based on Flexbox.
https://bulma.io/
https://github.com/jgthms/bulma

# Common frontend components

**Layout:**

- **Container** – Centers and constrains content width.
- **Section** – Large spacing block for grouping content.
- **Hero** – Full-width banner for headers or landing pages.
- **Footer** – Page footer area.
- **Columns** – Responsive grid system using Flexbox.
- **Tile** – Complex layouts for cards and media objects.


**Navigation:**

- **Navbar** – Responsive navigation bar with branding and links.
- **Tabs** – Horizontal tab navigation.
- **Breadcrumb** – Hierarchical navigation trail.
- **Pagination** – Page navigation controls.


**Forms:**

- **Input** – Text fields, email, password, etc.
- **Textarea** – Multi-line text input.
- **Select** – Dropdown menus.
- **Checkbox & Radio** – Form controls.
- **File Upload** – Styled file input.
- **Buttons** – Primary, link, outlined, etc.
- **Field & Control** – Form grouping and alignment.


**Content:**

- **Typography** – Titles, subtitles, headings, text helpers.
- **Image** – Responsive image container.
- **Icon** – Font Awesome or custom icons.
- **Media Object** – Layout for image + text.
- **Notification** – Alert messages.
- **Tag** – Small label elements.
- **Progress Bar** – Loading indicators.


**Cards & Panels:**

- **Card** – Content container with header, body, footer.
- **Panel** – Sidebar-like component for menus or lists.
- **Box** – Simple bordered container.


**Modals & Interactives:**

- **Modal** – Popup dialog.
- **Dropdown** – Interactive menu.
- **Message** – Dismissible alert box.
- **Tooltip** – Hover info (requires JS).


**Helpers & Utilities:**

- **Spacing Helpers** – Margin/padding classes.
- **Color Helpers** – Text and background colors.
- **Visibility Helpers** – Show/hide on breakpoints.
- **Flexbox Helpers** – Alignment and distribution.

## Component Reference Table

| **Component**          | **Description**                                   | **Bulma Classes**                          | **Sass Customization Tips**                             |
| ---------------------- | ------------------------------------------------- | ------------------------------------------ | ------------------------------------------------------- |
| <br>**Layout**         |                                                   |                                            |                                                         |
| Container              | Centers content and sets max width                | `.container`                               | `$container-max-width`                                  |
| Section                | Large spacing block for grouping content          | `.section`                                 | `$section-padding`                                      |
| Hero                   | Full-width banner for headers or landing pages    | `.hero`, `.hero-body`                      | `$hero-body-padding`, `$hero-background-color`          |
| Footer                 | Page footer area                                  | `.footer`                                  | `$footer-background-color`, `$footer-padding`           |
| Columns                | Responsive grid system using Flexbox              | `.columns`, `.column`                      | `$column-gap`, `$column-padding`                        |
| Tile                   | Complex layouts for cards and media objects       | `.tile`                                    | `$tile-spacing`                                         |
| <br>**Navigation**     |                                                   |                                            |                                                         |
| Navbar                 | Responsive navigation bar with branding and links | `.navbar`, `.navbar-item`                  | `$navbar-background-color`, `$navbar-height`            |
| Tabs                   | Horizontal tab navigation                         | `.tabs`, `.is-active`                      | `$tabs-border-color`, `$tabs-link-color`                |
| Breadcrumb             | Hierarchical navigation trail                     | `.breadcrumb`                              | `$breadcrumb-item-color`, `$breadcrumb-separator-color` |
| Pagination             | Page navigation controls                          | `.pagination`, `.pagination-link`          | `$pagination-color`, `$pagination-hover-color`          |
| <br>**Forms**          |                                                   |                                            |                                                         |
| Input                  | Text fields, email, password, etc.                | `.input`                                   | `$input-background-color`, `$input-border-color`        |
| Textarea               | Multi-line text input                             | `.textarea`                                | `$textarea-background-color`                            |
| Select                 | Dropdown menus                                    | `.select`                                  | `$select-background-color`                              |
| Checkbox & Radio       | Form controls                                     | `.checkbox`, `.radio`                      | `$control-margin`                                       |
| File Upload            | Styled file input                                 | `.file`                                    | `$file-cta-background-color`, `$file-name-color`        |
| Buttons                | Primary, link, outlined, etc.                     | `.button`, `.is-primary`, `.is-link`       | `$button-background-color`, `$button-border-radius`     |
| Field & Control        | Form grouping and alignment                       | `.field`, `.control`                       | `$field-margin`, `$control-padding`                     |
| <br>**Content**        |                                                   |                                            |                                                         |
| Typography             | Titles, subtitles, headings, text helpers         | `.title`, `.subtitle`, `.has-text-*`       | `$title-color`, `$subtitle-color`                       |
| Image                  | Responsive image container                        | `.image`                                   | `$image-radius`                                         |
| Icon                   | Font Awesome or custom icons                      | `.icon`                                    | `$icon-size`                                            |
| Media Object           | Layout for image + text                           | `.media`, `.media-left`, `.media-content`  | `$media-spacing`                                        |
| Notification           | Alert messages                                    | `.notification`                            | `$notification-background-color`                        |
| Tag                    | Small label elements                              | `.tag`                                     | `$tag-background-color`, `$tag-radius`                  |
| Progress Bar           | Loading indicators                                | `.progress`                                | `$progress-bar-background-color`                        |
| <br>**Cards & Panels** |                                                   |                                            |                                                         |
| Card                   | Content container with header, body, footer       | `.card`, `.card-header`, `.card-footer`    | `$card-radius`, `$card-shadow`                          |
| Panel                  | Sidebar-like component for menus or lists         | `.panel`, `.panel-block`                   | `$panel-background-color`, `$panel-border-color`        |
| Box                    | Simple bordered container                         | `.box`                                     | `$box-radius`, `$box-shadow`                            |
| Interactive            |                                                   |                                            |                                                         |
| Modal                  | Popup dialog                                      | `.modal`, `.modal-content`                 | `$modal-background-color`, `$modal-radius`              |
| Dropdown               | Interactive menu                                  | `.dropdown`, `.dropdown-menu`              | `$dropdown-background-color`, `$dropdown-radius`        |
| Message                | Dismissible alert box                             | `.message`, `.message-header`              | `$message-background-color`, `$message-radius`          |
| Tooltip                | Hover info (requires JS)                          | `.has-tooltip`                             | `$tooltip-background-color`, `$tooltip-radius`          |
| <br>**Helpers**        |                                                   |                                            |                                                         |
| Spacing Helpers        | Margin/padding classes                            | `.m-*`, `.p-*`                             | `$spacing-scale`                                        |
| Color Helpers          | Text and background colors                        | `.has-text-*`, `.has-background-*`         | `$colors` map                                           |
| Visibility             | Show/hide on breakpoints                          | `.is-hidden-*`, `.is-flex-*`               | `$breakpoints` map                                      |
| Flexbox Helpers        | Alignment and distribution                        | `.is-flex`, `.is-justify-*`, `.is-align-*` | `$flexbox-helpers`                                      |