Responsive frameworks are used to help develop and design websites quickly using CSS selectors and classes and allow us to easily create responsive websites with ease. By developing our own responsive framework, we can easily understand how we can use our selectors and classes to quickly build responsive websites.

In this tutorial, I will be going over how to develop our own responsive framework using the Sass language. If you are not familiar with Sass, you can read my previous article called Using Extensible CSS Preprocessor Language: Sass or LESS for more information.

In any case, let’s begin the tutorial.

Start with Variables

Let’s first start by creating variables for us to use in our responsive framework. Let’s create a _vars.scss file (the underscore is used to determine that we will use it as an import file…more on that later) and include the following CSS Preprocessor code in there. We’ll also include default values for some of our styling.

[CSS]
//spacing
$contentWidth: 1000px; //max width of our main content
$gridColumns: 12; // # of columns for our grid. Change as needed
$gutterWidth: 1%; // margin width of gutters between columns. Change as needed.Make sure to use percentages
$auto: 0 auto;

// Colors (feel free to change these values)
$green: #53c73f;
$orange: #ffa126;
$red: #d63838;
$blue: #4286B3;
$yellow: #f9f761;
$gray: #888888;
$white: #ffffff;
$black: #000000;

//elements
$linkColor: $blue;
$linkHover: lighten($blue, 20%);
$font-family: ‘Helvetica Neue’, ‘Helvetica’, Arial, sans-serif;
[/CSS]

Time for some Mixins

Now that we have that out of the way, let’s create a separate file for our mixins and name it _mixins.scss. We’ll include the following mixins to our framework. These mixins can also be found in my previous article Free and Useful Sass Mixins You Can Use for Your Next Project. The article also talks about the purpose of mixins and how they are used.

The great thing about mixins is that they will not be rendered unless you call them. Anyways, here are the mixins we’ll be using:

[CSS]
@mixin letterpress($opacity: 0.5){
text-shadow:0 1px 1px rgba(255,255,255,$opacity);
}
@mixin text-shadow($opacity:0.5){
text-shadow:0 1px 1px rgba(0,0,0,$opacity);
}
@mixin border-radius ($borderRadius){
-webkit-border-radius: $borderRadius;
-moz-border-radius: $borderRadius;
border-radius: $borderRadius;
}
@mixin box-shadow ($boxShadow…){
-moz-box-shadow: $boxShadow;
-webkit-box-shadow: $boxShadow;
-ms-box-shadow: $boxShadow;
-o-box-shadow: $boxShadow;
box-shadow: $boxShadow;
}

//border radius directions
@mixin border-top-radius ($borderRadius){
-webkit-border-top-left-radius: $borderRadius;
-webkit-border-top-right-radius: $borderRadius;
-moz-border-radius-topleft: $borderRadius;
-moz-border-radius-topright: $borderRadius;
border-radius: $borderRadius $borderRadius 0 0;
}
@mixin border-bottom-radius ($borderRadius){
-webkit-border-bottom-left-radius: $borderRadius;
-webkit-border-bottom-right-radius: $borderRadius;
-moz-border-radius-bottomleft: $borderRadius;
-moz-border-radius-bottomright: $borderRadius;
border-radius: 0 0 $borderRadius $borderRadius;
}
@mixin border-left-radius ($borderRadius){
-webkit-border-top-left-radius: $borderRadius;
-webkit-border-bottom-left-radius: $borderRadius;
-moz-border-radius-topleft: $borderRadius;
-moz-border-radius-bottomleft: $borderRadius;
border-radius: $borderRadius 0 0 $borderRadius;
}
@mixin border-right-radius ($borderRadius){
-webkit-border-top-right-radius: $borderRadius;
-webkit-border-bottom-right-radius: $borderRadius;
-moz-border-radius-topright: $borderRadius;
-moz-border-radius-bottomright: $borderRadius;
border-radius: 0 $borderRadius $borderRadius 0;
}

//for use of custom transitions
@mixin transition($transition) {
-webkit-transition: $transition;
-moz-transition: $transition;
-ms-transition: $transition;
-o-transition: $transition;
transition: $transition;
}
@mixin box-shadow-transition ($duration){
-webkit-transition: box-shadow #{$duration}s ease;
-moz-transition: box-shadow #{$duration}s ease;
-o-transition: box-shadow #{$duration}s ease;
transition: box-shadow #{$duration}s ease;
}

//transformations
@mixin box-rotate ($deg){
-webkit-transform: rotate(#{$deg}deg);
-moz-transform: rotate(#{$deg}deg);
-ms-transform: rotate(#{$deg}deg);
-o-transform: rotate(#{$deg}deg);
transform: rotate(#{$deg}deg);
}
@mixin scale($ratio) {
-webkit-transform: scale($ratio);
-moz-transform: scale($ratio);
-ms-transform: scale($ratio);
-o-transform: scale($ratio);
transform: scale($ratio);
}
@mixin translate($x, $y) {
-webkit-transform: translate($x, $y);
-moz-transform: translate($x, $y);
-ms-transform: translate($x, $y);
-o-transform: translate($x, $y);
transform: translate($x, $y);
}
@mixin skew($x, $y) {
-webkit-transform: skew($x, $y);
-moz-transform: skew($x, $y);
-ms-transform: skew($x, $y);
-o-transform: skew($x, $y);
transform: skew($x, $y);
}
@mixin translate3d($x, $y, $z) {
-webkit-transform: translate3d($x, $y, $z);
-moz-transform: translate3d($x, $y, $z);
-o-transform: translate3d($x, $y, $z);
transform: translate3d($x, $y, $z);
}

//Add opacity to elements
@mixin opacity($opacity){
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity}*10)”;
filter: alpha(opacity=#{$opacity}*100);
-moz-opacity: $opacity;
-khtml-opacity: $opacity;
opacity: $opacity;
}

// Add an alphatransparency value to any background or border color
@mixin translucent-background($color: #fff, $alpha: 0.5) {
background: $color; //fallback
background: hsla(hue($color), saturation($color), lightness($color), $alpha);
}
@mixin translucent-border($size: 1px, $style: solid, $color: #fff, $alpha: 0.5) {
border: $size $style hsla(hue($color), saturation($color), lightness($color), $alpha);
background-clip: padding-box;
}

//gradients
@mixin gradient($startColor, $endColor, $noGradient: mix($startColor, $endColor,50%), $type: ‘vertical’, $degOrImagePath: ”){
@if ($type == ‘vertical’){
background: $noGradient;
@each $i in ” {
background: #{$i}linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%);
}
}

@if ($type == ‘horizontal’){
background: $noGradient;
@each $i in -webkit-, -moz-, -ms-, -o- {
background: #{$i}linear-gradient(left, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%);
}
background: linear-gradient(to right, $startColor, $endColor) repeat-x $endColor;
}

@if ($type == ‘radial’){
background: $noGradient;
@each $i in -webkit-, -moz-, -ms-, -o-, ”{
background: #{$i}radial-gradient(circle, $startColor, $endColor) no-repeat mix($startColor, $endColor, 60%);
}
}

@if ($type == ‘directional’){
background: $noGradient;
@each $i in -webkit-, -moz-, -ms-, -o-, ” {
background: #{$i}linear-gradient(#{$degOrImagePath}deg, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%);
}
}

@if ($type == ‘image’){
background: url(‘#{$degOrImagePath}’) no-repeat scroll $noGradient;
@each $i in -webkit-, -moz-, -ms-, -o-, ” {
background: url(‘#{$degOrImagePath}’) no-repeat scroll, #{$i}linear-gradient(center top, $startColor, $endColor);
}
}

}

@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f, $noGradient: #444){
background: $noGradient;
@each $i in -webkit-, -moz-, -ms-, -o-, ” {
background: #{$i}linear-gradient($startColor, $midColor $colorStop, $endColor) no-repeat mix($midColor, $endColor, 80%);
}
}
@mixin gradient-vertical-button($highlightColor: #fbeda1, $topColor: #FFBB02, $bottomColor: #EB6900, $shadowColor: #b07504){
background: $bottomColor;
@each $i in -webkit-, -moz-, -ms-, -o-, ” {
background: #{$i}linear-gradient(top, $highlightColor 0%,$topColor 4%,$bottomColor 95%,$shadowColor 100%);
}
}

// triangles ($direction can be: up, down, left, right, up-right, up-left, down-righ or down-left)
@mixin triangle ($size, $color, $direction) {
height: 0;
width: 0;

@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
border-color: transparent;
border-style: solid;
border-width: $size / 2;

@if $direction == up {
border-bottom-color: $color;
} @else if $direction == right {
border-left-color: $color;
} @else if $direction == down {
border-top-color: $color;
} @else if $direction == left {
border-right-color: $color;
}
}

@else if ($direction == up-right) or ($direction == up-left) {
border-top: $size solid $color;

@if $direction == up-right {
border-left: $size solid transparent;
} @else if $direction == up-left {
border-right: $size solid transparent;
}
}

@else if ($direction == down-right) or ($direction == down-left) {
border-bottom: $size solid $color;

@if $direction == down-right {
border-left: $size solid transparent;
} @else if $direction == down-left {
border-right: $size solid transparent;
}
}
}

//hide text for use with background images
@mixin hide-text{
overflow:hidden;
text-indent:-9999px;
display:block;
}

//for custom @font-face
@mixin family($family: ”, $url: ‘/fonts/’, $weight: normal, $style: normal) {
@font-face {
font-family: $family;
src: url(‘#{$url}.eot’);
src: url(‘#{$url}.eot?#iefix’) format(‘embedded-opentype’),
url(‘#{$url}.woff’) format(‘woff’),
url(‘#{$url}.ttf’) format(‘truetype’),
url(‘#{$url}.svg#svg’) format(‘svg’);
font-weight: $weight;
font-style: $style;
}
}

// Clearfix for clearing floats like a boss (from h5bp.com/q)
@mixin clearfix() {
zoom: 1;
&:before,
&:after {
display: table;
content: “”;
zoom: 1;
}
&:after {
clear: both;
}
}

// browser specific————————-
@mixin ie7-inline-block() {
vertical-align: baseline; // for all other browsers
*vertical-align: auto; // set for consistency in IE7
*display: inline; // IE7 inline-block hack
*zoom: 1; //enables hasLayout
}

// IE7 likes to collapse whitespace on either side of the inline-block elements.
// Ems because we’re attempting to match the width of a space character. Left
// version is for form buttons, which typically come after other elements, and
// right version is for icons, which come before. Applying both is ok, but it will
// mean that space between those elements will be .6em (~2 space characters) in IE7,
// instead of the 1 space in other browsers.
@mixin ie7-restore-left-whitespace() {
*margin-left: .3em;

&:first-child {
*margin-left: 0;
}
}

@mixin ie7-restore-right-whitespace() {
*margin-right: .3em;

&:last-child {
*margin-left: 0;
}
}
[/CSS]

The Framework Structure

Now that we have our variables and mixins set up, let’s get into the actual nitty gritty structure of our framework. Let’s start by creating another file and naming it _default.scss. We’ll include all the structure styles and default styles for our framework within this file. I’ll also be explaining the three different portions of this file in detail below:

Imports and CSS Resets

Let’s start off by including our variables and mixins into our _default.scss file as well as some simple CSS resets.
[CSS]
// Import our _vars.scss and _mixins.scss files.
// Notice that I don’t include the underscore(_) or file extension(.scss) when importing our _vars.scss and _mixins.scss files
@import “vars”, “mixins”;

//—– CSS RESETS
* {
margin:0;
padding:0;
-moz-box-sizing: border-box; /* Firefox, other Gecko */
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
box-sizing: border-box; /* Opera/IE 8+ */
}
img {
border:0 none;
}
html {
width:100%;
height:100%;
min-height:100%;
}
body {
width: 100%;
color: #333;
position:relative;
text-align: left;
font-size: 1em;
line-height:1.4em;
font-family: $font-family;
background: #fff;
}
a {
color:$blue;
text-decoration: none;
&:hover {
color: lighten($blue, 20%);
}
}
.hidden {display: none;}

//—– GLOBAL FONTS

h1 {font-size: 2.4em;}
h2 {font-size: 1.4em;}
h3 {font-size: 1.2em;}
h4 {font-size: 1em;}
h5 {font-size: .8em;}
h6 {font-size: .6em;}
label {font-size: .8em;}
p {font-size: 1em;}
[/CSS]

As you may have noticed, we imported our _vars.scss and _mixins.scss files using @import function.

We are also using the new box model structure using the box-sizing properties for all our elements. (You can learn more about box-sizing from Chris Coyier’s box-sizing article ) This ensures that we don’t get weird padding and/or width issues for our responsive box-model elements.

Responsive Grid Structure

Next we’ll include our actual grid classes which is the main bulk of our responsive grid system. We’ll also include some breakpoints (media queries) that we’ll use for our desktop and mobile views.

[CSS]
//—– GRID STRUCTURE
/* Notice how we’re using the silent classes with the ‘%’ symbol. Silent classes were introduced in Sass version 3.2
* Silent classes are not rendered in your CSS file unless they are called upon, thus slimming down your CSS file size
* We’ll be using these silent classes when we start designing our actual webpages
*/
.grid {
overflow: hidden;
width:$contentWidth;
margin:$auto;
}
%gridBase {
float:left;
margin: 0 $gutterWidth;
}

// grid making magic
@for $i from 1 through $gridColumns {
.g#{$i} {
@extend %gridBase;
width: ((100%/$gridColumns)*$i)-$gutterWidth*2;
}
}

//—– BREAKPOINTS
@media only screen and (max-width: $contentWidth)
{
.grid {
width:100%;
margin: $auto;
}
}

@media only screen and (min-width: 0px) and (max-width: 480px)
{
.grid {width:100%;}
@for $i from 1 through $gridColumns {
.g#{$i} {
width: 100%;
margin: $auto;
}
}
}

[/CSS]

Let’s break this down to get a better understanding of how we’ll use this grid based system on our webpages. First let’s talk about the .grid class:
[CSS]
.grid {
overflow: hidden;
width:$contentWidth;
margin:$auto;
}
[/CSS]
You’ll notice that we are using overflow:hidden;. This is to prevent the issue of the container not covering the entire grids when working with floats (You’ll notice this if you apply a background color or something similar). Since our grid system will mostly be using floats to simulate columns, we need our parent container to clear and wrap around the entire grid system (using overflow:hidden; allows that to happen without adding unnecessary clear divs in our HTML markup).

You’ll also notice that we use the $contentWidth variable which is called from our _vars.scss file which we imported earlier on. This is the max-width we’ll be using as our base viewable area for desktops. And of course adding our margin: $auto; which also comes from our _vars.scss file.

Next, let’s break down the actual grid system:
[CSS]
%gridBase {
float:left;
margin: 0 $gutterWidth;
}

// grid making magic
@for $i from 1 through $gridColumns {
.g#{$i} {
@extend %gridBase;
width: ((100%/$gridColumns)*$i)-$gutterWidth*2;
}
}
[/CSS]
You’ll notice that we’re using the silent class called %gridBase. The reason for this is so that it doesn’t have to be rendered in the final CSS output(thus saving a few lines of code if you don’t need to call it). Instead, we will use this to extend our grid system.

As you can see, we’re also using a @for from through Control Directive to create our grid system.

What this does is reiterate through the number of $gridColumns we have set in our _vars.scss file (in this case, the default we set was 12 columns). Then it creates 12 grid-based classes that we’ll use in our HTML markup.

This is the actual CSS output of our @for from through function:
[CSS]
.g1, .g2, .g3, .g4, .g5, .g6, .g7, .g8, .g9, .g10, .g11, .g12 {
float: left;
margin: 0 1%;
}
.g1 {width: 6.33333%;}
.g2 {width: 14.66667%;}
.g3 {width: 23%;}
.g4 {width: 31.33333%;}
.g5 {width: 39.66667%;}
.g6 {width: 48%;}
.g7 {width: 56.33333%;}
.g8 {width: 64.66667%;}
.g9 {width: 73%;}
.g10 {width: 81.33333%;}
.g11 {width: 89.66667%;}
.g12 {width: 98%;}
[/CSS]
Notice how that the @for from through function created our grid system for us. You’ll also notice that the @extend %gridBase; applies the float left and margins to all our grid column classes. Furthermore, the @for from through function has also applied the appropriate widths of our columns to compensate for the gutter width that we had applied in our variables file. Play around with the $gridColumns and $gutterWidthvalues in the _vars.scss files to see how the grid system changes.

Lastly, let’s talk about our media query breakpoints which will help us display different grid-based system depending on device width:
[CSS]
//—– BREAKPOINTS
@media only screen and (max-width: $contentWidth)
{
.grid {
width:100%;
margin: $auto;
}
}

@media only screen and (min-width: 0px) and (max-width: 480px)
{
.grid {width:100%;}
@for $i from 1 through $gridColumns {
.g#{$i} {
width: 100%;
margin: $auto;
}
}
}
[/CSS]

You’ll notice that in the first breakpoint, once it reaches the max-width of our container, we make our main .grid class to 100% the width of our browser window.

The second media query will expand all our grid sizes to 100% width when it reaches 480px device width or lower.

This will become more apparent when we apply it to our webpage HTML structure. Primarily,we’ll be applying our grid like so:

[HTML]

[/HTML]

Extra Styling Elements (optional)

These are extra styling classes for input forms and buttons. Feel free to include this to your framework if needed.

[CSS]
//—– EXTRA STYLES
// input
input[type="text"],
input[type="number"],
input[type="email"], textarea {
background: none repeat scroll 0 0 #fff;
border:1px solid #777;
@include border-radius(4px);
@include box-shadow(0 0 3px rgba(0, 0, 0, 0.25) inset, 0 0 3px rgba(0, 0, 0, 0.3));
color: $gray;
display: block;
float: left;
font-size: .8em;
height: auto;
margin: 0 0 6px 0;
padding: 0.2em;
line-height: 30px;
height:30px;
width: 100%;
}
textarea:focus,
input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus {
@include box-shadow(0 0 3px rgba(0, 0, 0, 0.5) inset,0 0 3px rgba(66, 134, 179, 0.8));
border:1px solid $gray;
color: #333;
text-shadow:0 1px 0 rgba(255,255,255,0.6);
}
input:focus::-webkit-input-placeholder,
input:focus::-moz-placeholder {
color: $gray;
}

//button classes
%btn {
width:auto;
height:auto;
color: #fff;
clear: both;
float: none;
font-weight: bold;
font-size: 1.3em;
padding: 6px 8px;
border: 0 none;
text-shadow:0 0 3px rgba(0,0,0,0.3);
@include box-shadow(0 1px 3px rgba(0,0,0,0.25));
@include border-radius(4px);
margin: $auto;
text-align: center;
display:block;
cursor:pointer;
position:static;
}
%blue-btn {
@extend %btn;
@include gradient-vertical-button(#87ccf9, #5aade4, #4286b3, #3777a1);
&:hover {
@include gradient(#4286b3, #519fd2,lighten(#4286b3,20%));
}
}
%red-btn {
@extend %btn;
@include gradient-vertical-button(#f98787, #e45a5a, #b93b3b, #a13737);
&:hover {
@include gradient(#b34242, #d25151,lighten(#b34242,20%));
}
}
%orange-btn {
@extend %btn;
@include gradient-vertical-button(#f3cd1b, #f2ac04, #e47203, #c65f04);
&:hover {
@include gradient(#e57403, #ef9d05,lighten(#e57403,20%));
}
}

[/CSS]

Conclusion

Download Source Files

This concludes Part 1 of the How To Create Your Own Responsive Framework Using Sass tutorial. I hope that this tutorial has helped you understand a little about how to create your own responsive frameworks.

The basic structure and code are just a small preview of how powerful and useful Sass (and other CSS preprocessor languages) is. I hope that this tutorial made you understand the basics of using Sass and all its possibilities.

In Part 2 of this tutorial series, I’ll walk you through the actual usage of how to implement our responsive framework. If you found this tutorial useful, please let me know in the comments below. Also, don’t forget to spread the word by Tweeting and Liking this tutorial. You can also sign up to the monthly newsletter to get updates, articles, and free tutorials such as this.

Other Articles you might like:

• Free Sass Mixins For Your Next Project
• Using Extensible CSS Preprocessor Languages: Sass or LESS

If you don’t know what Sass is or what CSS Preprocessor Languages are, you might want to check out my previous article (where I talk a little about mixins as well) to get a better understanding of what they are and how they can benefit you: Using Extensible CSS Preprocessor Languages: Sass or LESS.

What are mixins?

So you’re probably wondering to yourself what mixins exactly are…Mixins are little snippets of CSS Preprocessor “code” that you can use as part of your project to help you write CSS code much faster without having to repeat yourself over and over again. In short, it’s lines of CSS that you would normally write, say for example to add a gradient background to a div, by just calling it once instead of having to write a prefix for specific browsers each time. Let’s take a look at an example of how a mixin can help.

Let’s say you wanted to have a gradient background for a specific content div. When you’re writing normal CSS, you would write something like this:
[CSS]
.content {
background: #cccccc; /* fallback color for older browsers */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eeeeee), to(#aaaaaa));
background: -webkit-linear-gradient(top, #aaaaaa, #eeeeee);
background: -moz-linear-gradient(top, #aaaaaa, #eeeeee);
background: -ms-linear-gradient(top, #aaaaaa, #eeeeee);
background: -o-linear-gradient(top, #aaaaaa, #eeeeee);
background: linear-gradient(top, #aaaaaa, #eeeeee);
}
[/CSS]

As you can see, you would have to write each of those lines separately each time you wanted to create a gradient background for other divs. In Sass (or other CSS Preprocessor languages), you can create a mixin that you can call once wherever you want it to be applied and it will create those lines for you.

Let’s take the above example and create our own Sass mixin that we can call.

[CSS]
@mixin gradient-vertical($startColor: #eeeeee, $endColor: #aaaaaa, $noGradient: #cccccc){
background: $noGradient; //fallback for older browsers
background: -moz-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // FF 3.6+
background: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)) repeat-x mix($startColor, $endColor, 60%); // Safari 4+, Chrome 2+
background: -webkit-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Safari 5.1+, Chrome 10+
background: -o-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Opera 11.10
background: linear-gradient(to bottom, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Standard, IE10
}
[/CSS]

As you can see from the code above, we have created a linear gradient mixin that will apply the default values of the hex color values #eeeeee, #aaaaaa, and #cccccc respectively.

Note that I’m using the mix() function as part of the background properties which mixes the $startcolor and $stopcolor values at 60% weight.

So here is how we will apply that mixin if we use it for our webpage:

[CSS]
.content {
@include gradient-vertical();
}
article {
@include gradient-vertical(#9bbe4d, #649419, #80a933);
}
[/CSS]

Notice that in the first example, I called the mixin using @include [mixin name](). You call mixins by using the @include statement followed by the mixin name and open/close parenthesis. This will output the default values you have set to that mixin (In this case the defaults are #eeeeee, #aaaaaa, #cccccc).

As you may have also noticed, in the second example, I have replaced the default color values with values that I want to be used instead. I applied a nice green gradient background using those 3 values instead of the default gray gradient.

And Here is the output:

[CSS]
.content {
background: #cccccc;
background: -moz-linear-gradient(top, #eeeeee, #aaaaaa) repeat-x #d2d2d2;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#eeeeee), to(#aaaaaa)) repeat-x #d2d2d2;
background: -webkit-linear-gradient(top, #eeeeee, #aaaaaa) repeat-x #d2d2d2;
background: -o-linear-gradient(top, #eeeeee, #aaaaaa) repeat-x #d2d2d2;
background: linear-gradient(to bottom, #eeeeee, #aaaaaa) repeat-x #d2d2d2;
}

article {
background: #80a933;
background: -moz-linear-gradient(top, #9bbe4d, #649419) repeat-x #85ad38;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#9bbe4d), to(#649419)) repeat-x #85ad38;
background: -webkit-linear-gradient(top, #9bbe4d, #649419) repeat-x #85ad38;
background: -o-linear-gradient(top, #9bbe4d, #649419) repeat-x #85ad38;
background: linear-gradient(to bottom, #9bbe4d, #649419) repeat-x #85ad38;
}
[/CSS]

As you can see, mixins become very useful when you need to include code multiple times without having to retype it over and over again. Plus, the actual mixin itself does not get rendered in the output as it is only used when called upon.

Free Mixins For Everyone!

Now that we understand how mixins work, here’s a few mixins that I use to help me develop and design webpages quickly and efficiently:

[CSS]
@mixin letterpress($opacity){
text-shadow:0 1px 1px rgba(255,255,255,$opacity);
}
@mixin blackShadow($opacity){
text-shadow:0 1px 1px rgba(0,0,0,$opacity);
}
@mixin border-radius($borderRadius){
-webkit-border-radius: $borderRadius;
-moz-border-radius: $borderRadius;
border-radius: $borderRadius;
}
@mixin box-shadow($boxShadow){
-moz-box-shadow: $boxShadow;
-webkit-box-shadow: $boxShadow;
-ms-box-shadow: $boxShadow;
-o-box-shadow: $boxShadow;
box-shadow: $boxShadow;
}
@mixin box-shadow-2($boxShadow, $boxShadowInset){
-moz-box-shadow: $boxShadow, $boxShadowInset;
-webkit-box-shadow: $boxShadow, $boxShadowInset;
-ms-box-shadow: $boxShadow, $boxShadowInset;
-o-box-shadow: $boxShadow, $boxShadowInset;
box-shadow: $boxShadow, $boxShadowInset;
}

//border radius directions
@mixin border-top-radius($borderRadius){
-webkit-border-top-left-radius: $borderRadius;
-webkit-border-top-right-radius: $borderRadius;
-moz-border-radius-topleft: $borderRadius;
-moz-border-radius-topright: $borderRadius;
border-radius: $borderRadius $borderRadius 0 0;
}
@mixin border-bottom-radius($borderRadius){
-webkit-border-bottom-left-radius: $borderRadius;
-webkit-border-bottom-right-radius: $borderRadius;
-moz-border-radius-bottomleft: $borderRadius;
-moz-border-radius-bottomright: $borderRadius;
border-radius: 0 0 $borderRadius $borderRadius;
}
@mixin border-left-radius($borderRadius){
-webkit-border-top-left-radius: $borderRadius;
-webkit-border-bottom-left-radius: $borderRadius;
-moz-border-radius-topleft: $borderRadius;
-moz-border-radius-bottomleft: $borderRadius;
border-radius: $borderRadius 0 0 $borderRadius;
}
@mixin border-right-radius($borderRadius){
-webkit-border-top-right-radius: $borderRadius;
-webkit-border-bottom-right-radius: $borderRadius;
-moz-border-radius-topright: $borderRadius;
-moz-border-radius-bottomright: $borderRadius;
border-radius: 0 $borderRadius $borderRadius 0;
}

//for use of custom transitions
@mixin transition($transition) {
-webkit-transition: $transition;
-moz-transition: $transition;
-ms-transition: $transition;
-o-transition: $transition;
transition: $transition;
}
@mixin box-shadow-transition($duration){
-webkit-transition: box-shadow #{$duration}s ease;
-moz-transition: box-shadow #{$duration}s ease;
-o-transition: box-shadow #{$duration}s ease;
transition: box-shadow #{$duration}s ease;
}

//transformations
@mixin box-rotate($deg){
-webkit-transform: rotate(#{$deg}deg);
-moz-transform: rotate(#{$deg}deg);
-ms-transform: rotate(#{$deg}deg);
-o-transform: rotate(#{$deg}deg);
transform: rotate(#{$deg}deg);
}
@mixin scale($ratio) {
-webkit-transform: scale($ratio);
-moz-transform: scale($ratio);
-ms-transform: scale($ratio);
-o-transform: scale($ratio);
transform: scale($ratio);
}
@mixin translate($x, $y) {
-webkit-transform: translate($x, $y);
-moz-transform: translate($x, $y);
-ms-transform: translate($x, $y);
-o-transform: translate($x, $y);
transform: translate($x, $y);
}
@mixin skew($x, $y) {
-webkit-transform: skew($x, $y);
-moz-transform: skew($x, $y);
-ms-transform: skew($x, $y);
-o-transform: skew($x, $y);
transform: skew($x, $y);
}
@mixin translate3d($x, $y, $z) {
-webkit-transform: translate3d($x, $y, $z);
-moz-transform: translate3d($x, $y, $z);
-o-transform: translate3d($x, $y, $z);
transform: translate3d($x, $y, $z);
}

//Add opacity to elements
@mixin opacity($opacity){
-ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=#{$opacity}*10)”;
filter: alpha(opacity=#{$opacity}*100);
-moz-opacity: $opacity;
-khtml-opacity: $opacity;
opacity: $opacity;
}

// Add an alphatransparency value to any background or border color
@mixin translucent-background($color: #fff, $alpha: 0.5) {
background: $color; //fallback
background: hsla(hue($color), saturation($color), lightness($color), $alpha);
}
@mixin translucent-border($size: 1px, $style: solid, $color: #fff, $alpha: 0.5) {
border: $size $style hsla(hue($color), saturation($color), lightness($color), $alpha);
background-clip: padding-box;
}

//gradients
@mixin gradient-horizontal($startColor: #555, $endColor: #333, $noGradient: #444){
background: $noGradient;
background: -moz-linear-gradient(left, $startColor, $endColor) repeat-x $endColor; // FF 3.6+
background: -webkit-gradient(linear, 0 0, 100% 0, from($startColor), to($endColor) repeat-x $endColor); // Safari 4+, Chrome 2+
background: -webkit-linear-gradient(left, $startColor, $endColor) repeat-x $endColor; // Safari 5.1+, Chrome 10+
background: -o-linear-gradient(left, $startColor, $endColor) repeat-x $endColor repeat-x $endColor; // Opera 11.10
background: linear-gradient(to right, $startColor, $endColor) repeat-x $endColor; // Standard, IE10
}
@mixin gradient-vertical($startColor: #eee, $endColor: #aaa, $noGradient: #ccc){
background: $noGradient;
background: -moz-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // FF 3.6+
background: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)) repeat-x mix($startColor, $endColor, 60%); // Safari 4+, Chrome 2+
background: -webkit-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Safari 5.1+, Chrome 10+
background: -o-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Opera 11.10
background: linear-gradient(to bottom, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Standard, IE10
}
@mixin gradient-directional($startColor: #555, $endColor: #333, $deg: 45, $noGradient: #444){
background: $noGradient;
background: -moz-linear-gradient(#{$deg}deg, $startColor, $endColor) repeat-x $endColor; // FF 3.6+
background: -webkit-linear-gradient(#{$deg}deg, $startColor, $endColor) repeat-x $endColor; // Safari 5.1+, Chrome 10+
background: -o-linear-gradient(#{$deg}deg, $startColor, $endColor) repeat-x $endColor; // Opera 11.10
background: linear-gradient(#{$deg}deg, $startColor, $endColor) repeat-x $endColor; // Standard, IE10
}
@mixin gradient-vertical-three-colors($startColor: #00b3ee, $midColor: #7a43b6, $colorStop: 50%, $endColor: #c3325f, $noGradient: #444){
background: $noGradient;
background: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), color-stop($colorStop, $midColor), to($endColor)) no-repeat mix($midColor, $endColor, 80%);
background: -webkit-linear-gradient($startColor, $midColor $colorStop, $endColor) no-repeat mix($midColor, $endColor, 80%);
background: -moz-linear-gradient(top, $startColor, $midColor $colorStop, $endColor) no-repeat mix($midColor, $endColor, 80%);
background: -o-linear-gradient($startColor, $midColor $colorStop, $endColor) no-repeat mix($midColor, $endColor, 80%);
background: linear-gradient($startColor, $midColor $colorStop, $endColor) no-repeat mix($midColor, $endColor, 80%);
}
@mixin gradient-vertical-button($highlightColor: #fbeda1, $topColor: #FFBB02, $bottomColor: #EB6900, $shadowColor: #b07504){
background: $bottomColor;
background: -moz-linear-gradient(top, $highlightColor 0%, $topColor 4%, $bottomColor 95%, $shadowColor 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,$highlightColor), color-stop(4%,$topColor), color-stop(95%,$bottomColor), color-stop(100%,$shadowColor));
background: -webkit-linear-gradient(top, $highlightColor 0%,$topColor 4%,$bottomColor 95%,$shadowColor 100%);
background: -o-linear-gradient(top, $highlightColor 0%,$topColor 4%,$bottomColor 95%,$shadowColor 100%);
background: -ms-linear-gradient(top, $highlightColor 0%,$topColor 4%,$bottomColor 95%,$shadowColor 100%);
background: linear-gradient(to bottom, $highlightColor 0%,$topColor 4%,$bottomColor 95%,$shadowColor 100%);
}
@mixin gradient-radial($innerColor: #555, $outerColor: #333,$noGradient: #444){
background: $noGradient;
background: -webkit-gradient(radial, center center, 0, center center, 460, from($innerColor), to($outerColor)) no-repeat $outerColor;
background: -webkit-radial-gradient(circle, $innerColor, $outerColor) no-repeat $outerColor;
background: -moz-radial-gradient(circle, $innerColor, $outerColor) no-repeat $outerColor;
background: -o-radial-gradient(circle, $innerColor, $outerColor) no-repeat $outerColor;
}

// triangles ($direction can be: up, down, left, right, up-right, up-left, down-righ or down-left)
@mixin triangle($size, $color, $direction) {
height: 0;
width: 0;

@if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
border-color: transparent;
border-style: solid;
border-width: $size / 2;

@if $direction == up {
border-bottom-color: $color;
} @else if $direction == right {
border-left-color: $color;
} @else if $direction == down {
border-top-color: $color;
} @else if $direction == left {
border-right-color: $color;
}
}

@else if ($direction == up-right) or ($direction == up-left) {
border-top: $size solid $color;

@if $direction == up-right {
border-left: $size solid transparent;
} @else if $direction == up-left {
border-right: $size solid transparent;
}
}

@else if ($direction == down-right) or ($direction == down-left) {
border-bottom: $size solid $color;

@if $direction == down-right {
border-left: $size solid transparent;
} @else if $direction == down-left {
border-right: $size solid transparent;
}
}
}

//hide text for use with background images
@mixin hide-text{
overflow:hidden;
text-indent:-9999px;
display:block;
}

//for custom @font-face
@mixin family($family: ”, $url: ‘/fonts/’, $weight: normal, $style: normal) {
@font-face {
font-family: $family;
src: url(‘#{$url}.eot’);
src: url(‘#{$url}.eot?#iefix’) format(‘embedded-opentype’),
url(‘#{$url}.woff’) format(‘woff’),
url(‘#{$url}.ttf’) format(‘truetype’),
url(‘#{$url}.svg#svg’) format(‘svg’);
font-weight: $weight;
font-style: $style;
}
}

// Clearfix for clearing floats like a boss (from h5bp.com/q)
@mixin clearfix() {
zoom: 1;
&:before,
&:after {
display: table;
content: “”;
zoom: 1;
}
&:after {
clear: both;
}
}

// browser specific————————-
@mixin ie7-inline-block() {
vertical-align: baseline; // for all other browsers
*vertical-align: auto; // set for consistency in IE7
*display: inline; // IE7 inline-block hack
*zoom: 1; //enables hasLayout
}

// IE7 likes to collapse whitespace on either side of the inline-block elements.
// Ems because we’re attempting to match the width of a space character. Left
// version is for form buttons, which typically come after other elements, and
// right version is for icons, which come before. Applying both is ok, but it will
// mean that space between those elements will be .6em (~2 space characters) in IE7,
// instead of the 1 space in other browsers.
@mixin ie7-restore-left-whitespace() {
*margin-left: .3em;

&:first-child {
*margin-left: 0;
}
}

@mixin ie7-restore-right-whitespace() {
*margin-right: .3em;

&:last-child {
*margin-left: 0;
}
}

[/CSS]

Conclusion

I hope that this tutorial helped you understand mixins better and that these free mixins will help you on your next Sass project. If you have other mixins that you think might be helpful, let me know in the comments and I’ll include them to the list.

Also, please don’t forget to sign up to the mailing list to get a monthly newsletter of tutorials just like this.

Other Articles you might like:

• Using Extensible CSS Preprocessor Languages: Sass or LESS

So you’re probably wondering to yourself: What are these extensible CSS preprocessor languages and why should I use them? You might also be asking to yourself, why I should even learn a new way of writing CSS when I already know how to write it well? The answer is simple… It’ll make you write CSS even faster, more proficient, and will also let you split up your CSS so you can re-use some of it in another section of your site without having to re-write your CSS again.But before, we dive into the nitty gritty of extensible CSS preprocessor languages, let’s find out what they are and how they are used.

There are a few different ones out there but the two major extensible CSS preprocessor languages for CSS are Sass (Syntatically Awesome Stylesheets) and LESS (The Dynamic Styesheet Language).

Let’s take a look as some of the similarities and differences between the two to get a better understanding of how each language handles CSS.

Sass

Sass has been around longer than LESS and has slightly a few more features that may be useful to web designers. There are two different syntaxes when using Sass and both are valid to use. They are differentiated by an extension of the file: “.sass” and “.scss”

There are no functional differences between the two syntaxes except for how it is written. “.sass” files (the older syntax) uses indents/tab spaces (similar to HAML) for its syntax usage which some prefer for it’s conciseness. The other syntax “.scss” is much more commonly used and uses the same basic CSS syntax using brackets and is less concise. For this article, I’ll mainly be talking about using the “.scss” extension syntax as it is similar to writing normal CSS and has a similar syntax to LESS as well.

Here are a few features that encompass the Sass language:

Variables

Variables can be used to hold specific values that you can reuse later on and throughout your Sass file(s). They are applied by using the dollar sign ($). Here’s some examples of using variables.

[CSS]
$red: #ff0000;
$lineheight: 1.4em;
p {
color: $red;
line-height: $lineheight;
}
[/CSS]
The output will be:
[CSS]
p {
color: #ff0000;
line-height: 1.4em;
}
[/CSS]

Comments

There are now two ways to use comments within your Sass files instead of using the normal /* */ syntax in CSS.
[CSS]
// this is a comment and won’t show up on the compiled CSS file
/* this is the normal
two line comment */
p {
color: #333; //dark color
}
[/CSS]
And here is the output
[CSS]
p {
color: #333;
}
[/CSS]

Nesting

Nesting is the most useful feature for CSS preprocessor languages as it is easier to avoid repetition by nesting selectors within one another.
[CSS]
.content {
margin: 10px;

h1 {
font-size: 2em;

a {
color: #0000ff;

&:hover {
color: #000099;
}
}
}
}
[/CSS]
And here is the output:
[CSS]
.content {
margin: 10px;
}
.content h1 {
font-size: 2em;
}
.content h1 a {
color: #0000ff;
}
.content h1 a:hover {
color: #000099;
}
[/CSS]

Mixins

Mixins are extremely useful if you constantly need to write large chunks of code and re-use them. Below is an example of a background gradient being applied using a mixin called gradient-vertical() with values set as default. Notice how there are three default values set as variables within the mixin itself which can be overwritten.

[CSS]
@mixin gradient-vertical($startColor: #555, $endColor: #333, $noGradient: #444){
background: $noGradient;
background: -moz-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // FF 3.6+
background: -webkit-gradient(linear, 0 0, 0 100%, from($startColor), to($endColor)) repeat-x mix($startColor, $endColor, 60%); // Safari 4+, Chrome 2+
background: -webkit-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Safari 5.1+, Chrome 10+
background: -o-linear-gradient(top, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Opera 11.10
background: linear-gradient(to bottom, $startColor, $endColor) repeat-x mix($startColor, $endColor, 60%); // Standard, IE10
}

.content {
@include gradient-vertical();
}
.blueBox {
@include gradient-vertical(#40a3db, #0c78b7, #228ac6);
}
[/CSS]

Here’s the output
[CSS]
.content {
background: #444444;
background: -moz-linear-gradient(top, #555555, #333333) repeat-x #474747;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#333333)) repeat-x #474747;
background: -webkit-linear-gradient(top, #555555, #333333) repeat-x #474747;
background: -o-linear-gradient(top, #555555, #333333) repeat-x #474747;
background: linear-gradient(to bottom, #555555, #333333) repeat-x #474747;
}

.blueBox {
background: #228ac6;
background: -moz-linear-gradient(top, #40a3db, #0c78b7) repeat-x #2b91cc;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#40a3db), to(#0c78b7)) repeat-x #2b91cc;
background: -webkit-linear-gradient(top, #40a3db, #0c78b7) repeat-x #2b91cc;
background: -o-linear-gradient(top, #40a3db, #0c78b7) repeat-x #2b91cc;
background: linear-gradient(to bottom, #40a3db, #0c78b7) repeat-x #2b91cc;
}
[/CSS]

Inheritance through extends

Sass allows you to inherit all the styles of a selector and apply it to another one using the @extend method.

[CSS]
.content {
background: #ccc;
color: #333;
}
.container {
@extend .content;
width: 1000px;
}
[/CSS]

Here’s the output:
[CSS]
.content {
background: #ccc;
color: #333;
}
.container {
background: #ccc;
color: #333;
width: 1000px;
}
[/CSS]

Anything Else?

Well there are many more features that Sass includes including functions, math operations, control directives, and many more. The ones that I’ve shown are the most commonly used, but you can view more about Sass’s features at www.sass-lang.com

LESS

LESS is very similar to Sass and has a fairly good amount of features. One of the huge differences with LESS is its syntax usage of the “@” symbol for use as the variable denotation. Also, there are slight differences between how mixins are called and how inheritance is denoted.

Variables

Much like Sass, variables are used to hold values for later use. Here’s an example of how to use variables in LESS:

[CSS]
@red: #ff0000;
@lineheight: 1.4em;
p {
color: @red;
line-height: @lineheight;
}
[/CSS]
The output will be:
[CSS]
p {
color: #ff0000;
line-height: 1.4em;
}
[/CSS]

Notice however, that LESS uses the “@variable-name” followed by a colon (:) instead of an equal sign (=) to apply its value as opposed to Sass.

Comments

Comments in LESS are used the same way they are used in Sass. There is no difference.

[CSS]
// this is a comment and won’t show up on the compiled CSS file
/* this is the normal
two line comment */
p {
color: #333; //dark color
}
[/CSS]
And here is the output:
[CSS]
p {
color: #333;
}
[/CSS]

Nesting

Nesting is also used the exact same way in LESS as it is in Sass.

[CSS]
.content {
margin: 10px;

h1 {
font-size: 2em;

a {
color: #0000ff;

&:hover {
color: #000099;
}
}
}
}
[/CSS]
And here is the output
[CSS]
.content {
margin: 10px;
}
.content h1 {
font-size: 2em;
}
.content h1 a {
color: #0000ff;
}
.content h1 a:hover {
color: #000099;
}
[/CSS]

Mixins

Mixins are used slightly different in LESS as they are in Sass. You’ll notice that calling a mixin in LESS is just declaring its selector as opposed to calling the “@include” in Sass. Here’s an example:

[CSS]
.gradient-vertical(@startColor: #555, @endColor: #333, @noGradient: #444){
background: @noGradient;
background: -moz-linear-gradient(top, @startColor, @endColor) repeat-x mix(@startColor, @endColor, 60%); // FF 3.6+
background: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), to(@endColor)) repeat-x mix(@startColor, @endColor, 60%); // Safari 4+, Chrome 2+
background: -webkit-linear-gradient(top, @startColor, @endColor) repeat-x mix(@startColor, @endColor, 60%); // Safari 5.1+, Chrome 10+
background: -o-linear-gradient(top, @startColor, @endColor) repeat-x mix(@startColor, @endColor, 60%); // Opera 11.10
background: linear-gradient(to bottom, @startColor, @endColor) repeat-x mix(@startColor, @endColor, 60%); // Standard, IE10
}

.content {
.gradient-vertical; //notice how I am just calling it without brackets and it will still inherit the default values
}
.blueBox {
.gradient-vertical(#40a3db, #0c78b7, #228ac6);
}
[/CSS]

Here’s the output:
[CSS]
.content {
background: #444444;
background: -moz-linear-gradient(top, #555555, #333333) repeat-x #474747;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#555555), to(#333333)) repeat-x #474747;
background: -webkit-linear-gradient(top, #555555, #333333) repeat-x #474747;
background: -o-linear-gradient(top, #555555, #333333) repeat-x #474747;
background: linear-gradient(to bottom, #555555, #333333) repeat-x #474747;
}

.blueBox {
background: #228ac6;
background: -moz-linear-gradient(top, #40a3db, #0c78b7) repeat-x #2b91cc;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#40a3db), to(#0c78b7)) repeat-x #2b91cc;
background: -webkit-linear-gradient(top, #40a3db, #0c78b7) repeat-x #2b91cc;
background: -o-linear-gradient(top, #40a3db, #0c78b7) repeat-x #2b91cc;
background: linear-gradient(to bottom, #40a3db, #0c78b7) repeat-x #2b91cc;
}
[/CSS]

Inheritance

In LESS, inheritance is declared by just calling out the already declared selector:

[CSS]
.content {
background: #ccc;
color: #333;
}
.container {
.content;
width: 1000px;
}
[/CSS]

Here’s the output:
[CSS]
.content {
background: #ccc;
color: #333;
}
.container {
background: #ccc;
color: #333;
width: 1000px;
}
[/CSS]

Anything else?

There are many more features that encompass LESS. You can learn more by visiting http://lesscss.org or you can view its usage and function reference as well.

The process of pre-compiling your CSS

As well all know, browsers only understand stylesheets with the extension “.css”… plain and simple. However, with the new way of writing lines of css, we will have to use pre-compilers to compile our Sass/LESS code into a .css extension stylesheet that browsers understand. This just means that we will be writing our css code in a different way than normal and compile it so that it spits out a file (with the extension of “.css”) that browsers can understand.

What pre-compiler options do I have?

There are a few pre-compilers that I use which can help you compile your Sass or LESS files into readable .css files.

The main one I use is called Codekit. While it is only a Mac application at the moment, it is worth every penny, especially if you work on both Sass and LESS files(like me) and are using a Mac. It can also compress your files and has features for other languages as well.

Prepros is another great software that can compile both Sass and LESS files and is FREE! Who doesn’t like free? Plus, it’s almost the equivalent to Codekit except this is currently only for Windows users. So, Windows users rejoice!

Compass.app is another tool you can use to compile your Sass with Compass files.It’s only $10 and also for PC/Mac/Linux.

SimpLess, as you may have guessed by now, is a pre-compiler for Less files and has a few great options for compiling your LESS files. It is also available for PC and Mac.

So, Which extensible CSS preprocessor language should I use?

While Sass has slightly more robust features (such as control directives), LESS is becoming more and more robust in its own right and is being used more and more. It really depends upon your own personal preference. I still use LESS for certain projects which involve using the Twitter Bootstrap Framework for some of my websites, but I also am currently using Sass as my primary extensible CSS preprocessor language because of its other features and because it also can be used with the Compass Framework and can be used with the Foundation Framework.

Conclusion

Hopefully I’ve provided you some helpful insight into using these new CSS preprocessor languages that you can use on your next big project. By using these new CSS languages, you can save a ton of time when developing and styling your websites.

Let me know in the comments below which language you like best and why. Also, don’t forget to share this with others to let them know about these two awesome extensible CSS languages. Thanks!

The HTML Structure

First let’s start off with a simple unordered list of nav items.

[HTML]

• Home
• About
• Design
  • Web
  • Graphic
• Tutorials
  • Web
    • HTML
    • CSS
    • JavaScript
  • Graphic

[/HTML]

Next, we’ll style the navigation menu. Please note that I’ll be using some CSS3 to include into the stylesheet and also including older browser fallbacks for some of the styles.

[CSS]
body {
font-family: ‘Helvetica Neue’,'Helvetica’, arial, sans-serif;
}
#nav{
width:1000px;
margin:0 auto 10px;
padding: 0 0 0 2%;
list-style:none;
font-weight:bold;
border: 1px solid #999;
background: #ddd;

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ccc), to(#fff));
background: -webkit-linear-gradient(top, #fff, #ccc);
background: -moz-linear-gradient(top, #fff, #ccc);
background: -ms-linear-gradient(top, #fff, #ccc);
background: -o-linear-gradient(top, #fff, #ccc);
background: linear-gradient(top, #fff, #ccc);

-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;

-moz-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-webkit-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-ms-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
-o-box-shadow: 0 1px 4px rgba(0,0,0,0.5);
box-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
#nav li{
display: inline-block;
margin-right:10px;
position:relative;
}
#nav a{
display:block;
padding:14px 5px;
color:#444;
text-decoration:none;

text-shadow: 0 1px 0 rgba(255,255,255,0.9);
}
#nav a:hover{
color:#666;
background:#999;
}

#nav ul{
background:#fff;
background:rgba(255,255,255,0);
list-style:none;
position:absolute;
left:-9999px;
}
#nav ul li{
padding-top:1px;
float:none;
width: 100px; /* width of each list item in the dropdown */
}
#nav ul a{
white-space:nowrap;
}
#nav li:hover ul{
left:0;
padding: 0;
}
#nav li:hover a{
background:#ccc;
}
#nav li:hover ul li a:hover{
background:#bbb;
}
#nav ul ul {
display: none;
margin: 0 0 0 100px; /* left margin for the width of each dropdown item*/
padding: 0;
top: 0;
}
#nav li:hover ul li:hover ul {
display: block;
}
[/CSS]

Conclusion

As you can see, it’s quite simple to create your own well-designed navigation with just a few lines of HTML and CSS. As more and more browsers adapt to using CSS3, it’ll become easier for web designers to design navigation elements such as this without the need to design it in Photoshop or other software.

Files: how_to_create_dropdown_using_html_and_css

If you like this tutorial, please let me know in the comments below and tell me if you want more tutorials like these.

Other tutorials you might like:

• How to create an overlay popup using HTML,CSS and jQuery
• How to use CSS3 transitions
• Create a Photoshop-like button in CSS3

Have you ever wondered how to some websites create an overlay popup when they click on a link or button? Perhaps you are wondering how to create an error overlay or even a simple ad popup (not recommended since those are really annoying). Well you’re in luck. I’ll break down the basic HTML structure, CSS, and JavaScript/jQuery code as well as explain the process behind the popup overlay.

Basic HTML Structure

Here’s the basic HTML structure that we’ll use to design the popup.

[HTML]
<html>
<head>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js”></script>
<script type=”text/javascript” src=”custom.js”></script>
<link type=”text/css” rel=”stylesheet” href=”stylesheet.css” />
</head>
<body>

<div class=”main-content”>
<!– Your Content Here –>
<p>Please <a class=”show-popup” href=”#”>click here</a> to see the popup</p>
</div>

<div class=”overlay-bg”>
<div class=”overlay-content”>
<p>Oh My! This is a popup!</p>
<button>Close</button>
</div>
</div>

</body>
</html>
[/HTML]

CSS Snippet

And below is the CSS we’ll be using to style our popup overlay:

[CSS]
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

body {
font-family: ‘Helvetica Neue’,'Helvetica’, Arial, sans-serif;
}

.main-content {
height: 800px;
width: 1000px;
margin: 0 auto;
}

.overlay-bg {
display: none;
position: fixed;
top: 0;
left: 0;
height:100%;
width: 100%;
background: #000; /* fallback */
background: rgba(0,0,0,0.75);
}
.overlay-content {
background: #fff;
padding: 1%;
width: 40%;
position: relative;
top: 15%;
left: 50%;
margin: 0 0 0 -20%; /* add negative left margin for half the width to center the div */
border-radius: 4px;
box-shadow: 0 0 5px rgba(0,0,0,0.9);
}

.close-btn {
cursor: pointer;
border: 1px solid #333;
padding: 2% 5%;
background: #a9e7f9; /* fallback */
background: -moz-linear-gradient(top, #a9e7f9 0%, #77d3ef 4%, #05abe0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a9e7f9), color-stop(4%,#77d3ef), color-stop(100%,#05abe0));
background: -webkit-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
background: -o-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
background: -ms-linear-gradient(top, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
background: linear-gradient(to bottom, #a9e7f9 0%,#77d3ef 4%,#05abe0 100%);
border-radius: 4px;
box-shadow: 0 0 4px rgba(0,0,0,0.3);
}
.close-btn:hover {
background: #05abe0;
}
[/CSS]

jQuery Snippet

And here’s the jQuery snippet we’ll use to trigger the popup to display (Note: I’m using jQuery version 1.9):

[JAVASCRIPT]
$(document).ready(function(){
// show popup when you click on the link
$(‘.show-popup’).click(function(event){
event.preventDefault(); // disable normal link function so that it doesn’t refresh the page
$(‘.overlay-bg’).show(); //display your popup
});

// hide popup when user clicks on close button
$(‘.close-btn’).click(function(){
$(‘.overlay-bg’).hide(); // hide the overlay
});
});
[/JAVASCRIPT]

Conclusion

That’s it! Try it out for yourself, or create your own version of a popup overlay.

If you would like to see more of these tutorials, or maybe you have a suggestion for me, let me know in the comments below.

Before CSS3, there wasn’t really a way to change the default blue text selection color when you highlight some text on a webpage. With current browsers and more support for CSS3, it has been really simple to change the look and color of the text selection.

[CSS]
::selection {
background:#ffff33;
}

::-moz-selection {
background:#ffff33;
}

::-webkit-selection {
background:#ffff33;
}
[/CSS]

By using the above example, it will change the background color of your selected text to yellow instead of the default light blue.

As you probably noticed, Firefox and Webkit-based browsers (Chrome and Safari) have their own syntax, though the latest versions should now support the normal ::selection pseudo-element syntax.

Browser Support

• Firefox 1.0+
• Chrome 1+
• IE9+
• Opera 9.5+
• Safari 1.1+

What Are Pseudo-Elements?

Now you’re probably wondering what pseudo-elements are or what they can do. Pseudo-elements create a “fake” element on top of another selected element. In this case, we are using the :before and :after pseudo-elements. They don’t actually change or add anything to the content. Instead, it creates a fake element either before or after the element itself which we can then use to style with.

Basic :before and :after Syntax

Here’s an example of the syntax:

[CSS]
.wrap:before {
content: “hello”;
}

.wrap:after {
content: “world”;
}
[/CSS]

As you can see, the content property has the value of “hello” and “world”. This will add the word ‘hello’ before each .wrap class element as well as adding ‘world’ after each of them.

Here’s another example on how to add an image before an element:

[CSS]
.wrap:before {
content: “”;
display: block;
width: 250px;
height: 250px;
background: url(“images/250×250.jpg”) no-repeat;
}
[/CSS]

The code is pretty self-explanatory. I am just creating a pseudo-element before my .wrap class div that is 250×250 pixels using a background image. You can also add an image like so:

[CSS]
.wrap:before {
content: url(images/250×250.jpg);
}
[/CSS]

You may have noticed that I didn’t include quotes inside the url() reference. That is because if I added quotes, it will interpret it as a literal string text.

Also, you may have noticed I used display: block property on the previous code. The reason for that is because it allows us to create that pseudo-element into an actual block element for us to style.

However, you must remember that pseudo-elements are not shown in the DOM, so you won’t be able to select or see it in the source like you normally can with HTML elements. Instead, you can use Firebug or Chrome’s Developer Tools to target the pseudo-element instead.

Furthermore, you must remember that these pseudo-elements inherit properties that can be inherited unless it is properties that aren’t naturally inherited… (that sounded confusing). What I’m saying is that if the main element that the pseudo-element is attached to (in this case the .wrap element) has a property of, say “font-size: 1.4em”, then the pseudo-element will also inherit it. Other properties such as margin or padding are not inherited.

Browser Support

As with most CSS3 techniques, only the more modern browsers are able to interpret the :before and :after pseudo-elements. With that being said, I would caution you to only use the :before and :after pseudo-elements as an enhancement and not a necessity when applying it to your designs. Anyways, here are the supported browsers:

• Firefox 3.5+
• Chrome 2+
• Safari 1.3+
• Opera 9.2+
• IE8+
• And all mobile browsers.

Page zoom using mobile browsers can be a great way to view certain areas on a webpage, especially if it’s difficult to see a certain area of the page. However, with mobile versions of certain websites, it may not be a useful feature if your website is already optimized for mobile viewing.By disabling the zoom feature with the pinch-zoom/double-tap feature of mobile browsers, you can maintain the same viewable area of the website.

It is actually a very easy meta tag that you just need to include in the head tags of your page.
[html]

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0″ />

[/html]

That’s it. Really simple. However, as a word of caution, you shouldn’t add this if the page is not a mobile version.

As with many CSS3 features that have been used as of late, many of them have dealt mainly with stylizing static properties. However, with the new CSS3 transitions, you can now do some really cool transition effects for various elements.CSS3 transitions now allow you to create transition effects without the need of using JavaScript or jQuery to manipulate/animate that element. Instead, it allows your browser to render those transition effects by itself.

There are four new properties that come with the new CSS3 Transitions. They are:

transition-property
transition-duration
transition-timing-function
transition-delay

You can also use the transition property as a shorthand to tie all of them at once. But first, let’s go over the four transition properties and explain how they are used.

transition-property

The transition-property Property (yes, read that again) allows us to select which CSS property we want the transition effects to affect. Here’s some examples of using the transition-property:

transition-property: none;
transition-property: all;
transition-property: background-color;
transition-property: font-size, color, height;

As you can see, we can choose which CSS property we want to select to do various transitions to. By using the “all” property, we can select every property that can be transitioned. You can find a list of properties that can be animated here.

transition-duration

The transition-duration Property is designated to allow a certain transition to do its animation within a specified time. Here are some examples:

transition-duration: 500ms;
transition-duration: 3s;
transition-duration: 8000ms, 5000ms;
transition-duration: 0;

As you can see by the examples, you can also comma-separate them with different values which targets the specific transition-property we declare.

transition-timing-function

The transition-timing-function is really just a fancy way of determining how the transition will be done. Here are examples of all the different types of transition-timing-function:

transition-timing-function: linear;
transition-timing-function: ease;
transition-timing-function: ease-in;
transition-timing-function: ease-out;
transition-timing-function: ease-in-out;
transition-timing-function: cubic-bezier(0.2, 0.4, 0.5, 0.6);

All these transition-timing-function Properties can help you determine how your transition animation will be handled. For now, I suggest you use either “linear” or “ease” as they are used for most basic animations.

transition-delay

The transition-delay Property is an optional property that allows us to delay when the transition occurs. It accepts various times in seconds or milliseconds and can also be comma-separated to determine which properties are going to be delayed. Here are some examples:

transition-delay: 2s;
transition-delay: 2000ms;
transition-delay: -2s;

As you probably would have noticed, I’ve included a -2 second delay to the last example. The transition-delay property accepts negative numbers as well which will trigger the animation to occur immediately but it will make the animation appear as though it had already begun it’s animation 2 seconds ahead and continue on from there.

transition

Now that we know all of the four various transition properties, we can now tie them all together to create a shorthand version. Here’s an example that turns the background-color of a div class called “.animate-me” from yellow to red when hovered over.
[CSS]
.transition-me {
height: 100px;
width: 100px;
background-color: #ff0;
transition: background-color 3s linear 1s;
}
.transition-me:hover {
background-color: #f00;
}

[/CSS]
The example above will animate the background color of the div to go from yellow to red in 3 seconds linearly with a 1 second delay. Try it out for yourself.

Browser Support

As with most CSS3 properties, modern browsers are the only ones capable of displaying transitions. Here’s the list of supported browsers:

• Firefox 4.0+

• Chrome 4.0+

• IE 10+

• Safari 3.1+

• Opera 10.5+

Just remember, “with great power comes great responsibility…” so use transitions sparingly as an enhancement as opposed to a requirement. Since transitions are not fully supported on most browsers, it’s best to just use them to enhance certain features on your site.

So now that you know how to use transitions, how have you used CSS3 transitions in your website? Leave a comment below and tell me how you used it to enhance your site.

It’s simple really. You just need to provide two basic properties in your CSS to include in order to center the content on your website.

Here’s an example of an HTML structure:
[HTML]
<html>
<head>
</head>

<body>

<div id=”Wrap”></div>

</body>
</html>

[/HTML]

And here’s the actual CSS snippet to center the #Wrap div.

[CSS]
#Wrap {
width: 800px;
margin: 0 auto;
}
[/CSS]

As you can see, you only really need two properties: width and margin. Notice, however, that when using margin: 0 auto; you need to provide a definitive width size.

That’s really all there is to it.