Styled quotation Boxes

A commonly used feature on sites is the inclusion of quotes – either from clients, authors, customers. This helps bring a more personal touch to a specific page, and gives a visitor a great indiciation of your service’s popularity.

See the Pen Styled Quotation Boxes by Robin Metcalfe (@solarisedesign) on CodePen.

I wanted to create a styled version of the traditional HTML <blockquote> element

I also wanted some nice background elements, and also felt that the inclusion of images should be avoided where possible, as it adds to asset overhead, and over-complicates what can otherwise be a very simple thing in modern CSS3 development.

This is a fairly straightforward little project, but a great demonstration of some of the subtle, but powerful effects achievable with CSS

Backwards compatibility

This demo should funciton well across all browsers – degrading cleanly to a more basic layout/appearance on browsers which don’t support CSS3 features (list)

Technical notes

I wanted to build this in a way that used the fewest possible HTML semantic elements. I’m a firm believe in keeping HTML markup as lean as possible, not introducing any extra structure unless absolutely necessary.

A single quote box consists of the following HTML

<div class="quotes">
    <blockquote>
      <p>Quotation</p>
      <footer>
        - Author
      </footer>
    </blockquote>
</div>

No additional images or javascript have been used. The "Quote mark" elements are ‘content’ properties in the ::before and ::after elements. This is a technique I often use, it’s widely supported.

I’ve also thrown in a few pieces of flexbox functionality to properly align the quotation boxes. This means that they will dynamically scale and reposition based on the viewport width/height.

And, of course, the use of flexbox means that the blockquote elements can all have matching heights (Non-developers/designers likely won’t understand the frustration caused by hearing the query "Can all these elements be the same height?" in the pre-CSS3 days!)

You’ll notice I’ve also defined a media query for smaller viewports which adjusts the flex direction to column, so that the quotes are always readable.