Ember-Bulma is a collection of Ember components leveraging Bulma CSS framework

  • By null
  • Last update: Oct 8, 2022
  • Comments: 15

npm version Build Status Ember Observer Score

Commitizen friendly semantic-release

ember-bulma

Ember Bulma is a collection of Ember components and services for Bulma, a modern CSS framework by Jeremy Thomas

Ember Bulma is still very much in Beta. When you come across anything that needs addressing, please open an issue. Thanks!

Installation

ember install ember-bulma

This will automatically install the ember-cli-sass NPM dependency and create a SCSS file in your App called styles/app.scss with the following import statement:

@import "bulma";

Optional :

ember install ember-font-awesome

Deploy

Deploy the demo app:

ember deploy production
git push upstream gh-pages

Documentation

Source

Github

https://github.com/open-tux/ember-bulma

Comments(15)

  • 1

    Various errors with ember 2.9

    I'm using ember 2.9 with node 6.9.1. I've followed the instructions to install and import ember-bulma. When I run the development server (ember s) I get the following errors:

    Livereload server on http://localhost:49152
Serving on http://localhost:4200/

modules/ember-bulma/components/bulma-button.js: line 29, col 3, Unexpected '@'.
modules/ember-bulma/components/bulma-button.js: line 38, col 3, Unexpected '@'.
modules/ember-bulma/components/bulma-button.js: line 70, col 3, Unexpected '@'.
modules/ember-bulma/components/bulma-button.js: line 3, col 8, 'computed' is defined but never used.
modules/ember-bulma/components/bulma-button.js: line 3, col 20, 'readOnly' is defined but never used.
modules/ember-bulma/components/bulma-button.js: line 3, col 30, 'alias' is defined but never used.
modules/ember-bulma/components/bulma-button.js: line 3, col 37, 'bool' is defined but never used.

7 errors

modules/ember-bulma/components/bulma-checkbox.js: line 7, col 3, 'set' is defined but never used.

1 error

modules/ember-bulma/components/bulma-column.js: line 3, col 8, 'computed' is defined but never used.

1 error

modules/ember-bulma/components/bulma-hero-content.js: line 34, col 3, Unexpected '@'.
modules/ember-bulma/components/bulma-hero-content.js: line 3, col 8, 'computed' is defined but never used.
modules/ember-bulma/components/bulma-hero-content.js: line 3, col 20, 'alias' is defined but never used.

3 errors

modules/ember-bulma/components/bulma-hero.js: line 49, col 3, Unexpected '@'.
modules/ember-bulma/components/bulma-hero.js: line 4, col 8, 'computed' is defined but never used.
modules/ember-bulma/components/bulma-hero.js: line 4, col 20, 'alias' is defined but never used.

3 errors

modules/ember-bulma/components/bulma-input.js: line 3, col 8, 'computed' is defined but never used.
modules/ember-bulma/components/bulma-input.js: line 3, col 20, 'alias' is defined but never used.
modules/ember-bulma/components/bulma-input.js: line 4, col 10, 'makeString' is defined but never used.
modules/ember-bulma/components/bulma-input.js: line 9, col 3, 'set' is defined but never used.

4 errors

modules/ember-bulma/components/bulma-message.js: line 18, col 3, Unexpected '@'.
modules/ember-bulma/components/bulma-message.js: line 3, col 8, 'computed' is defined but never used.
modules/ember-bulma/components/bulma-message.js: line 3, col 20, 'readOnly' is defined but never used.
modules/ember-bulma/components/bulma-message.js: line 3, col 30, 'alias' is defined but never used.

4 errors

modules/ember-bulma/components/bulma-modal-close.js: line 6, col 3, 'set' is defined but never used.

1 error

modules/ember-bulma/components/bulma-modal.js: line 8, col 3, 'set' is defined but never used.

1 error

modules/ember-bulma/components/bulma-notification.js: line 18, col 3, Unexpected '@'.
modules/ember-bulma/components/bulma-notification.js: line 3, col 8, 'computed' is defined but never used.
modules/ember-bulma/components/bulma-notification.js: line 3, col 20, 'readOnly' is defined but never used.

3 errors

modules/ember-bulma/components/bulma-radio.js: line 7, col 3, 'set' is defined but never used.

1 error

modules/ember-bulma/components/bulma-section.js: line 3, col 8, 'computed' is defined but never used.
modules/ember-bulma/components/bulma-section.js: line 3, col 20, 'alias' is defined but never used.

2 errors

modules/ember-bulma/components/bulma-select.js: line 31, col 3, Unexpected '@'.
modules/ember-bulma/components/bulma-select.js: line 3, col 8, 'computed' is defined but never used.
modules/ember-bulma/components/bulma-select.js: line 3, col 20, 'readOnly' is defined but never used.

3 errors

modules/ember-bulma/components/bulma-tabs.js: line 45, col 3, Unexpected '@'.
modules/ember-bulma/components/bulma-tabs.js: line 66, col 3, Unexpected '@'.
modules/ember-bulma/components/bulma-tabs.js: line 3, col 8, 'computed' is defined but never used.
modules/ember-bulma/components/bulma-tabs.js: line 3, col 20, 'readOnly' is defined but never used.
modules/ember-bulma/components/bulma-tabs.js: line 3, col 30, 'alias' is defined but never used.
modules/ember-bulma/components/bulma-tabs.js: line 4, col 10, 'makeString' is defined but never used.

6 errors

modules/ember-bulma/components/bulma-tag.js: line 27, col 3, Unexpected '@'.
modules/ember-bulma/components/bulma-tag.js: line 3, col 8, 'computed' is defined but never used.
modules/ember-bulma/components/bulma-tag.js: line 3, col 20, 'readOnly' is defined but never used.

3 errors

modules/ember-bulma/components/bulma-textarea.js: line 3, col 8, 'computed' is defined but never used.
modules/ember-bulma/components/bulma-textarea.js: line 3, col 20, 'read' is defined but never used.
modules/ember-bulma/components/bulma-textarea.js: line 7, col 3, 'get' is defined but never used.
modules/ember-bulma/components/bulma-textarea.js: line 8, col 3, 'set' is defined but never used.

4 errors

modules/ember-bulma/utils.js: line 58, col 2, Missing semicolon.
modules/ember-bulma/utils.js: line 5, col 3, 'A' is defined but never used.

    I'm still able to use bulma by writing raw HTML, but some components (perhaps all of them) don't work.

  • 2

    Very serious grammar change

    I don't mean to damage any mutual love affair you may have with Jeremy Thomas, but when I first read the description I was confused for a second as to who Jeremy Thomas was and whether he was a part of TUX. I think getting rid of his name in the description and letting people see who he is by way of Bulma is more concise.

    But if his name has to stay it could also be:

    "Ember Bulma is an ember addon for Bulma (by Jeremy Thomas)"

    or for more detail

    "Ember Bulma is a collection of Ember components and services for Bulma, a modern CSS framework by Jeremy Thomas"

    Ok back to work

  • 3

    Avoid theming system to Bulma one

    Hi there,

    Since 0.0.23 (pushed 13 hours ago), Bulma has self-implemented the sass theming system.

    According to this documentation part.

    It could be a great thing to update the bulma dependancy to 0.0.23 and update theming part of Ember-Bulma.

    Sorry for my bad english, and have a nice day.

    Regards,

  • 4

    Ember CLI v2.12 -> v2.13

    Update to CLI v2.13 and remove all console warnings

    Additionally, Locking bulma at 0.1.2 as well -- I was seeing some visual diffs when updating to latest (@jbailey4) -- See https://github.com/open-tux/ember-bulma/issues/63

  • 5

    Fallback to empty string for undefined bowerDirectory

    From what I can tell, nested addons don't have access to the bowerDirectory property defined by Ember CLI.

    Rather than get an error for passing undefined to Path.join, this attempts to continue without target.bowerDirectory.

  • 6

    fix(travis): ci and node v4.x

    • fix(travis): add missing Bower deps for CI
    • fix(node): allow addon to work with Node v4.x
    • feat(testem): chrome headless testing in dev and ci
    • test(components): removing unnecessary tests
  • 7

    adds tests for bulma-radio

    Also, adds the missing checked attr binding to bulma-radio component, which fixes a bug preventing a radio button from being checked.

    @crodriguez1a I removed a few classNameBindings that I did not see any styles for in bulma. I wasn't sure exactly why these were added, it looks like these were meant to be attributeBindings.

  • 8

    Update ember-themed-syntax, fix computed decorator, remove bower, cli update, ci headless chrome

    Commits:

    • chore(npm): update ember-themed-syntax npm dep
    • fix(decorator): import correct path with new computed-decorator syntax
    • refactor(bower): remove bower
    • chore(cli): update ember-cli v2.14.2
    • test(ci): test with headless chrome on ci
    • chore(npm): remove unused eslint-plugin-ember-suave dep
  • 9

    Upgrade to latest bulma

    This addon installs bulma 0.1.2 which was released in July. Since then three releases have been made, the latest being 0.2.3. I'm not sure if there are significant differences, but an issue won't hurt, right? :smile:

  • 10

    Tagged Releases

    Right now it's impossible to tell what was released and when as there are no tags. Tagged releases make it easier to see diffs between releases. Further: by leveraging Github's release mechanism, changelogs can be listed.

  • 11

    chore: add decorators transform for addon consumers

    Per the warning ember-decorators throws (text below), the babel-transform addon needs to be installed in order to use ember-decorators.

    WARNING: ember-decorators (used in ember-bulma): You have not installed @ember-decorators/babel-transforms. It has been extracted to a separate addon. See instructions for installation: https://github.com/ember-decorators/babel-transforms#readme
  • 12

    Enhancement - {{#link-to}}} active class

    When using {{#link-to}} the default active class in Ember is "active", but Bulma uses "is-active".

    This can be changed in Ember by adding this code to ./app/app.js

    // Add this to the top where the other imports are
import LinkComponent from '@ember/routing/link-component';

    // Change the default 'active' class
Ember.LinkComponent.reopen({
	activeClass: 'is-active'
});

    This could be added to the documentation.

  • 13

    Typo on the docs -> Layout -> Hero

    This is about the Docs.

    Description

    The code on the first example is incorrect. https://open-tux.github.io/ember-bulma/#/uilayout/hero

    {{#bulma-hero}}
  {{#bulma-hero-content}}
    <h1 class="title">
      Hero title
    </h1>
    <h2 class="subtitle">
      Hero subtitle
    </h2>
  {{#bulma-hero-content}}
{{/bulma-hero}}

    {{#bulma-hero-content}} at the bottom should be a {{/bulma-hero-content}}.

  • 14

    "tree shaking" not working?

    Using https://github.com/stefanpenner/broccoli-concat-analyser I get this: image

    but I have this specified in my env:

        'ember-bulma': {
      // exclude everything by default
      except: [
        'bulma-button',
        'bulma-checkbox',
        'bulma-column',
        'bulma-columns',
        'bulma-container',
        'bulma-control',
        'bulma-footer',
        'bulma-header',
        'bulma-header-menu',
        'bulma-hero-content',
        'bulma-hero-footer',
        'bulma-hero-header',
        'bulma-hero',
        'bulma-input',
        'bulma-menu',
        'bulma-menu-list',
        'bulma-message-body',
        'bulma-message-header',
        'bulma-message',
        'bulma-modal-background',
        'bulma-modal-close',
        'bulma-modal',
        'bulma-nav-center',
        'bulma-nav',
        'bulma-nav-left',
        'bulma-nav-right',
        'bulma-nav-toggle',
        'bulma-notification',
        'bulma-panel-block',
        'bulma-panel',
        'bulma-panel-tabs',
        'bulma-progress',
        'bulma-radio',
        'bulma-section',
        'bulma-select',
        'bulma-table',
        'bulma-tabs',
        'bulma-tag',
        'bulma-textarea',
      ],
    },

    just as the docs say to do here: http://open-tux.github.io/ember-bulma/

  • 15

    {{bulma-container}} may cause error in production build

    See https://github.com/matthewsecrist/Saga-Frontend/issues/1 and https://github.com/ebryn/ember-model/issues/457

    Keep in mind, there are several components that use the container class. It seems that just evaluating the word when rendering may be causing the app to throw an error (only on a prod build)

    screen shot 2017-08-11 at 12 03 14 am

Popular Tag

Related