profstein

Embedded iFrame Examples

The basic idea here is that you add a wrapper element around your iFrame and then set it to 0 height. Then you add padding-bottom using percentage so the element has the same aspect ratio of the iFrame you are embedding.

Aspect ratio is just a fancy word for the relationship of th width to the height. If that relationship stays the same, the iframe will look right as it grows and shrinks.

To get the padding-bottom percent you just divide the height of your iframe by the width and then move the decimal two places to the right.

For the YouTube video you will see that an extra padding-top has been applied. This is because YouTube also adds controls which add to the height. If what you're embedding doesn't have this (like the maps below) then you can remove it. If what you're embedding has more or less added then you can adjust the number.

Adding Orbit slider to Foundation.

This code shows how to add orbit to your theme. Adding it to the homepage on home.php is a common place. Basically you can copy the code in home.php here and use it. A few things to remember:

Make sure it is in a container with Foundation Columns attached (line 3 here).

The good thing about orbit is that it will adjust itself to fit its container. So if you don't want our slider to be all of the way across the screen at large sizes then you can make the container narrower and it will adjust accordingly.

My example sets small-12 medium-8. This is by no means a requirement. You can change it to what you want, or just copy lines 5-33 and put it in your own container.

#Homepage using Foundation This is an example that was built using the example templates Foundation provides. It shows how you can use Foundation to do a mockup of a web page. This kind of quick prototyping is the reason Foundation was built in the first place. This is the same as the Orbit Home one but with four widgets at the bottom of the screen.

To view the page in action click here

Conditional Query

This shows an example of doing a second query if the first custom query doesn't return any results.

The first query is for a category with the slug of featured. It checks to see if this has posts and if it doesn't it does a second query for the latest posts. If the second query doesn't have results it just shows the content-none template part. You could change the arguments to make it any other kind of query you want.

Not shown are three template parts: content-featured.php, content-latest.php and content-none.php that show the various contents depending on what query returned results. content-featuerd and content-latest would have whatever HTML and Template Tags you need to show the content in The Loop while content-none could be a message with straight HTML if you like or you can add in things like a search bar or Template Tags that work outside of The Loop.

Note

What is shown is not a full file. It would be included in a full file with get_header(), get_footer() etc like index.p

Responsive Embedded Video

This shows how to embed video from sites like YouTube and Vimeo

For a working example see the following on CodePen: http://codepen.io/profstein/pen/mArLRj

Responsive Google Maps Embed

This HTML and CSS shows how to embed a Google Map so that it is responsive and resizes with the window. To use it in your project you need to change two things:

The iframe in the map.html on line 2. You would copy and paste this from the Google Map you wanted to embed
The padding bottom on line 13 of map.css Read the instructions on lines 9–12 of that file.

Base Responsive Styles

This CSS file has a few simple rules that you can put in as part of the base CSS for a responsive site.

The first set applies a boder-box box model to all elements on the site. This makes doing a responsive layout much easier because it allows you to set a width property and then adding padding or margin won't change the overall width of the element and force you to adjust the width property accordingly. Paul Irish gets full credit for this and you can learn more by reading his article

The second allows images to resize responsively. If you put an image in a container element that is narrower than the image it will adjust its size to fit the container. If the container is bigger than the image, the image will NOT grow. Note: this is not a fully responsive image where different images are sent to different screen sizes

This CSS also affects the element in the same way it works with the element. This w

	/*
	This rule uses the universal selector, *, to apply the border-box model to all elements on a site

	see Paul Irish article for where these styles came from and more on why to do it:
	http://www.paulirish.com/2012/box-sizing-border-box-ftw/
	*/

	/* apply a natural box layout model to all elements */
	, :before, *:after {
	-moz-box-sizing: border-box;

	/* this is taken directly from http://www.paulirish.com/2012/box-sizing-border-box-ftw/ based on his August 2014 update */
	/* apply a natural box layout model to all elements, but allowing components to change */
	html {
	box-sizing: border-box;
	}
	, :before, *:after {
	box-sizing: inherit;
	}

	// Use Gists to store code you would like to remember later on
	console.log(window); // log the "window" object to the console