115 lines
9.8 KiB
Markdown
115 lines
9.8 KiB
Markdown
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` |
|
||
|