The Easiest Responsive Grid … Ever

A responsive grid is not a framework, but a development feature that can be easily added to any website. It allows dynamic resizing of a page to fit today’s abundant variety of screens, including mobile and other handheld devices. Like most of my other creations, this 12-column grid is extremely lightweight and is absent of all the extra frills that you probably don’t need. It is completely vanilla and ready for customization: no JavaScript, no fonts, no colors, no complicated IE hacks.

The Richard’s Ramblings… site uses basically the same mobile-first responsive grid as published below. You can view the results by resizing your browser window. Once the window size decreases to that of a smart phone or small tablet, the columns become fixed width and vertically aligned.

Sample HTML Code

<div class="fixed clearfix">
  <div class="eight columns">Primary content</div>
  <div class="four columns last">Secondary content</div>

Replace “fixed” with “fluid” in line 1 (highlighted) of the sample code above to switch from a constrained viewing window to full window width, while still retaining dynamic resizing. Personally, I don’t like the “classic” 960 grid, and prefer the 1140 or larger grids. That said, the flexibility of this mobile-first grid allows you to change the maximum width in the fixed layout; just replace “max-width:1140px” with “max-width:960px” (or whatever width you prefer) in line 15 (highlighted) of the stylesheet below.

Barebones Stylesheet

body,.container,.fixed,.fluid {margin:0 auto} body {width:94%}
.clearfix {clear:both; height:1%; zoom:1} * {box-sizing:border-box}
.clearfix:after {content:".";display:block;height:0;visibility:hidden}
.column,.columns {
  float:none;margin:0 3% 1em 0;padding:10px 0;width:99%;
@media only screen and (min-width: 768px) {
  .one.column,.one.columns {width:5.5%} .two.columns {width:14%}
  .three.columns {width:22.5%} .four.columns {width:31%}
  .five.columns {width:39.5%} .six.columns {width:48%}
  .seven.columns {width:56.5%} .eight.columns {width:65%}
  .nine.columns {width:73.5%} .ten.columns {width:82%}
  .eleven.columns {width:90.5%} .twelve.columns {width:99%}
  .column,.columns {position:relative; float:left; display:inline;}
  .last,.twelve.columns {margin-right:0} .fixed {max-width:1140px}
@media only screen and (max-width: 767px) {
  .container,.fixed,.fluid {width:300px}
  .column,.columns {margin-right:0; width:300px;}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .container,.fixed,.fluid {width:420px}
  .column,.columns {margin-right:0; width:420px;}

This is an ideal responsive grid if you want to incorporate grids into your existing website. Those starting a site from scratch may want the extra user interface features, widgets, and styles contained in larger, all-in-one packages. For new installations, I suggest one of the following excellent solutions, all of which I have personally used in various projects:

  • Bones (a barebones responsive WordPress theme)
  • Bootstrap (from the guys at Twitter)
  • Foundation (very similar to Bootstrap)
  • Skeleton (lighter weight than Foundation)

Resize OpenELEC XBMC ‘storage’ Partition

The Problem

The /storage filesystem created by the Raspberry Pi build of the OpenELEC XBMC Media Center is limited to 755.9MB, no matter the size of the SD card upon which it is installed.

All of my content is stored on two ReadyNAS network storage appliances, so the space limitation was easy to overlook until I attempted to download several add-on skins that failed during installation and were not cleaned up properly. Since the /storage filesystem also caches thumbnails and other movie and episode information in a hidden folder (/storage/.xbmc/), the Media Center staunchly refused to add more content, even after I deleted and re-added all video sources.

The XBMC System Info / Storage screen shows that /storage is full, confirmed by running “df“.

# df
Filesystem           1K-blocks      Used Available Use% Mounted on
none                    189512     89556     99956  47% /dev
/dev/mmcblk0p1          127730     99214     28516  78% /flash
/dev/mmcblk0p2          774064    773968         0 100% /storage
/dev/loop0               89472     89472         0 100% /
none                    191008         0    191008   0% /dev/shm

The Solution

You will need to delete and re-create an existing partition on your SD card. While everything worked for me without any data loss, it is possible that this may forever delete all your add-ons, your cached data and thumbnails, and many of your settings. If you are comfortable and OK with doing so, then proceed onward. If not, stop and do nothing.

First, the caveat:

Author’s Note: This worked for me on my RPi running the OpenELEC 3.01 build with Linux 3.6.11 and XBMC 12.2 (“Frodo”). It might not work for you on any other version, or even on the same version. If it doesn’t work for you and you break your Raspberry Pi or your Media Center because you didn’t understand the computer science behind it (or, Heaven forbid, I made a mistake in the instructions) — well, that’s not my problem and I don’t want to hear any whinging. You assume all risk and accept any data loss. I am not liable for anything, and neither is my family, my friends, my cats, my co-workers, the good and talented folks at Raspberry Pi or the XBMC Foundation, my web hosts, my ISP, the Easter Bunny, Barack Obama, or Wil Wheaton.

  1. SSH to your Raspberry Pi as root (the default password is “openelec”, without quotes)
  2. Get out of the default /storage partition.
    cd /
  3. Disable XBMC.
    touch /var/lock/xbmc.disabled
  4. Stop the XBMC server. OpenELEC’s wiki recommends the following, but only “as a last resort”:
    killall -9 xbmc.bin

    I prefer to use a gentler approach which allows the process to close down properly.

    killall -SIGHUP xbmc.bin
  5. (Optional) Verify by running “top” that the XBMC processes are no longer running.
  6. (Optional) Verify by running “mount” that the /storage filesystem is mounted. Make a note of the name of the underlying filesystem upon which /storage is mounted, e.g. “/dev/mmcblk0p2”.
  7. Unmount the /storage filesystem.
    umount /storage
  8. (Optional) Verify by running “mount” that the /storage filesystem is no longer mounted.
  9. Start up the partition editor (the partition specified here must match the output of the underlying partition name of the /storage mount from either the “df” or “mount” commands issued earlier, without the “p*” suffix; i.e. specify the “/dev/mmcblk0” device when editing the “/dev/mmcblk0p2” partition)
    parted /dev/mmcblk0
  10. Change display mode from size to sectors. — unit s
  11. Display the list of partitions. — p
    Model: SD 00000 (sd/mmc)
    Disk /dev/mmcblk0: 7995392s
    Sector size (logical/physical): 512B/512B
    Partition Table: msdos
    Disk Flags:
    Number  Start    End       Size      Type     File system  Flags
     1      2048s    258047s   256000s   primary  fat16        boot, lba
     2      258048s  1830911s  1572864s  primary  ext4

    Take note of the starting sector number of the second partition. The starting sector number of the second partition on my 4GB SD card is “258048”.

  12. Remove the second partition. — rm 2
  13. Re-create the partition, using the same starting sector as the ending sector and “-1” (minus one; which means use all remaining available space). — mkpart primary 258048 -1
  14. (Optional) Enter “unit GB” and then enter “p” again to verify the new partition settings.
    unit GB
    Model: SD 00000 (sd/mmc)
    Disk /dev/mmcblk0: 4.09GB
    Sector size (logical/physical): 512B/512B
    Partition Table: msdos
    Disk Flags:
    Number  Start   End     Size    Type     File system  Flags
     1      0.00GB  0.13GB  0.13GB  primary  fat16        boot, lba
     2      0.13GB  4.09GB  3.96GB  primary  ext4

    The new partition on my 4GB SD card is 3.96GB (prior to allocating space needed by the filesystem).

  15. Exit the partition editor. — quit
  16. Check the updated filesystem, then resize and remount it:
    e2fsck -f /dev/mmcblk0p2
    resize2fs /dev/mmcblk0p2
    mount /dev/mmcblk0p2 /storage
  17. (Optional) Verify with “df -h” that the filesystem is correctly sized:
    # df -h
    Filesystem                Size      Used Available Use% Mounted on
    none                    185.1M     87.5M     97.6M  47% /dev
    /dev/mmcblk0p1          124.7M     96.9M     27.8M  78% /flash
    /dev/loop0               87.4M     87.4M         0 100% /
    none                    186.5M         0    186.5M   0% /dev/shm
    /dev/mmcblk0p2            3.6G    756.6M      2.7G  21% /storage

    My updated /storage filesystem is now 3.6GB. Perfect!

  18. Re-enable XBMC and the Media Center will automatically restart.
    rm /var/lock/xbmc.disabled

While at first this may seem to be a lengthy, complicated how-to, the actual steps are actually rather simple. With just a few minutes’ work, your OpenELEC SD card will be expanded to its full capacity and the Media Center will be functional once again.

As to my original problem of failed add-on installations, in my meanderings through the operating system, I discovered that XBMC does not delete the original downloaded ZIP files when you delete an add-on; it deletes only the unpacked files from the /storage/.xbmc/addons/ folder. The orphaned ZIP files (which can be 100MB or more for complex skins) are located within the /storage/.xbmc/addons/packages/ folder. I recommend only deleting those packages for add-ons that you have deleted via the user interface.

The New Office 365

Congratulations, you’ve been Bingled!

Welcome to the new Office 365! All of us at Microsoft are pleased to inform you that we have updated your webmail client user interface overnight while you slept. We know you didn’t have time to ask for these changes yourself because you’ve been so very busy diligently learning how to use our previous interface, so we’ve gone right ahead and given you exactly what you need now. No, no need to thank us, really!

Enjoy the new Office 365 — aptly named, because we have changed 365 features of the user interface in order to strengthen your mental focus and attention with mystery navigation challenges, and to enhance your physical fitness through repeated forearm and hand motions due to increased mouse clicking and longer roaming trails. Where it took only a single mouse click to accomplish some everyday tasks in the past, we guarantee a minimum of four clicks today to perform the same function — but only after you figure out where we moved the feature! We’ve even pre-entered you in the Biggest Loser Pound for Pound Challenge, tracking and tallying each calorie burned with every move and click! See how much we care for you?

Aren’t you just tickled pink with delight? Of course you are, and we already knew that, too; our vast team of user experience experts are waaay smarter than you are, so we know how much you absolutely love the fabulous new look and hidden features. Plus, the new Outlook 365 contains a pioneering, state-of-the-art HTML5 virtual webcam (the Social Heuristic Automatic Feedback Tool) — so we can see your happy face while you read this notice. Say “Cheese!”

You can opt out of getting the SHAFT at any time by deactivating the tool in the Settings Tab above. Access to the Settings Tab requires a Premium Access subscription. If you have a Professional or Enterprise subscription, double-click the kruller and then drag your mouse vertically down the empty space next to… No, no, no! Double-click, then drag! Argh, you’re doing it all wrong! The other one. Right over there… That one; the kruller. No, not that one — that’s a strawberry parfait. There. Next to the screw. In the corner! What are you, stupid?! Not the gear! Listen to us… Oh, never mind. Yes, sure, click that one, the one we told you not to click before. Ha! See, we told you not to click that one! You just deleted all your email. How’s that workin’ for you? Ready to listen to us now?

No, put your hand down. You don’t need to use finger gestures to interact with the Feedback Tool; it uses facial recognition and masking tonal derivatives. Although… interesting idea… finger recognition might just be the next big thing… Hmmm. What action is that finger movement supposed to represent? —— Oh, are you OK? Your face has gone from tickled pink to beet red…

Hold on; we’re installing a Virtual Medic to assist you… To activate it, hold down the key with the old 2003 Windows logo, click the 2010 Windows logo that resembles a box without windows, and drag it onto the 2013-version logo that looks like a 2006 Apple iPod Shuffle. No! The apple, not the strawberry parfait again!

Oh, never mind…

Legalese: For online safety and privacy, owners of any non-Microsoft products or services will be required to deactivate the Feedback Tool every 15 minutes. Reactivation occurs automatically every ten minutes for owners of iPhones (which we can see right there on the desk next to you). Failure to deactivate the Feedback Tool feature within the alloted time will result in automatic reactivation. Excess or repeated deactivation may result in the deletion of random emails. Use of Microsoft Outlook for sending or receiving email is not supported in a networked environment.