shaunrashid.com

Random thoughts of a digital web weaver

Content Block Layout with Dynamic Content Using CSS Grid

With the impending introduction of CSS Grid in mainstream versions of major browsers, I have been playing around with it and trying to learn how I can incorporate into current production scenarios.

One scenario is a content block grid where we have multiple blocks of content that each consist of a title, some sort of image or media, copy, and some hyperlinks. In addition to making the grid of blocks responsive (which is the easy part), the scenario calls for each of the elements within the content blocks to line up with the corresponding elements within it’s sibling content blocks on the same row.

For example, if there are 4 content blocks in a row, the copy of each of the blocks should start at the same point on the x axis of the row. While this is relatively easy when you have total control of the content and can craft it so that each element has a consistent (or at least predictable) amount of content, the challenge arises when you don’t have control of the content.

I have been playing around with the following Codepen to see if I can get things to work. I’ve been able to line up the media at the top of the content blocks and the links to the bottom, but the title and copy sections in the middle look “jagged” because the image heights are different. Instead, what I’m looking for is a layout where the titles and copy sections of each block line up with each other so that there is a more uniform look to the grid.

I’m not sure if that’s possible but I’d invite you to checkout my Codepen (currently viewable in Firefox Nightly and Chrome Canary)  to hit me up on Twitter or drop me an email with any feedback or advice you might have.

 

UPDATE:

I’ve opened up an issue with this on Rachel Andrew’s CSS Grid AMA. Check it out and post any ideas you might have. Also check out the other issues on the AMA. It’s a great resource.

Normalize (CSS) No More.

Like many web developers, I have used a reset/normalize style sheet in a variety of projects with the intention of having a common starting point for all browsers when it comes to styling CSS. It’s been useful. It works great for setting a baseline to create web pages that are pixel-perfect reproductions of mockups from designs.

However, as I work with building responsive websites where the widening array of devices has changed the way that we design websites, I have fallen back to the age-old statement that answers the question of whether a website needs to look exactly the same in every browser. With the answer to that question, I have found that the reset/normalize stylesheet has become unnecessary.

As a designer, I have come to accept that there may be minor differences from browser to browser. If I can accept that my sites will look different (sometimes significantly) on different devices, there is no reason to get upset if my site does not look the same pixel-for-pixel in different browsers.

This doesn’t mean that I don’t make adjustments to things like margins and padding on a paragraph or list. I choose to embrace the defaults a browser gives me and work off of them instead of stripping them out and starting from scratch every time. I find that this approach makes my code cleaner and more robust without adding any extra overhead.

 

Taking the Plunge

Ever since I read Jen Simmons’ post about sitting down and launching her website in one night, I have been determined to do the same. So here is it. I have taken the plunge, scrapped everything that I did before, and put together a very simple WordPress template. It’s probably more stupid looking and has more stupid HTML than Jen’s site (just kidding, Jen. I like your site a lot) but it’s here. It’s without the SVG logo that for some reason works locally but not on the server (which I will figure out eventually) but I’ve launched the minimum shippable product and now, as Jeffrey Zeldman states as part of his 10 commandments of web design (see An Event Apart), it’s time to iterate.

CSS Wishlist: Extendible CSS

With more people viewing the web over high-speed connections and through mobile devices across cellular networks, bandwidth has become a major consideration when designing/developing websites.

While the bandwidth usage of CSS files tend to pale in comparison to the obvious big guns such as video, images, and other media, CSS bloat is still a problem. There are methods out there to organize/reduce the amount of CSS we create but it would be wonderful to have a mechanism that would allow us to reuse CSS rules without having to add classes to markup.

For example, if you have a site that uses links that are styled like buttons, you may have some HTML like this:

<a href="sign-in.html" class="btn">Sign In</a>

And some CSS like this:

.btn {
background: #f00;
border: 1px solid #900;
display: block;
padding: 8px;
width: 100px;
}

This gives you some CSS to create a basic red button. If you want to create a new button for “Sign Up” which is green, you can add an ID and style that:

<a href="sign-up.html" class="btn" id="sign-up">Sign Up</a>

#sign-up { background: #0f0; border: 1px solid #090; }

Pretty simple. As your site grows, you may want other green buttons. So what do you do then? Do you add another selector to your styles like:

#sign-up, #next-step { background: #0f0; border: 1px solid #090; }

or do you go in favor of declaring a separate class for all of your green buttons like this:

.btn-green { background: #0f0; border: 1px solid #090; }

and add the class to your markup?

<a href="sign-up.html" class="btn btn-green" id="sign-up">Sign Up</a>
<a href="logout.html" class="btn btn-green" id="log-out">Log Out</a>

The class route seems like a good way to go until you decide to change the color of the button to blue. Then you would have to create a new .btn-blue CSS class AND change your markup.

I wish there was something we could use that would import the properties of other classes and apply them. The way I’ve been thinking that it would work is something like this:

.btn { border: 1px solid #000; padding: 4px; background: #0f0; }
.red-btn { background: #f00; border-color: #600; }
.join-btn { inherit: .btn .red-btn; color: #fff; font-size: 20px; }

By inheriting a class, you could apply the properties to your new class. You could then inherit additional classes and/or apply additional CSS. This would allow you to quickly change styles without having to add to/change your mark up. It would also cut down on code and help keep your markup free of presentational attributes.

We have seen a huge increase in the capabilities of CSS with the implementation/support of CSS3 and I’d love to see something similar to what I propose above come down the pipeline because I think it would be a great benefit to designers.