7
\$\begingroup\$

I'm working on a photo website, the markup looks like this:

<div class="gallery">
    <figure>
        <img src="photo1.jpg" />
        <figcaption>Photo 1</figcaption>
    </figure>
    <figure>
        <img src="photo2.jpg" />
        <figcaption>Photo 2</figcaption>
    </figure>
    ...
</div>

I've come up with some SCSS code that presents the images as expected (a justified strip of fixed height with a white line at the top and bottom. Here's the SCSS:

$background_color: #333;
$border_color: #EEE;

$thumbnail-height: 87px;

html, figure, img, div {
    margin: 0;
    padding: 0;
}
body {
    font-size: 100%;
    line-height: 1;
    margin: 1em;
    background: $background_color;
}
.gallery {
    text-align: justify;
    margin: 0 -4px -1px 0;
    padding: 1px 0 0 0;
    overflow: hidden;
    figure {
        position: relative;
        border-top: 1px solid $border_color;
        border-bottom: 1px solid $border_color;
        height: $thumbnail-height;
        display: inline-block;
        margin: -1px 4px 0 0;
        vertical-align: top;
        &:before {
            content: "";
            position: absolute;
            top: -1px;
            bottom: -1px;
            left: -9999px;
            width: 9999px;
            z-index: -1;
            border-top: 1px solid $border_color;
            border-bottom: 1px solid $border_color;
        }
        img {
            height: 100%;
            display: block;
        }
        figcaption {
            display: none;
        }
    }
}

There is a fiddle demo here.

This gives an acceptable layout on most modern browsers, but I'm not very proud of this code:

  • It's too complicated
  • It uses negative margins, that I view as a hack
  • It uses large :before pseudo-element that are trimmed by overflow: hidden, and that also needs a negative z-index

I would be grateful for any tips that would help improve that code.

\$\endgroup\$
5
  • 1
    \$\begingroup\$ Why do you think negative margins is a hack? \$\endgroup\$
    – cimmanon
    Commented Jun 18, 2014 at 13:34
  • 1
    \$\begingroup\$ I can't say I have a rational reason for it; it's just the way I feel about it. \$\endgroup\$
    – Maurice Perry
    Commented Jun 18, 2014 at 13:36
  • \$\begingroup\$ Well they aren't: smashingmagazine.com/2009/07/27/… \$\endgroup\$
    – cimmanon
    Commented Jun 18, 2014 at 13:41
  • \$\begingroup\$ Will you also targeting mobile devices in the future? \$\endgroup\$
    – darcher
    Commented Jul 11, 2014 at 22:54
  • \$\begingroup\$ @darcher I am already \$\endgroup\$
    – Maurice Perry
    Commented Jul 20, 2014 at 15:00

1 Answer 1

Reset to default
3
\$\begingroup\$

First, I will start with the good:

<figure>
    <img src="photo1.jpg" />
    <figcaption>Photo 1</figcaption>
</figure>

It is excellent that you use the HTML5 tag figure instead of a plain old div.

You may just have removed this for brevity (many people do), but when you write HTML, you should build your page like this:

<!doctype html>
<html>
<head>
    <title>Your Title Here</title>
</head>
<body>
    <div class="gallery">
        <figure>
            <img src="photo1.jpg" />
            <figcaption>Photo 1</figcaption>
        </figure>
        <figure>
            <img src="photo2.jpg" />
            <figcaption>Photo 2</figcaption>
        </figure>
    </div>
</body>
</html>

You can validate your HTML at the W3C validator (it validates once you provide the framework).

It does look clumsy the way you write out each figure. If I were you, I would probably load the images and figcaptions in a separate file (maybe a JSON file?) and use JS to add them to the page. This way, you just have to enter the new data in this file, and the webpage will load them right in the next it is loaded.

\$\endgroup\$
1
  • 2
    \$\begingroup\$ Thanks for your comment. I omitted the <html>, <head>, and <body> tags for brevity (and because you don't include them in jsfiddle). In my application html is, of course, generated dynamically. As you suggested, a JSON document is retrieved via ajax, and the <figure> tags are generated in JavaScript. The photos are not inlined in the application, I inlined them when I did the jsfiddle. \$\endgroup\$
    – Maurice Perry
    Commented Apr 18, 2015 at 9:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.