100% Responsive Page Example in Pure CSS

100-responsive-page-example-in-pure-css.markdown

100% Responsive Page Example in Pure CSS

Once in a while, you need an example. This is an example of a responsive layout that works nicely. Pure CSS, of course. What else? Enjoy and share | sander nizni

A Pen by Sander Nizni on CodePen.

License.

index.html

<article class="comic">
  <div class="panel">
    <p class="text top-left">It starts here...</p>
    <p class="text bottom-right">...and here is how it happened!</p>
  </div>
  <div class="panel">
    <p class="text top-left">Try resizing...</p>
    <p class="text bottom-right">...it's responsive</p>
  </div>
  <div class="panel">
    <p class="speech">A comment</p>
  </div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel"></div>
  <div class="panel">
    <p class="text bottom-right">To be continued</p>
  </div>
</article>

script.js

/*   NO JS AND NO BS, ONLY CSS - ENJOY!

     SANDER SAYS:
     NO WARRANTIES EXPRESSED OR IMPLIED
     FOR USING THIS CODE. THIS OR SIMILAR
     CODE WAS WRITTEN BEFORE, AND IT WILL
     BE WRITTEN AGAIN... BUT IT DOESN'T
     MATTER - BECAUSE WE ARE IN THIS
     TOGETHER. EVERYTHING COULD HAVE
     BEEN ANYTHING ELSE, AND IT WOULD
     HAVE JUST AS MUCH MEANING.
     COMPLIMENTS? PARTY INVITATIONS?
     RIGHT ON! CONTACT @HYPERABSOLUTE ON
     TWITTER OR ON UXRIG.COM
     STAY AWESOME | HYPERABSOLUTE
*/

style.css

html, body {
  margin:0;
  padding:0;
}

.comic {
  display:flex;
  flex-wrap:wrap;
  font-family:'Comic Sans', cursive;
  padding:1vmin;
}

.panel {
  background-color:#fff;
  border:solid 2px #cecece;
  box-shadow:0 6px 6px -6px #333;
  display:inline-block;
  flex:1 1;
  height:200px;
  margin:1vmin;
  overflow:hidden;
  position:relative;
}

.text {
  background-color:#fff;
  border:solid 2px #000;
  margin:0;
  padding:3px 10px;
}

.top-left {
  left:-6px;
  position:absolute;
  top:-2px;
  transform:skew(-15deg);
}

.bottom-right {
  bottom:-2px;
  position:absolute;
  right:-6px;
  transform:skew(-15deg);
}

.speech {
  background-color:#fff;
  border:solid 2px #000;
  border-radius:12px;
  display:inline-block;
  margin:.5em;
  padding:.5em 1em;
  position:relative;
}

.speech:before {
  border:solid 12px transparent;
  border-left:solid 12px #000;
  border-top:solid 12px #000;
  bottom:-24px;
  content:"";
  height:0;
  left:24px;
  position:absolute;
  transform:skew(-15deg);
  width:0;
}

.speech:after {
  border:solid 10px transparent;
  border-left:solid 10px #fff;
  border-top:solid 10px #fff;
  bottom:-19px;
  content:"";
  height:0;
  left:27px;
  position:absolute;
  transform:skew(-15deg);
  width:0;
}

.panel:nth-child(1) {
  flex-basis: 400px;
}
.panel:nth-child(2) {
  flex-basis: 200px;
}
.panel:nth-child(3) {
  flex-basis: 200px;
}
.panel:nth-child(4) {
  flex-basis: 200px;
}
.panel:nth-child(5) {
  flex-basis: 200px;
}
.panel:nth-child(6) {
  flex-basis: 200px;
}
.panel:nth-child(7) {
  flex-basis: 400px;
}
.panel:nth-child(8) {
  flex-basis: 200px;
}
.panel:nth-child(9) {
  flex-basis: 200px;
}

/* background colours */

.panel:nth-child(4n+1) {
  background-image:radial-gradient(circle, pink, red);
}

.panel:nth-child(4n+2) {
  background-image:radial-gradient(circle, pink, #65378F);
}

.panel:nth-child(4n+3) {
  background-image:radial-gradient(circle, #999, #333);
}

.panel:nth-child(4n+4) {
  background-image:radial-gradient(circle, #cecece, #3366FF);
}