Fluent Design Example + Style Guide

8/10/2018 - 4:49 AM

Fluent Design Example + Style Guide

$pink: #FC50A9;
$plum: #251D2F;
$dkplum: rgba(#131228, 0.7);
$dogs: (
  "https://tebm.files.wordpress.com/2010/02/arge-proje-egitim-esnasc4b1nda-hallerim-2.jpg",
  "https://tebm.files.wordpress.com/2010/02/arge-proje-egitim-esnasc4b1nda-hallerim-1.jpg",
  "https://tebm.files.wordpress.com/2010/02/arge-proje-egitim-esnasc4b1nda-hallerim-3.jpg",
  "https://cdn-cms.f-static.com/uploads/1017556/2000_5b222d5a787fd.jpg",
  "https://cdn-cms.f-static.com/uploads/1017556/2000_5b222d5a787fd.jpg",
  "https://cdn-cms.f-static.com/uploads/1017556/2000_5b222d5a787fd.jpg",
  "https://cdn-cms.f-static.com/uploads/1017556/2000_5b222d5a787fd.jpg"
);
$art: (
  "https://cdn-cms.f-static.com/uploads/1017556/2000_5b222d5a787fd.jpg",
  "https://cdn-cms.f-static.com/uploads/1017556/2000_5b222d5a787fd.jpg",
  "https://cdn-cms.f-static.com/uploads/1017556/2000_5b222d5a787fd.jpg",
  "https://tebm.files.wordpress.com/2010/02/23192653_1828305584082716_1234080497_n.jpg?w=558",
  "https://tebm.files.wordpress.com/2010/02/23192653_1828305584082716_1234080497_n.jpg?w=558",
  "https://tebm.files.wordpress.com/2010/02/23192653_1828305584082716_1234080497_n.jpg?w=558",
  "https://tebm.files.wordpress.com/2010/02/23192653_1828305584082716_1234080497_n.jpg?w=558",
  "https://tebm.files.wordpress.com/2010/02/23192653_1828305584082716_1234080497_n.jpg?w=558"
);

input[type="radio"], input[type="checkbox"] {
  display: none;
}
* {
  font-family: system-ui;
  box-sizing: border-box;
}
html, body {
  margin: 0;
  height: 100%;
}

body {
  background-image: url(http://static-cache.tr.uaprom.net/image/se/busines_head_41.jpg?r=143818);
  background-size: cover;
}

#toggle-styleguide {
  & + label {
    position: absolute;
    z-index: 2;
    width: 18rem;
    left: -17rem;
    transition: 0.2s;
    display: flex;
    flex-wrap: wrap;
    height: 100vh;
    &:after {
      $width: 2.85rem;
      content: '>';
      color: white;
      display: block;
      position: absolute;
      width: $width;
      height: $width;
      text-align: center;
      line-height: 2.65rem;
      overflow: hidden;
      border-top-right-radius: $width;
      border-bottom-right-radius: $width;
      top: 0;
      right: -$width/2;
      background-color: $pink;
      font-size: 1.15rem;
    }
    &:hover {
      left: 0;
    }
    #label-wrapper {
      height: 100vh;
      overflow: hidden;
    }
    p.button {
      margin: 0;
      color: white;
      position: relative;
      width: 100%;
    }
    #styleguide-wrapper {
      max-height: 0;
      overflow: hidden;
      transition: 0.2s;
      width: 100%;
      height: 100%;
      #styleguide-content {
        overflow: auto;
        height: 100%;
      }
      section {
        padding: 1rem;
        background-color: white;
        border-bottom: 1px solid $pink;
        transition: 0.2s;
        &:last-of-type {
          border-bottom: 0;
          padding-bottom: 3rem;
        }
      }
    }
  }
  &:checked {
    & + label {
      left: 0;
      #styleguide-wrapper {
        max-height: 100vh;
      }
    }
    & ~ #window {
      transform: translate3d(-37%, -50%, 0);
      position: absolute;
      #normal-content {
        transition-delay: 0s;
        opacity: 0;
      }
      #styleguide-example {
        transition-delay: 0.3s;
        opacity: 1;
        display: flex;
      }
    }
  }
}
nav {
  label {
    transition: 0.2s;
    display: block;
    padding: 0.5rem 8rem 0.5rem 1.75rem;
    border-left: 7px solid transparent;
    margin: 1rem 0;
    &:hover {
      cursor: pointer;
      background-color: rgba(white, 0.05);
    }
  }
}
#window {
  background-color: rgba($plum, 0.75);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  color: white;
  position: relative;
  height: 95vh;
  width: 95vw;
  max-width: 70rem;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  overflow: hidden;
  transition: 0.4s;
  > * {
    display: flex;
    transition: 0.2s;
    position: absolute;
    top: 0;
    left: 0;
    transition-delay: 0.2s;
    width: 100%;
    height: 100%;
    &#styleguide-example {
      opacity: 0;
      transition-delay: 0s;
      display: none;
    }
  }
  .nav-cont {
    height: 100%;
    .nav-contents {
      display: flex;
      flex-direction: column;
      height: 100%;
      nav {
        overflow: auto;
      }
    }
  }
}
.profile-img {
  $diameter: 7rem;
  background-color: $pink;
  padding-bottom: $diameter;
  width: $diameter;
  border-radius: 50%;
  position: relative;
  margin: 1rem 1rem 1rem (-$diameter/2);
  display: block;
  left: 50%;
    &:not(#example-img) {
      background-image: url(https://cdn-cms.f-static.com/uploads/1017556/800_5ac2115f911f3.jpg);
      background-size: cover;
      }
}
#content {
  position: relative;
  flex-grow: 2;
  background-color: $dkplum;
  > div {
    transition: 0.3s;
    position: absolute;
    top: 0;
    left: 100%;
    opacity: 0;
    overflow-y: auto;
    height: 100%;
    padding-bottom: 2rem;
  }
}

@each $path in about, work, labs, contact {
  #nav-#{$path}:checked {
    & ~ #window {
      label[for="nav-#{$path}"] {
        border-left: 7px solid $pink;
        color: $pink;
      }
      #content #content-#{$path} {
        left: 0;
        opacity: 1;
        transition-delay: 0.3s;
      }
    }
  }
}
h3 {
  margin-top: 1rem;
}
#content {
  padding: 1rem;
  > * {
    margin-left: 3%;
    margin-right: 3%;
  }
  &-about, &-work, &-labs, &-contact {
    width: 94%;
  }
}
#content-about {
  #my-name {
    margin: 0;
    &:after {
      content: '.';
      color: $pink;
      font-size: 5rem;
      line-height: 0;
    }
  }
  #job-title {
    color: $pink;
    margin: 1rem 0;
  }
}

#content-work, #content-labs {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
#work-grid {
  > div {
    padding-top: 50%;
    overflow: hidden;
    opacity: 0;
    &.fade-up {
      padding-top: 0;
      opacity: 1;
    }
    .img-cont {
      width: 100%;
      padding-bottom: 8rem;
      background-size: cover;
    }
    p {
      margin-bottom: 0;
      &:last-child {
        margin-bottom: 0.75rem;
      }
    }
  }
  @for $i from 1 through 18 {
    > div:nth-child(#{$i}) {
      &.fade-up {
        transition: 0.4s all ease;
        transition-delay: (0.1*$i) + 0.1s;
      }
      .img-cont {
        background-image: url(#{nth($dogs, random(length($dogs)))});
      }
    }
  }
}

#labs-grid {
  .details {
    background-color: #1E1B33;
    padding: 1rem;
  }
  > div {
    padding-top: 50%;
    overflow: hidden;
    opacity: 0;
    &.fade-up {
      padding-top: 0;
      opacity: 1;
    }
    .img-cont {
      width: 100%;
      padding-bottom: 14rem;
      background-size: cover;
    }
  }
  @for $i from 1 through 8 {
    > div:nth-child(#{$i}) {
      &.fade-up {
        transition: 0.4s all ease;
        transition-delay: (0.1*$i) + 0.1s;
      }
      .img-cont {
        background-image: url(#{nth($art,$i)});
      }
    }
  }
}
a {
  color: $pink;
  text-decoration: none;
  &:after {
    content: '\00a0>';
  }
}

#styleguide-example {
  #example-content {
    position: relative;
    flex-grow: 2;
    background-color: $dkplum;
    padding: 0 2rem;
    height: 100%;
    overflow: auto;
  }
  label:first-of-type {
    border-left-color: $pink;
    color: $pink;
  }
  input[type="text"]:last-of-type {
    outline: 2px solid $pink;
    outline-offset: -2px;
  }
}


// CODE AND PRE

.code {
  font-family: monospace;
  color: $pink;
  font-size: 1.15rem;
}

// TEXT INPUTS

input[type="text"], textarea {
  background-color: rgba($plum, 0.7);
  border: 1px solid rgba(white, 0.3);
  outline: 2px solid transparent;
  transition: 0.2s;
  padding: 0.75rem 1rem;
  color: white;
  &:focus {
    outline: 2px solid $pink;
  }
}
textarea {
  resize: none;
  width: 100%;
}

// GRID
.grid {
  display: grid;
  grid-gap: 2rem;
  grid-auto-rows: minmax(100%, auto);
  overflow: auto;
  padding-bottom: 2rem;
}
.grid-2col {
  grid-template-columns: repeat(2, 1fr);
}
.grid-3col {
  grid-template-columns: repeat(3, 1fr);
}
//  BUTTON
button, .button {
  background-color: $pink;
  border: 0;
  padding: 0.6rem 2rem;
  color: white;
}

//  TITLE
.title {
  display: inline-block;
  clear: both;
  padding-bottom: 4px;
  position: relative;
  margin-bottom: 2.5rem;
  border-bottom: 2px solid $pink;
}
//  FONT STYLES
.font-exsmall {
  font-size: 0.95rem;
  letter-spacing: 0.3px;
}
.font-small {
  font-size: 1.15rem;
  letter-spacing: 0.3px;
  line-height: 1.75rem;
}
.font-med {
  font-size: 1.4rem;
  letter-spacing: 1px;
  font-weight: 300;
}
.font-lg {
  font-size: 2rem;
  letter-spacing: 1.5px;
  font-weight: 300;
}
.font-exlg {
  font-size: 3.5rem;
  letter-spacing: 1.5px;
  line-height: 3rem;
}
.font-demi-opacity {
  color: rgba(white, 0.5);
}

script.js

window.onload = function(){
  ['work', 'labs'].forEach(function(nav_link){
    document.getElementById('nav-'+nav_link).addEventListener('input', function(ev){
      
  const grid_elm = document.getElementById(nav_link + '-grid');
    Array.prototype.forEach.call(grid_elm.children, function(child_elm){
      child_elm.classList.remove('fade-up');
      setTimeout(function() { child_elm.classList.add('fade-up') }, 300);
    });
  });
  });
}

index.html

<!-- Inputs are outside to toggle everything -->
<input type="checkbox" id="toggle-instructions">
<input type="radio" id="nav-about" name="nav" checked>
<input type="radio" id="nav-work" name="nav">
<input type="radio" id="nav-labs" name="nav">
<input type="radio" id="nav-contact" name="nav">
<input type="checkbox" id="toggle-styleguide"/>
<label for="toggle-styleguide">
  <div id="label-wrapper">
    <p class="button font-med">Show Style Guide</p>
    <div id="styleguide-wrapper">
      <div id="styleguide-content">
        <section>
          <strong class="font-small">Textarea / Text Inputs</strong>
          <p class="font-exsmall">By default, textareas and text inputs are styled completely and should not have styles overwritten. They include branded focus and active states.</p>
        </section>
        <section>
          <strong class="font-small">Buttons</strong>
          <p class="font-exsmall">
            Buttons use the accent color as a background color, designating a call-to-action. The class <span class="code">button</span> can also be used to apply the same styles to other elements.
          </p>
        </section>
        <section>
          <strong class="font-small">Grids</strong>
          <p class="font-exsmall">
            Grids should be used to organize content that contains visual components. To add grids, add the <span class="code">grid</span> along with the appropriate number of columns.
          </p>
          <p class="font-exsmall">
            Currently, the design system only contains two different column options: 2 columns and 3 columns. To specify the amount of columns, apply the class <span class="code">grid-</span> plus the requested number of columns.
          </p>
        </section>
        <section>
          <strong class="font-small">Title</strong>
          <p class="font-exsmall">
            The <span class="code">title</span> class should only be used once per page. This style added an accent-colored bottom border to the element it is applied to.
          </p>
        </section>
        <section>
          <strong class="font-small">Font Sizes</strong>
          <p class="font-exsmall">
            There are five font sizes to choose from:
          </p>
          <ul>
            <li class="font-exsmall"><strong>Extra-Small: </strong><span class="code">font-exsmall</span></li>
            <li class="font-exsmall"><strong>Small: </strong><span class="code">font-small</span></li>
            <li class="font-exsmall"><strong>Medium: </strong><span class="code">font-med</span></li>
            <li class="font-exsmall"><strong>Large: </strong><span class="code">font-lg</span></li>
            <li class="font-exsmall"><strong>Extra-Large: </strong><span class="code">font-exlg</span></li>
          </ul>
        </section>
        <section>
          <strong class="font-exsmall">Navigation</strong>
          <p class="font-exsmall">Navigation links have three states: Normal, Hover, and Active</p>
          <ul>
            <li class="font-exsmall"><strong>Normal:</strong> The text is white or black, depending on the background color</li>
            <li class="font-exsmall"><strong>Hover:</strong> The text color is the same as the normal color, with the background-color changing to the text color at 5% opacity.</li>
            <li class="font-exsmall"><strong>Active:</strong> The text color becomes the accent color along with a border of 5px and matching accent fill on the left side of the link.</li>
          </ul>
        </section>
      </div>
    </div>
  </div>
</label>
<div id="window">
  <div id="normal-content">

    <div class="nav-cont">
      <div class="nav-contents">
        <div class="profile-img"></div>
        <nav>
          <label for="nav-about" class="font-med">About</label>
          <label for="nav-work" class="font-med">Work</label>
          <label for="nav-labs" class="font-med">Labs</label>
          <label for="nav-contact" class="font-med">Contact</label>
        </nav>
      </div>
    </div>
    <div id="content">
      <div id="content-about">
        <h3><span class="font-lg title">About</span></h3>
        <div class="content">
          <p id="my-name" class="font-exlg">HARUN PEHLİVAN</p>
          <p id="job-title" class="font-lg">INFORMATION TECHNOLOGY FOUNDER CEO BLOGGER INITIATIVE RESEARCH AND DEVELOPMENT</p>
          <div id="bio" class="font-exsmall font-demi-opacity">
            <p><a href="http://www.shortcutz.link/harunpehlivan" rel="noopener noreferrer" target="_blank">INFORMATION TECHNOLOGY FOUNDER,CEO BLOGGER</a></p>
            <p><a href="https://easycard.me/harunpehlivantebimtebitagem/card153" rel="noopener noreferrer" target="_blank">HPIT</a></p>
          </div>
        </div>
      </div>
      <div id="content-work">
        <h3><span class="font-lg title">Work</span></h3>
        <div id="work-grid" class="grid grid-3col">
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
          <div>
            <div class="img-cont"></div>
            <p class="font-small">Lorem, ipsum dolor.</p>
          </div>
        </div>
      </div>
      <div id="content-labs">
        <h3><span class="font-lg title">Labs</span></h3>
        <div id="labs-grid" class="grid grid-2col">
          <div>
            <div class="img-cont"></div>
            <div class="details">
              <p class="font-med">Project Name</p>
              <p class="font-demi-opacity font-small">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta, tempora.</p>
              <p><a href="" class="font-exsmall">check now</a></p>
            </div>
          </div>
          <div>
            <div class="img-cont"></div>
            <div class="details">
              <p class="font-med">Project Name</p>
              <p class="font-demi-opacity font-small">Lorem ipsum dolor sit amet consectetur adipisicing elit. Natus, eos.</p>
              <p><a href="" class="font-exsmall">check now</a></p>
            </div>
          </div>
          <div>
            <div class="img-cont"></div>
            <div class="details">
              <p class="font-med">Project Name</p>
              <p class="font-demi-opacity font-small">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, quisquam.</p>
              <p><a href="" class="font-exsmall">check now</a></p>
            </div>
          </div>
          <div>
            <div class="img-cont"></div>
            <div class="details">
              <p class="font-med">Project Name</p>
              <p class="font-demi-opacity font-small">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam, labore?</p>
              <p><a href="" class="font-exsmall">check now</a></p>
            </div>
          </div>
          <div>
            <div class="img-cont"></div>
            <div class="details">
              <p class="font-med">Project Name</p>
              <p class="font-demi-opacity font-small">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, minus!</p>
              <p><a href="" class="font-exsmall">check now</a></p>
            </div>
          </div>
          <div>
            <div class="img-cont"></div>
            <div class="details">
              <p class="font-med">Project Name</p>
              <p class="font-demi-opacity font-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias, dolorem.</p>
              <p><a href="" class="font-exsmall">check now</a></p>
            </div>
          </div>
          <div>
            <div class="img-cont"></div>
            <div class="details">
              <p class="font-med">Project Name</p>
              <p class="font-demi-opacity font-small">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, exercitationem.</p>
              <p><a href="" class="font-exsmall">check now</a></p>
            </div>
          </div>
          <div>
            <div class="img-cont"></div>
            <div class="details">
              <p class="font-med">Project Name</p>
              <p class="font-demi-opacity font-small">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus, labore?</p>
              <p><a href="" class="font-exsmall">check now</a></p>
            </div>
          </div>
        </div>
      </div>
      <div id="content-contact">
        <h3><span class="font-lg title">Contact</span></h3>
        <h4 class="font-med">Project brief description</h4>
        <textarea placeholder="Project Type, Target customer, timeline, estimate, etc" class="font-small"></textarea>
        <h4 class="font-med">About You</h4>
        <div id="contact-grid" class="grid grid-2col">
          <input type="text" placeholder="Full Name" id="full-name" class="font-small">
          <input type="text" placeholder="E-mail Address" id="email" class="font-small">
          <input type="text" placeholder="Company Name" id="company" class="font-small">
          <input type="text" placeholder="Position" id="position" class="font-small">
        </div>
        <button class="font-small">Request a Quote</button>
      </div>
    </div>
  </div>
  <div id="styleguide-example">
    <div class="nav-cont">
      <div class="nav-contents">
        <div class="profile-img" id="example-img"></div>
        <nav>
          <label class="font-med">Example Active Link</label>
          <label class="font-med">Example Normal Link 1</label>
          <label class="font-med">Example Normal Link 2</label>
          <label class="font-med">Example Normal Link 3</label>
        </nav>
      </div>
    </div>
    <div id="example-content">
      <h3><span class="font-lg title">Example Header</span></h3>
      <div class="content">
        <p class="font-exlg">Sample Extra Large Text</p>
        <p class="font-lg">Sample Large Text</p>
        <p class="font-med">Sample Extra Medium Text</p>
        <p class="font-small">Sample Small Text</p>
        <p class="font-exsmall">Sample Extra Small Text</p>
        <p class="font-med">Grid Example</p>
        <div class="grid grid-2col">
          <input type="text" class="font-small" placeholder="Empty text input example"/>
          <button class="font-small">Button Example</button>
          <input type="text" class="font-small" value="Text input example"/>
          <button class="font-small">Button Example</button>
        </div>
      </div>
    </div>
  </div>
</div>

fluent-design-example-style-guide.markdown

Rendered
Source

Fluent Design Example + Style Guide

Based on https://www.uplabs.com/posts/glazzy-free-portfolio-psd-template, limited JS to trigger transition reflow.

To show the style guide, click the pink arrow button in the top left corner

Best viewed on:

Safari & Edge automatically Chrome: Be sure to enable experimental flags. To enable flags:

Go to chrome://flags/
Enable Experimental Web Platform features

A Pen by HARUN PEHLİVAN on CodePen.

License.

Cacher is the code snippet organizer for pro developers

We empower you and your team to get more done, faster

Fluent Design Example + Style Guide

Fluent Design Example + Style Guide