Masthead using Sass

In this tutorial, we will show you how to create a simple masthead using HTML and Sass. This masthead is not fullscreen. Check out our tutorial about making a fullscreen masthead. Firstly, we’ll create the HTML for the masthead. Welcome.     Lorem Ipsum Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac … Continue reading Masthead using Sass

Fullscreen Masthead using Sass

In this tutorial, we will teach you how to create a fullscreen masthead using HTML and Sass. First, let’s create the HTML. Welcome.     Lorem Ipsum Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit … Continue reading Fullscreen Masthead using Sass

Custom Scrollbar Sass Mixin

The following is a Sass mixin that will allow you to customize the browser’s scrollbar. // @include scrollbars(.5em, foreground, background); @mixin scrollbar($size, $foreground-colour, $background-colour: mix($foreground-colour, white, 50%)) { // For Google Chrome ::-webkit-scrollbar { width: $size; height: $size; } ::-webkit-scrollbar-thumb { background: $foreground-colour; } ::-webkit-scrollbar-track { background: $background-colour; } body { scrollbar-face-color: $foreground-colour; scrollbar-track-color: $background-colour; … Continue reading Custom Scrollbar Sass Mixin

Social Sharing Buttons for Material Design Lite using Font Awesome and Sass

This tutorial will show you how-to create social media sharing buttons for the Material Design Lite front-end framework using Sass and Font Awesome.Example of what we will create: See the Pen Social Sharing Buttons using Material Design Lite, Font Awesome and Sass by Brandon Himpfen (@brandonhimpfen) on CodePen. HTML Adding the CSS file to your … Continue reading Social Sharing Buttons for Material Design Lite using Font Awesome and Sass

Material Design Bootstrap Buttons using Sass

In this tutorial, I’m going to show you how-to create Bootstrap buttons based on Material Design’s colour palette using Sass stylesheet language.Example of what we will create: See the Pen Material Design Bootstrap Buttons by Brandon Himpfen (@brandonhimpfen) on CodePen. Get the CSS already generated on [GitHub](http://permalink.ca/1fgTu3F). HTML To add a Material Design Bootstrap button … Continue reading Material Design Bootstrap Buttons using Sass

BEM Sass Mixins

The following are a couple of Sass mixins for BEM (block, element, modifier) front-end naming methodology. BEM Sass Mixins The Sass mixin for BEM element is: // BEM Element @mixin element($element) { &__#{$element} { @content; } } The Sass mixin for BEM modifier is: // BEM Modifier @mixin modifier($modifier) { &–#{$modifier} { @content; } } … Continue reading BEM Sass Mixins

Radial Gradient Background Sass Mixin

In a previous tutorial, I showed you two Sass mixins to create linear gradient backgrounds. In this tutorial, I’m going to show you how-to create a single radial gradient background Sass mixin.Example See the Pen Radial Background Gradient Sass Mixin by Brandon Himpfen (@brandonhimpfen) on CodePen. Radial Gradient Background Sass Mixin: // Background Gradient: Radial … Continue reading Radial Gradient Background Sass Mixin