Responsive font sizes

When designing for mobile, a lot of things have to move and scale. One of those things are fonts and their size must be adjusted to look good for various screen sizes. One way to do this is with a base measurement in % and the em measurement which is relative to the base measurement.

Let’s see some code…

body {
    font-size: 100%; /* This is the base value */
}

.font-regular {
    font-size: 1em;
}

.font-large {
    font-size: 1.5em;
}
.font-extra-large {
    font-size: 2em; 
}

Now when the base size changes all the font sizes are updated accordingly. You can also use this base for things like margins etc…

Responsive horizontal menu

Here is how I do a simple responsive horizontal menu where the elements are equally spaced.

CSS for four items…

.menu-item {
    width: 24%;
    margin: 0 0.5%;
    float left;
}

Adjust the percentage as required.

Awesome WordPress plugins

Here is a list of my favourite WordPress plugins.

JavaScript AutoLoader

http://petersplugins.com/free-wordpress-plugins/javascript-autoloader

This Plugin allows you to load additional JavaScript files without the need to change files in the Theme directory. To load additional JavaScript files just put them into a directory named jsautoload.

Clicking the JavaScript AutoLoader question mark icon on the Plugin page will show you the following…

Possible paths to store your JavaScript files

Child Theme Directory

Current Path: /var/www/example.dev/public_html/wp/wp-content/themes/eaterstop-pro-child/jsautoload

Theme Directory

Current Path: /var/www/example.dev/public_html/wp/wp-content/themes/eaterstop-pro/jsautoload

General Directory

Current Path: /var/www/example.dev/public_html/wp/wp-content/jsautoload

To make sure your JS code runs after everything has loaded, run it in the following function

window.onload = function() { 
    // your code here
}

BackUpWordPress

By: http://hmn.md

BackUpWordPress is one of several free solutions available to wordpress owners. It is my preferred one because it has an uncomplicated user interface, and gives you the option to either schedule back-ups of just the database, or everything.

Easy WP SMTP

By: https://wp-ecommerce.net

Easy WP SMTP simply allows you to send email via SMTP from your WordPress Blog. Why would you want to do this? I recently had a client’s hosting provider move to a cloud based platform and remove support for php’s mail (sendmail) function. The plugin allows wordpress to use any smtp mail account (including your hosts email service) to send mail. It also apparently helps keep mail sent from wordpress out of people’s spam folders.