Ember-bulma-css NPM

ember-bulma-css

This Ember addon creates a shim to import the sass files from Bulma.io in its own namespace.

I created this addon to avoid collisions in import statements:

Compatibility

Ember.js v3.4 or above
Ember CLI v2.13 or above
Node.js v8 or above

Installation

use

@import "ember-bulma-css/base/_all";

instead of

@import "base/_all";

Installation

You need to have ember-cli-sass installed, otherwise the addon will install it as a dependency.

ember install ember-cli-sass

ember install ember-bulma-css

Update

0.2.0 Updated Ember cli to 3.0.0 and bulma 0.6.2

Usage

The addon will try to add the general import statements to your app.scss file (the order is important, so the variables are declared before usage).

@import "ember-bulma-css/utilities/_all";
@import "ember-bulma-css/base/_all";
@import "ember-bulma-css/elements/_all";
@import "ember-bulma-css/form/_all";
@import "ember-bulma-css/components/_all";
@import "ember-bulma-css/grid/_all";
@import "ember-bulma-css/layout/_all";

Instead of importing all modules, you can import them individually:

@import "ember-bulma-css/utilities/initial-variables.sass";
@import "ember-bulma-css/utilities/functions.sass";
@import "ember-bulma-css/utilities/derived-variables.sass";
@import "ember-bulma-css/utilities/animations.sass";
@import "ember-bulma-css/utilities/mixins.sass";
@import "ember-bulma-css/utilities/controls.sass";

@import "ember-bulma-css/base/minireset";
@import "ember-bulma-css/base/generic";
@import "ember-bulma-css/base/helpers";

@import "ember-bulma-css/elements/box";
@import "ember-bulma-css/elements/button";
@import "ember-bulma-css/elements/container";
@import "ember-bulma-css/elements/content";
@import "ember-bulma-css/elements/form";
@import "ember-bulma-css/elements/icon";
@import "ember-bulma-css/elements/image";
@import "ember-bulma-css/elements/notification";
@import "ember-bulma-css/elements/other";
@import "ember-bulma-css/elements/progress";
@import "ember-bulma-css/elements/table";
@import "ember-bulma-css/elements/tag";
@import "ember-bulma-css/elements/title";

@import "ember-bulma-css/form/shared";
@import "ember-bulma-css/form/checkbox-radio";
@import "ember-bulma-css/form/file";
@import "ember-bulma-css/form/input-textarea";
@import "ember-bulma-css/form/select";
@import "ember-bulma-css/form/tools";

@import "ember-bulma-css/components/breadcrumb";
@import "ember-bulma-css/components/card";
@import "ember-bulma-css/components/dropdown";
@import "ember-bulma-css/components/level";
@import "ember-bulma-css/components/list";
@import "ember-bulma-css/components/media";
@import "ember-bulma-css/components/menu";
@import "ember-bulma-css/components/message";
@import "ember-bulma-css/components/modal";
@import "ember-bulma-css/components/navbar";
@import "ember-bulma-css/components/pagination";
@import "ember-bulma-css/components/panel";
@import "ember-bulma-css/components/tabs";

@import "ember-bulma-css/grid/columns";
@import "ember-bulma-css/grid/tiles";

@import "ember-bulma-css/layout/footer";
@import "ember-bulma-css/layout/hero";
@import "ember-bulma-css/layout/section";