1. Social Media Overview Template

    Posted on by Brandon Himpfen in Social Media, Free Templates, Social Media Templates

    The Social Media Over Template provides you or your business with an overview of how you are doing on social media. Select the type of application you want: Excel Word--> Features You can currently do the following with the social media overview template: Keep track of the number of followers.…

    Continue Reading »


  2. BEM Sass Mixins

    Posted on by Brandon Himpfen in CSS, Sass Lang., Sass Code Snippets, Web Development, SEO and Social Media Tutorials

    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 »


  3. Compile Sass using Grunt

    Posted on by Brandon Himpfen in CSS, Code Snippets, Sass Lang., Sass Code Snippets, Web Development, SEO and Social Media Tutorials, GruntJS

    Grunt or GruntJS is a JavaScript task runner. Grunt allows you to automate repetitive tasks like minification, compilation, unit testing and linting. In this tutorial, we are going to use Grunt to compile Sass, a CSS preprocessor. Create a file called Gruntfile.js. We will add the Sass plugin config…

    Continue Reading »


  4. Border Image Stylus Mixin

    Posted on by Brandon Himpfen in Code Snippets, Web Development, SEO and Social Media Tutorials, Stylus, Stylus Code Snippets

    The following is a Stylus mixin for the CSS3 border-image property, which sets an image as the border. border-image(source, slice, width, outset, repeat) border-image-source: url(source) border-image-slice: slice border-image-width: width border-image-outset: outset border-image-repeat: repeat -webkit-border-image: url(source) slice width outset repeat -moz-border-image: url(source) slice width outset repeat -ms-border-image:…

    Continue Reading »


  5. Stylus Mixin Libary is Now Available

    Posted on by Brandon Himpfen in Brandon Himpfen's Blog, Newsroom

    TORONTO, Canada - February 26, 2015 Brandon Himpfen, a web development and digital marketing consultant, is happy to announce that the initial version of Stylus Mixin Library has been released. Stylus Mixin Libary is a lightweight and powerful mixin library for Stylus. All you have to do is add @import…

    Continue Reading »


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

    Posted on by Brandon Himpfen in Social Media, Sass Lang., Sass Code Snippets, Web Development, SEO and Social Media Tutorials, Material Design Lite, Experimenting with Code, Material Design

    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 website If you are placing the Sass generated CSS in a separate file, you can add it…

    Continue Reading »


  7. Stylus Variables for Material Design's Colour Palette

    Posted on by Brandon Himpfen in CSS, Code Snippets, Web Development, SEO and Social Media Tutorials, Material Design, Stylus, Stylus Code Snippets

    Material Design is Google's design language and comes with its own colour palette. The colour palette consists of 256 primary and accent colours. The problem? Making the colours usable in your designs. Luckily, if you are using Stylus, I have compiled them into Stylus variables, so you can reuse them…

    Continue Reading »


  8. Material Design Bootstrap Buttons using Sass

    Posted on by Brandon Himpfen in Bootstrap, CSS, Code Snippets, Sass Lang., Sass Code Snippets, Web Development, SEO and Social Media Tutorials, Experimenting with Code

    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. HTML To…

    Continue Reading »


  9. Less Variables for Material Design's Colour Palette

    Posted on by Brandon Himpfen in CSS, Code Snippets, Web Development, SEO and Social Media Tutorials, Material Design, Less, Less Code Snippets

    Material Design is Google's design language and comes with its own colour palette. The colour palette consists of 256 primary and accent colours. The problem? Making the colours usable in your designs. Luckily, if you are using Less, I have compiled them into Less variables, so you can reuse them…

    Continue Reading »


  10. Sass Variables for Material Design's Colour Palette

    Posted on by Brandon Himpfen in Sass Lang., Sass Code Snippets, Web Development, SEO and Social Media Tutorials, Material Design

    Material Design is Google's design language and comes with its own colour palette. The colour palette consists of 256 primary and accent colours. The problem? Making the colours usable in your designs. Luckily, if you are using Sass, I have compiled them into Sass variables, so you can reuse them…

    Continue Reading »