style-forge.patterns/src/site.css

Style-Forge.Patterns - versatile CSS library with pre-defined classes for responsive, consistent user interfaces.

.sf-pattern {
  grid-auto-rows: auto;
  grid-auto-columns: auto;
  grid-template-areas:
    'main';
}
.sf-pattern.area-header {
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'header'
    'main';
}
.sf-pattern.area-footer {
  grid-template-rows: 1fr;
  grid-template-areas:
    'main'
    'footer';
}
.sf-pattern.area-header.area-footer {
  grid-template-rows: auto 1fr;
  grid-template-areas:
    'header'
    'main'
    'footer';
}

.sf-pattern.area-menu {
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'menu main';
}
.sf-pattern.area-menu.area-header {
  grid-template-areas:
    'header header'
    'menu main';
}
.sf-pattern.area-menu.area-footer {
  grid-template-areas:
    'menu main'
    'footer footer';
}
.sf-pattern.area-menu.area-header.area-footer {
  grid-template-areas:
    'header header'
    'menu main'
    'footer footer';
}

.sf-pattern.area-aside {
  grid-template-columns: 1fr;
  grid-template-areas:
    'main aside';
}
.sf-pattern.area-aside.area-header {
  grid-template-areas:
    'header header'
    'main aside';
}
.sf-pattern.area-aside.area-footer {
  grid-template-areas:
    'main aside'
    'footer footer';
}
.sf-pattern.area-aside.area-header.area-footer {
  grid-template-areas:
    'header header'
    'main aside'
    'footer footer';
}

.sf-pattern.area-menu.area-aside {
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'menu main aside';
}
.sf-pattern.area-menu.area-aside.area-header {
  grid-template-areas:
    'header header header'
    'menu main aside';
}
.sf-pattern.area-menu.area-aside.area-footer {
  grid-template-areas:
    'menu main aside'
    'footer footer footer';
}
.sf-pattern.area-menu.area-aside.area-header.area-footer {
  grid-template-areas:
    'header header header'
    'menu main aside'
    'footer footer footer';
}

@media only screen and (max-width: 1024px) {
  .sf-pattern.area-menu {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      'menu'
      'main';
  }
  .sf-pattern.area-menu.area-header {
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      'header'
      'menu'
      'main';
  }
  .sf-pattern.area-menu.area-footer {
    grid-template-areas:
      'menu'
      'main'
      'footer';
  }
  .sf-pattern.area-menu.area-header.area-footer {
    grid-template-areas:
      'header'
      'menu'
      'main'
      'footer';
  }

  .sf-pattern.area-aside {
    grid-template-areas: 'main aside'
  }
  .sf-pattern.area-aside.area-header {
    grid-template-areas:
      'header header'
      'main aside';
  }
  .sf-pattern.area-aside.area-footer {
    grid-template-areas:
      'main aside'
      'footer footer';
  }
  .sf-pattern.area-aside.area-header.area-footer {
    grid-template-areas:
      'header header'
      'main aside'
      'footer footer';
  }

  .sf-pattern.area-menu.area-aside {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      'menu menu'
      'main aside';
  }
  .sf-pattern.area-menu.area-aside.area-header {
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
      'header header'
      'menu menu'
      'main aside';
  }
  .sf-pattern.area-menu.area-aside.area-footer {
    grid-template-areas:
      'menu menu'
      'main aside'
      'footer footer';
  }
  .sf-pattern.area-menu.area-aside.area-header.area-footer {
    grid-template-areas:
      'header header'
      'menu menu'
      'main aside'
      'footer footer';
  }
}

@media only screen and (max-width: 600px) {
  .sf-pattern.area-aside {
    grid-template-rows: 1fr auto;
    grid-template-areas:
      'main'
      'aside';
  }
  .sf-pattern.area-aside.area-header {
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      'header'
      'main'
      'aside';
  }
  .sf-pattern.area-aside.area-footer {
    grid-template-areas:
      'main'
      'aside'
      'footer';
  }
  .sf-pattern.area-aside.area-header.area-footer {
    grid-template-areas:
      'header'
      'main'
      'aside'
      'footer';
  }

  .sf-pattern.area-menu.area-aside {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      'menu'
      'main'
      'aside';
  }
  .sf-pattern.area-menu.area-aside.area-header {
    grid-template-areas:
      'header'
      'menu'
      'main'
      'aside';
  }
  .sf-pattern.area-menu.area-aside.area-footer {
    grid-template-areas:
      'menu'
      'main'
      'aside'
      'footer';
  }
  .sf-pattern.area-menu.area-aside.area-header.area-footer {
    grid-template-areas:
      'header'
      'menu'
      'main'
      'aside'
      'footer';
  }
}