Instructions for using Bulma components

[tehfink]

Thanks for a cool library. Is there a standard method to install Bulma components from https://wikiki.github.io/, e.g. the Calendar or Carousel (which also require javascript)?

• https://wikiki.github.io/components/carousel/

[tehfink]

Here's what I ended up doing in order to use Bulma's swatches & components, in case it helps anyone. Is there a better method?

Beginning with what's currently in the documentation: pip install django-bulma Add to settings.py: 'bulma', Set up bulma & extensions: python manage.py copy_bulma_static_into_project python manage.py bulma install Locate the directory with package.json, in order for npm to install in the correct place: cd …my_django_project/static/bulma/sass npm install bulmaswatch bulma-extensions python manage.py bulma start

My style.sass looks like:

// 1. Import the initial variables
@import "./node_modules/bulma/sass/utilities/initial-variables"

// 2. Set your own initial variables
@import './node_modules/bulmaswatch/simplex/_variables';

// 3. Import the rest of Bulma
@import "./node_modules/bulma/bulma"

// 4. Import your stuff here
@import './node_modules/bulma-extensions/bulma-carousel/src/sass/index';
@import './node_modules/bulmaswatch/simplex/_overrides';

And in the django template:

{% block css %}
    <link rel="stylesheet" href="{% static 'bulma/css/font-awesome.min.css' %}">
    <link rel="stylesheet" href="{% static 'bulma/css/style.css' %}">
    {% block extra_css %}{% endblock extra_css %}
{% endblock css %}
…
{% block extra_javascript %}
<script type="text/javascript" src="{% static 'bulma/sass/node_modules/bulma-extensions/bulma-carousel/dist/js/bulma-carousel.min.js' %}"></script>
<script type="text/javascript">
    var carousels = bulmaCarousel.attach(); // carousels now contains an array of all Carousel instances
</script>
{% endblock extra_javascript %}