Golden ratio grid test

golden-ratio-grid-test.markdown

Golden ratio grid test

A Pen by andreas jv on CodePen.

License.

index.html

<!-- Pen content -->
<div class="wrap">
  <div class="full">
    <header class="full hero">
      <h1 class="med caption">Red rum</h1>
    </header>
    <main class="xlarge">
      <section class="full">
        <h2>Hover elements to see their grid</h2>
        <p class="xlarge">This simple grid setup follows principles of the golden ratio.</p>
      </section>
      <section class="full">
        <h3 class="med">Debugging tip</h2>
        <p class="xlarge">For future reference: use outlines to quickly check elements' areas. Simply set: </p>
        <pre><code>
* :hover {
  outline: 1px dashed;          
}
        </code></pre>
      </section>
      <section class="full">
        <h3>Some sample classes</h2>
        <p class="full">Full width</p>
        <p class="xlarge">X-Large width</p>
        <p class="large">Large width</p>
        <p class="med">Medium width</p>
      </section>
      <section class="full">
        <h3>Full</h2>
        <p class="full">Useful for section bases, etc.</p>
      </section>
      <section class="xlarge">
        <h3>X-Large</h2>
        <p>The standard content width. Just watch this filler text flow..</p>
        <p>Dreamcatcher cold-pressed banjo, brunch banh mi put a bird on it franzen hoodie chartreuse. Ramps kale chips post-ironic, godard franzen venmo small batch twee marfa PBR&B chillwave art party freegan keytar affogato. Kitsch tofu heirloom slow-carb pitchfork. Shoreditch sriracha flannel brunch irony farm-to-table. Waistcoat vice kitsch leggings, single-origin coffee beard tousled sartorial wolf locavore small batch heirloom.</p>
        <p>Dreamcatcher cold-pressed umami single-origin coffee YOLO. Mustache sartorial tofu blog, jean shorts chicharrones kitsch master cleanse.
Biodiesel street art swag deep v, quinoa kale chips blue bottle 8-bit ramps keytar you probably haven't heard of them farm-to-table intelligentsia before they sold out kickstarter. Salvia venmo banjo, aesthetic pinterest organic four loko put a bird on it church-key portland banh mi kogi yr squid truffaut. Vinyl taxidermy heirloom post-ironic slow-carb pop-up, franzen twee four dollar toast tattooed. 8-bit kombucha skateboard fashion axe synth. Authentic listicle next level four loko lomo tattooed, salvia literally.</p> 
          <p>Tote bag blue bottle twee sartorial brunch, organic man braid sriracha you probably haven't heard of them squid direct trade stumptown. Mustache lumbersexual photo booth, lomo fanny pack swag poutine direct trade sustainable hoodie seitan keffiyeh vegan jean shorts kinfolk.</p>
      </section>
      <section class="large">
        <h3>Large</h2>
        <p class="full">Mostly my headings, images within content, lists or tabular data.</p>
      </section>
      <section class="med caption">
        <h3>Medium</h3>
        <p>Used for inputs</p>
      </section>
      <section class="large">
        <h3 class="small">Small, X-Small</h3>
        <p>For buttons, smaller inputs, etc.</p>
        <p>Only downside is they scale <i>way</i> down in responsive view so they should take on either container width or dynamic padded sizes.</p>
      </section>
    </main>
  </div>
</div> <!-- /content -->

<!-- Footer -->
<div id="footer">
  <div class="wrapper">
    <a href="https://andreasvirkus.github.io">
      <div class="logo">
        <div class="element logo-text pre-test" id="sdew_1" ><p>a</p></div> 
        <div class="element logo-text pre-test selected" id="sdew_2" ><p>J</p></div> 
        <div class="element logo-text pre-test" id="sdew_3" ><p>v</p></div>
      </div>
    </a>
  </div>
</div>

style.scss

@import url(https://fonts.googleapis.com/css?family=Josefin+Slab:100,200,400);
@import url(https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,600,700);

$orange: tomato;
$dark-gray: #222;
$light-gray: #555;

/* Grid */
$golden:	1.618;
$base:	100%;
$gld10:	$base / $golden;
$gld9:	$base - $gld10;
$gld8:	$gld9 / $golden;
$gld7:	$gld9 - $gld8;
$gld6:	$gld7 / $golden;
$gld5:	$gld7 - $gld6;
$gld4:	$gld5 / $golden;
$gld3:	$gld5 - $gld4;
$gld2:	$gld3 / $golden;
$gld1:	$gld3 - $gld2;

$type10:  100 / $golden; 
$type9:  	100 - $type10; 
$type8:  	$type9 / $golden; 
$type7:  	$type9 - $type8; 
$type6:  	$type7 / $golden; 
$type5:  	$type7 - $type6; 
$type4:  	$type5 / $golden; 
$type3:  	$type5 - $type4; 
$type2:  	$type3 / $golden; 
$type1: 	$type3 - $type2;

.full	{ width: $base }
.xlarge	{ width: $base - ($gld7 + $gld7) }
.large	{ width: $gld10 }
.med	{ width: $gld8 }
.small	{ width: $gld7 }
.xsmall	{ width: $gld6 }
/* that's it! */

*, body, html {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Raleway';
}

body {
  background-color: $dark-gray;
  color: #fff;
  height: 100%;
}

.wrap  {
  max-width: 1180px;
  margin: 0 auto 25px;
  
  & *:hover {
    outline: 1px dashed;
  }
}

* + p {
  margin-top: .6em;
}

main {
  color: #999;
  padding-top: 1.4em;
  
  section {
    padding-left: 1em;
  }
  
  section + section {
    margin-top: 2em;
  }
}

pre {
  background: #111;
  padding-left: .6em;
  font-size: 95%;
  line-height: 140%;
  white-space: pre;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
}       

code {
  font-family: Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  font-size: 95%;
  line-height: 140%;
  white-space: pre;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -o-pre-wrap;
  display: block;
  padding: 0.5em 1em;
}

.hero {
  background: #f5f5dc;
  background: url(https://images.unsplash.com/photo-1422651355218-53453822ebb8?dpr=1&auto=format&crop=entropy&fit=crop&w=1500&h=1004&q=80&cs=tinysrgb);
  background-size: cover;
  height: 20em;
  padding: 8em 2em;
}

/* 
=================
  FOOTER STYLES
=================
*/
#footer {
  position: relative;
  background: rgba(0, 0, 0, 0.65);
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

#footer:hover #sdew_2 p {
  color: #e16036;
}

#footer-tag {
  color: #fff;
}

#footer-tag a {
  color: #fff;
}

#footer-tag a:hover {
  color: #e16036;
}

.logo {
  width: 150px;
  height: 100px;
  margin-left: auto;
  margin-right: auto;
  transform: translate(-15px, 0);
  color: #000;
  font-family: Josefin Slab, serif;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  font-size: 64px;
}

.logo p {
  font-family: Josefin Slab, serif;
}

.logo:hover #sdew_2 p {
  color: #e16036;
}

.element {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.element p {
  line-height: 1;
  margin: 0;
  padding: 0;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern";
}

#sdew_1 {
  font-size: 64px;
  color: #fff;
  top: 1px;
  left: 50px;
}

#sdew_2 {
  font-size: 64px;
  color: #fff;
  top: 30px;
  left: 77px;
}

#sdew_2 p {
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#sdew_3 {
  font-size: 64px;
  color: #fff;
  top: 40px;
  left: 92px;
}