David Lohmeyer's Blog

Can we use Flexbox safely yet?

The flex box model, aka Flexbox, will make designing layouts in CSS and HTML a lot easier once it hits mainstream.  How close is it to being widely supported?  It's actually not too bad, with global support at 88.88% as of 3/2/15.  The main issue is with versions of Internet Explorer earlier than 10.  Modern Chrome and Firefox, as well as mobile browsers almost all support Flexbox.  Since this is a new tool that will likely be employed in CSS frameworks of the future, it's useful to know how and why it will happen.  Here are a few good links.

Building a custom arcade (MAME) machine

Last August I took the plunge and decided to build my own custom MAME arcade cabinet.  See my build thread here. I wanted to use this as a learning experience in woodworking.  Here are a few things I learned building off of the plan posted at Arcadecab.com

Website Update

My personal site has been updated.  It's been a few years and it was definitely time to freshen things up.

One thing is notably missing: my old Team Fortress 2 levels.  I'll try to get a compilation blog post of those up shortly.

Repeating blocks of template code in Drupal 8

I've had some trouble using Twig's include statements in Drupal 8 theming.  I'm not sure if this is a bug since it's at Beta 4, but it's sort of annoying.  I include my content areas in page.html.twig in a separate include file in Drupal 6 and insert it into the area I need.  For example, if I have a 3 column layout, I'm changing the Bootstrap classes from "col-md-12" to "col-md-9" and "col-md-3" (for a sidebar) if the sidebars have content in them.  Includes are apparently escaping (?), though, and not printing anything other t

Print your theme's logo path in Drupal 8 with Twig

I'm updating a Drupal 6 theme to Drupal 8.  One thing I'm doing is making the logo in my Twig template a Twig variable instead of hardcoding the path.  Here's how you do it.  This assumes a theme named 'acton', but you'll change that to your own theme's name.

In 'acton.theme', assuming your logo is 'logo.png' in your theme's root:

function acton_preprocess_page(&$variables) {
  $variables['logopath'] = '/' . drupal_get_path('theme','acton') . '/logo.png';
}

In your Twig template, do something like this:

Using Wordpress with Amazon S3 and Git

When you get into larger Wordpress sites that have a very large /wp-content/uploads folder, things start to get a little hairy if you're using Git.  Best practices with Git say to not have binaries like images and media files under version control in order to keep your code base clean, but then it means we can't really use Git for backing up production files like images.

So what do we do?  Setting up an Amazon S3 cloud sync is an obvious answer since S3 is meant to store files.

A few tools can help with this.

An example of a Bootstrap affixed menu

Twitter's Boostrap framework is great for making affixed menus that stay with you as you scroll down the page.  I recently needed to do this and got it working pretty well.  It's also responsive, so the mobile dropdown menu scrolls with you as well.  This is my favorite navigation design pattern.  I've taken the liberty of making an example that has a fade-in effect so it isn't so jarring when the menu affixes.

Here's the JSFiddle of it in action:

Bootstrap affixed menu with fade-in.

Why hasn't SASS taken off in mainstream web development?

Today I'd like to talk about a point that has bothered me for the past year or so as I've integrated SASS into my typical frontend development pattern for websites.  Why hasn't the preprocessor, a tool that so drastically improves how CSS is written, taken off in the mainstream yet?  Look at the countless "Bootstrap template bundles", ThemeForest, and other sites for examples of what frontend designers are churning out to the masses.  They aren't SASS, or even LESS (most of the time).  With how fast the web moves, I'm fairly shocked at how slow this adopt

Theming Drupal 7 Webform fields with Bootstrap

Bootstrap is a great Drupal theme that makes it so your form elements and other Drupal things get output with proper Twitter Bootstrap CSS attributes.  One downside to it is that the popular Webform module has elements that don't get styled by the Bootstrap Drupal theme and then they look like unstyled form fields.

Breakpoint Slicer and Bootstrap for SASS, two fine front end tools

As a front end design fan I like to constantly improve my toolsets.  Two of the tools I use on new projects these days include Bootstrap for SASS and Breakpoint Slicer.  Both can be added to your SASS project with a 'require' line in the config.rb file and then @imported into your scss file.

Here's how each helps you:

Related Posts