Add sticky and floating list title snippets

2020-08-18 15:44:01 +03:00
parent 13856289d9
commit 3eb172d4c9
2 changed files with 181 additions and 0 deletions
--- a/snippets/floating-list-titles.md
+++ b/snippets/floating-list-titles.md
@ -0,0 +1,101 @@
+---
+title: List with floating section headings
+tags: visual,advanced
+---
+
+Creates a list with floating headings for each section.
+
+- Use `overflow-y: auto` to allow the list container to overflow vertically.
+- Use `display: grid` on the inner container (`dl`) to create a layout with two columns.
+- Set headings (`dt`) to `grid-column: 1` and content (`dd`) to `grid-column: 2`
+- Finally, apply `position: sticky` and `top: 0.5rem` to headings to create a floating effect.
+
+```html
+<div class="container">
+  <div class="floating-stack">
+    <dl>
+      <dt>A</dt>
+      <dd>Algeria</dd>
+      <dd>Angola</dd>
+
+      <dt>B</dt>
+      <dd>Benin</dd>
+      <dd>Botswana</dd>
+      <dd>Burkina Faso</dd>
+      <dd>Burundi</dd>
+
+      <dt>C</dt>
+      <dd>Cabo Verde</dd>
+      <dd>Cameroon</dd>
+      <dd>Central African Republic</dd>
+      <dd>Chad</dd>
+      <dd>Comoros</dd>
+      <dd>Congo, Democratic Republic of the</dd>
+      <dd>Congo, Republic of the</dd>
+      <dd>Cote d'Ivoire</dd>
+
+      <dt>D</dt>
+      <dd>Djibouti</dd>
+
+      <dt>E</dt>
+      <dd>Egypt</dd>
+      <dd>Equatorial Guinea</dd>
+      <dd>Eritrea</dd>
+      <dd>Eswatini (formerly Swaziland)</dd>
+      <dd>Ethiopia</dd>
+    </dl>
+  </div>
+</div>
+```
+
+```css
+.container {
+  display: grid;
+  place-items: center;
+  min-height: 100vh;
+}
+
+.floating-stack {
+  background: #455A64;
+  color: #fff;
+  height: 80vh;
+  height: 320px;
+  border-radius: 1rem;
+  overflow-y: auto;
+}
+
+.floating-stack > dl {
+  margin: 0 0 1rem;
+  display: grid;
+  grid-template-columns: 2.5rem 1fr;
+  align-items: center;
+}
+
+.floating-stack dt {
+  position: sticky;
+  top: 0.5rem;
+  left: 0.5rem;
+  font-weight: bold;
+  background: #263238;
+  color: #cfd8dc;
+  height: 2rem;
+  width: 2rem;
+  border-radius: 50%;
+  padding: 0.25rem 1rem;
+  grid-column: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+}
+
+.floating-stack dd {
+  grid-column: 2;
+  margin: 0;
+  padding: 0.75rem;
+}
+
+.floating-stack > dl:first-of-type > dd:first-of-type {
+  margin-top: 0.25rem;
+}
+```
--- a/snippets/sticky-list-titles.md
+++ b/snippets/sticky-list-titles.md
@ -0,0 +1,80 @@
+---
+title: List with sticky section headings
+tags: visual,intermediate
+---
+
+Creates a list with sticky headings for each section.
+
+- Use `overflow-y: auto` to allow the list container (`dl`) to overflow vertically.
+- Set headings (`dt`) `position` to `sticky` and apply `top: 0` to stick to the top of the container.
+
+```html
+<div class="container">
+  <dl class="sticky-stack">
+    <dt>A</dt>
+    <dd>Algeria</dd>
+    <dd>Angola</dd>
+
+    <dt>B</dt>
+    <dd>Benin</dd>
+    <dd>Botswana</dd>
+    <dd>Burkina Faso</dd>
+    <dd>Burundi</dd>
+
+    <dt>C</dt>
+    <dd>Cabo Verde</dd>
+    <dd>Cameroon</dd>
+    <dd>Central African Republic</dd>
+    <dd>Chad</dd>
+    <dd>Comoros</dd>
+    <dd>Congo, Democratic Republic of the</dd>
+    <dd>Congo, Republic of the</dd>
+    <dd>Cote d'Ivoire</dd>
+
+    <dt>D</dt>
+    <dd>Djibouti</dd>
+
+    <dt>E</dt>
+    <dd>Egypt</dd>
+    <dd>Equatorial Guinea</dd>
+    <dd>Eritrea</dd>
+    <dd>Eswatini (formerly Swaziland)</dd>
+    <dd>Ethiopia</dd>
+  </dl>
+</div>
+```
+
+```css
+.container {
+  display: grid;
+  place-items: center;
+  min-height: 100vh;
+}
+
+.sticky-stack {
+  background: #37474f;
+  color: #fff;
+  margin: 0;
+  height: 320px;
+  border-radius: 1rem;
+  overflow-y: auto;
+}
+
+.sticky-stack dt {
+  position: sticky;
+  top: 0;
+  font-weight: bold;
+  background: #263238;
+  color: #cfd8dc;
+  padding: 0.25rem 1rem;
+}
+
+.sticky-stack dd {
+  margin: 0;
+  padding: 0.75rem 1rem;
+}
+
+.sticky-stack dd + dt {
+  margin-top: 1rem;
+}
+```