We add in some responsiveness to the grid we have set up for the Gallery. At the widest screens, we have it set at four columns. Then we start adding in breakpoints via our super easy @mixins we have set up and have been re-using all over.

At our mama-bear breakpoint we go down to 3 columns, then we make an interim breakpoint in between mama-bear and baby-bear where it breaks into 2 columns, then ultimately 1 column at baby-bear. This is super easy, as all we need to do is adjust how many columns we set via CSS3 column-count.

We end the video talking about future goals for the gallery. It would be nice to be able to load different number of images on different screen sizes and use actual thumbnails instead of full size images. Perhaps one day we'll get there.

For the record, the software I am using locally to capture screenshots and upload them to the server via FTP is LittleSnapper.

Comments

  1. raik
    Permalink to comment#

    Hi, what app do you use for onscreen measuring?

    • Chris Coyier
      Permalink to comment#

      On a Mac you can just press Command-Shift-4 to get the screenshot snapper tool, which also shows you the dimensions of the area you’re selecting.

    • raik
      Permalink to comment#

      Thanks.

    • hassan8311
      Permalink to comment#

      Where are those pictures saved tho? LOL I am new to Mac.

    • Josh Eaton
      Permalink to comment#

      The images are saved to your Desktop by default.

  2. CWSpear
    Permalink to comment#

    I wonder if some of the jittery-ness is because images are inline. I know the divs are inline-block, but maybe the columns would handle the images better as block elements? Just kind of because how columns handle inline stuff.

  3. Josh Eaton
    Permalink to comment#

    Chris, there are two apps in your dock that I’m not familiar with, and I just can’t figure it out. I believe I’ve labeled the rest of these correctly? :) I am loving the videos, and I like learning more about the different apps you use.

    Total Finder

    1Password
    Font Explorer X Pro

    iTunes
    Adium
    Skype
    Busycal
    Things?

    Safari
    Chrome
    Opera
    Firefox
    iOS Simulator

    Transmit
    ???
    Coda 2
    Sublime Text 2
    Tower
    iTerm2
    MAMP Pro
    Sequel Pro
    Codekit

    Illustrator
    Fireworks
    Photoshop

    Keynote
    Skitch
    Little Snapper
    ScreenFlow

    Preview
    iPhoto
    Quickbooks/Quicken?
    ???
    Starcraft

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```

We have a pretty good* newsletter.