Get Skeleton

posted on 2011-08-27 at 12:19 PM - amd.im/mhr3

Skeleton is a boilerplate for themeing your site to allow for a responsive design on a 960 grid with very simple syntax and structure.

The recent redesign of this site was based on that code. Try re-sizing this window to see the content re-flow based on the current window size. this was accomplished simply by including the CSS files that come with the Skeleton download and structuring the content with classed DIVs like this:

<div class="container">
  <div class="six columns">
    <div class="five columns">
      ...
    </div>
  </div>
  <div class="twelve columns">
    ...
  </div>
  <div class="four columns">
    ...
  </div>
</div>

Easy as pie.

The DIVs can be associated with multiple classes so if you want to offset the spacing by a few extra grids you can do something like six columns offset-by-one.

There is also a simple quoting and citation format:

<blockquote>
  ...
<cite>...</cite>
</blockquote>

The interesting options afforded by it really don't end there. One of my favorite features is adding the class scale-with-grid to the <img> tags. This causes them to re-size based on the size of the view port ensuring that your beautiful 640 pixel image doesn't render outside the view port of an iPhone that only has 320 pixels to play with.

I extended this feature to video embedding by including this code in each of the @media queries in the skeleton.css code provided with the skeleton download:

iframe.scale-with-grid { 
  width: 640px;
  height: 360px;
}
@media only screen and (min-width: 768px) and (max-width: 959px) {
  iframe.scale-with-grid {  
    width: 508px;
    height: 286px;
  }
}
@media only screen and (max-width: 767px) {
  iframe.scale-with-grid { 
    width: 300px;
    height: 169px;
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  iframe.scale-with-grid { 
    width: 420px;
    height: 236px;
  }
}

With that code, you can include the scale-with-grid class in iframe embed code provided by Vimeo or YouTube and get the same scaling effect. I've tested it in Safari, Firefox, Chrome, and IE7 on iOS, Macs, and PCs and it seems to work well everywhere but your mileage may vary.

If you're looking for a quick way to get a grid design that is responsive, Skeleton is a really easy and flexible way to go about it.

Steve

posted on 2011-08-25 at 12:15 AM - amd.im/jdGu

During my time at Apple, I met Steve Jobs a single time.

It was during the development of the iPad 2 and I was going over some 3D scans of the aluminum housing. Our screens were splashed with colorful charts and graphs and we were discussing next actions when a hush came across the room, as rooms are wont to do when billionaire, visionary CEOs enter the room.

He peruses the room and wanders past our table noticing the colorful scans. "That looks like real engineering work. What are you guys working on?"

I clammed up, unable to process what was happening. Fortunately one of my coworkers was not a stammering buffoon and was able to tell him that we were working on the latest iPad 2 machining.

"I just got one of those. It's great. Keep up the good work", and with that he walked away.

It was just a couple sentences but it was greatly inspiring. Steve is known to be a harsh critic who pushes for perfection in his products. A compliment, however small was inordinately encouraging.

Before that point I had never spoken with Steve, and I suppose I still haven't. In some way though, I think that most of us there were working to appease these rumored demands from our esteemed executive officer. We all were pushing to get products out the door that would meet with his approval. I think that a great deal of that is ingrained in the culture, Steve wasn't calling us to tell us that our products needed to be better. Yet the perception was always that we needed to do better, that Steve would accept nothing less than perfection. To paraphrase John Gruber, this is Steve's greatest achievement.

I hope that culture persists. I hope that Tim can keep all the employees steeped in a desperate desire to constantly improve. If the company can keep that feeling alive. I think it'll do just fine.

Thanks for building a great company Steve. I hope it stays the way you're leaving it.

These are the colors of America

posted on 2011-08-19 at 07:52 PM - amd.im/KPFV

These are the colors of America. I live there. Adelaide, age 4

Paul Budnitz Number 2

posted on 2011-08-19 at 09:05 AM - amd.im/N1YI

Rebranding Hell

posted on 2011-08-17 at 03:39 PM - amd.im/ftYH

This has to be one of the funniest things I've seen in a while. A designer named Chris Herron put an astounding amount of work into a theoretical redesign for Hell at the request of the "Hell Office of Travel and Tourism".

As the premier global tourist destination, Hell provides a one of a kind experience for the visitor. We take great pains to accommodate your every desire. You will experience pure pleasure from our luxurious hotels and resorts, exciting gaming venues, unparalleled nightlife, and world-class entertainment. Not to mention our top-notch convention facilities. Hell is Simply Heavenly.

Definitely a must read.

Move

posted on 2011-08-07 at 08:31 PM - amd.im/XfqD

3 guys, 44 days, 11 countries, 18 flights, 38 thousand miles, an exploding volcano, 2 cameras and almost a terabyte of footage... all to turn 3 ambitious linear concepts based on movement, learning and food ....into 3 beautiful and hopefully compelling short films..... Rick Mereki

A one minute spectacular. Part of a three part series, watch eat and learn as well. Learn brought memories back as they visit the same Choco Museo that we visited in Peru and there is a fleeting shot of one of the guys who helped us through our class as well.

(via Cameron Moll)

571

posted on 2011-08-06 at 08:00 PM - amd.im/http://amd.im/llMg

I love this numbering. I saw it on Mare Island last weekend as well as the other signage.

Signage

posted on 2011-08-02 at 02:11 PM - amd.im/http://amd.im/WIcb

While taking a walk around Mare Island, I was especially taken with the signage that was left over from its days as a shipyard. The handcrafted style and vintage lettering was fun to see in an age of bland, pre-fab plastic signs that we usually see in industrial sites.

Enjoy the signs.

Skating through NYC

posted on 2011-08-02 at 12:40 PM - amd.im/http://amd.im/2zYT

I guess I'm on a skateboarding kick right now. This video of a guy riding through NYC on a skateboard is worth it though.

about

amdavidson.com is a simple blog run by Andrew Davidson, a manufacturing engineer with a blogging habit. He sometimes posts 140 character tidbits, shares photos, and saves links. You can also see posts dating back to 2005.

Search