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
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.
Hi, what app do you use for onscreen measuring?
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.
Where are those pictures saved tho? LOL I am new to Mac.
The images are saved to your Desktop by default.
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.
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.
Font Explorer X Pro
Sublime Text 2
The missing ones are:
http://tapbots.com/software/tweetbot/mac/ (looks different now, it was in Beta at the time)