Blog 3: CSS technique

Screen Shot 2015-02-23 at 11.33.05 AMSagmeister & Walsh is a design firm in NYC. Their website is really cool, and though it seems simple, the coding behind it is complicated, and there’s also a lot of it. I particularly like their page for the projects they’ve done. It’s a four-column grid, and each photo for each project is actually a mini slideshow you can click through. And then you click the photo, and it leads you to the project’s page so you can learn more about it. Because it’s complicated, for the purpose of this assignment, I’ll focus more on how the coding divides the CSS as opposed to the individual style tags they use for everything since that would take a while. The stylesheet uses multiple divs and classes to define a single element in the grid. First, there’s #work, then there’s mini-slideshow, mini-show, t-prev, t-next, thumb history, and thumb-img sources. Those are all contained within the class for col-inner and iso col col-25 col-pos-1, which outlines which column the element is in. The stylesheet is broken down as much as possible, and some of the styles are attributed to other classes. For example, you can see that .t-prev and .t-next are together. It’s complicated, but in short, the stylesheet breaks up the columns into grids and works within the grid to create hover effects, slideshows, and links.Screen Shot 2015-02-23 at 11.23.34 AM Screen Shot 2015-02-23 at 11.14.59 AM Screen Shot 2015-02-23 at 11.12.04 AM Screen Shot 2015-02-23 at 11.07.00 AM Screen Shot 2015-02-23 at 11.02.43 AM Screen Shot 2015-02-23 at 11.05.21 AM

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s