Source sets for responsive and retina display images

This is a very cool trick that I learnt recently building a WordPress template.

It’s called a “source set” and it allows you to define a set of images, rather than just one. You can define which screen widths trigger each image to be displayed. Media queries. The example below breaks at width = 600px, 1200px and 2000px.

<img src="Logo-banner-open-mobile.png" alt=""

srcset="Logo-banner-open-mobile.png 600w,
Logo-banner-open.png 1200w,
Logo-banner-open-retina.png 2000w" width="600px" />

Very Simple Flex Layout

This is a very simple flex layout based on some examples from a recent smashingmagazine article.

This example was used to show how “flex” fails to created a true grid, because the lower blocks will not always line up with the blocks above. Having said that, there are settings that will allow the over flow to align with the boxes above, but will leave empty space if the number of items in each row are not equal.

The first example will keep each item aligned with the item above, but may leave the last row with an empty space. The important line of code is in the class controlling the item (inside the row) – in this case, line 16:

flex: 0 1 200px;

On the other hand, you can let the uneven items on the last row stretch to fill the space, which is quite handy in some situations.

Again, line 16 is the key:

flex: 1 1 100px;

Notice that I have changed the first 0 to a 1. This first value toggles between “initial” and “auto”. For more details on that check out W3Schools

Blank HTML document

This is the blank HTML doc I use for creating simple pages, usually for testing. Just copy to a text document and save it with .html as the extension.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

  <title>Page Title</title>
  <meta name="description" content="Page Description">
 
  <script src="js/scripts.js"></script>
 
  <link rel="stylesheet" href="css/styles.css">

</head>

<body>

</body>
</html>

Flexbox – aligning buttons in grid

The problem: You have two or three (or more) boxes in a row, each containing text above a button. Because each block of text is a slightly different length, depending on the screen width, the buttons are not always aligned.

The simple solution is to use Flexbox, but the problem is that the exact solution is not always so easy to find.

This is a bare bones solution. It requires three css classes.

  1. The Container
  2. The element (or box)
  3. The button, which sits inside the box.

The container needs to contain: display: flex;.
This will make all the DIVs inside the sontainer stretch to the size of the container.

The Box needs to contain:
display: flex;
flex-flow: column nowrap;

This will stop the elements from within the box forming their own columns. For example, without this, the H2 and P tagsn will sit side by side.

And to get the button to sit at the bottom you use this: margin-top. : auto;

The rest is just making it look pretty. Check out this simple example below.