15Basic figures

The previous sections showed the figure arrangements for what I think are the most common arrangements:

• A full width image

• Two side-by-side half width images

• Three side-by-side ⅓ width image

• Two side-by-side asymmetric ⅓ and ⅔ width images

By far the most common is the first; most images are single, full width images

You can of course have any other arrangement you want, it is just a question of defining new figx-y classes for the figures.

The way to figure it out is to decide how many columns you are working with.

If you wanted three images in a ⅕-⅗-⅕ width arrangement then you are working with a five column arrangement.

If you wanted two images where the first was ¾ of the central column wide and the second ¼ wide then you would be dealing with four columns.

The number of columns is the denominator of the fraction (the number at the bottom, 5 in the first example, 4 in the second)

So that gives you the y number in the figx-y class, the y number must be the same for all the figure element in the row.

The x number is the span and that is the numerator in the fraction (top number, in the second example, the wide image was ¾ so x would be 3 and the narrow image is ¼ so in this case x is 1)

So that determines the classes that are needed.

In the first example there were three images, the first ⅕ wide, the second ⅗ wide and the third ⅕ wide. Giving classes fig1-5, fig3-5 and fig1-5.

In the second example we had a ¾ width image and a ¼ width image, the classes for these would by (respectively) fig3-4 and fig1-4.

The only thing left is to determine the width of the figx-y classes. The formula for this is:

So, for fig3-5 we would have:

Which is:

Thus the CSS for fig3-5 would be:

.fig3-5 { width: 58.5%; }
.fig3-5 img { width: 100%; }

For the fig1-5 we get

Or:

I.e.

.fig1-5 { width: 17.5%; }
.fig1-5 img { width: 100%; }

The same results for the fig1-4 and fig3-4 classes would give:

.fig1-4 { width: 22.62%; }
.fig3-5 img { width: 100%; }

and

.fig3-4 { width: 73.87%; }
.fig3-5 img { width: 100%; }

The HTML for the five column arrangement would be:

<div class="fig-row">
    <figure class="fig-col fig1-5" id="js--f99-04">
<img src="01-pages/99-00-typicals/02-images/fig-99-04.png" alt="Figure 99.4 - short image">
        <figcaption>Figure 99.4 &emsp; short image</figcaption> 
    </figure>
    <figure class="fig-col fig3-5" id="js--f99-05">
<img src="01-pages/99-00-typicals/02-images/fig-99-05.png" alt="Figure 99.5 - Tall image">
        <figcaption>Figure 99.5 &emsp; Tall image</figcaption>
    </figure>
    <figure class="fig-col fig1-5" id="js--f99-06">
<img src="01-pages/99-00-typicals/02-images/fig-99-06.png" alt="Figure 99.6 - short image">
        <figcaption>Figure 99.6 &emsp; short image</figcaption>
    </figure>
</div>

The HTML for the four column arrangement would be:

<div class="fig-row">
    <figure class="fig-col fig3-4" id="js--f99-02">
<img src="01-pages/99-00-typicals/02-images/fig-99-02.png" alt="Figure 99.2 - Tall image">
        <figcaption>Figure 99.2 &emsp; Tall image</figcaption>
    </figure>
    <figure class="fig-col fig1-4" id="js--f99-03">
<img src="01-pages/99-00-typicals/02-images/fig-99-03.png" alt="Figure 99.3 - short image">
        <figcaption>Figure 99.3 &emsp; short image</figcaption>
    </figure>
</div>