edwardhatricksmith

&--circle {
    padding: .25em;
    border-radius: 50%;
    background-color: currentColor;
    font-size: ($icon * $icon-circle);
    overflow: visible;

    &.Icon--lg {
        font-size: ($icon-lg * $icon-circle);
    }

edwardhatricksmith

.Icon {
    display: inline-block;
    height: 1em;
    width: 1em;
    vertical-align: middle;

    // Size sub-modules
    &--lg {
        font-size: 2rem;
    }

edwardhatricksmith

<svg title="airplane icon" role="img">
    <use xlink:href="#airplane"></use>
</svg>

edwardhatricksmith

<div class="is-hidden">
    <!-- inject:sprite:svg -->
    <!-- endinject -->
</div>

edwardhatricksmith

var inject = require('gulp-inject');

// Inject the sprite in the DOM
gulp.task('inject', ['sprite'], function() {
    gulp
        .src('./app/index.html')
        .pipe(
            inject(
                gulp.src([
                    'app/sprite/icon-sprite.svg',

edwardhatricksmith

var svgSprite = require('gulp-svg-sprite'),

// Set sprite config using symbole mode
spriteConfig = {
    mode: {
        symbol: {
            dest: 'app/sprite',
            prefix: '#Icon-',
            sprite: 'icon-sprite',
            example: false

edwardhatricksmith

.section {
    margin-bottom: 2rem;

    @include media-breakpoint-up(lg) {
        margin-bottom: 2.5rem;
    }

    &--break {
        padding-bottom: 1.5rem;
        border-bottom: 1px solid $color-border;

edwardhatricksmith

<div class="section">
    <!-- default spacing  -->
</div>
   
<div class="section--large">
    <!-- even greater spacing, perhaps for landing page content -->
</div>

<div class="section section--padding section--dark">
    <!-- a section with a dark background colour and padded content -->

edwardhatricksmith

// .section continued...
    
    // Add consistent padding to sections with background colours / images. 
    // We could use this as an %extend to apply to sections with backgrounds as well.
    &--padded {
        padding-bottom: 3rem;
        padding-top: 3rem;

        @include media-breakpoint-up(lg) {
            padding-bottom: 4rem;

edwardhatricksmith

.section {
    margin-bottom: 2rem;

    // Breakpoints used to scale the section proportionally on larger resolutions.
    @include media-breakpoint-up(lg) {
        margin-bottom: 2.5rem;
    }

    // Larger variation, perhaps for landing pages. You could also have a small, or an extra large.
    &--large {