Off-Canvas Menu with jQuery

offcanvas

In an age of modern websites built to resemble native smartphone applications, the rise of the off-canvas menu popularly has become hard to ignore. Although I must say, I don’t think they are effective when viewed/used on a desktop widescreen, I do see their clear advantage on a mobile handset where every space counts.

Here’s my version of an off-canvas menu with simple jQuery.

See the Pen Off Canvas Menu by Richard (@barkins) on CodePen.

HTML

I wanted to make this as modular as possible, therefore you’ll be able to grab only the off-canvas menu code and retrofit it onto your website right away without having to reinvent the wheel.

The Menu

<div id="off-canvas">
   <nav>
     <a href="#">Menu Item 1</a>
     <a href="#">Menu Item 2</a>
     <a href="#">Menu Item 3</a>
     <a href="#">Menu Item 4</a>
     <a href="#">Menu Item 5</a>  
   </nav>
</div><!--/off-canvas-->

Trigger

We’ll need a trigger for the menu and in this case I utilized a button giving an ID of “trigger” which will reveal and hide the menu for us.

<header class="header">
  <h1>Simple Off-Canvas Menu with jQuery</h1>  
  <button id="trigger"><i class="fa fa-bars"></i></button>
</header><!--/header-->

For the sake of the example, here’s the rest of the HTML code to give you some perspective on how an off-canvas menu would look and function like within a “real” website.

<section>
   <article>     
     <p>Lorem ipsum ...</p>
  </article>
</section>

CSS

Box-sizing

Before we focus on the CSS, I just want to mention that I’m using the box-sizing method for styling the site. Learn more about box-sizing here.

Here’s the box-sizing code I’m using:

*, *:before, *:after {
  -webkit-box-sizing: border-box; 
  -moz-box-sizing: border-box; 
  box-sizing: border-box;
}

Styling the Menu

As always you are free to style the layout anyway you choose, but the item you should pay close attention to is the actual menu. Here’s just the CSS for the menu.

#off-canvas{
  width:250px;
  height:100%;
  top:0;
  left:-250px;
  padding:25px;
  background:#a6032f;
  position:fixed; 
  z-index:5;
}

One thing to note, you’ll need to set the position to fixed and match the left property to the width of the menu.This way when you hide and reveal the menu it will hide the entire width of the menu.

Menu Trigger

The trigger can live anywhere on your website, as long as it’s outside of the menu so you can hit it whether the menu is revealed or hidden.

Here’s the styling I used, but you can choose to modify it anyway you wish.

#trigger{
  background:#a6032f;
  color:#FFF;
  padding:10px 15px;
  border:0;
  border-radius:5px;
  line-height:auto;
  font-size:1rem;
  margin:10px 0 0;
  text-transform:uppercase;
  cursor:pointer;
  position:absolute;
  top: 15px;
  right:25px;
  box-shadow:1px 1px 0px #000;
}

jQuery

Now onto the fun part, adding in the functionality for the menu.

Start by creating a variable we’re going to use in the functionality and set it to false.

var x = false;

I took advantage of an if else statement to help determine whether the menu should be revealed or hidden.

$('#trigger').on('click', function(){
  if(!x) {
    $('#off-canvas').animate({left:"0"},200);
    x = true;
  }else{
    $('#off-canvas').animate({left:"-250px"},200);
    x = false;
  } 
});

To review this code, whenever someone taps on the trigger, the functionality will check to see if x is set to false, if so, it will animate the left property and set it to 0. At the same time, it will change the variable x to true.

Now whenever someone taps on the trigger again, the functionality will see that x is now true and jump to the else statement and animate the left property to -250px in effect hiding the menu. Lastly, it will set the x variable back to false.

Wrap Up

The basic concept here is with the help of jQuery we are able to hide, or in other words, position the menu off the canvas and toggle it with a trigger.

Filed under: jQuery

Sass Jump Start for CSS Beginners

140H

Sass is an extremely easy to learn method of coding CSS that can increase your website production time by as much as 30 to 40 percent (purely unscientific).

Before I demonstrate any code, you must first be aware that no internet browser can read Sass natively. Therefore, you will need a compiling method to convert any Sass into traditional CSS. You have two paths you can take in this regard. Either work within a the Terminal ala command line, or my preferred method, working with an application.

My go-to application is CodeKit (Mac only). It’s relatively cheap ($29) and extremely powerful in helping me create modern and efficient websites. Check out these videos to bring you up to speed with this front-end web developer tool.

Prepros is another great compiler and works on Windows, Mac and Linux.

To recap, browsers don’t read Sass code, you’ll need to convert it to CSS with either command line (Terminal) or application (CodeKit).

In the meantime, for the sake of quickly diving into Sass, you can go ahead and use CodePen right away to learn how to code with Sass. After creating a new “pen” click on the gear icon (in the CSS box) and select “Sass (.scss)” and you’re good to go!

scss

Nesting

Nesting is a great way to cut down on repeating yourself when coding a stylesheet. Here’s an example of the same style coded with CSS and Sass.

CSS Method

.container {
   max-width:960px;
   margin:50px auto;
}

.container a{
   color:red;
}

.container a:hover {
   color:blue;
}

Sass Method

.container {
   max-width:960px;
   margin:50px auto;
   a {
     color:red;
     &:hover {
        color:blue;
     }
   }
}

As you can see, no need to keep retyping “.container” over and over again to select child elements. Cool, right? Now, picture doing this with various sections on your web page. Huge time saver!

Variables

Creating and working with variables in programming is essential and now its power can be utilized with CSS as well, via Sass. By assigning styles to variables you can quickly update things like colors throughout your entire stylesheet just by changing one value.

CSS Method

.container {
   border:1px solid #cc3300;
}

.container a {
   color: #cc3300;
}

As you can see, we’re repeating the same color value of “#cc3300” and that just goes against the DRY rule, Don’t Repeat Yourself.

Sass Method

$orange: #cc3300;

.container {
   border:1px solid $orange;
   a {
      color: $orange;
   }
}

If in the future should you want to change the orange color, simply update the value for the variable, “$orange” for instance replace “#cc3300” with “#ff6836” and it will update the color anywhere you have “$orange” referenced in your stylesheet.

Mixins

I like to think of Mixins as Functions from programming. For instance, instead of having to continuously type out browser prefixes (-webkit-, -moz-, -ms-) for lets say a “border-radius” you can create a simple Mixin.

Setting up a Mixin

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

Utilizing the Mixin

Now that you have a Mixin for “border-radius” created, here’s how you initlize it.

.container { 
   @include border-radius(10px); 
}

In short, instead of having to rewrite every browser prefix throughout your code whenever you want to use a border-radius, simply take advantage of a mixin and save time!

Import

It’s not a good idea to use “@import…” to include additional stylesheets in your main stylesheet because whenever a page loads in a browser, it has to send out multiple HTTP requests which adds to the load time of your website.

Sass has a fantastic feature that lets you have the convenience of import, yet without the draw back of additional load times.

Say for instance you have a “main.scss” document and a “reset.scss” document. Instead of converting each of them into “main.css” and “reset.css” you should import or in other words, merge them into one document. Here’s how it’s done with Sass.

At the top of page in main.scss” include the following:

@import 'reset';

And that’s it. Once “main.scss” runs through a compiler such as CodeKit, it will prepend “reset.scss” to the top of “main.scss” and output a merged file called “main.css” that includes both documents.

This is a really quick and easy way to manage multiple stylesheets in your web project.

Wrap Up

I hope this gave you enough confidence to dive deeper into Sass and start building all of your future websites with Sass.

Learn more on the Sass website and check out this very handy list of pre-built Sass mixins.

Filed under: Sass

Front-end Web Development Tools, Resources

ducks

As website development advances with new best practice techniques, the need for helpful tools and resources to assist with your production cycle has arisen.

These resources not only help you build better and more compatible websites, but also save you time with testing and troubleshooting.

Here’s a list of my go-to tools and resources, in no particular order.

Tools

Modernizr

Taking advantage of cool new web technologies is great fun, until you have to support browsers that lag behind. Modernizr makes it easy for you to write conditional JavaScript and CSS to handle each situation, whether a browser supports a feature or not. It’s perfect for doing progressive enhancement easily.


Normalize

Normalize.css makes browsers render all elements more consistently and in line with modern standards. It precisely targets only the styles that need normalizing.


BrowserStack

Instant access to all desktop and mobile browsers. Say goodbye to your setup of virtual machines and devices.


Sass: Syntactically Awesome Style Sheets

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.


Sublime Text

Sublime Text is a sophisticated text editor for code, markup and prose. You’ll love the slick user interface, extraordinary features and amazing performance.


Bitbucket

Host, manage, and share Git and Mercurial repositories in the cloud. Free, unlimited private repositories for up to 5 developers give teams the flexibility to grow and code without restrictions.

Resources

HTML5 Boilerplate

HTML5 Boilerplate helps you build fast, robust, and adaptable web apps or sites. Kick-start your project with the combined knowledge and effort of 100s of developers, all in one little package.


Google Fonts

Google Fonts makes it quick and easy for everyone to use web fonts, including professional designers and developers.


Font Awesome

Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS.


365psd

download a free psd every day


CodePen

CodePen is a playground for the front end side of the web. It’s all about inspiration, education, and sharing.


960 Grid System

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.


Foundation

The most advanced responsive front-end framework in the world.

Filed under: General Musing

Getting Started with Flexbox

Flexbox is looking to be the likely successor to CSS floating containers. It has powerful, intuitive features and finally being adopted by every major browser.

Example of Flexbox in Action

See the Pen Fun with Flexbox by Richard (@barkins) on CodePen.


Here’s a quick three step guide to getting started with Flexbox.

Step 1

Starting with the parent container, include the following styles.

.container {
  background:lightBlue;
  max-width:960px;
}

Then drop in some child elements into the container and include a height.

.content {
  height:50px;
  background:blue;
  margin:25px;
  color:#FFF;
  padding:15px;
}

Here’s what we have so far, without Flexbox styling yet.

noflexbox

Step 2

Now, just add display: flex; inside the container styling and watch happens automatically.

.container {
  background:lightBlue;
  max-width:960px;

  /*FLEXBOX*/
  display:flex;
}

withflexbox

Step 3

Changing the Order

The first cool thing we can do with Flexbox is change the order of the child containers. Just add the following property to the parent container.

/* ORDER */
flex-direction:row-reverse;

flexboxorder

What if we want to specifically target one child container and change its order? It’s as easy targeting and including the following CSS property. This way you can have complete control in which order the child containers appear in.

.content:nth-child(1) {
  order:4;
}

.content:nth-child(4) {
  order:2;
}

.content:nth-child(3) {
  order:3;
}

.content:nth-child(2) {
  order:1;
}

flexboxoneitemorder

Flex Grow

As cool as the boxes look all shifted to the right, lets evenly distribute them across the row. As you resize the container, the boxes will responsively resize.

Include the following CSS property in the child container class.

flex-grow:1

flexboxgrow

Flex Wrap

You might be asking yourself, what happens in a responsive situation? By default, the child containers will automatically resizes themselves on the same row getting very narrow instead of dropping down to the next row. Here’s how we change that.

Add the following CSS property to the parent container in order for the child containers to drop down automatically to the next row as parent container gets smaller.

flex-wrap: wrap;

flexboxwrap

To get an even deeper look into how Flexbox works, check out this complete guide on CSS-Tricks.

Filed under: CSS3, HTML5

HTML5 Forms Reference Guide

Thanks to HTML5, forms are becoming less of a headache to construct than ever before. Browser support has never been better, especially on smartphones and tablets, making this a great time to get back to basics with constructing your own forms.

The beauty of taking advantage of new input types is that if someone’s on an antiquated browser (any version of IE–kidding of course), then the input field will default back to type=”text”.

These new input types are especially useful on mobile devices, by informing the mobile OS to serve up the most appropriate keyboard for the task whenever someone taps on a field asking for a telephone, email or web address.

Here’s a reference of all the fields I’m going to cover.

See the Pen HTML5 Form by Richard (@barkins) on CodePen.

Search

A couple of new attributes in HTML5 input tags are the placeholder and spellcheck attributes. In the past, placeholder text was accomplished with JavaScript, but now its functionality is built right it. It’s basically sample text inside the input field hinting to the user what they should do with the field. As soon as the user starts typing, the copy disappears. Additionally, in this example I set spellcheck to false indicating that the browser should not spell check whatever the user enters. May not be all that useful, but it’s nice to know we have the option.

<input type="search" id="search" placeholder="search something" spellcheck="false">

Email, URL, Telephone

If you have ever constructed a database driven website, you’ll know how frustrating it is whenever someone enters information into the database inconsistently. These new input types help in producing more consistent results from user submitted information.

Not only are you able to easily set the input field to required just by adding the word, required, but as an email type, the field will automatically check to see if the user entered the email account correctly.

<input type="email" id="email" placeholder="enter your email" required>
<input type="url" id="url" placeholder="enter your website address">
<input type="tel" id="tel" placeholder="enter your phone number">

Datalist

Screen Shot 2014-09-29 at 2.44.14 PM

In effort to make forms less cumbersome to the user, you’re able to now add a list of possible values a user may enter, expediting the process of filling out a form. In the following example, I created a list of colors a user may enter. As they type their favorite color, a suggestion of possible options appear.

Here’s how to construct a list of suggestions.

  <datalist id="colors">
    <option>red</option>
    <option>green</option>
    <option>blue</option>
    <option>yellow</option>
    <option>orange</option>
  </datalist>

And here’s the input field referencing the list of options.

<input type="text" id="datalist" list="colors" placeholder="Your favorite color">

Range

The range input is also very useful in cases when you want to store consistent and specific information in the database without running into a risk of a user entering something by mistake.

<input type="range" id="range" max="100" min="0" value="10" step="10">

Date

Screen Shot 2014-09-29 at 2.45.03 PM

This is a cool feature built into modern browsers. Yet another example of something that use to be time consuming constructing with JavaScript, a calendar picker, no scripting at all.

<input type="date" id="date">

Color

Screen Shot 2014-09-29 at 2.45.46 PM

The color picker, just like the calendar picker is also very useful, but alas from my experience doesn’t have the same support on smartphones that it does on the desktop.

Wrapping it Up

And just like that, with no JavaScript you’re able to create a fast, user friendly forms. Just keep in mind however, this isn’t supported on older browsers, therefore if you think you’re going to receive a lot of visitors on older browsers, be careful with input fields that require precise information to be entered. You may need to resort to JavaScript solutions as a precaution.

Filed under: HTML5