JSFiddle - React, Tailwind, and code Playground

by rzea

HTML

<h1>Basic Layout Using a CSS Grid</h1>

<div class="container-12 clear">
    <header class="grid-12">Header</header>
    <nav class="grid-4">Nav</nav>
    <section class="grid-8">Content</section>
    <footer class="grid-12">Footer</footer>
</div>
<ul>
    <li>Here's the same layout but <a href="#" target="_blank">using Flexbox</a>

    </li>
</ul>

SCSS

//Moble-first Media Queries Mixin
@mixin mobile-first($width) {
	@media (min-width: $width) { @content }
}
//Main Container
.container-12 {
  width: 96%;
  max-width: 1200px;
  margin: auto;
  padding: 0 .83%; //10px Ă· 1200px * 100
}

.grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
  width: 98%;
  position: relative;
  margin: 0 1%;
}

@media (min-width: 48em) {
    .grid-1, .grid-2, .grid-3, .grid-4, .grid-5, .grid-6, .grid-7, .grid-8, .grid-9, .grid-10, .grid-11, .grid-12 {
        float: left;
    }
    .grid-1 { width: 6.333%; }
    .grid-2 { width: 14.667%; }
    .grid-3 { width: 23%; }
    .grid-4 { width: 31.333%; }
    .grid-5 { width: 39.667%; }
    .grid-6 { width: 48%; }
    .grid-7 { width: 56.333%; }
    .grid-8 { width: 64.667%; }
    .grid-9 { width: 73%; }
    .grid-10 { width: 81.333%; }
    .grid-11 { width: 89.667%; }
    .grid-12 { width: 98%; }
}
//Clear Floated Elements
.clear {
  &:before,
  &:after { content: ''; display: table; }
  &:after { clear: both; }
}







// Basic styling not needed for demo
.container-12 { background: #fff; font-size: 30px; text-shadow:0 1px 1px rgba(black,.5); position: relative;
  &:before { display: block; padding: 0 8px 3px; content: 'Mobile-first'; background: #000; position: absolute; top: 2px; left: 2px; z-index: 1; font-size: 18px;
    @include mobile-first(48em) {
      content: 'Wide';
    }
  }  
}
header { background: #429032; }
nav { background: #2963BD; }
section { background: #c90; }
footer { background: #c03; }
article { background: rgba(black,.3);}

//Give heights to elements for better perception of sections
header, footer { height: 50px; }
section { height: 200px; }
nav { height: 50px;
  @include mobile-first(48em) {
    height: 200px;
  }
}

header, footer, nav, section { display: flex; justify-content: center; align-items: center; }

//Generic styles
@import...