Introduction#

chapter 8 responsive layout of css book, see demo here

mobile first layout

ckad question 1

HTML#

the reponsive page html

<body>
  <header id="header" class="page-header">
    <div class="title">
      <h1>Wombat Coffee Roaster</h1>
      <div class="slogan">We love coffee</div>
    </div>
  </header>
  <nav class="menu" id="main-menu">
    <button class="menu-toggle" id="toggle-menu">toggle menu</button>
    <div class="menu-dropdown">
      <ul class="nav-menu">
        <li>
          <a href="#"> About </a>
        </li>
        <li>
          <a href="#"> Shop </a>
        </li>
        <li>
          <a href="#"> Menu </a>
        </li>
        <li>
          <a href="#"> Brew </a>
        </li>
      </ul>
    </div>
  </nav>
  <aside id="hero" class="hero">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste modi neque
    totam nemo exercitationem autem voluptates recusandae aspernatur natus rem
    illo enim necessitatibus nostrum repudiandae sapiente reiciendis, tempore
    iure. Placeat!
  </aside>
  <main id="main">
    <div class="row">
      <section class="column">
        <h2 class="subtitle">Single Origin</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus minima
          vitae perspiciatis distinctio enim accusantium repudiandae
          consequuntur quia voluptatem laborum quasi nisi illo ea eum ipsa
          inventore cupiditate, dolores odit?
        </p>
      </section>
      <section class="column">
        <h2 class="subtitle">Single Origin</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus minima
          vitae perspiciatis distinctio enim accusantium repudiandae
          consequuntur quia voluptatem laborum quasi nisi illo ea eum ipsa
          inventore cupiditate, dolores odit?
        </p>
      </section>
      <section class="column">
        <h2 class="subtitle">Single Origin</h2>
        <p>
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus minima
          vitae perspiciatis distinctio enim accusantium repudiandae
          consequuntur quia voluptatem laborum quasi nisi illo ea eum ipsa
          inventore cupiditate, dolores odit?
        </p>
      </section>
    </div>
  </main>
</body>

Mobile First#

create toggle-menu button absolute position top-right corner. The parent menu is positionied relative

.menu {
  position: relative;
}

then the child menu-dropdown is positioned absolute

.menu-dropdown {
  display: none;
  position: absolute;
  right: 0;
  left: 0;
  margin: 0;
}

create humberger menu icon button

.menu.is-open .menu-dropdown {
  display: block;
}
.menu {
  position: relative;
}
.menu-toggle {
  cursor: pointer;
  position: absolute;
  right: 0.1em;
  top: -1.2em;
  border: 0;
  background-color: transparent;
  font-size: 3em;
  width: 1em;
  height: 1em;
  line-height: 0.4;
  text-indent: 5em;
  white-space: nowrap;
  overflow: hidden;
}
.menu-toggle::after {
  position: absolute;
  top: 0.2em;
  left: 0.2em;
  display: block;
  content: '\2261';
  text-indent: 0;
}

toggle by javascript

window.onload = () => {
  var button = document.getElementById('toggle-menu')
  button.addEventListener('click', () => {
    var menu = document.getElementById('main-menu')
    menu.classList.toggle('is-open')
  })
}

Media Query#

desktop layout

ckad question 1

title font size by min-width

@media (min-width: 35em) {
  .title > h1 {
    font-size: 2.25rem;
  }
}

page-header by min-width

@media (min-width: 35em) {
  .page-header {
    padding: 1em;
  }
}

hero section (padding and font-size) by min-width

@media (min-width: 35em) {
  .hero {
    font-size: 1.2rem;
    padding: 5em 3em;
  }
}

main section padding by min-width

@media (min-width: 35em) {
  main {
    padding: 2em 1em;
  }
}

multiple column (flex box) when width larger than min-width

@media (min-width: 35em) {
  .row {
    display: flex;
    margin-left: -0.75em;
    margin-right: -0.75em;
  }
  .column {
    margin-right: 0.75em;
    margin-left: 0.75em;
    flex: 1;
  }
}

hide the toggle-menu button when desktop screen (larger than min-width)

@media (min-width: 35em) {
  .menu-toggle {
    display: none;
  }
  .menu-dropdown {
    display: block;
    position: static;
  }
}

nav-menu item flex when desktop screen

@media (min-width: 35em) {
  .nav-menu {
    display: flex;
    border: 0;
    padding: 0 1em;
  }
  .nav-menu > li {
    flex: 1;
  }
  .nav-menu > li {
    border: 0;
  }
  .nav-menu > li > a {
    padding: 1em;
    text-align: center;
  }
}