Code Archives - Untame

Nov 20 2012
0

Responsive Web Design: Videos With FitVids

Posted by | Tutorial | No Comments

We have spent a lot of time covering ideas behind responsive web design. However, up until this point we have focused almost solely on the “Big Picture”. So today, let’s take some time and dive into an element that is essential when it comes to designing responsively. Video!

After all, it would be easy to say that people love watching videos online, so it only makes sense that we should design responsibly to meet our users where they are, on the devices they are using. So with that in mind, let’s take a look at FitVids.js by Chris Coyier and Paravel.

FitVids is a light weight responsive web design jQuery plugin that allows designers to not only design responsively for small screens, but also for large environments as well. It could make sense that using a tool like FitVids could allow you to embed several blog format videos into a page, and also create awesome full screen video backgrounds! Cool huh?!

If you would like to use FitVids within your own projects, it would be a good idea to check out the video above and follow along. However, if you are in a hurry then simply follow these steps.

Step 1: Download FitVids.js

Step 2: Include the plugin within your javascript (See Video for Example)

Step 3: Activate FitVids


<script>
  $(document).ready(function(){
    // Target your .container, .wrapper, .post, etc.
    $("#thing-with-videos").fitVids();
  });
</script>

That’s it! Now you are up and running with FitVids and Videos placed within collapsing containers will bend to your will. So play around with it; I promise that you will find it capable of solving your problems and perhaps even providing a bit of inspiration! Just think of what you can create with a tool like FitVids in your pocket. So get back to designing your next cool site!

Oct 17 2012
4

Twitter Bootstrap Part 3: Design a Responsive Contact Page

Posted by | Design, Tutorial, Twitter Bootstrap | 4 Comments

Twitter Bootstrap is a cutting-edge front end framework designed to make the lives of developers and designers a little easier, as it provides a semantic and responsive starting point for real world projects. Today we are going to take a bit of time to focus on a very real world project, the always important contact page. Contact pages should be simple and easy for a visitor to understand. Therefore, we make use of good visual hierarchy practices to add both balance and flow to the page.

If you are new to Bootstrap, it may be a good idea to get an understanding of what Bootstrap is and how you can use it, as featured in part 1 and part 2 of our series.

Check Out The Whole Series!
Twitter Bootstrap Part 1: What is Bootstrap Anyway?
Twitter Bootstrap Part 2: Design a Responsive Homepage
Twitter Bootstrap Part 3: Design a Responsive Contact Page

View The Demo

Let’s Get Started

Let’s take a look at what we will be building today.

Download the Source

The idea is rather simple. We begin using the Bootstrap Hero Unit to anchor the page and convey our initial message and purpose of the page. Next, we split the page into two sections, offering a Bootstrap powered contact form in the left hand side, while we offer our embedded google map on the right hand side.

Bing maps work just as well, if preferred. Simply use the same technique as featured in the video.

Our “Contact Us” page is filled with bootstrap functionality:

Hero Unit:
A lightweight, flexible component to showcase key content on your site. It works well on marketing and content-heavy sites.
Bootstrap Forms:
Individual form controls receive styling, but without any required base class on the < form > or large changes in markup. This results in stacked, left-aligned labels on top of form controls. Bootstrap doesn’t supply form functionality as much as it nearly perfects the User Experience or UX. Valuable hover states and built in validation are a huge help when coding a site.
Bootstrap icons:
140 icons in sprite form, available in dark gray (default) and white, provided by Glyphicons. If you need a bit more functionality you could also use the incredible Icon Fonts provided by Font Awesome
Well:
Control padding and rounded corners with two optional modifier classes (“well-large and well-small”).
Bootstrap Buttons:
Button styles can be applied to anything with the .btn class applied. However, typically you’ll want to apply these to only “a” and “<button>” elements for best rendering

Thanks for checking out our tutorial on how to get the most out of Bootstrap for your website. We have some exciting Bootstrap-related projects coming up here at Untame so stay tuned for future updates!

Jun 12 2012
0

What is the WordPress Loop?

Posted by | WordPress | No Comments

The WordPress loop is an essential building block when a web designer or developer begins to better understand how WordPress works and moreover, how they might manipulate a theme to fit the needs of a web site. The loop is a very simple concept to grasp once you understand its necessity. The loop tells WordPress to go get the content that you need. It is that simple, but lets take a stroll through some code to see exactly how it works in practice.

Relax: It’s easier than you think!

In order to get the loop going, we just need to accomplish a few simple tasks.

  • Begin The Loop
  • Do something to display the content we want
  • Close the loop (simple right?)

In order to perform these actions we will need to ask WordPress to play fetch! This is called the “Query”. So in order for us to get the correct content on the correct page the incredible guys and gals at WP ask that we just tell them what we are looking for. So without further ado, lets take a look at some code.

Begin the loop:

[crayon lang=”php”][/crayon]

ask WordPress to play fetch! …

So, in this simple line of PHP we are up to a few things, and it might be easiest to understand if we just look at it like a sentence. This statement first checks if posts exist on our website. Once we have found that there are posts, then we tell WordPress that as long as posts exist, we would like to display those posts.

Do Something About It!

Next, we would tell WordPress exactly what content we would like to be displayed from those posts. For instance, we could include items like our post title <?php the_title(); ?> or maybe our post content <?php the_content(); ?>.

After we have displayed all of our desired information we just need to close up shop (and tidy up a bit). It is always best practice, if not now entirely essential to close the WordPress loop in a clean manner, in case we want to fire up another content loop anywhere else in the page.

So to clean up, we will use the following code to stop our query.

[crayon lang=”php”]

[/crayon]

This snippet of code will essentially end our loop. Lets walk through this code step by step. <?php endwhile;else: ?> allows for us to tell WordPress to stop repeating the content loop of the queried posts. In the middle of that snippet you will find a helpful PHP bit that provides a helpful error message for users, just in case we didn’t have any posts related to our query. This type of message is a huge help in places such as search pages. After close out our cash register by ending our while statement, we simply turn out the lights by ending our “if” statement.

So our full beginners loop might look a lot like this.

[crayon lang=”php”]

Sorry, no posts matched your criteria.


[/crayon]

There! Wasn’t that easy? I hope that this post will make you a little more familiar with how the WordPress loop works. Admittedly, this is an enormously simplistic look at what can be a very involved function. But Hey! We need to start somewhere. Next we will start to take a look at how to eek out some neat loop functionality and eventually code up our own custom blog page.

Helpful Links:

Start planning your project today. Get Started