Bootstrap Grid Calculation Explained

I recently got this question about the Twitter Bootstrap grid.

On the bootstrap website it says column width 95px but ones I see are 98px just wondered could you shed some light on it?

Here is my response:

Let met start with this… when using Bootstrap for front end development you can adjust the grid however you please using LESS variables inside the variables.less file then recompiling the LESS to CSS. Those variables get recompiled into the bootstrap.css file to make the grid whatever size you want at various breakpoints.

Consider the containers

By default you have three layers of containers that comprise the BS grid each with unique classes: container, row, column. You also have multiple breakpoints to consider but for the sake of simplicity and your specific question, let’s just deal with the large 1170px size.

Containers. For devices over 1200px Bootstrap’s default grid “container” is 1170px wide. It has 15px of padding on either side making the inside of the container a total of 1140px due to the box-sizing CSS for all elements being set to border-box by default.

Rows. Inside of each container you have a row which is 100% wide. That should be 1140px wide but Bootstrap adds a negative margin to each row (-15px by default… or half the grid-gutter-width setting) making each row 1170px wide.

Columns. Inside of each row you get your columns. If you create a 12 column row then each column would be 97.5px wide. We all know that half-pixels don’t really exist so most browsers will round these columns to render as alternating 97px/98px columns to make up the full 1170px width.

The real answer… and some math

In the real world you will rarely actually use 12 columns in your layouts so you really just need to account for the proper size of each container. Bootstrap uses percentages for this in the mixins.less file. The @grid-columns variable is a setting in the variables.less file and defaults to 12. Also remember that there are no partial pixels so browsers will round.

Here is the LESS equation to calculate column widths:

width: percentage((@columns / @grid-columns));

For example:

  • 1 column / 12 grid-columns = 8.33% * 1170px = 97.5px
  • 2 columns / 12 grid-columns = 16.67% * 1170px = 195px
  • 3 columns / 12 grid-columns = 25% * 1170px = 292.5px
  • Etc…

I hope that helps shed some light on the Bootstrap grid. This also means that my Bootstrap PSD templates (and probably every other one you might find) are not pixel-perfect. But then again, we don’t live in a pixel-perfect web world anymore.

Bootstrap 3 Responsive Grid Photoshop Templates (PSD)

I have been very pleased to provide a valuable resource to so many designers with my original Bootstrap Grid PSDs. But with Bootstrap 3 came a new default grid (and mobile-first mentality). Now, I am trilled to offer new, updated Photoshop templates for the Twitter Bootstrap 3 grid (download link below).

Inside the ZIP file you will find three PSD files. One for the 1170px grid, one for the 970px grid, and one for the 750px grid. Each template has guides and a shape layer showing you columns along with another shape layer showing the main container size.

I’ve also included a screenshot of the grid info from the Bootstrap documentation for quick reference.

I hope this helps make your design process a little more efficient as you help continue the mobile responsive web movement.

bs3-thumb

Download Bootstrap 3 Templates Here

Louder Media Launches New ShaunGroves.com

My company, Louder Media, just launched the brand new ShaunGroves.com. Shaun is a blogger, speaker, musician, and advocate for children living in poverty throughout the world. He has amazing insights into life, art, wealth, and more. We were happy to partner with Shaun in developing this new website.

As you will see when you visit, we pushed the envelope in many ways with his site. The front page aggregates content from his blog and social media while also incorporating internal ad spots and creative background images. In lieu of using “infinite scroll” on the front page we decided to create an AJAX “load more” button which repeats the grid indefinitely.

There are lots of other goodies including the Tour page with integrated map, full on-site e-commerce store, and more.

And, as always, it is fully responsive.

I hope to post several of the creative solutions we integrated on Shaun’s new site here in the coming weeks (months?) but for now head on over to the all new ShaunGroves.com, read a post, and leave a comment!

My new task management setup with Things and Airmail

Several years ago I wrote a post about how I used Things as my primary task manager. I still get people asking about Things and how I have my workflow setup so here is a long overdue update.

First, am I still using Things for tasks? Actually, yes! I have moved away from Things a few times and I still constantly experiment with alternatives. However, for me, Things just seems to be the best overall system for keeping tasks organized and in sync between my Mac and iPhone. As they say, “it just works.”

There are other solutions that are much prettier (although Things 3 should update the UI). There are also solutions that offer features not found in Things such as  collaboration and commenting with others, a web interface for task management, integrations with third-party services like Basecamp, Jira, or a host of CRMs. If you need any of these features then by all means look elsewhere (Flow, Trello, Producteev, and Asana are great places to start). However, if you don’t actually need these features then maybe Things is still the best option.

But what about getting email messages into Things?

Here’s where my workflow has changed over the past several years. I no longer use Apple Mail (along with MailActOn or MailTags). As Apple made it more difficult to use Gmail (and Google Apps) seamlessly I tried several alternative email clients. I fell in love with Sparrow until Google bought and killed it. I am still waiting on Mailbox to make a Mac client to accompany their iOS app. But until that day comes I am (mostly) happily using Airmail.

The most recent update of Airmail added the ability to create a task in Things from any email message. That’s right… built into the app! No crazy work-arounds through iCal. I don’t even have to run it through an Alfred workflow. Now the only trick was to figure out how to use this feature which didn’t seem to have any documentation.

It turns out it is easy if you know where to look.

Airmail to ThingsFirst, select a message. At the top-right of the message pane you will see a small drop-down arrow. Click that arrow to reveal a (large) menu of actions to perform on that message. At the very bottom of the list you will see the “Create Things Task” option. Click that and the Things quick-add box will appear with the email subject as the task name and a link to the email message as the task’s note.

It is worth noting that Things must be open for this to work. If Things is closed when I click the “Create” option then it will open Things but the quick-add box does not open for me.

Also, I have not found the link to the message useful at all. It actually does not automatically hyperlink for me and so it really serves no purpose for me.

Screenshot 2014-03-17 09.09.39Finally, if you know me at all you know that I typically prefer my hands on the keys, not the mouse. Keyboard shortcuts are the key to efficient productivity. Thankfully, Airmail has a keyboard shortcut for this function and you will find it by navigating to the Messages > Dispatch menu.

If you don’t recognize those symbols, the shortcut is: “control + option + t”

Just hit that key combination when a message is selected and the Things quick-add box will open pre-filled with your message details.

That’s it! As you may have noticed, Airmail will also send messages to iCal and create Apple Reminders. I don’t personally use either of these (I highly recommend Fantastical for Mac and iOS instead of iCal) but if you do then I’m sure the process is similar to the Things workflow.

Do you use your email inbox as a task manager or do you have a way to get message out of the inbox and into a true task manager?

Alfred Workflow for Rdio with Keyboard Shortcut

After hearing podcasters rave about Rdio long enough I finally tried it and I am in love. Spotify is great an all, but Rdio is so much cleaner. As someone who cares about user interface design and usability it didn’t take me long to jump on the Rdio bandwagon.

However, when  I am working on my Mac listening to music I need quick access to basic Rdio controls. In the past I have used Alfred for this (I am even bought the Power Pack). So I decided to seek out an existing workflow that would allow Alfred to control Rdio.

I found a workflow that provides text commands but I really want keyboard shortcuts. So, I added them. And you can too! It’s easy.

First, download  this great workflow by David Ferguson. Double-click the file once it has downloaded and it should install and launch your Alfred Workflows Preferences. If it doesn’t open up Alfred (click the hat in your menu bar) and select Preferences…

Screenshot 2014-03-10 08.44.53Make sure you have “Rdio” selected in the left-hand pane of the “Workflows” tab.

Screenshot 2014-03-10 08.46.11You should see a set of workflow commands visually represented by boxes connected by lines. The boxes on the left represent the command you would type into the Alfred box. The boxes on the right are the actual scripts that do the work of controlling Rdio. The lines connecting the boxes represent routing… in other words, “if you do this command, this thing (script) will happen.”

Screenshot 2014-03-10 08.47.04

What we want to do is add another set of boxes to the left of the text command boxes. Each of our boxes will represent a global keyboard shortcut (or “hotkey”) to control one command for Rdio. Then we need to connect our boxes to the appropriate chains already in the workflow.

Start by clicking the plus sign at the top-right of the workflow screen. Select Triggers > Hotkey from the popup menu. Here you will enter your keyboard shortcut. Make sure you pick something very unique that will not be used by any other application. I like Ctl-Opt-Cmd and then an arrow key. I can hit all three with my left hand then the arrow key with my right hand. I will use the following:

  • Ctl-Opt-Cmd-Up for the Now Playing info
  • Ctl-Opt-Cmd-Down for Play/Pause
  • Ctl-Opt-Cmd-Left for Previous
  • Ctl-Opt-Cmd-Right for Next

Once you have entered your shortcut in the box at the top of the keep the other settings at their defaults (Pass Through and None) then click Save. Repeat this for your other keyboard shortcuts.

Screenshot 2014-03-11 08.35.54

Now it’s time to connect each keyboard shortcut to the proper command in the workflow. Hover over one of the hotkey boxes and you should see a small nub (half-circle) protrude from the right-hand side.

Screenshot 2014-03-11 08.42.09

 

Click on it and you should be able to drag a line connecting it to another box. You want to connect the right-hand side of each hotkey box with the left-hand side of each command box. This will pass your hotkey through to Alfred as if you had typed in the command you are connecting it to. Here is what the finished product looks like for me:

Screenshot 2014-03-11 08.42.24Now close the Alfred preferences window, open up Rdio for Mac, start playing something, and give it a shot. Now Playing, Play/Pause, Previous, and Next commands should all just be a keyboard shortcut away.

What music do you like to keep you motivated? Do you have other tips for improving your productivity with Alfred?

 

WordPress Theme Development – Template Order

Process is the key to efficiency. Building a good theme development workflow will shorten your project timelines and help keep you sane. But which template file should you start with? Should you jump into the blog list (index.php) first, or maybe the standard page template (page.php). How about the 404 error page… that one seems easy, right? Even though you can start anywhere, there is a logic behind the order in which you create and style your WordPress template files. Here is a look at my process.

According to the Codex the only files you really need for a theme are style.css and index.php. If only theme development could be so simple. More than likely your theme will consist of many more files than that. WordPress has a specific template hierarchy it uses to decide which template file to use for each page request. Each template files serves a specific purpose. You can also create template parts containing blocks of code you can reuse in multiple template files.

But this is getting us away from the point of this post. Once you have figured out which template files you  need to create you have to decide where to begin… and more important you should know why.

1. style.css

Start here. Every time. You have to setup your theme’s information at the top of the style.css file inside your theme folder so WordPress can see your theme and let you activate it. However, you do not have to use this file for your styles. Since switching to LESS I now create a sub-folder in my theme folder for all of my LESS files and a sibling folder with all of my rendered CSS (either by Grunt or CodeKit depending on the project). I also keep  LESS and CSS files from included libraries/frameworks like Bootstrap, Foundation, or FontAwesome in the same folders. I do my best to include as many style assets as possible in my primary style.less file so they all get combined and minified into one file that I load in my theme.

The same goes for Javascript — keep it in a separate folder, concatenate, and minify!

2. functions.php

Speaking of loading the stylesheet into my theme, this happens in the functions.php file (not in the header.php template file!). In fact, I always create an “includes” folder in my theme folder for additional PHP libraries/assets. These get included (or “required”) in the functions.php file. Some of these libraries are things that I have created that include common functions that I use to my my theme development easier. At the top I define several PHP constants that I will use throughout my code. Then I include additional libraries. Last comes all of the theme-specific functions. My goal for this file is to keep all common functions in the includes folder and only theme-specific functions/variables inside the functions.php file itself.

This is where you will register your menus and sidebars. This is also where you will enqueue all of your CSS and Javascript assets to be loaded in the header or footer. You can also include any hooks or actions here (such as creating a custom Gravatar default for comments or custom excerpt length with read more link).

3. header.php & footer.php

Now we get into actual front-end development work… finally! You should start at the top and the bottom. Figure out the common pieces you’ll need across all pages (like branding, social media links, navigation, footer widget areas, and copyright info.) and put them in their place in the HTML. Then decide what container you want around all of your page content sections. Open that container tag in the header.php file and close it in the footer.php file.

4. page.php

Next you might think you should start with the blog list (index.php or home.php) but I say no. Start with something a little more basic. Assuming that your pages and blog posts will look similar you should start with the page.php template because it has fewer elements overall (no tags, categories, or comments) but it does have  pieces that will carry over to the blog post template (title, content). Don’t forget to use a loop-page.php template part for extra credit!

5. sidebar.php

Before you wrap up page.php you will have to make sure your sidebar is setup and included properly. Now that Jetpack includes the “Widget Visibility” functionality sidebars are much easier to manage. We typically include a sidebar (or widget area) specific to blog pages and another one that is general for all pages. Sometimes I will setup the theme to use the standard sidebar if the blog sidebar has no widgets. You can call a blog-specific sidebar file in your blog template files by creating a sidebar-blog.php file and using the get_sidebar(‘blog’) function.

6. single.php

Before you create your list of blog posts (index.php) you should go ahead and make sure you have styles for your single blog post template. This includes title, date, author, content, featured image, tags, categories, and comments (at least). Again, extra credit for using a loop-single.php file!

7. index.php (or home.php)

Finally, your main blog list. This will often be a reduced version of the single.php file for each post on the page — sometimes with full content and other times with excerpts. Also make sure you check pagination. As an aside, I’m sure there are times when a home.php file is appropriate but I do not personally use them for anything.

8. archive.php & search.php

These files are cousins of the index.php file so most of your styles are already in place. Just make sure pages (and other custom post types) show up well in search results… you probably don’t need to show a date or author for pages.

9. 404.php

This is totally unique from the other templates we have been working with. It is essentially the page.php file with a search box and other appropriate information to help guide a visitor back to the right path on your website.

10. attachment.php

I generally use WordPress SEO to turn off the attachment view functionality but it’s always a good idea to include a template for it just in case.

11. everything else…

This is where things get very theme-specific. For example:

  • Are you creating custom page templates for this site? I generally provide one page template without a sidebar that is full-width. I also generally have a unique front page template (not front-page.php but a separate page template intended for the front page).
  • Do you need custom post types? If so, you will want some sort of list page, single page, and possibly term/taxonomy archive pages.
  • Are you using any plugins that allow you to create custom page templates like a calendar or store?
  • What about author bio pages?
  • Do you need custom templates for unique taxonomies?
  • What about custom RSS feed templates for podcasting or adding custom meta fields to your syndicated posts?

All of that is possible but all of it should all come last in your workflow.

And now it’s your turn! How do do things differently… and why? Do you have any other suggestions to keep your development workflow efficient and orderly?

Business Class Email Hosting Breakdown

Back in 2012 when Google killed the free tier of Google Apps I posted about some alternatives. Now that more than a year has passed I thought I would survey the landscape of the services we currently recommend to our clients. First let me say that I never recommend hosting email the same place (or at least on the same server) as you host your website. Using a dedicated email hosting solution is worth its weight in gold… even if you use a free one.

Here are all of the options my company, Louder Media, would recommend. I do not like the Microsoft solutions unless you really need it to be in the Microsoft ecosystem for some reason. Google is still my personal favorite but the other options are good as well.

If money is a concern you can opt for the Zoho free service or the Namecheap $10/year service. I have not personally used either of them and there may be some drawbacks such as a less-than-stellar interface but both companies have been around for a long time which is a good sign.

I will only list basic price (as of this writing) and the occasional notable feature. The rest is up to you…

Google Apps

  • $5/address/month or $50/address/year

Namecheap

  • $10/address/year – “Private”
  • $29/address/year – “Business”

Rackspace

  • $2/address/month
  • $10/mo minimum so you get 5 addresses to start whether you use them or not.

Zoho (free and paid options)

  • Free option up to 5 addresses
  • $2.50/address/month

Microsoft Outlook.com (free and paid options)

  • Free option with ads and required logins to keep account “active”
  • $20/address/year without ads or account expiration
  • Not as easy to setup and manage custom domains… I’ve done it.

Microsoft Office 365

  • $5/address/month

Remember, email hosting is a service so you do kind of get what you pay for. One of the main benefits of using a dedicated email hosting solution is that you don’t have to switch everything when you decide to move your website hosting elsewhere. So you should pick an email hosting company you want to be in a long-term relationship with.

Need someone to setup email hosting on one of these services? Need a website or domain name settings audit? Contact Louder Media today and we will help you find the right solution for your needs and budget.

Where do you host your email and how do you like it?

Is GoDaddy killing Media Temple?

I would have to say that this article by Marco Arment sums up my thoughts on GoDaddy buying Media Temple.

For years I have been encouraging my friends and clients to run away from GoDaddy as quickly as possible. Why? Many reasons. First, their marketing is very questionable. Second, they do everything they can to upsell or bait-and-switch their own clients to gain more money. Third, they provide a sub-par service in general.

That hasn’t changed.

At one time Media Temple was the bee’s knees of web hosting for a while. Since that time they have kept much of their status among the run-of-the-mill website owner even though many people further in the industry have moved on. I have always viewed them as a little overpriced but generally a good option for website hosting.

That ends now.

Moving forward it is my recommendation that anyone who shares my views on GoDaddy’s business practices remove Media Temple from your list of potential website hosts. If you already have an account there, move it. Where? Let me give you some options (and none of these are affiliate links).

First, if you are a (gs) customer then you are basically looking for low to mid-range shared hosting. Try…

  1. If you are a church or ministry you should talk to Chuck over at Flock Hosting. He provides free hosting for churches as long as your needs are pretty simple (as most churches’ needs are).
  2. Site5 offers “shared cloud” plans which would be comparable to the (mt) grid. They also have standard shared hosting, VPS, and Cloud VPS plans.
  3. Running WordPress? Managed WordPress hosting services are all the rage right now. Check out WP Engine, Page.ly, or ZippyKid (now Pressable).
  4. VPS.net has a “cloud sites” option that might suit you as well, although their website has so many options it can kind of be confusing to figure out which plan you really need.

If you need more power and you are used to the (dv) service then you want something VPS or elastic. How about…

  1. VPS.net can give you a VPS (cloud server). You can even pay for management services if you want a professional to keep an eye on things for you.
  2. Amazon AWS has everything you need between their servers (EC2), DNS (Route 53), simple storage (S3), and CDN (CloudFront) services. You do need to know how to get it all started or  find someone to do that for you. They do have several levels of support available, too.
  3. Rackspace Cloud Sites is great if you want something elastic that is already setup and ready to go. Pricing might seem odd since it’s pay-as-you-go once you pass the threshold but it’s a good service with good support. They also have Cloud Servers if you can do it yourself.
  4. Site5 offers managed and unmanaged VPS servers at competitive prices, too.

Hopefully this list will help point you in the right direction. Just remember that no hosting solution is perfect. While reliability is paramount, a fast and helpful support staff is just as important.

Of course, if you need help migrating to a new host or if you want consultation on the right hosting fit for your needs please give me a shout over at Louder Media.