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. User Avatar
    raik
    Permalink to comment#

    Hi, what app do you use for onscreen measuring?

    • User Avatar
      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.

    • User Avatar
      raik
      Permalink to comment#

      Thanks.

    • User Avatar
      hassan8311
      Permalink to comment#

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

    • User Avatar
      Josh Eaton
      Permalink to comment#

      The images are saved to your Desktop by default.

  2. User Avatar
    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. User Avatar
    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

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag