Brandon Himpfen helps make the Internet better by providing free tutorials, code and themes to website owners, website administrators and digital marketers, and by contributing to the open source community since 2001.

Welcome to Himpfen.com. Brandon Himpfen is an experienced digital professional with over 13 years of experience. He discusses and solves complex challenges faced by website owners, web designers, web developers, website administrators and digital marketers. In addition, Brandon Himpfen provides free resources these individuals could use to create, build, optimize and tweak websites.

Cursor CSS Property

In this tutorial, I'm going to show you how-to customize the cursor CSS property. The cursor CSS property controls what the mouse cursor will look like when the mouse pointer is over an element. (Hover over the description text to see what the cursor looks like.) Indicates an alias or shortcut is to be created: .alias { cursor: alias; } Indicates you can scroll in any direction: .all-scroll { cursor: all-scroll; } Indicates that the web browser will determine the cursor: .auto { cursor: auto; »

Border Radius Sass Mixin

In this tutorial, I'm going to show you five (5) Sass mixins for the CSS3 border-radius property. The first one will be for multiple sides (shorthand) and the other four Sass mixins will be for each side: top, right, bottom and left. Border Radius - Shorthand property The Sass mixin for the CSS3 border-radius shorthand is: // Border radius shorthand @mixin border-radius($radius) { border-radius: $radius; -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; } The above Sass mixin includes the property and »

Padding Sass Mixin

The following are two (2) Sass mixins for the CSS padding property. The first mixin is for the padding shorthand property and the second mixin is for specifying individual sides. You can include both mixins in your project and use only one or both. Padding - Shorthand property For the padding shorthand property, the Sass mixin is: // Padding shorthand version @mixin padding($padding) { padding: $padding; } Usage example would be: @include padding(top right bottom left); Example of how you would »

Margin Sass Mixin

The following are two (2) Sass mixins for the CSS margin property. The first mixin is for the margin shorthand property and the second mixin is for specifying individual sides. You can include both mixins in your project and use only one or both. Margin - Shorthand property For the margin shorthand property, the Sass mixin is: // Margin shorthand version @mixin margin($margin) { margin: $margin; } Usage example: @include margin(top right bottom left); Example of how you would add it »

Border Image Sass Mixin

The following is a Sass mixin for the CSS3 border-image property. It sets an image as the border. @mixin 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; -o-border-image: url($source) $slice $width $outset $repeat; } Here is an example of how-to include the mixin within your Sass files: @include border-image("border.png", 100%, 1, 0, stretch); If you like this Sass mixin, you might like »

Add Zebra-striping to Table Columns in Bootstrap

.table-striped-column > tbody > tr td:nth-of-type(odd) { background-color: #f9f9f9; }.table-striped-column-2 > tbody > tr td:nth-of-type(even) { background-color: #fdffb6; } In Bootstrap, you can use striped rows, which means adding zebra-striping to any table row within the <tbody>. Column 1 Column 2 Column 3 text text text text text text text text text But how about adding striping to columns? In Bootstrap, by default, you can not stripe table columns within the <tbody>. However, we can extend Bootstrap to create »

How-to Create Outline Buttons using Bootstrap

.btn-button-name, .btn-button-name:link, .btn-button-name:visited { background-color: transparent; border-radius: 0; color: #6f5499; border: 2px solid #6f5499; } .btn-button-name:active, .btn-button-name:hover { background-color: #6f5499; color: #fff } .btn-button-name.btn-lg { border: 3px solid #6f5499; } .btn-button-name.btn-sm { border: 1px solid #6f5499; }.btn-button-name.btn-xs { border: 1px solid #6f5499; } .btn-button-name {margin-right:10px;} In this tutorial I'm going to show you how-to create outline buttons using the Twitter Bootstrap front-end framework. Example This is an example of what the buttons will look like once we are done (the colours »

Bootstrap Navigation for Ghost

In Ghost version 0.5.9, a navigation feature was introduced. The navigation feature allows you to set a navigation through the Ghost admin interface; no need to code the menu in your theme anymore! You should place the example code in a navigation.hbs partial template, in the partials folder of your theme. Then in your theme, use the {{navigation}} helper where you want your navigation to be outputted. You can currently only have one navigation, so if you »

Sass Mixin Library

Sass Mixin Library is a simple, lightweight, yet powerful mixin library for Sass. Download (zip) Download (tar.gz) Install using Git: git clone https://github.com/brandonhimpfen/sass-mixin-library Features Here are the main features of the Sass Mixin Library: Simple to add to your project and use in your project; Adjust variables to your liking; and Save tons of time and typing. How-to Use Copy the _mixins.scss file and mixins directory to your project. Add the following to your »

Social Sharing Buttons SASS

This is the SASS / SCSS version of my Social Sharing Buttons project, which allows you to add social sharing buttons to your website. Download (zip) Install using Git: git clone https://github.com/brandonhimpfen/social-sharing-buttons-scss Example: Features Here are the main features of Social Sharing Buttons SASS: Easily create the CSS using SCSS / SASS; Change border radius, font size, font weight, line height, link colour and each buttons background colour with ease; Darken or lighten the button's background hover colour »