Remove focus outline and add it on tab key

HTML

<body class="no-focus-outline">
<!-- WordPress -->
<body <?php body_class("no-focus-outline"); ?>>

SCSS

.no-focus-outline {
  a, button, input {
    &:focus {
      outline: none;
      box-shadow: none !important;
    }
}

JS

// body remove no-focus-outline on tab key
document.body.addEventListener('keydown', function(e) {
    if (e.which === 9) /* tab */ {
        $("body").removeClass('no-focus-outline');
    }
});

Add styles for TinyMCE editor

// tinymce styles
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
	array_unshift( $buttons, 'styleselect' );
	return $buttons;
}
// Register our callback to the appropriate filter
add_filter( 'mce_buttons_2', 'my_mce_buttons_2' );

// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {
	// Define the style_formats array
	$style_formats = array(
		// Each array child is a format with it's own settings
		array(
			'title' => 'Button',
			'classes' => 'btn',
			'selector' => 'a',
			'wrapper' => false,
		),
        array(
			'title' => 'Info box',
			'block' => 'div',
			'classes' => 'info-box',
			'wrapper' => true,
		)
	);
	// Insert the array, JSON ENCODED, into 'style_formats'
	$init_array['style_formats'] = json_encode( $style_formats );
	return $init_array;
}
// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );

Scroll fixed header functions

// menu scroll
var lastScrollTop = 0;
var lastScrollChange = 0;
var scrollDown = true;
var topOffset = 100;
var lastScrollChangeOffset = 100;

$(window).scroll(function(event){
    checkScroll();
});
checkScroll();

function checkScroll(){
    var st = $(this).scrollTop();
    if(st < lastScrollTop){
        if(!scrollDown){
            lastScrollChange = st;
            scrollDown = true;
        }
    }else{
        if(scrollDown){
            lastScrollChange = st;
            scrollDown = false;
        }
    }
    if(st - lastScrollChange > lastScrollChangeOffset){
        lastScrollChange = st;
        if(!scrollDown){
            $("body").addClass("down");
        }else{
            $("body").removeClass("down");
        }
    }
    if(st > topOffset){
        $("body").addClass("scroll");
    }else{
        $("body").removeClass("scroll");
    }
    lastScrollTop = st;
}

Responsive Bootstrap gutter

HTML

<div class="row responsive-gutter">
    <div class="col-6 col-md-4">
    </div>
    <div class="col-6 col-md-4">
    </div>
    ...
</div>

CSS

.row.responsive-gutter {
    > .col,
    > [class*="col-"] {
        margin-bottom: $grid-gutter-width;
        &.last-row {
            margin-bottom: 0;
        }
    }
    // setting half the size for mobile
    @include media-breakpoint-down(md) {
        margin-right: -$grid-gutter-width / 4;
        margin-left: -$grid-gutter-width / 4;
        > .col,
        > [class*="col-"] {
            margin-bottom: $grid-gutter-width / 2;
            padding-right: $grid-gutter-width / 4;
            padding-left: $grid-gutter-width / 4;
        }
    }
}

Setting first-row, last-row, single-in-row classes

HTML

<div class="row first-last-row">
    <div class="col-6 col-md-4">
    </div>
    <div class="col-6 col-md-4">
    </div>
    ...
</div>

JavaScript

// first last row
function firstLastRow(){
    if($(".row.first-last-row").length){
        $(".row.first-last-row").each(function(){
            var col_items = new Array();
            var item_offset = false;
            var item_single = true;
            var items_length = $(this).find(">div").length;
            $(this).find(">div").each(function(index){
                $(this).removeClass("first-row");
                $(this).removeClass("last-row");
                $(this).removeClass("single-in-row");
                if(item_offset === false){
                    item_first_row_offset = $(this).offset().top;
                }else{
                    if(item_offset != $(this).offset().top){
                        if(item_single){
                            $(col_items[col_items.length - 1]).addClass("single-in-row");
                        }
                        item_single = true;
                    }else{
                        item_single = false;
                    }
                }
                if(index == items_length - 1 && item_offset != $(this).offset().top){
                    $(this).addClass("single-in-row");
                }
                item_offset = $(this).offset().top;
                col_items.push($(this));
            });
            if(item_offset !== false){
                item_last_row_offset = item_offset;
                item_offset = false;
                $(this).find(">div").each(function(e){
                    item_offset = $(this).offset().top;
                    if(item_offset == item_first_row_offset){
                        $(this).addClass("first-row");
                    }
                    if(item_offset == item_last_row_offset){
                        $(this).addClass("last-row");
                    }
                });
            }
        });
    }
}
firstLastRow();
$( window ).resize(function() {
    firstLastRow();
});

Bootstrap accordion scroll to opened item

$(".accordion .collapse").on('shown.bs.collapse', function(e){
    if($(".main-menu") != $(this)){
        // get clicked item
        $clickedElement = $($(e.target).data('bs.collapse')._triggerArray);
        clickedElementOffsetTop = $clickedElement.offset().top;
        // add additional offset for top fixed elements
        headerOffset = $(".main-header-top").outerHeight();
        // check if element is outside viewport
        if(clickedElementOffsetTop - headerOffset < $(window).scrollTop()){
            $('html, body').animate({
                scrollTop: clickedElementOffsetTop - headerOffset
            }, 300);
        }
    }
});