Adobe Illustrator Tutorial: Create a Printer Illustration

Click here to download the source files.

How to Create a Fixed Navigation Bar for Your Website

There are many ways to approach navigation on your website and they all have their pros and cons. We have the top horizontal navigation bar, which can limit the number of links you can have before you have to resort to sub menus which, in my opinion, aren’t the best — but if you’re only looking to keep a couple of items in your navigation bar, this could be the one for you.

Another approach is the vertical sidebar menu, but a drawback of this approach is that users can become overwhelmed when sub menus start popping out from all over the place. Finally, there’s the tab bar navigation system – the problem with this approach is that it takes a lot more time to design but if you design it well, boy is it good.

In this tutorial, I will be showing you how to create a horizontal navigation bar that sticks to the top of the screen using CSS and HTML. Now, why would you want it to stick to the top? Well, by having the bar stick to the top, this means that the user does not have to scroll to the top when they want to change page. For this tutorial, we’ll be using CSS and HTML and applying CSS3 effects such as drop shadows and background opacity.

Step 1

Open up your text editor, in this tutorial I will be using Chocolat — a great text editor, despite the fact it’s still in beta — and create a directory that contains a CSS file (main.css) and a HTML file (index.html).

Step 2

Within the HTML file, add the basic structure of a HTML document (the basic HTML5 structure is here) and ensure that the file links to your CSS file.

Step 3

Now, within your CSS file, we’re going to create a div that will contain the navigation bar and make it float, I’ll go through it step by step so you know what’s going on. Add the following to your CSS file:

#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 35px;
text-align: center;
padding-top: 15px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.8);
color: rgba(1, 1, 1, 0.8);
}

#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}

#navigation a:hover {
color: grey;
}

The first three lines define the navigation bar container to be fixed, meaning it does not move. The second line defines the position, at the top of the screen; if you were to change this value the navigation bar would change position but because we want it right at the top, 0 is the value we want.

Next, we define the width of the navigation bar at 100%. This means that the bar will span the entire width of the screen and webpage, you can change the size to something like 800px but I think it looks a lot better if it spans the entire width of the webpage. Next, we define the height (35px) – pretty self explanatory but feel free to change and experiment with the values.

We define where we want the text to appear and align itself, in our document it’s in the center but feel free to change this. If you do, make sure you apply padding to make sure the text isn’t right next to the left or right of the webpage. Next, we use padding to essentially position the text so that it will appear in the middle of the navigation bar.

Now, we get to interesting, fancy CSS3 stuff. The next three lines define that the navigation bar will have a shadow, the first two 0pxs define any inset we want on the shadow, for a navigation bar I wouldn’t suggest this, the 8px defines the blur of the shadow — I’ve chosen 8px because it doesn’t add too much of a blur whilst remaining noticeable. The final 0px is the amount of spread. You could think of this as a stroke applied before the shadow blurs, looks good if used correctly, looks terrible if it’s not and finally we have the hex value for the color of the shadow — I’ve used black (#000000) but you can use something like white or yellow to create a glow, depends on the background of your website really.

Now, the last two lines of the CSS define the background of the navigation bar and for a fixed navigation bar it looks good to have the bar semi-transparent and this is what this little CSS3 code does. The first three values specify the RGB values and for this I have created black (the only reason I’ve used black on this webpage is because the background is white and black is a nice contrasting color but feel free to change any of these values as you go along). The final value (0.8) is the alpha and this is what makes the background transparent. Alpha (or transparency) ranges from 0.1 (most transparent) to 1.0 (least transparent, or opaque). I have used 0.8 because the user will definitely be able to tell that it’s transparent whilst also being able to notice the text within the actual navigation bar.

The next two declarations essentially give the text that will be in the navigation bar some style and the #navigation a:hover defines what will happen when the user hovers over the text, in this case it will change from white to grey.

Step 4

Now, all of that is out of the way, we need to add some HTML to our document that will actually make use of this CSS. So, switch back to your HTML document and add the followong class and text to it:


Home
Portfolio
Our Apps
Support
Press
About

Here, we’re making use of the navigation div that we created earlier and also adding some a tags that are links to other pages, feel free to change the ‘#’ signs to URLs.

Step 5

Open your HTML file in your browser and you’ll see that something isn’t quite right, there’s a space on the left hand side between the start of the navigation bar and the edge of the website. How could this be? We defined the width as 100%. Well, for some reason unknown to me, there’s automatically padding added to HTML documents by your browser and you must define otherwise in your CSS file.

Step 6

Switch back to your CSS file and add the follow code at the top:


body {
padding: 0;
margin: 0;
}

This will remove the automatically added padding to your document.

Step 7

Now, you can optionally add some text and information to your HTML document to test your new navigation bar. I’ve added some content (and given it some style which you can see if you view the source files) as well as added an image. Now open up the HTML document in your browser and you’ll be able to view the navigation bar and it will perform correctly.

The point of this tutorial was to show you how to get up and running with a navigation bar that stays at the top of a webpage. You can apply this not only to navigation bars but also to buttons that ask for feedback or take users to social network pages. This tutorial also demonstrates some interesting CSS3 principals and core HTML practices.

Tutorials

Apr 9, 2012

Mojo

Slideshow with jmpress.js

You have for sure already seen impress.js, a really great JavaScript library for creating extraordinary 3D presentations. The jQuery port jmpress.js let’s you use this library as a jQuery plugin with some added options. We want to show you today how to use this great plugin to create a responsive slideshow with 3D effects.

The icons used in the demo is by Artcore Illustration and they are licensed under the
Creative Commons BY-NC-ND 3.0 license.

So, let’s start!

The Markup

We will have a main container which is a section with the class jms-slideshow. Inside, we’ll have sevaral divisions with the class step. These will be our single slides. Each step or slide will get a data-color class for it’s background color and some data attributes of jmpress.js. You can find all (inline) options here: jmpress.js Documentation – Options. We’ll use some attributes in order to define the position and rotation of the slides in 3D space:

<section id="jms-slideshow" class="jms-slideshow">

	<div class="step" data-color="color-1">
		<div class="jms-content">
			<h3>Some headline</h3>
			<p>Some text</p>
			<a class="jms-link" href="#">Read more</a>
		</div>
		<img src="images/1.png" />
	</div>

	<div class="step" data-color="color-2" data-y="500" data-scale="0.4" data-rotate-x="30">
		<!-- ... -->
	</div>

	<!-- ... -->

</section>

Let’s take care of the style.

The CSS

Since we want to make the slideshow responsive, we will give the main container a percentage width, with some min and max values:

.jms-slideshow {
	position: relative;
	width: 80%;
	max-width: 1400px;
	min-width: 640px;
	margin: 20px auto;
	height: 460px;
}

The next wrapper is dynamically added, and this will be the visible slideshow wrapper:

.jms-wrapper {
	width: auto;
	min-width: 600px;
	height: 440px;
	background-color: #fff;
	box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
	-webkit-background-clip: padding;
	-moz-background-clip: padding;
	background-clip: padding-box;
	border: 10px solid #fff;
	border: 10px solid rgba(255, 255, 255, 0.9);
	outline: none;
	transition: background-color 1s linear;
}

The background color classes will be applied to the previous wrapper. The class is defined in the data atrribute data-color in each step. This gives us the possibility to add a background color for each slide and change it with a transition. (The duration of the transition will be re-defined in the JavaScript.)

.color-1 {
	background-color: #E3D8FF;
	background-color: rgba(227, 216, 268, 1);
}
.color-2 {
	background-color: #EBBBBC;
	background-color: rgba(235, 187, 188, 1);
}
.color-3 {
	background-color: #EED9C0;
	background-color: rgba(238, 217, 192, 1);
}
.color-4 {
	background-color: #DFEBB1;
	background-color: rgba(223, 235, 177, 1);
}
.color-5{
	background-color: #C1E6E5;
	background-color: rgba(193, 230, 229, 1);
}

The steps will have the following style:

.step {
	width: 900px;
    height: 420px;
	display: block;
	transition: opacity 1s;
}
.step:not(.active) {
	opacity: 0;
}

Inactive steps will have 0 opacity. When the slides are moved, the opacity will be set to 1.

The inner parts of the slides will have the following style:

.jms-content{
	margin: 0px 370px 0px 20px;
	position: relative;
	clear: both;
}
.step h3{
	color: #fff;
	font-size: 52px;
	font-weight: bold;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	margin: 0;
	padding: 60px 0 10px 0;
}
.step p {
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
	font-size: 34px;
	font-weight: normal;
	position: relative;
	margin: 0;
}

The “read more” link will have a little transition by itself: once a step becomes active, it will move up wile fading in:

a.jms-link{
	color: #fff;
	text-transform: uppercase;
	background: linear-gradient(top, #969696 0%,#727272 100%);
	padding: 8px 15px;
	display: inline-block;
	font-size: 16px;
	font-weight: bold;
	color: #fff;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.5);
	border: 1px solid #444;
	border-radius: 4px;
	opacity: 1;
	margin-top: 40px;
	clear: both;
	transition: all 0.4s ease-in-out 1s;
}
.step:not(.active) a.jms-link{
	opacity: 0;
	margin-top: 80px;
}

The image will be positioned absolutely on the right side of each slide:

.step img{
	position: absolute;
	right: 0px;
	top: 30px;
}

The navigation dots will positioned at the bottom:

.jms-dots{
	width: 100%;
	position: absolute;
	text-align: center;
	left: 0px;
	bottom: 20px;
	z-index: 2000;
	user-select: none;
}

With “user-select: none” the text of an element and its sub-elements will appear as if they can’t be selected.
The span will be a dark little dot:

.jms-dots span{
	display: inline-block;
	position: relative;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #777;
	margin: 3px;
	cursor: pointer;
	box-shadow:
		1px 1px 1px rgba(0,0,0,0.1) inset,
		1px 1px 1px rgba(255,255,255,0.3);
}

And we’ll style a pseudo-element to look like a little white dot:

.jms-dots span.jms-dots-current:after{
	content: '';
	width: 8px;
	height: 8px;
	position: absolute;
	top: 2px;
	left: 2px;
	border-radius: 50%;
	background: linear-gradient(top, #ffffff 0%,#f6f6f6 47%,#ededed 100%);
}

The arrow navigation spans will be positioned on the left and on the right side of the slideshow. We’ll use background images for the arrows:

.jms-arrows{
	user-select: none;
}
.jms-arrows span{
	position: absolute;
	top: 50%;
	margin-top: -40px;
	height: 80px;
	width: 30px;
	cursor: pointer;
	z-index: 2000;
	box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.1);
	border-radius: 3px;
}
.jms-arrows span.jms-arrows-prev{
	background: #fff url(../images/arrow_left.png) no-repeat 50% 50%;
	left: -10px;
}
.jms-arrows span.jms-arrows-next{
	background: #fff url(../images/arrow_right.png) no-repeat 50% 50%;
	right: -10px;
}

Now we have styled the slideshow. Let’s move on to the JavaScript!

The JavaScript

We will be using the jmpress.js plugin to create our slideshow. Although you can make use of a lot of its functionality, we will just use the necessary parts to build our script. You can read more about the possibilities and options that jmpress.js offers here.

We will create a jQuery plugin for the slideshow. We can call the plugin like this:

$( '#jms-slider' ).jmslideshow();

The options for the jmpress plugin are defined as default options in our plugin (note that you can specify more than the ones listed):


jmpressOpts	: {
	// set the viewport
	viewPort 		: {
		height	: 400,
		width	: 1300,
		maxScale: 1
	},
	fullscreen		: false,
	hash			: { use : false },
	mouse			: { clickSelects : false },
	keyboard		: { use : false },
	animation		: { transitionDuration : '1s' }
},

You can either change them inside the slideshow plugin, or pass a specific value when you initialize the plugin. As an example:


// specify the jmpress options
var jmpressOpts	= {
	animation		: { transitionDuration : '0.8s' }
};

// call the jmslideshow plugin
$( '#jms-slideshow' ).jmslideshow( $.extend( true, { jmpressOpts : jmpressOpts }, {
	autoplay	: true,
	bgColorSpeed: '0.8s',
	arrows		: false
}));

The following are the set of available options that are available for the slideshow plugin:


$.JMSlideshow.defaults 		= {
	// options for the jmpress plugin.
	// you can add more options...
	jmpressOpts	: {
		// set the viewport
		viewPort 		: {
			height	: 400,
			width	: 1300,
			maxScale: 1
		},
		fullscreen		: false,
		hash			: { use : false },
		mouse			: { clickSelects : false },
		keyboard		: { use : false },
		animation		: { transitionDuration : '1s' }
	},
	// for this specific plugin we will have the following options:
	// shows/hides navigation arrows
	arrows		: true,
	// shows/hides navigation dots/pages
	dots		: true,
	// each step's bgcolor transition speed
	bgColorSpeed: '1s',
	// slideshow on / off
	autoplay	: false,
	// time between transitions for the slideshow
	interval	: 3500
};

Once the slideshow plugin is called, the first function to be executed is the init function:


_init : function( options ) {

	this.options 		= $.extend( true, {}, $.JMSlideshow.defaults, options );

	// the slides
	this.$slides		= $('#jms-slider').children('div');
	// total number of slides
	this.slidesCount	= this.$slides.length;
	// step's bgcolor
	this.colors			= $.map( this.$slides, function( el, i ) { return $( el ).data( 'color' ); } ).join( ' ' );
	// build the necessary structure to run jmpress
	this._layout();
	// initialize the jmpress plugin
	this._initImpress();
	// if support (function implemented in jmpress plugin)
	if( this.support ) {

		// load some events
		this._loadEvents();
		// if autoplay is true start the slideshow
		if( this.options.autoplay ) {

			this._startSlideshow();

		}

	}

},

In the _layout function we are building the necessary structure for the jmpress plugin. Also, we will be adding the navigation arrows / dots in case these are set to true in the options.


_layout				: function() {

	// adds a specific class to each one of the steps
	this.$slides.each( function( i ) {

		$(this).addClass( 'jmstep' + ( i + 1 ) );

	} );

	// wrap the slides. This wrapper will be the element on which we will call the jmpress plugin
	this.$jmsWrapper	= this.$slides.wrapAll( '<div class="jms-wrapper"/>' ).parent();

	// transition speed for the wrapper bgcolor
	this.$jmsWrapper.css( {
		'-webkit-transition-duration' 	: this.options.bgColorSpeed,
		'-moz-transition-duration' 		: this.options.bgColorSpeed,
		'-ms-transition-duration' 		: this.options.bgColorSpeed,
		'-o-transition-duration' 		: this.options.bgColorSpeed,
		'transition-duration' 			: this.options.bgColorSpeed
	} );

	// add navigation arrows
	if( this.options.arrows ) {

		this.$arrows	= $( '<nav class="jms-arrows"/>' );

		if( this.slidesCount > 1 ) {

			this.$arrowPrev	= $( '<span class="jms-arrows-prev"/>' ).appendTo( this.$arrows );
			this.$arrowNext	= $( '<span class="jms-arrows-next"/>' ).appendTo( this.$arrows );

		}

		this.$el.append( this.$arrows )

	}

	// add navigation dots
	if( this.options.dots ) {

		this.$dots		= $( '<nav class="jms-dots"/>' );

		for( var i = this.slidesCount + 1; --i; ) {

			this.$dots.append( ( i === this.slidesCount ) ? '<span class="jms-dots-current"/>' : '<span/>' );

		}

		if( this.options.jmpressOpts.start ) {

			this.$start		= this.$jmsWrapper.find( this.options.jmpressOpts.start ), idxSelected = 0;

			( this.$start.length ) ? idxSelected = this.$start.index() : this.options.jmpressOpts.start = null;

			this.$dots.children().removeClass( 'jms-dots-current' ).eq( idxSelected ).addClass( 'jms-dots-current' );

		}

		this.$el.append( this.$dots )

	}

},

We will initialize the jmpress plugin in the _initImpress function. We will also redefine the “setActive” method of jmpress in order to switch the active navigation dot.


_initImpress		: function() {

	var _self = this;

	this.$jmsWrapper.jmpress( this.options.jmpressOpts );
	// check if supported (function from jmpress.js):
	// it adds the class not-suported to the wrapper
	this.support	= !this.$jmsWrapper.hasClass( 'not-supported' );

	// if not supported remove unnecessary elements
	if( !this.support ) {

		if( this.$arrows ) {

			this.$arrows.remove();

		}

		if( this.$dots ) {

			this.$dots.remove();

		}

		return false;

	}

	// redefine the jmpress setActive method
	this.$jmsWrapper.jmpress( 'setActive', function( slide, eventData ) {

		// change the pagination dot active class
		if( _self.options.dots ) {

			// adds the current class to the current dot/page
			_self.$dots
				 .children()
				 .removeClass( 'jms-dots-current' )
				 .eq( slide.index() )
				 .addClass( 'jms-dots-current' );

		}

		// delete all current bg colors
		this.removeClass( _self.colors );
		// add bg color class
		this.addClass( slide.data( 'color' ) );

	} );

	// add step's bg color to the wrapper
	this.$jmsWrapper.addClass( this.$jmsWrapper.jmpress('active').data( 'color' ) );

},

The _startSlideshow and _stopSlideshow will start and stop the slideshow respectively if the option autoplay is set to true.


// start slideshow if autoplay is true
	_startSlideshow		: function() {

		var _self	= this;

		this.slideshow	= setTimeout( function() {

			_self.$jmsWrapper.jmpress( 'next' );

			if( _self.options.autoplay ) {

				_self._startSlideshow();

			}

		}, this.options.interval );

	},
	// stops the slideshow
	_stopSlideshow		: function() {

		if( this.options.autoplay ) {

			clearTimeout( this.slideshow );
			this.options.autoplay	= false;

		}

	},

Finally, we load the events for the navigation arrows and dots. The touchend event is already defined in the jmpress plugin, but we will need to stop the slideshow in case this event is triggered:


_loadEvents			: function() {

	var _self = this;

	// navigation arrows
	if( this.$arrowPrev && this.$arrowNext ) {

		this.$arrowPrev.on( 'click.jmslideshow', function( event ) {

			_self._stopSlideshow();

			_self.$jmsWrapper.jmpress( 'prev' );

			return false;

		} );

		this.$arrowNext.on( 'click.jmslideshow', function( event ) {

			_self._stopSlideshow();

			_self.$jmsWrapper.jmpress( 'next' );

			return false;

		} );

	}

	// navigation dots
	if( this.$dots ) {

		this.$dots.children().on( 'click.jmslideshow', function( event ) {

			_self._stopSlideshow();

			_self.$jmsWrapper.jmpress( 'goTo', '.jmstep' + ( $(this).index() + 1 ) );

			return false;

		} );

	}

	// the touchend event is already defined in the jmpress plugin.
	// we just need to make sure the slideshow stops if the event is triggered
	this.$jmsWrapper.on( 'touchend.jmslideshow', function() {

		_self._stopSlideshow();

	} );

}

And that’s it! I hope you enjoyed this tutorial and find it useful!

Tutorials

Apr 9, 2012

Mojo

Color and Emotion: What Does Each Hue Mean?

You have probably heard people refer to warm and cool colors when making choices about how to paint a room or what shade of makeup a woman selects. But did you know that color can mean so much more than that?

The colors you use on your website can elicit different emotional reactions from people. Years of research has proven that each color has associations with certain feelings and can create a mood. Understanding color choices and implied perceptions can help you create a more effective design without unintended color miscues.

Warm and cool colors

Warm and cool hues refer to the feeling a color scheme implies. Warm colors include reds, yellows and oranges and are often used to paint the walls of living spaces in homes and used as accents to pop out neutral shades. Cool colors, such as blues, greens and purples, are popular choices for bedrooms and more relaxed home spaces because of their versatility. In the same way these colors are used to create certain feelings in a room, they can be used to elicit emotion for your website.

Warm colors are inviting, happy and cozy. These colors can make spaces appear smaller because warm tones seem to advance, creating a cozy feel. Warm colors can create an active response in the brain and bring feelings of excitement, passion and sometimes aggression. In extremely large spaces, an abundance of warm color can get overwhelming and is best matched with neutral tones.

Cool color choices, considered calming and soothing, are somewhat recessive and can make spaces feel a little more open than they are. Some argue that a cool color scheme can make a physical space actually feel cooler than it is and should be matched with open spaces (such as white space or neutrals on your website). Cool hues bring about a more passive reaction in the brain and can make a person feel pleased, relaxed or even subdued.

Red

Red, one of three primary hues, is one of the most powerful and emotion-evoking colors. Reds can feel sweet and innocent when mixed with white to create pink tones or bring about sharp responses when used in the pure form. With the addition of black, reds can create a darker emotional response, such as anger or convey passion.

While reds can be used as the primary color behind your design, the hue is often best as an accent with other colors or used in more subdued ways. Know what kind of response reds can draw – passion, stimulation, excitement, power and growth – and use that to your advantage when considering the color.

Quick color associations: Light red for joy and love; dark red for rage and anger, but also leadership and courage; pink for romance and feminine qualities; and rusty reds for fall and change.

Green

Green, another primary color, is one of the most calming and neutral of shades. Green represents balance and harmony and is often used to depict nature and hope. Lighter shades of green (with a bit of yellow) are a bit more cheery and light and can even have some warm associations. Darker greens represent stability, safety and affluence – think money; American bills are dark green in color. With the addition of blue, greens become more teal and take on cooler tones.

Greens work in many situations, as base colors and accents. This hue is one of the most pleasing to the eye. Be aware of sometimes unintended emotional consequences associated with greens, such as inexperience or sickness.

Quick color associations: Yellow-greens for sickness and discord; dark green for ambition and prosperity; teal for emotional health and stability; and olive green for peace and harmony.

Blue

Blues are the hues of serenity, peace and security. The last of the three primary colors that create the RGB color base we use for digital design is used in a variety of design combinations. Blue, because it also creates a sense of calm and friendliness, is the primary color used by popular social networking sites Facebook and Twitter.

Blue works well as both a background and accent color and is a shade that most people can relate to, although it can have masculine properties. Darker blues are also text friendly. Darker hues are often used in the color schemes of corporate websites, while lighter hues are more commonly showcased in lighter applications. Blue, which has associations with water and the sky, can also help add a natural feel to your site. In contrast, blues are seldom used in combination with food or in food packaging because some studies have shown that the calming effect from the color can actually suppress a person’s appetite.

Quick color associations: Light blue for heath, depth, stability and faith; dark blue for knowledge, power, trust and integrity.

Purple

Purple mixes some of the warm and cool, and passionate and tranquil qualities of red and blue. Purple has long represented royalty, power and wealth. Purples also promote a sense of creativity and imagination, because the color is not dominant in nature.

Purples can have a variety of practical uses. Lighter shades, which are soft and feminine, can create a light or romantic mood. Darker shades have a heavier, moodier feel and can sometimes cause a sense of instability or uneasiness.

Quick color associations: Light purple for softness, nostalgia and romance; dark purple for moodiness, including unease, gloom or frustration or the much different sense of power and control.

Yellow

Yellow is simply happy. It has long been associated with energy and encouragement. The hue is stimulating and makes everything feel light and sunny. On the flip side, yellow is also associated with caution.

Yellow is a great highlight or accent color but can be difficult to use in broad-based design. Pair and match yellow with contrasting colors to ensure that your message is clear. Yellow easily “washes out” and can lose luster when used in lighter forms.

Quick color associations: Light yellow for caution and trepidation; dark yellow for happiness, joy and freshness.

Orange

Orange is the harmonic marriage between red and yellow. It combines the passion and energy from the primary color with the sunniness and freshness of yellow. Orange hues tend to be balanced, energetic and inviting.

But this hue can be tough to make work. Oranges are great for splashes of color and accents but can almost cause a too-busy effect when used as a dominant color. Use orange to represent movement but be wary of the colors’ ability to overpower other design elements.

Quick color associations: Yellow-orange or gold for prestige and wisdom; red-orange for pleasure, energy, health and desire; and dark orange for change or distrust.

Neutrals and browns

Neutrals and browns are the epitome of nature and are used abundantly in design (so much so that many natural tones may go unnoticed). Brown and neutral tones can represent anything from peace and calm to wholesomeness and reliability or even boredom.

Browns work in a variety of functions – for backgrounds, accents and as a text color. The hues blend with almost every other shade to create a pleasing effect.

Quick color associations: Pale browns for calm, purity and elegance; medium to tan for dullness or conservation; and darker browns for stability, comfort and experience.

White and black

White and black are the purest forms of color (or lack thereof). Each represents simplicity and formality. It is almost impossible to create anything without the addition of white or black.

White is often associated with purity, cleanliness and perfection. Black is the color of power, elegance and mystery. It can also be associated with fear and unknowing. Each of the colors can have a stark look when used without accentuation. The combination of black and white, gray, can be calming and dull.

Quick color associations: White for clarity, cleanliness and openness; black for power, elegance and mystery; and gray for calm and conservative.

Color Wheel image by Team Dalog.

Tutorials

Apr 9, 2012

Mojo

Responsive Horizontal Layout

Today we want to show you how to create a horizontal layout with several content panels. The idea is to make each panel individually scrollable and animate a content panel to the left of the viewport once it’s clicked or selected from the menu. The challenge is to deal with different viewport sizes meaning that we will change the layout if the screen is not wide enough in order to be stacked vertically instead of horizontally.

We will be using a couple of useful jQuery plugins:

In the demo we are using Charles Darwin’s The Origin of Species by means of Natural Selection, 6th Edition which you can find as an e-book on Project Gutenberg.

The Markup

The HTML will be built up of a menu that will be fixed at the left side and a container with all the individual panels inside. All will be wrapped by a main container:

<div id="hs-container" class="hs-container">

	<!-- ... -->

</div>

The menu will have the following structure:

<aside class="hs-menu" id="hs-menu">

	<div class="hs-headline">
		<h1>
			<small>The</small>
			Origin <small>of</small>
			Species
		</h1>
		<small>6<sup>th</sup> Edition</small>
		<span class="author">by Charles Darwin</span>
	</div>

	<nav>
		<a href="#introduction">
			<span>Introduction</span>
		</a>
		<a href="#chapter1">
			<span>Chapter I.</span>
			<span>Variation under Domestication</span>
		</a>
		<a href="#chapter2">
			<span>Chapter II.</span>
			<span>Variation Under Nature </span>
		</a>
		<!-- ... -->
	</nav>

</aside>

<a href="#hs-menu" class="hs-totop-link">Go to the top</a>

We’ll have a headline and a navigation. We’ve also added a loose helper link that we’ll need to show for smaller screens where we will stack the content vertically.

The content will have the following structure:

<div class="hs-content-scroller">

	<div class="hs-content-wrapper">

		<article class="hs-content" id="introduction">
			<div class="hs-inner">
				<h2>Introduction</h2>
				<p>...</p>
			</div>
		</article>

		<article class="hs-content" id="chapter1">
			<div class="hs-inner">
				<h2>Chapter I.</h2>
				<h3>Variation Under Domestication</h3>
				<h4>Causes of Variability</h4>
				<p>...</p>
			</div>
		</article>

		<!-- ... -->

	</div>

</div>

The first wrapper with the class hs-content-scroller will act like a mask, having the width and height that is visible in the viewport. This will be the division that we’ll scroll horizontally because the second wrapper with the class hs-content-wrapper will be as wide as the sum of all article widths.

As you can see, each article will get an ID which we link to in our navigation.

Let’s style this thing.

The CSS

So, our main aim is to fix the sidebar at the left side of the screen and place the content as a horizontal stack.
Let’s first style the body and some headings. We’ll set both, overflow-x and overflow-y to hidden. We use the separate properties instead of the single “overflow” because we want to adjust something in a media query later, but we’ll get back to that.

We’ll first import the normalize.css, a really nice and sensible alternative to the common resets:

@import url('normalize.css');

body{
	font-family: Baskerville, "Hoefler Text", Garamond, "Times New Roman", serif;
	background: #e9f0f5 url(../images/pattern.png) repeat top left;
	font-weight: 400;
	font-size: 12px;
	color: #333;
	overflow-y: hidden;
	overflow-x: hidden;
}

Next, let’s define some general text styles:

h1, h3, h4{
	font-weight: 400;
}
h1{
	font-style: italic;
	border-bottom: 1px solid rgba(126, 126, 126, 0.3);
	padding: 35px 15px 15px 15px;
	margin: 0px 20px 20px 20px;
	position: relative;
	font-size: 38px;
}
h2{
	font-size: 40px;
	padding-bottom: 15px;
	border-bottom: 5px solid rgba(190, 211, 226, 0.2);
	color: #a9becd;
	text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.4);
	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
	font-weight: 700;
}
h3{
	font-style: italic;
	font-size: 26px;
	color: #585959;
	text-shadow: 1px 0px 1px rgba(255, 255, 255, 0.4);
}
h4{
	text-transform: uppercase;
	letter-spacing: 5px;
	line-height: 20px;
	padding: 10px 0px;
	color: #626a6f;
	border-bottom: 1px solid rgba(126, 126, 126, 0.1);
	box-shadow: 0px 1px 0px 0px rgba(255, 255, 255, 0.4);
}
a{
	color: #308fd9;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 2px;
}
a:hover{
	color: #87b6da;
}
.hs-headline{
	text-align: center;
}
.hs-author{
	text-transform: uppercase;
	display: block;
	letter-spacing: 2px;
	font-weight: 700;
	padding: 20px 10px;
}

Now, let’s position the menu:

.hs-menu{
	position: fixed;
	z-index: 100;
	color: #f8f8f8;
	background: #131313;
	width: 200px;
	left: 0px;
	top: 0px;
	height: 100%;
}

Setting its position to fixed, we’ll stick the sidebar to the left side of the screen.
The navigation will have the following style:

.hs-menu nav{
	position: absolute;
	top: 250px;
	left: 0px;
	right: 0px;
	bottom: 50px;
}

The position of the navigation will be absolute and by setting a top and bottom value, we have a flexible height. Later, we will add custom scrolling to the navigation so that we don’t have to worry about the menu items fitting into the area.

The anchors will have the following style:

.hs-menu nav a{
	display: block;
	padding: 10px 20px;
	text-align: center;
	outline: none;
	border-bottom: 1px dashed rgba(126, 126, 126, 0.2);
}
.hs-menu nav a:active{
	box-shadow: 7px 0px 17px #000 inset;
}
.hs-menu nav a:first-child{
	border-top: 1px dashed rgba(126, 126, 126, 0.2);
}

The second span in a navigation anchor will be styled differently:

.hs-menu nav a span:nth-child(2){
	display: block;
	color: #fff;
	font-style: italic;
	font-weight: 400;
	text-transform: none;
	padding-top: 3px;
}

Now, let’s style the content part. As mentioned before, the division with the class .hs-content-scroller will be acting as a mask where any overflow won’t be visible. This is basically the same principle as in sliders. The left will be set to 200 pixel because of the sidebar:

.hs-content-scroller{
	position: absolute;
	left: 200px;
	right: 0px;
	overflow: hidden;
	height: 100%;
}

The next wrapper will have a width which allows all the inner content panels to fit inside of it if stacked horizontally. We’ll set the overflow to hidden, because each of our content panels will have a custom scroll bar.

.hs-content-wrapper{
	width: 7950px;
	position: absolute;
	height: 100%;
	overflow: hidden;
}

Each content panel is going to have a width of 500 pixel and float left. We’ll add a transition for the background when we hover and when we add a active class:

.hs-content{
	width: 500px;
	overflow-y: scroll;
	height: 100%;
	float: left;
	border-right: 1px dashed rgba(126, 126, 126, 0.2);
	border-left: 1px dashed rgba(255, 255, 255, 0.5);
	background: transparent;
	transition: background 0.3s linear;
}
.hs-content:hover, .hs-content-active{
	background: #f1f5f8;
}

When we add the custom scrolling to the content panels, we only want them to be visible when we hover over them:

.hs-content:hover .jspVerticalBar,
.hs-menu nav:hover .jspVerticalBar{
	opacity: 1;
}

The first content panel will be a bit narrower:

.hs-content:first-child{
	width: 400px;
}

Let’s add some padding and style the text elements:

.hs-inner{
	padding: 30px 20px 10px 30px;
}
.hs-inner p{
	font-size: 18px;
	line-height: 24px;
	text-align: justify;
	position: relative;
	padding: 10px 0px;
	text-shadow: 1px 0px 1px rgba(255, 255, 255, 0.8);
}
.hs-inner p:first-letter{
	font-size: 28px;
}
#introduction .hs-inner p:first-of-type{
	font-size: 24px;
	text-align: left;
	line-height: 36px;
	font-style: italic;
	color: #75838D;
	letter-spacing: 0px;
}

Remember that little anchor right after the sidebar? When clicking that anchor, the page will scroll up. We’ll only need this anchor when our screen is not big enough to stack the content panels horizontally but only vertically, so we’ll set it to display: none initially. In a media query we’ll then show it.

a.hs-totop-link{
	display: none;
	position: fixed;
	z-index: 10000;
	bottom: 0px;
	width: 100%;
	height: 40px;
	line-height: 40px;
	font-size: 14px;
	color: #aaa;
	text-shadow: 1px 1px 1px #fff;
	font-weight: 700;
	cursor: pointer;
	text-transform: uppercase;
	text-align: center;
	background: linear-gradient(top, #ffffff 0%,#f3f3f3 50%,#ededed 51%,#ffffff 100%);
	border-top: 1px solid #cacaca;
}

When we reach the size of the iPad, we want to get rid of the hover behavior and show the horizontal scrollbar. This will allow us to “swipe” the content on the iPad:

/* Media Queries */
@media screen and (max-width: 1024px) {
	.jspVerticalBar{
		opacity: 1;
	}
	.hs-content-scroller{
		overflow-x: scroll;
	}
	.hs-content:hover{
		background: transparent;
	}
	.hs-content-active:hover {
		background: #f1f5f8;
	}
}

At this point, we’ll change the layout in order to be stacked vertically. We have to “reset” all the properties that forced the content to be stacked horizontally. We’ll also show the anchor that will bring us back to the top:

@media screen and (max-width: 715px) {
	body{
		overflow-x: auto;
		overflow-y: auto;
	}
	a.hs-totop-link{
		display: block;
	}
	.hs-menu{
		position: relative;
		width: 100%;
		height: 460px;
	}
	.hs-menu nav{
		top: 230px;
		bottom: 20px;
	}
	.hs-content-scroller{
		position: relative;
		height: auto;
		left: 0;
	}
	.hs-content-wrapper{
		height: auto;
		width: auto;
		margin-left: 0px;
	}
	.hs-content{
		border: none;
	}
	.hs-content, .hs-content:first-child{
		width: auto;
		float: none;
		overflow-y: auto;
	}
}

And that’s all the style! Now, let’s take a look at the JavaScript!

The JavaScript

First, we will set some variables and cache some elements:


var $container			= $( '#hs-container' ),
	// the scroll container that wraps the articles
	$scroller			= $container.find( 'div.hs-content-scroller' ),
	$menu				= $container.find( 'aside' ),
	// menu links
	$links				= $menu.find( 'nav > a' ),
	$articles			= $container.find( 'div.hs-content-wrapper > article' ),
	// button to scroll to the top of the page
	// only shown when screen size < 715
	$toTop				= $container.find( 'a.hs-totop-link' ),
	// the browser nhistory object
	History 			= window.History,
	// animation options
	animation			= { speed : 800, easing : 'easeInOutExpo' },
	// jScrollPane options
	scrollOptions		= { verticalGutter : 0, hideFocus : true },

The init function will be the first one to execute:


init				= function() {

	// initialize the jScrollPane on both the menu and articles
	_initCustomScroll();
	// initialize some events
	_initEvents();
	// sets some css properties
	_layout();
	// jumps to the respective chapter
	// according to the url
	_goto();

},

The first step is to create / initialize the jScrollPane (the custom scrollbars) on both the menu and the articles. However, for the articles, we will not do this in case the screen size is smaller than 715px:


_initCustomScroll	= function() {

	// Only add custom scrolling to articles if screen size > 715.
	// If not, the articles will be expanded (vertical layout)
	if( $(window).width() > 715 ) {

		$articles.jScrollPane( scrollOptions );

	}
	// add custom scrolling to menu
	$menu.children( 'nav' ).jScrollPane( scrollOptions );

},

We will load the events for the window, the menu links and the articles.

On window resize, we will need to reinitialize the jScrollPane custom scrollbars, or destroy them in case the screen's size gets smaller than 715px.

On window statechange, we will jump to the respective state / chapter. We are using History.js by Benjamin Lupton to control the history states when the user navigates through the page:


$(window).on({
	// when resizing the window we need to reinitialize or destroy the jScrollPanes
	// depending on the screen size
	'smartresize' : function( event ) {

		_layout();

		$('article.hs-content').each( function() {

			var $article 	= $(this),
				aJSP		= $article.data( 'jsp' );

			if( $(window).width() > 715 ) {

				( aJSP === undefined ) ? $article.jScrollPane( scrollOptions ) : aJSP.reinitialise();

				_initArticleEvents();

			}
			else {

				// destroy article's custom scroll if screen size <= 715px
				if( aJSP !== undefined )
					aJSP.destroy();

				$container.off( 'click', 'article.hs-content' );

			}

		});

		var nJSP = $menu.children( 'nav' ).data( 'jsp' );
		nJSP.reinitialise();

		// jumps to the current chapter
		_goto();

	},
	// triggered when the history state changes - jumps to the respective chapter
	'statechange' : function( event ) {

		_goto();

	}
});

When we click on an article or menu link, we will check to which chapter it refers to, and we will change the state of the browser history object. This will trigger the statechange event which in turn will make the page / scrolling division jump to the respective area.


$links.on( 'click', function( event ) {

	var href		= $(this).attr('href'),
		chapter		= ( href.search(/chapter/) !== -1 ) ? href.substring(8) : 0;

	_saveState( chapter );

	return false;

});

$container.on( 'click', 'article.hs-content', function( event ) {

	var id			= $(this).attr('id'),
		chapter		= ( id.search(/chapter/) !== -1 ) ? id.substring(7) : 0;

	_saveState( chapter );

	return false;

});

_saveState			= function( chapter ) {

	// adds a new state to the history object
	// this will trigger the statechange on the window
	if( History.getState().url.queryStringToJSON().chapter !== chapter ) {

		History.pushState( null, null, '?chapter=' + chapter );

	}

},

We will also control the overflow property of the "scroller" (divison with class "hs-content-scroller") according to the screen size.


_layout				= function() {

	var windowWidth	= $(window).width();
	switch( true ) {

		case ( windowWidth <= 715 ) : $scroller.scrollLeft( 0 ).css( 'overflow', 'visible' ); break;
		case ( windowWidth <= 1024 ): $scroller.css( 'overflow-x', 'scroll' ); break;
		case ( windowWidth > 1024 ) : $scroller.css( 'overflow', 'hidden' ); break;

	};

},

The _goto function triggers the animation for changing the area / chapter on the page. We get the current chapter from the history state URL, and given the respective article we either scroll to the left or top depending on the screen size. Also, if we are in landscape mode, the element scrolling is the div "hs-content-scroller", otherwise it's the BODY element.


_goto				= function( chapter ) {

	// get the url from history state (e.g. chapter=3) and extract the chapter number
var chapter 	= chapter || History.getState().url.queryStringToJSON().chapter,
	isHome		= ( chapter === undefined ),
	// we will jump to the introduction chapter if theres no chapter
	$article 	= $( chapter ? '#' + 'chapter' + chapter : '#' + 'introduction' );

	if( $article.length ) {

			// left / top of the element
		var left		= $article.position().left,
			top			= $article.position().top,
			// check if we are scrolling down or left
			// is_v will be true when the screen size < 715
			is_v		= ( $(document).height() - $(window).height() > 0 ),
			// animation parameters:
			// if vertically scrolling then the body will animate the scrollTop,
			// otherwise the scroller (div.hs-content-scroller) will animate the scrollLeft
			param		= ( is_v ) ? { scrollTop : (isHome) ? top : top + $menu.outerHeight( true ) } : { scrollLeft : left },
			$elScroller	= ( is_v ) ? $( 'html, body' ) : $scroller;

		$elScroller.stop().animate( param, animation.speed, animation.easing, function() {

			// active class for selected chapter
			$articles.removeClass( 'hs-content-active' );
			$article.addClass( 'hs-content-active' );

		} );

	}

},

And that's it! I hope you enjoyed this tutorial and find it useful!