modern-spa-boilerplate/src/app/components/Layout.css

Modern Boilerplate for Single Page Applications

*,
*:before,
*:after{
  box-sizing: border-box;
}

html{
  font-size: 16px;

  @media screen and (orientation: landscape){
    font-size: responsive 1em 1.25em; /* min-size, max-size */
    /* translated: 16px => 20px */

    font-range: 60em 90em; /* viewport widths between which font-size is fluid */
    /* translated: 60em = 960px; 90em = 1440px when using the standard browser 16px font size */
  }

  @media screen and (orientation: portrait){
    font-size: responsive 1em 1.25em; /* min-size, max-size */
    font-range: 20em 30em; /* viewport widths between which font-size is fluid */
  }

  background: #eee;
}

#vue-root > h1{
  @layout landscape{
    &::after{
      content: " [Layout::Landscape]"
    }
  }

  @layout portrait{
    &::after{
      content: " [Layout::Portrait]"
    }
  }
}

body {
  font-family: "SourceSansPro", sans-serif;
  margin-left: auto;
  margin-right: auto;
  background: white;

  /* limit overall size */
  /* max-width: 60rem; */

  @media screen and (orientation: landscape){
    padding: 1rem 2rem;
  }

  @media screen and (orientation: portrait){
    padding: 0.5rem 1rem;
  }
}

@lost gutter 1rem;

.some-grid{
  lost-utility: clearfix;

  .inner{
    width: 10rem;
    padding-top: calc(10rem / 1.6180);

    background: #ccc;
    text-align: center;
  }

  .cell{
    margin-bottom: 1rem;

    /* 320px -> 640px */
    @media screen and (width < 40em) {
      border: 2px solid yellow;
      lost-column: 1/2;
    }

    /* 640px -> 960px */
    @media screen and (width >= 40em) and (width < 50em) {
      border: 2px solid orange;
      lost-column: 1/3;
    }

    /* 800px -> 1040px */
    @media screen and (width >= 50em) and (width < 65em) {
      border: 2px solid red;
      lost-column: 1/4;
    }

    /* 1040px -> 1280px */
    @media screen and (width >= 65em) and (width < 90em) {
      border: 2px solid purple;
      lost-column: 1/5;
    }

    /* 1280px -> 1520px */
    @media screen and (width >= 90em) and (width < 110em) {
      border: 2px solid darkblue;
      lost-column: 1/6;
    }

    /* 1280px -> 1520px */
    @media screen and (width >= 110em) and (width < 130em) {
      border: 2px solid darkgreen;
      lost-column: 1/7;
    }
  }

}