Demo of Bulma CSS

This project demonstrates Bulma CSS features.

Contents:

• Introduction
• Demos
• Bulma capabilties
• Bulma capabilities in detail
• Notable settings
• Tracking

Introduction

This project demonstrates Bulma CSS features.

• This demo uses many inline comments as helpful annotations.
• This demo is available at https://github.com/joelparkerhenderson/demo_bulma_css
• To learn about Bulma CSS see https://bulma.io

Demos

This project uses these files:

• head.html - the HTML head that loads Bulma files.
• navbar.html and [navbar.js] - navigation bar with dropdown menus.
• container.html - container for holding many kinds of elements.
• icon.html - icon examples using Font Awesome.
• columns.html - columns.
• tabs.html - tabs for choosing one among multiple.
• message.html - message for displaying information.
• panel.html - panel for lists.
• breadcrumb.html - breadcrumb navigation.
• card.html - card component for displaying an area.
• pagination.html - pagination navigation.
• footer.html - footer for the bottom of a page.

Bulma capabilties

Bulma capabilties at a glace:

• Overview: CSS, Sass, classes, responsiveness, variables, colors, functions, mixins.
• Modifiers: general helpers, responsive helpers, typography helpers.
• Columns: various sizes, responsiveness, nesting, gap widths, options.
• Layouts: container, level, media object, hero, section, footer, tiles.
• Forms: input, textarea, select, checkbox, radio, file upload.
• Elements: box, button, content, delete, icon, image, notifications, progress bars, tables, tags, titles.
• Components: breadcrumb, card, dropdown, menu, message, modal, navbar, pagination, panel, tabs.

Bulma capabilities in detail

Bulma capabilties in detail include:

• Overview
  • Getting started: you only need 1 CSS file to use Bulma.
  • Customizing with Sass: Create your own theme with a simple set of variables.
  • Classes: Bulma is simply a collection of CSS classes; write the HTML code you want.
  • Modular: Just import what you need.
  • Responsiveness: Bulma is a mobile-first framework.
  • Variables: Easily customize Bulma to match your design.
  • Colors: You can style most Bulma elements and components.
  • Functions: Utility functions to calculate colors and other values.
  • Mixins: Utility mixins for custom elements and responsive helpers.
• Modifiers
  • Modifiers syntax: Most Bulma elements have alternative styles using modifier classes; they start with is- or has-.
  • General helpers: You can apply helper classes to almost any element, in order to alter its style.
  • Responsive helpers: Show/hide content depending on the width of the viewport.
  • Typography helpers: Change the size and color of the text for one or multiple viewport width.
• Columns
  • Column sizes: Define the size of each column individually.
  • Columns responsiveness: Handle different column layouts for each breakpoint.
  • Nesting columns: A simple way to build responsive columns.
  • Columns gap: Customize the gap between the columns.
  • Column options: Design different types of column layouts.
• Layout
  • Container: A simple container to center your content horizontally.
  • Level: A multi-purpose horizontal level, which can contain almost any other element.
  • Media Object: The famous media object prevalent in social media interfaces, but useful in any context.
  • Hero: An imposing hero banner to showcase something.
  • Section: A simple container to divide your page into sections.
  • Footer: A simple responsive footer which can include anything: lists, headings, columns, icons, buttons, etc.
  • Tiles: a single tile element to build 2-dimensional grid layouts.
• Form
  • Form controls: All generic form controls, designed for consistency.
  • Input: The text input and its variations.
  • Textarea: The multiline textarea and its variations.
  • Select: The browser built-in select dropdown, styled accordingly.
  • Checkbox: The 2-state checkbox in its native format.
  • Radio: The mutually exclusive radio buttons in their native format.
  • File upload: A custom file upload input, without JavaScript.
• Elements
  • Box: A white box to contain other elements.
  • Button: The classic button, in different colors, sizes, and states.
  • Content: A single class to handle WYSIWYG generated content, where only HTML tags are available.
  • Delete: A versatile delete cross.
  • Icon: Bulma is compatible with all icon font libraries: Font Awesome, Material Design Icons, etc.
  • Image: A container for responsive images.
  • Notifications: Bold notification blocks, to alert your users of something.
  • Progress bars: Native HTML progress bars.
  • Tables: The inevitable HTML table, with special case cells.
  • Tags: Small tag labels to insert anywhere.
  • Titles: Simple headings to add depth to your page.
• Components
  • Breadcrumb: A simple breadcrumb component to improve your navigation experience.
  • Card: An all-around flexible and composable component.
  • Dropdown: an interactive dropdown menu for discoverable content.
  • Menu: a simple menu, for any type of vertical navigation.
  • Message: colored message blocks, to emphasize part of your page.
  • Modal: a classic modal overlay, in which you can include any content you want.
  • Navbar: a responsive horizontal navbar that can support images, links, buttons, and dropdowns.
  • Pagination: a responsive, usable, and flexible pagination.
  • Panel: A composable panel, for compact controls.
  • Tabs: simple responsive horizontal navigation tabs, with different styles.

Notable settings

Container widths for various screen sizes are chosen to be divisible by both 12 and 16:

* `desktop`: maximum width of 960px.
* `widescreen`: maximum width of 1152px.
* `fullhd`: maximum width of 1344px.

Tracking

• Package: demo_bulma_css
• Version: 1.0.0
• Created: 2018-02-11
• Updated: 2018-02-12
• License: Open source as described in LICENSE.md
• Contact: Joel Parker Henderson (joel@joelparkerhenderson.com)