Bootstrap 4 Table Inverse

Bootstrap has announced the first alpha release of Bootstrap 4. Bootstrap 4 is built using Sass, instead of Less and comes with an improved grid, outline buttons and what we are going to look at today, inverse table. See the Pen Bootstrap 4: Table Inverse by Brandon Himpfen (@brandonhimpfen) on CodePen. Bootstrap Table Inverse HTML...

Continue Reading »

Border Radius Stylus Mixins

The following are Stylus mixins for the CSS border-radius property. Border Radius - Shorthand property This Stylus mixin will allow you to define the border radius of multiple sides. border-radius(n) -webkit-border-radius n -moz-border-radius n border-radius n Usage: .border-radius border-radius(n) Where n is the size of the border radius. Example: .border-radius border-radius(5px) Output:...

Continue Reading »

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 »

Linear Gradient Background Sass Mixins

In this tutorial, I'm going to show you how-to create Sass mixins for linear gradient backgrounds. Top to Bottom See the Pen Top to Bottom Linear Background Gradient by Brandon Himpfen (@brandonhimpfen) on CodePen. // Background Gradient: Top to Bottom @mixin bg-gradient-t2b($start-colour, $end-colour) { background-color: $start-colour; background-image: -webkit-gradient(linear, left top, left bottom, from($start-colour), to(...

Continue Reading »