Fullscreen Masthead

A very popular feature among sites right now is to have a call to action or as I like to call them a “Masthead” that occupy the entire browser window and scales to fit any browser size. It is a great way to get a single message across to your audience without other site elements distracting or using a terrible slider. But I found it terribly hard to Google this feature and an array of methods to achieve this effect.

I choose to stick with a simple CSS solution for the Masthead and borrowed some javascript from MightyScroll to achieve the desired feature. Feel free to play with it below.

[CodePen height=400 show=result href=niqKL user=philhoyt ]

Generic Framework UPDATE V: 0.9.80 and future development

Last week launched the stable version of Generic Framework V: 0.9.80 and with it came a few new feature along with some minor bug fixes. Below is a list of additions.

  • “mobile-off” class added to disable elements on mobile devices
  • Generic Button UI Kit has been introduced
  • “alpha” and “omega” classes can be applied to elements with “align-right” and “align-left” classes.
  • “remove-top”, “half-top”, and “add-top” classes have been created

Beta Versions for V: 0.9.90 development can be found on the GitHub page. When released features will include Theme Customizer Layout Options, Shortcodes for Buttons, some legacy browser compatibility changes, better default input field styling, image caption styling, and other clean up. Documentation for the current features can be found at the Generic Framework homepage.

Justified (Full Width) CSS Navigation Menu

Justified menus have been an issue for me. Designers have always given me mocks up which show menu items fluidly filling the width of the layout. If you have ever attempted to do this in practice you will know it is more difficult than it sounds, especially if the number of menu items changes during dev. The above code attempts to solve this issue using flexbox which works really great with modern browsers and an IE 9 fallback using display:table which doesn’t work in Firefox because WHY on earth would you want to apply position:relative to an element with display:table-cell #sarcasm.

Hello, World.

A fresh start.

This website has taken many forms over the years. From a personal blog, a video portfolio, to a filmmaking/gear blog. Each one served its purpose, but I always painted myself into a corner as to what the site could and couldn’t be. It is hard to encapsulate everything one can be in the limited format that is a website. I hope this fresh install of WordPress will evolve into many snapshots of what makes up me.

Topics you can expect from this blog.

  • WordPress
  • Minimalism
  • Fitness
  • Photography and Film
  • General Coding Stuff
  • Philosophy


Hello World Tattoo
Hello, World. Tattoo from March 2016.