profstein

/* 
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; 

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.

profstein

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.

profstein

#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

profstein

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

profstein

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

profstein

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

profstein

Sass Breakpoint Mixin

This mixin is based on work by Hugo Giraudel http://www.sitepoint.com/managing-responsive-breakpoints-sass/. It uses Sass Maps http://sass-lang.com/documentation/file.SASS_REFERENCE.html#maps, interpolation http://sass-lang.com/documentation/file.SASS_REFERENCE.html#interpolation_ and an if..else to convert the breakpoints you enter into media queries.

You don't have to know how the mixing works exactly (although the article goes into some explanation), but you do have to know how to modify it to set your own breakpoints. Lines 10-15 show how that is done. This technique is nice in that it allows you to decide if you are going to use min-width, max-width or a combination of the two. Alternatively you could set what is given in ems here as variables and use those.

profstein

This is similar to the breakpoint-mixin I created but that requires you to use a version of Sass that understands Maps. If that is causing errors then you can use this mixin. It's not quite as flexible but has a simlar syntax.

profstein

// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// ----

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;