HTML and CSS: Practical II

1
2
3
4
5
6
7<div class="frame parent-centred">
  <div class="box">Centred by the parent</div>
</div>

<div class="frame child-centred">
  <div class="box auto">Centred by margin: auto</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27.frame {
  display: flex;
  height: 110px;
  margin-bottom: 10px;
  border: 2px dashed #3055d8;
  border-radius: 8px;
}

/* One shorthand for both axes: place-content is align-content plus
   justify-content. */
.parent-centred {
  place-content: center;
}

/* Nothing on the parent but display: flex. An auto margin in a flex container
   eats all the free space in that direction, so all four centre the child. */
.box.auto {
  margin: auto;
}

.box {
  padding: 10px 16px;
  background: #3055d8;
  color: #ffffff;
  border-radius: 6px;
  font-size: 0.85rem;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15<ul class="row">
  <li>Abuja</li>
  <li>Kano</li>
  <li>Enugu</li>
  <li>Ibadan</li>
  <li>Benin</li>
  <li>Warri</li>
  <li>Jos</li>
</ul>

<ul class="col">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24.row, .col {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  gap: 8px;                  /* between items only, never at the edges */
}

.row {
  flex-wrap: wrap;           /* opt-in: the default is nowrap */
}

.col {
  flex-direction: column;
  align-items: flex-start;   /* otherwise each item stretches full width */
}

.row li, .col li {
  padding: 7px 12px;
  background: #eef1fd;
  border: 1px solid #3055d8;
  border-radius: 999px;
  font-size: 0.85rem;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14<div class="bar">
  <div class="one">flex: 1</div>
  <div class="one">flex: 1, but much more text inside it</div>
</div>

<div class="bar">
  <div class="auto">flex: auto</div>
  <div class="auto">flex: auto, but much more text inside it</div>
</div>

<div class="bar">
  <div class="fixed">grow 0, basis 90px</div>
  <div class="grows">grow 2, basis 0</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23.bar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}

.bar > * {
  padding: 8px 10px;
  background: #eef1fd;
  border: 1px solid #3055d8;
  border-radius: 6px;
  font-size: 0.8rem;
}

/* Basis 0: content width is ignored, so both items come out equal. */
.one { flex: 1 1 0%; }

/* Basis auto: each starts from its content, then shares the surplus, so the
   wordier one stays wider. */
.auto { flex: 1 1 auto; }

.fixed { flex: 0 0 90px; }     /* never grows, never shrinks */
.grows { flex: 2 1 0%; }       /* takes twice the share of a grow: 1 sibling */

1
2
3
4
5
6
7
8
9<div class="frame as-row">
  <div class="box">A</div>
  <div class="box">B</div>
</div>

<div class="frame as-col">
  <div class="box">A</div>
  <div class="box">B</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24.frame {
  display: flex;
  height: 110px;
  margin-bottom: 10px;
  border: 2px dashed #3055d8;
  border-radius: 8px;
  justify-content: space-between;   /* along the main axis */
  align-items: center;              /* across the cross axis */
}

/* Main axis horizontal: space-between spreads left to right, centre is vertical. */
.as-row { flex-direction: row; }

/* Main axis vertical: the very same two declarations now spread top to bottom
   and centre horizontally. */
.as-col { flex-direction: column; }

.box {
  padding: 8px 14px;
  background: #3055d8;
  color: #ffffff;
  border-radius: 6px;
  font-size: 0.85rem;
}

1
2
3
4
5
6
7
8
9<nav class="bar" aria-label="Main">
  <a class="brand" href="#home">Jibowu Park</a>
  <ul class="links">
    <li><a href="#routes">Routes</a></li>
    <li><a href="#fares">Fares</a></li>
    <li><a href="#help">Help</a></li>
    <li class="end"><a href="#signin">Sign in</a></li>
  </ul>
</nav>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38.bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 14px;
  background: #17171a;
  border-radius: 8px;
}

.links {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;              /* so the list fills the bar and has space to give away */
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Everything before this stays put; this one is pushed to the far end. */
.end {
  margin-left: auto;
}

.bar a {
  color: #ffffff;
  text-decoration: none;
  font-size: 0.88rem;
}

.brand { font-weight: 700; }

.bar a:hover { text-decoration: underline; }

.bar a:focus-visible {
  outline: 2px solid #ffd75e;
  outline-offset: 3px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<div class="cards">
  <article class="card">
    <h3>Abuja</h3>
    <p>Twelve hours, one stop.</p>
    <a class="cta" href="#a">Book</a>
  </article>
  <article class="card">
    <h3>Kano</h3>
    <p>Eighteen hours with two rest stops, arriving early the next morning at the
      central terminal.</p>
    <a class="cta" href="#k">Book</a>
  </article>
  <article class="card">
    <h3>Enugu</h3>
    <p>Nine hours, direct.</p>
    <a class="cta" href="#e">Book</a>
  </article>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37.cards {
  display: flex;
  align-items: stretch;    /* the default, stated so it is deliberate */
  gap: 10px;
}

.card {
  display: flex;
  flex-direction: column;  /* so the parts inside can be pushed apart */
  flex: 1 1 0%;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #c9cad1;
  border-radius: 8px;
  background: #f7f7f8;
  font-size: 0.82rem;
}

.card h3 { margin: 0 0 6px; font-size: 0.95rem; }

/* Absorbs whatever height is spare, which pushes the action down. */
.card p { margin: 0 0 10px; flex: 1; }

.cta {
  margin-top: auto;        /* belt and braces: sticks to the bottom edge */
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 6px;
  background: #3055d8;
  color: #ffffff;
  text-decoration: none;
}

.cta:focus-visible {
  outline: 2px solid #17171a;
  outline-offset: 2px;
}

1
2
3
4
5
6
7<ul class="grid">
  <li>Abuja</li>
  <li>Kano</li>
  <li>Enugu</li>
  <li>Ibadan</li>
  <li>Benin</li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18.grid {
  display: grid;
  /* As many 140px columns as fit; each then shares out the leftover space. */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.grid li {
  padding: 14px 12px;
  background: #eef1fd;
  border: 1px solid #3055d8;
  border-radius: 8px;
  text-align: center;
  font-size: 0.85rem;
}

1
2
3
4
5
6<div class="page">
  <header class="ph">Header</header>
  <nav class="pn" aria-label="Sections">Nav</nav>
  <main class="pm">Main</main>
  <footer class="pf">Footer</footer>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24.page {
  display: grid;
  grid-template-areas:
    'head head'
    'nav  main'
    'foot foot';
  grid-template-columns: 90px 1fr;
  grid-template-rows: auto 1fr auto;
  gap: 8px;
  min-height: 170px;
}

.ph { grid-area: head; }
.pn { grid-area: nav; }
.pm { grid-area: main; }
.pf { grid-area: foot; }

.page > * {
  padding: 10px;
  border-radius: 6px;
  background: #eef1fd;
  border: 1px solid #3055d8;
  font-size: 0.82rem;
}

1
2
3
4
5
6
7<div class="grail">
  <header class="g-head">Header</header>
  <nav class="g-nav" aria-label="Sections">Nav</nav>
  <main class="g-main">Main content, the only part that changes width.</main>
  <aside class="g-side">Aside</aside>
  <footer class="g-foot">Footer</footer>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39/* One column is the default, so a narrow screen needs no query at all. */
.grail {
  display: grid;
  grid-template-areas:
    'head'
    'nav'
    'main'
    'side'
    'foot';
  gap: 8px;
  min-height: 200px;
}

@media (min-width: 34em) {
  .grail {
    grid-template-areas:
      'head head head'
      'nav  main side'
      'foot foot foot';
    grid-template-columns: 80px 1fr 80px;
    grid-template-rows: auto 1fr auto;
  }
}

.g-head { grid-area: head; }
.g-nav  { grid-area: nav; }
.g-main { grid-area: main; }
.g-side { grid-area: side; }
.g-foot { grid-area: foot; }

.grail > * {
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #3055d8;
  background: #eef1fd;
  font-size: 0.8rem;
}

.g-main { background: #ffffff; }

1
2
3
4
5
6
7
8<ul class="mosaic">
  <li class="wide">wide, span 2</li>
  <li class="tall">tall, rows 1 to 3</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
</ul>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28.mosaic {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 48px;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Two tracks wide, starting wherever the auto-placer puts it. */
.wide { grid-column: span 2; }

/* Explicit lines. Four columns means five lines, so 1 / 3 covers two rows. */
.tall { grid-row: 1 / 3; }

.mosaic li {
  display: grid;
  place-items: center;
  background: #eef1fd;
  border: 1px solid #3055d8;
  border-radius: 6px;
  font-size: 0.78rem;
  text-align: center;
}

.wide { background: #d9dcea; }
.tall { background: #cfd6f3; }

1
2
3
4
5
6<div class="board">
  <div>one</div>
  <div>two</div>
  <div class="odd">bottom right</div>
  <div>four</div>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26.board {
  display: grid;
  grid-template-columns: repeat(2, 70px);
  grid-auto-rows: 60px;
  gap: 8px;
  height: 160px;

  place-items: center;      /* align-items: center; justify-items: center */
  place-content: center;    /* align-content: center; justify-content: center */

  border: 2px dashed #3055d8;
  border-radius: 8px;
}

/* One cell breaks ranks. Block axis first, inline axis second. */
.odd {
  place-self: end end;
}

.board > div {
  padding: 4px;
  background: #eef1fd;
  border-radius: 6px;
  font-size: 0.75rem;
  text-align: center;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<p class="cap">overflow-y: scroll &mdash; gutter always reserved</p>
<div class="pane always">
  <p>06:30 Abuja</p><p>08:00 Kano</p><p>11:15 Enugu</p><p>14:45 Ibadan</p>
</div>

<p class="cap">overflow-y: auto &mdash; scrolls, and reachable by keyboard</p>
<div class="pane demand" tabindex="0" role="region" aria-label="Departures">
  <p><a href="#a">06:30 Abuja</a></p>
  <p><a href="#k">08:00 Kano</a></p>
  <p><a href="#e">11:15 Enugu</a></p>
  <p><a href="#i">14:45 Ibadan</a></p>
</div>

<p class="cap">overflow: hidden &mdash; clipped, so nothing focusable goes in here</p>
<div class="pane clip">
  <p>Decorative text only. The rest is cut off and cannot be reached.</p>
  <p>Second line, clipped away.</p>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32.cap { margin: 10px 0 4px; font-size: 0.75rem; color: #5c5c66; }

.pane {
  height: 60px;
  padding: 0 10px;
  border: 1px solid #c9cad1;
  border-radius: 6px;
  font-size: 0.8rem;
}

.pane p { margin: 6px 0; }

.always { overflow-y: scroll; }

.demand { overflow-y: auto; }

/* Clips with no scrollbar, so anything past the edge is unreachable. */
.clip { overflow: hidden; }

/* The scrollable pane is focusable, so it needs its own ring. */
.demand:focus-visible {
  outline: 2px solid #3055d8;
  outline-offset: 2px;
}

/* Drawn INSIDE the link, so a clipping ancestor cannot cut it off. */
.demand a:focus-visible {
  outline: 2px solid #3055d8;
  outline-offset: -2px;
}

.demand a { color: #17171a; }

1
2
3
4
5
6<p class="one-line">One line only: this sentence is far too long for the box it has been put in.</p>

<p class="clamped">Three lines, then an ellipsis. The coach leaves Jibowu at 06:30, stops once at
  Lokoja for twenty minutes, and reaches the central terminal in Abuja by early
  evening barring roadworks on the Abaji stretch, which are frequent enough to be
  worth allowing for.</p>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23.one-line {
  max-width: 260px;
  white-space: nowrap;       /* without this it wraps and never truncates */
  overflow: hidden;          /* without this it spills past the border */
  text-overflow: ellipsis;   /* without this it is cut mid-letter */
  border: 1px solid #c9cad1;
  border-radius: 6px;
  padding: 8px;
  font-size: 0.85rem;
}

.clamped {
  max-width: 260px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;     /* the line count */
  overflow: hidden;          /* still required, even here */
  border: 1px solid #c9cad1;
  border-radius: 6px;
  padding: 8px;
  font-size: 0.85rem;
  line-height: 1.5;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<div class="scrollwrap" tabindex="0" role="region" aria-label="Departures">
  <table class="sched">
    <caption>All departures today</caption>
    <thead>
      <tr>
        <th scope="col">Time</th>
        <th scope="col">Route</th>
        <th scope="col">Bay</th>
      </tr>
    </thead>
    <tbody>
      <tr><th scope="row">06:30</th><td>Abuja</td><td>B</td></tr>
      <tr><th scope="row">08:00</th><td>Kano</td><td>C</td></tr>
      <tr><th scope="row">11:15</th><td>Enugu</td><td>D</td></tr>
      <tr><th scope="row">14:45</th><td>Ibadan</td><td>A</td></tr>
      <tr><th scope="row">17:00</th><td>Benin</td><td>E</td></tr>
      <tr><th scope="row">19:30</th><td>Warri</td><td>F</td></tr>
    </tbody>
  </table>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46.scrollwrap {
  max-height: 150px;
  overflow: auto;
  border: 1px solid #c9cad1;
  border-radius: 8px;
}

.scrollwrap:focus-visible {
  outline: 2px solid #3055d8;
  outline-offset: 2px;
}

/* separate, not collapse: with collapsed borders the lines belong to the table
   and stay behind while the sticky cell travels. */
.sched {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.82rem;
}

.sched caption {
  padding: 8px 10px;
  text-align: left;
  color: #5c5c66;
  font-weight: 600;
}

.sched thead th {
  position: sticky;
  top: 0;
  background: #17171a;      /* opaque, or the rows show through */
  color: #ffffff;
  text-align: left;
  padding: 8px 10px;
  /* The bottom rule, drawn as a shadow so it travels with the cell. */
  box-shadow: inset 0 -1px 0 #5c5c66;
}

.sched tbody th,
.sched tbody td {
  padding: 7px 10px;
  border-bottom: 1px solid #e4e5e9;
  text-align: left;
  font-weight: 400;
}

1
2
3
4
5
6<div class="rail" tabindex="0" role="region" aria-label="Featured routes">
  <article class="slide"><h3>Abuja</h3><p>12 hours, one stop</p></article>
  <article class="slide"><h3>Kano</h3><p>18 hours, two stops</p></article>
  <article class="slide"><h3>Enugu</h3><p>9 hours, direct</p></article>
  <article class="slide"><h3>Ibadan</h3><p>2 hours, direct</p></article>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35.rail {
  display: flex;
  gap: 10px;
  padding: 4px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* So a snapped card is not flush against the container edge. */
  scroll-padding-left: 4px;
  /* Keeps a swipe from scrolling the page behind once the rail runs out. */
  overscroll-behavior-x: contain;
}

.rail:focus-visible {
  outline: 2px solid #3055d8;
  outline-offset: 2px;
}

.slide {
  flex: 0 0 60%;             /* no shrinking, so the rail really does overflow */
  scroll-snap-align: start;
  box-sizing: border-box;
  padding: 12px;
  border: 1px solid #3055d8;
  border-radius: 8px;
  background: #eef1fd;
  font-size: 0.8rem;
}

.slide h3 { margin: 0 0 4px; font-size: 0.9rem; }
.slide p { margin: 0; color: #5c5c66; }

/* A reader who has asked for less motion gets no smooth scrolling. */
@media (prefers-reduced-motion: no-preference) {
  .rail { scroll-behavior: smooth; }
}