jQuery скрипты для компонентов Bulma

Bulma - это простой и современный CSS-фреймворк с открытым исходным кодом, который зависит от модуля flexbox. Применяется для разработки адаптивной структуры макета.

Главные преимущества Bulma:

• Обеспечивает адаптивный дизайн для настольных компьютеров, планшетов и мобильных телефонов.
• Чистый CSS фреймворк без JavaScript. Но вы можете комбинировать его с любым JS фреймворком, такими как AngularJS, ReactJS, VueJS и т. д.
• Использует минимальный HTML, что позволяет легко читать и писать код.

Несколько примеров jQuery для Bulma:

// NavBar
$(".navbar-burger").click(function() {      
 $(".navbar-burger").toggleClass("is-active");
 $(".navbar-menu").toggleClass("is-active");
});

// Notification
$('.delete').each(function() {
 $(this).on('click', function () {
  $(this).parent().fadeOut(600);
 });	 
});

// Tabs
$('#tab_header ul li.item').on('click', function() {
 var number = $(this).data('option');
 $('#tab_header ul li.item').removeClass('is-active');
 $(this).addClass('is-active');
 $('#tab_container .container_item').removeClass('is-active');
 $('div[data-item="' + number + '"]').addClass('is-active');
});

Пример стартового шаблона Bulma на GitHub.