Немного чистого JavaScript для Bulma

В связи с тем, что CSS Framework Bulma не имеет никаких js зависимостей, то для того, чтобы заработали некоторые элементы фреймворка, потребуется написать немного js кода, чтобы заработали некоторые элементы фреймворка.

Например элементы - Tabs, Cards, Notifications, Navbar, Messages не будут работать как от них ожидается.

Накидал немного примеров, которые можно использовать совместно с Bulma.

// Mobile menu - nav
document.addEventListener('DOMContentLoaded', function () {

    // Get all "navbar-burger" elements
    let $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

    // Check if there are any navbar burgers
    if ($navbarBurgers.length > 0) {

        // Add a click event on each of them
        $navbarBurgers.forEach(function ($el) {
            $el.addEventListener('click', function () {

                // Get the target from the "data-target" attribute
                let target = $el.dataset.target;
                let $target = document.getElementById(target);

                // Toggle the class on both the "navbar-burger" and the "navbar-menu"
                $el.classList.toggle('is-active');
                $target.classList.toggle('is-active');

            });
        });
    }

    // Allow all cards content and footers to be collapsed
    let cardItems = Array.prototype.slice.call(document.querySelectorAll('.card-header-icon'), 0);
    if (cardItems.length > 0) {
        cardItems.forEach(function(el) {
            el.addEventListener('click', () => {
                let card = el.parentElement.parentElement;
                let content = card.querySelector('.card-content');
                let footer = card.querySelector('.card-footer');
                if(content !== undefined) {
                    content.classList.toggle('is-hidden');
                }
                if(footer !== undefined) {
                    footer.classList.toggle('is-hidden');
                }
            });
        });
    }

    // Allow tabs to be changed
    let tabItems = Array.prototype.slice.call(document.querySelectorAll('.tabs > ul > li'), 0);
    if (tabItems.length > 0) {
        tabItems.forEach(function(el) {
            el.addEventListener('click', () => {
                let target = document.getElementById(el.dataset.target);
                let currentActive = el.parentElement.querySelector('.is-active');
                let currentTarget = document.getElementById(currentActive.dataset.target);

                // Hide current tab and make current tab header not active
                currentTarget.classList.toggle('is-hidden');
                currentActive.classList.toggle('is-active');

                // Highlight new tab and show content
                el.classList.toggle('is-active');
                target.classList.toggle('is-hidden');
            });
        });
    }

    // Message close button - hide message
    let messageItems = Array.prototype.slice.call(document.querySelectorAll('.message > .message-header > .delete'), 0);
    if (messageItems.length > 0) {
        messageItems.forEach(function(el) {
            el.addEventListener('click', () => {
                // Message block
                let message = el.parentElement.parentElement;
                // Hide
                message.classList.add('is-hidden');

            });
        });
    }

    // Notification close button - hide notification
    let notificationItems = Array.prototype.slice.call(document.querySelectorAll('.notification > .delete'), 0);
    if (notificationItems.length > 0) {
        notificationItems.forEach(function(el) {
            el.addEventListener('click', () => {
                // Notification block
                let notification = el.parentElement;
                // Hide
                notification.classList.add('is-hidden');
            });
        });
    }

    // File input
    let fileInput = Array.prototype.slice.call(document.querySelectorAll('.file.has-name > .file-label > .file-input'), 0);
    if (fileInput.length > 0) {
        fileInput.forEach(function(el) {
            el.addEventListener('change', () => {
                let fileName = el.parentElement.querySelector('.file-name');
                // add file name
                fileName.innerHTML = el.files[0].name;
            });
        });
    }

});

Код выложен на GitHubGist, изменения и дополнения добавляйте туда...