The basic structure:

<div class="page-header">
        <div class="container">
            <div class="row">
                <div class="col-xs-24">
                    <h1>This is a page header</h1>
                    <p>With some content</p>
    
                    <ul class="nav nav-pills">
                        <li role="presentation" class="active">
                            <a href="#nav-item-1">Nav item 1</a>
                        </li>
                        <li role="presentation">
                            <a href="#nav-item-2">Nav item 2</a>
                        </li>
                        <li role="presentation">
                            <a href="#nav-item-3">Nav item 3</a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

The JavaScript code to enable smooth scrolling:

$(function () {
        $('[data-scroll="smooth"] a[href*=#]:not([href=#])').click(function () {
            if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') &&
                location.hostname === this.hostname) {
    
                var target = $(this.hash);
                target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    
                if (target.length) {
                    $('html, body').animate({
                        scrollTop: target.offset().top
                    }, 1500);
    
                    return false; // prevent default href
                }
            }
        });
    });

Add medium size right margin:

<element class="m-r-md"></element>

Add small padding to all sides:

<element class="p-sm"></element>

Add a medium size top margin:

.selector {
        @include spacer( margin, top, md );
    }

Add extra small top and bottom padding:

.selector {
        @include spacer( padding, vertical, xs );
    }

Set a small size top padding:

.selector {
        padding-top: spacing( sm );
    }

Set large left and right margins:

.selector {
        margin: 0 spacing( lg );
    }