The table of contents (TOC) is just a series of links to all the other sections and subsections within the chapter; the TOC, like the title bar, is identical for all pages within a chapter.
The TOC appears directly below the title bar and is normally divided into two columns:
Figure 11.32 Table of contents as two columns
There are three styles of text: the first line of the TOC is level 1 (it’s the “3 Grid, fonts, columns and responsive design” in the above figure) this is a slightly larger font and is in bold. Level 1 entries just have one number, the chapter number.
Next comes level 2, this is a link to a section; it has two numbers (“3.1 The Gerstner Grid”, “3.2 Fonts, point size and line spacing” &c.). Level 2 links are in a heavier Concourse font (t4, not t3), but have a smaller font size; level 2 links are indented from the level 1 links.
Level 3 links are sub-sections; these have three numbers (“3.1.1 How the Gerstner grid works”, “3.2.1 Fonts” &c.). Level 3 links are have the same font size as level 2, but are in a t3 font. These are also indented from the level 1 entries.
Under responsive conditions, the two columns become a single column:
Figure 11.33 Table of contents as a single column
The table of contents is made up of a series of links to the various different web pages on the website. It is actually constructed as a list of entries and lists are HTML elements and they get a whole section to themselves later on (section 12). But before I can go on explaining the TOC, I need to explain the basics of how lists work; so that’s the next bit:
11.5.1
A brief explanation of the unordered list
Lists come in two varieties ordered lists (preceded by a number) and unordered lists (preceded by a bullet point). They work in exactly the same way and I cover both in section 12. For the TOC we only need the unordered list.
An unordered list is the HTML element <ul>...</ul>; the ul unsurprisingly stands for unordered list.
Each list entry lives inside a list element <li>...</li> and there can be as many of these as you want.
Each list entry is by default indented slightly and gets a bullet point.
As far as the TOC is concerned, we don’t want the bullet point (none of the entries in the TOC have a bullet point in front of them) and this is achieved with a bit of CSS:
ul{ list-style: none; }
This gives:
Figure 11.35 An unordered list without bullet points
The bullet points have disappeared, but nothing else has changed, the indentation remains just as it was.
To get rid of the indentations, simply set the margin and padding to zero:
ul {
list-style: none;
margin: 0;
padding: 0;
}
The style of the text can also be changed like any other text by adding font-size, font-family &c. to the CSS for the ul element.
section 12 gives a more detailed explanation of unordered lists, including how to change the bullet point to any character you want
The above brief introduction is all we need for the TOC.
11.5.2
Table of contents, the underlying construction
The table of contents has two parts; the first part is the level 1 entry that links to the chapter (it’s the “3 Grid, fonts, columns and responsive design” in Figure 11.32 and Figure 11.33), this links to the top of the first page in the specified chapter (chapter 3 in the above examples).
There is only one of these links on a page (the TOC only concerns itself with the current chapter and the sections and sub-sections within it) and it is not in a column, it actually spans the page.
The second part of the TOC is the links to all the other sections and sub-sections within the chapter, these are the level 2 and level 3 entries and these are arranged in two columns across the central section of the web page.
TOC Level 1
Let’s look at the first bit first, it’s simpler and explains a lot of the details needed for the second bit, it looks like this:
Figure 11.36 Level 1 TOC entry
The HTML for the first bit is:
TOC level 1 html
<!-- ************************************************************************** [WP TOC]
TABLE OF CONTENTS
***********************************************************************-->
<div class="rg-row"> <!-- Start of TOC section -->
<div class="rg-col rg-span1-5"></div> <!-- Left column (not used) -->
<div class="rg-col rg-span3-5"> <!-- Start of TOC column -->
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
TOC - 3. GRIDS, FONTS, COLUMNS AND RESPONSIVE DESIGN
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
<ul class="toc-line">
<!-- Level 1 --> <li><a class="js--sc-030000" href="03-00-grid.html#js--000000">
<div class="toc-lev"><span class="toc-lev1-num">3</span><span class="toc-lev1-text">Grids, fonts, columns and responsive design</span></div></a>
</li>
</ul>
<!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
</div> <!-- End of TOC column -->
<div class="rg-col rg-span1-5"></div> <!-- Right column (not used) -->
</div> <!-- End of TOC section -->
<!-- ========================================================================== [WP END] -->
Code 11.14 HTML associated with the first line of the TOC
Apart from the normal responsive grid classes there are four other classes that are associated with the first line of the TOC: toc-line, toc-lev, toc-lev1-num and toc-lev1-text.
There is also a peculiar class in the <a> anchor element: js--sc-030000; this class is used for slow scrolling (if the link is on the same page, it scrolls down to the link point fast at first and more slowly as it approaches the link point. It’s called slow scrolling and it will be our first venture into JavaScript. I cover it in section 17. For the time being I will explain how it should be formatted, there isn’t actually a class with that name in any of the CSS files, it is effectively a label that triggers a bit of Java code when it is clicked.
The other four classes are fairly standard and they are:
TOC level 1 css
.toc-line { /* container for the TOC */
margin:0;
list-style: none;
color: #4C6C9C;
font-family: "conc-t3-r";
font-feature-settings: "ss02";
font-size: 0.8rem;
}
.toc-line li a:link, /* format the TOC list text */
.toc-line li a:visited,
.toc-line li a:hover,
.toc-line li a:active {
text-decoration: none;
color: #4C6C9C;
}
.toc-lev:link, /* format the link hover background */
.toc-lev:visited { transition: background-color 0.2s; }
.toc-lev:hover,
.toc-lev:active { background-color: #f8f8f8; }
.toc-lev1-num { /* container for TOC level 1 number */
display: inline-block;
font-family: "conc-t3-b";
font-feature-settings: "ss02";
vertical-align: top;
width: 5%;
margin-top: 0.6rem;
margin-bottom: 0.4rem;
}
.toc-lev1-text { /* container for TOC level 1 text */
display: inline-block;
font-family: "conc-t3-b";
font-feature-settings: "ss02";
width: 95%;
margin-top: 0.6rem;
margin-bottom: 0.4rem;
}
Code 11.15 CSS associated with the first line of the TOC
Working through the HTML, the first line of the TOC is an unordered list in the central column area of the responsive grid, it has the HTML:
<ul class="toc-line">
It is declared with a <ul> element and is given the class toc-line.
The CSS behind the toc-line class is the same sort of stuff we have for most of the other things we’ve looked at, it assigns fonts, font-size, margins, text colour &c. specifically it does the following (in no particular order):
The text is set to a dark blue colour (#466c9c), using the Concourse font with British settings and a font size of 0.8 rem (19 px on a full width screen).
Boiler plate stuff.
The only new thing it does is set the list style:
I covered this (briefly) in the previous section (§ 11.5.1), the toc-line style is being applied to an unordered list element <ul> and this will have list entries within it, these are normally displayed with a bullet point (•), setting the list-style to none (list-style: none) prevents this. We don’t want bullet points preceding the TOC entries.
The entries in the TOC are all clickable links; they will either transfer the browser to a new web page or will scroll to a point on the current web page; and that means that the :link, :visited, :hover and :active pseudo-classes need to be set up. That’s what the next bit does:
.toc-line li a:link, /* format the TOC list text */
.toc-line li a:visited,
.toc-line li a:hover,
.toc-line li a:active {
text-decoration: none;
color: #4C6C9C;
}
This is slightly different to the approach taken in the brief introduction of § 11.5.1, essentially all I’ve done here is remove the underlining from the links (text-decoration: none) and I’ve made sure that the link colour matches that for the toc-line style, I’ve set it to (#466c9c).
The unusual thing is that I’ve applied those properties to all four states of the link (:link, :visited, :hover and :active), with these rules the link will never change appearance. Now at this point you may think I’m being even more stupid than usual; “but your links do change” you might say, and you would be right, if you go to the web page and hover the mouse over the first line of the TOC it does indeed change, it goes from this:
Figure 11.37 Level 1 TOC entry normal state
to this:
Figure 11.38 Level 1 TOC with mouse hover
The background goes grey. So yes there is a difference when the mouse hovers over the link, but it isn’t quite what you think, the link itself is split into two parts, the number and the text and these in turn are held in another div (within the <a> element) and this has its own class toc-lev:
Now in the note at the end of§ 11.2.1 I made a bit of a throw-away statement, I said “These pseudo-classes (:link, :visited, :hover and :active) can be applied to any class, not just links.”
And that’s what I’ve done here, if I just applied it to the link I would get:
Figure 11.39 Level 1 TOC with hover applied just to the link
The changed background would be just around the link itself and I want it to span the whole area (in this case, the width of the page). To do this I’ve applied the :link, :visited, :hover and :active pseudo classes to the div within the <a> element.
Let’s go through it in stages. So far we have a <ul> element with class toc-line:
<ul class="toc-line">
Next I add a list element with a link (anchor) element within it
Ok, the list element is just a standard list element <li> without any associated classes. Next is the anchor element and this actually contains the address we want to link to, in this example it is href="03-00-grid.html#js--000000, it will open the page 03-00-grid.html and position it so that the id js--000000 is at the top of the page.
The bit before this, the class="js--sc-030000" is used to manage the slow scrolling, I explain everything about it in section 17 (it’s basically the scroll point for a section 030000 in this case preceded by js--sc-) for the time being we can ignore it.
The next thing with the anchor is the text that is displayed on the page; this is on the next line and is contained within a div:
All the text for the link (everything between <a> and </a>) is contained in a div with class toc-lev and this class has the following entries in the CSS:
.toc-lev:link, /* format the link hover background */
.toc-lev:visited { transition: background-color 0.2s; }
.toc-lev:hover,
.toc-lev:active { background-color: #f8f8f8; }
If the mouse is hovering over any part of the toc-lev class, or if the mouse is clicked (active) on any part of the class, the background colour for the class will change to light grey (#f8f8f8), this is done with the last two lines:
In addition, the transition property has been used to fade-in the background colour change over 0.2 seconds (short, but noticeable), this is done with the first two lines:
.toc-lev:link, /* format the link hover background */
.toc-lev:visited { transition: background-color 0.2s; }
And that is all the toc-lev class does, it is a container, the background colour of which will change whenever a mouse is hovered over any part of it or its contents.
The only reason for doing this is it gives more control over the size and positioning of the links — it just makes it look better. It is a useful technique.
The last thing is the actual text that appears, this has been designed to look like the contents of a document with different text sizes, indents and formatting; to analyse it in slightly more detail I’ve added some construction lines:
Figure 11.40 TOC indent construction
The green line in the middle is the centre line of the central column, the width of the central column is the same as the black line at the top.
The level 1 TOC entry (starting with the single number 3) is aligned with the left edge of the central area. The number (3) and the text (Grid, fonts, columns and responsive design) are placed in separate boxes (in a very similar way to the heading number and text (see § 11.4). The number is in an inline block with the class toc-lev1-num:
And the text is in another inline element with the class toc-lev1-text:
...<span class="toc-lev1-text">Grids, fonts, columns and responsive design</span></div></a>
This allows the number and text to be separated (by adding margins) to create the effect shown in Figure 11.40, there is a gap (A) between the number and the text, when it comes to the remaining elements of the TOC, the number of each entry is indented and aligned with the text of the level 1 entry.
This can be seen with the CSS for these two classes:
Both entries are defined as inline-block; this means that margins can be assigned to them.
The font is Concourse bold and uses the British settings (ss02), the top margin is set to 0.6 rem (giving space above) and the bottom margin is 0.4 rem (slightly less space below, this leads the eye to think that the links that follow are associated with this link, which they are).
The vertical-align: top property (for the number) ensures that the number is not being centred vertically if the text spans two lines.
The only other thing specified is the width; the number is given a width of 5% of the screen width:
width: 5%;
And the text gets the other 95%:
nbsp; width: 95%;
This means that on a full width screen, the inline-block holding the number is 37 pixels wide, being 5% of the central column width (and that is 748 pixels).
The text has the remaining 95% and this is 711 pixels.
This means that the distance A in Figure 11.40 is the 5% or 37 px on a full width screen.
That is pretty much it for the level 1 TOC entry, there is some responsive stuff and I cover that in § 11.5.4. The only other thing is completing all the list elements:
</li>
</ul>
It closes the list entry and the unordered list.
TOC Level 2/3 and columns
The second part of the TOC is the level 2 and 3 entries that are placed in columns (shown in blue):
Figure 11.41 TOC level 2 and 3 entries
Apart from the columns, the level 2 and level 3 TOC entries are very similar in construction to the level 1 entries discussed in the previous section (there are just more of them).
Code 11.16 HTML associated with level 2 and 3 of the TOC
The bit in green is all the level 2 and level 3 entries for section 3 of the website, it’s a bit confusing because there is so much of it, let’s simplify it by having only two entries
Code 11.17 Simplified HTML associated with level 2 and 3 of the TOC
Now there is just one level 2 entry and one level 3 entry and they are virtually identical to the level 1 entries of the previous section.
TOC level 2 & 3 css
.toc-list { /* container for the TOC */
margin:0;
list-style: none;
column-count: 2;
color: #4C6C9C;
font-family: "conc-t3-r";
font-feature-settings: "ss02";
font-size: 0.8rem;
}
.toc-list li a:link, /* format the TOC list text */
.toc-list li a:visited,
.toc-list li a:hover,
.toc-list li a:link {
text-decoration: none;
color: #4C6C9C;
}
.toc-lev2-num { /* container for TOC level 2 number */
display: inline-block;
font-family: "conc-t4-r";
font-feature-settings: "ss02";
font-size: 0.75rem; vertical-align: top;
width: 20%;
margin-left: 10%;
margin-top: 0.5rem;
margin-bottom: 0.1rem;
}
.toc-lev2-text { /* container for TOC level 2 text */
display: inline-block;
font-family: "conc-t4-r";
font-feature-settings: "ss02";
font-size: 0.75rem;
width: 70%;
margin-top: 0.5rem;
margin-bottom: 0.1rem;
}
.toc-lev3-num { /* container for TOC level 3 number */
display: inline-block;
font-size: 0.7rem;
vertical-align: top;
width: 20%;
margin-left: 10%;
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}
.toc-lev3-text { /* container for TOC level 3 text */
display: inline-block;
font-size: 0.7rem;
width: 70%;
margin-top: 0.2rem;
margin-bottom: 0.2rem;
}
Code 11.18 CSS associated with level 2 and 3 of the TOC
In exactly the same way as the level 1 entries, the level 2 and 3 entries are contained in an unordered list:
<ul class="toc-list">
The level 1 entries had the class toc-line (and this spanned the entire central column), the level 2 and 3 unordered list is of class toc-list and this is very similar to the toc-line class, the only important difference being the column structure it applies, here’s the CSS
.toc-line { /* container for the TOC */
margin:0;
list-style: none;
color: #4C6C9C;
font-family: "conc-t3-r";
font-feature-settings: "ss02";
font-size: 0.8rem;
}
It’s identical apart from the column-count property (i.e. it clears the margins, removes any bullet point with list-style and sets the font to Concourse at 0.8 rem in the same blue colour).
The column-count property is new, it splits the element it is applied to into columns on the screen; the number of columns being specified by the number that follows the property, in our case it is two columns (column-count:2).
The column property is a standard (but not that widely used) feature of websites, it tries to split everything to which the column count applies (in our case this is the unordered list holding all the level 2 and level 3 TOC entries) into even length columns. By default the columns have a gap in the middle:
Figure 11.42 2 column arrangement
If the count were set to 3 the arrangement would be:
Figure 11.43 3 column arrangement
The default gap between the columns stays the same (about 0.8 rem). It is perfectly possible to adjust the gap between the columns (gap C in Figure 11.40) using the column-gap property, this can be set in all the same units as margins and padding (rem, em, px, percentage &c.).
The default arrangement if fine for us, it looks about right.
Surprisingly that is all there is to columns — easy isn’t it.
The toc-list class finally sets the base properties for links within it (this is identical to the toc-line class in the previous section):
.toc-list li a:link, /* format the TOC list text */
.toc-list li a:visited,
.toc-list li a:hover,
.toc-list li a:link {
text-decoration: none;
color: #4C6C9C;
}
Text decoration (underlining) is taken off all forms of the link and the colour is set to the TOC blue colour (#4C6C9C).
The rest of the level 2 and 3 entries are just the same as that for the level 1 stuff, let’s go through it anyway.
Each TOC entry is an anchor link <a> contained in a list element <li>:
This is a level 2 link (the only difference being it uses classes with lev2 in them).
Firstly there is the <a class="js--sc-030100", this is the JavaScript link to the section being referenced (for slow scrolling, see section 17) followed by the link to the point on the relevant page: href="03-00-grid.html#js--030100"> in this case. This links to the section 3.1 ID (js--030100) on web page 03-00-grid.html.
The number and text displayed for this link is (just like the level 1 entries) contained in a div with a class for the number (toc-lev2-num) and another for the text (toc-lev2-text).
Again these classes are almost identical to those of the level 1 entries:
Both classes use the Concourse t4 variant (this is slightly heavier than the t3 variety, but not as heavy as t3 bold) with British styling (ss02) and a font size of 0.75 rem (a bit smaller than the level 1 entries). Top and bottom margins are defined to give the correct spacing and both classes are set to inline-block.
The thing that may be slightly confusing is the left margin; this is set to 10%. Now, I want the number of the level 2 and 3 entries to be indented to align with the text of the level 1 entry. In the level 1 entry, the inline-block holding the number was set to a width of 5% (of the central column).
Logically then, the left margin of the level 2 number should also be 5% of the central column width, so why is it set to 10%?
Well, it’s because of the columns, the left margin percentage is of the containing element and in this case that is the TOC columns (remember there are two columns each half the width of the central column area), since the column is half the width of the central column (374 px) the indent needs to be 10% to give the 37 pixel indentation (i.e. 5% of 748 pixels for the whole central column).
The width of the toc-lev2-num class is 20% (equivalent to 10% of the central columns width), this is to allow for the extra number in the level 2 and 3 entries (level 2 entries have two number separated by a full stop, level 3 have three numbers separated by full stops compared with level 1 that only have single number).
The text class toc-lev2-text has its width set to 70%; logically if the number block is 10% you would expect the text block to be the remaining 80%, the reason it isn’t is to accommodate the gap between the columns, this is just shy of 1 rem or 10%; hence the text block is only 70% and not 80% (I deducted the 10% from the text block).
The level 3 classes are identical to the level 2 classes except that they are called toc-lev3-num and toc-lev3-text. The level 3 classes use the default font and font size set in the toc-list class (Concourse t3 regular) and so no font declarations are included in these classes, they are inherited from the toc-list class.
A table of contents should only have one level 1 entry, but can have as many level 2 and 3 entries as required, each entry being everything between the <li>...</li> tags.
In the example HTML above (Code 11.16) there are 14 level 2 and level 3 entries
11.5.3
Balancing TOC columns
Look at the following TOC from the website (this is section 1):
Figure 11.44 Columns with gaps
I’ve done something here to stop the columns wrapping the 1.4 entry into the previous columns, if I did nothing it would look like this:
Figure 11.45 Columns without gaps
The level 2 entry 1.4 is in the left column and all the level 3 entries are in the right columns (the 1.4.1, 1.4.2 &c. entries). This is because the column property just tries to make the left and right columns the same height.
Now this is just a stylistic point, but I think it is better to have the 1.4 at the top of the right column, keeping it with all its sub-sections.
To do this, I have to convince the column property that there are more entries than there actually are. Look at the HTML for this section:
This is all bog standard TOC stuff; it looks just like the stuff we did in the previous section, just with links for section 1 instead of section 3.
The only unusual thing is the two lines in green (lines 19 & 20). Here there are two identical break elements:
<br class="toc-pad">
To recap, all the <br> element does is force a line break; in this case it has been given a class (toc-pad) short for TOC padding.
The CSS for this is:
.toc-pad { visibility: visible;} /* Padding for even columns */
Not much to it, I just make sure it’s visible (i.e. it is actually displayed on the web page).
This works by making the column rendering logic in the browser think a line break has occurred and that the particular element is taking up an addition line in the column and it rebalances the column accordingly.
The number of <br class="toc-pad"> lines required is purely dependent on how far you have to push the list down before the element you want breaks into the next columns. You have to judge it by trying it.
The only rule for using the <br class="toc-pad"> in a list is that it has to be within the confines of a <li>...</li> element (for some reason that I’m not sure about), you can’t put it after the closing </li>.
Remember this it is only to manage my own pedantic proclivities, if you are perfectly happy with the columns breaking wherever they will don’t bother with the toc-pad breaks.
11.5.4
Table of contents responsive elements
There isn’t much to this, basically when the screen narrows to 760 px or less, the level 2 and level 3 entries become a single column and any toc-pad breaks disappear:
The bits in bold and underlined in red need to be filled in for each entry (three in the first <li> and four in the <div>). The final thing looks like this:
Keep copying everything between the <li> and </li> and change the bits shown in red. Remember the level 1 entry has its own unordered list declaration.
