Use icon font as a background directly via data attributes in your HTML

This trick was used in the webmix main website, I was looking for a quick way to get personalized headers with an icon as background.
I am using Fontello which I highly recommend since it allows to create custom icon-font libraries, though this trick will work with any icon font system (font awesome, glyphicons, etc.)

Mobile detection for Ruby on Rails

A quick piece of code to have a mobile detection usable all over your rails application

 

Generate padding and margin classes with SASS

This is a very useful piece of code for SASS that I now use in all my projects, it automatically creates margin and padding classes, so that you can easily ajust your margins while coding directly in HTML

Create a simple Google Font selector for WordPress Admin with font preview

While creating a new theme for WordPress, I have been looking for a simple way to have a select dropdown menu that would allow the user to choose a web font.
I really wanted that the dropdown to show the preview of the fonts, for a better user experience.

After digging and trying different solutions, I found a very simple way to accomplish this, with only few files.

I am using jquery.fontselect.js, a javascript plugin that allow to preview and choose web fonts from google fonts.

Here is how to proceed:

1) Download jquery.fontselect.js and put the JS and CSS files into your theme folder. Do not forget to also put fa-sprite.png in your CSS folder.

2) Enqueue your scripts for  admin in functions.php

3) Create a custom control function

4) Require this new control in your cuztomizer file, and setup the settings and controls:

5) We need JS to pass the values. Put this in your admin.js file for example, and of course do not forget to enqueue the file to have it loaded in admin

6) Finally, we need to load the styles in our theme. I personally use a “custom_styles.php” file that I include in my header, but you can put this anywhere you want.