Fluid text (or any other property) size depending on screen width

Responsive text styles depending on screen size is all the rage these days.
Here's an example of a sass mixin that lets you define a screen width where a max value should be reached, and the smallest value it is allowed to have. It will interpolate between these values automatically.

/**
 * Interpolate a value down to a minimum value from its
 * maximum at a defined viewport width
 *
 * @param {string} $property           The css attribute, eg. 'font-size'
 * @param {int}    $value_min          Minimum value in pixels.
 * @param {int}    $value_max          Minimum value in pixels.
 * @param {int}    $viewport_width_max Viewport width for the max value.
 */
@mixin vw-min-max( $property, $value_min, $value_max, $viewport_width_max ) {

	$vw: ( $value_max / $viewport_width_max ) * 100;
	$min_width: ( $value_min / $vw ) * 100;
	$mq_min: #{$min_width}px;
	$mq_max: #{$viewport_width_max}px;

	#{$property}: #{$value_min}px;
	@media all and (min-width: $mq_min) {
		#{$property}: #{$vw}vw;
	}
	@media all and (min-width: $mq_max) {
		#{$property}: #{$value_max}px;
	}
}

For example: A header should have a font-size of 80px at 1000px wide, and grow smaller on narrower screens, but not smaller than 20px.

h2 {
	@include vw-min-max( 'font-size', 20, 80, 1000 );
}

See it in use on my portfolio site, where it is applied not only to text, but also various divs to create a fluid appearance on window resize.

Responsive element width based on its height without JavaScript

Maintaining an element's aspect ratio by changing its height based on its width is a breeze using the trusty old CSS padding-bottom trick.

This doesn't work when you need to maintain the aspect ratio of an element based on its height 😭.
Continue reading "Responsive element width based on its height without JavaScript"

Fun with WordPress PHP Coding Standards in Sublime Text

Writing WordPress plugins and themes is my kind of fun, really. Adhering to the WordPress PHP Coding Standards while doing that is not only even more fun but also helps "...maintain a consistent style so the code can become clean and easy to read at a glance".

Here is how I managed to get automated tests against the WordPress coding standards up and running on a Mac using Homebrew and Git. Continue reading "Fun with WordPress PHP Coding Standards in Sublime Text"

How to cancel Adobe Creative Cloud outside of the US

  1. Log in to your Adobe account.
  2. Click "Cancel Account".
  3. Ah outside of the US you need to contact support to cancel your account WTF?
  4. Click through several steps to be able to view your contact options.
  5. Log in again.
  6. Chat currently closed, although it is within office hours.
  7. Let's call support...
  8. Line is dead, no answer.
  9. One last support method is mentioned: "Ask our community". Yeah right.
  10. Try again tomorrow.

More about: dark patterns.

And then:

Couldn't uninstall Creative Cloud for Desktop

...le sigh...

Save a CMB plugin Taxonomy Select Field as a term for a post

The helpful Custom Meta Boxes plugin by Human Made provides a Taxonomy Select Field. But ever so sneakily, in stead of adding the post to the selected term as one might expect, the plugin saves the taxonomy term id in a custom field. Let's fix that. Continue reading "Save a CMB plugin Taxonomy Select Field as a term for a post"

Using a Wacom CTE-430 Sapphire Tablet with OS X Yosemite

I recently bought a Macbook Air with OS X Yosemite installed and tried to using my spare Wacom Sapphire CTE-430 tablet with it. Wacom unfortunately does not support older tablets. At least not explicitly. As it turns out you can use an older driver to get the tablet up and running. Continue reading "Using a Wacom CTE-430 Sapphire Tablet with OS X Yosemite"