PHES-ODM | CSS Style Guide

HTML

              
                <article class="entry-content">
<div class="wrapper">
  <h4>PHES-ODM</h4>
  <h1>Style Guide</h1>
</div>
<div class="wrapper"> 
 <h2>Table of Contents</h2>
  <nav class="blah-nav">
    <ul>
      <li><a href="#fonts">Fonts</a></li>
      <li><a href="#typeography">Typeography</a></li>
      <li><a href="#inline Elements">Inline Elements</a></li>
      <li><a href="#color Swatches">Color Swatches</a></li>
      <li><a href="#Navigation">Navigation</a></li>
      <li><a href="#Buttons">Buttons</a></li>
    </ul>
  </nav>
</div>
<div class="wrapper" id="fonts">
  <h3 class="section-head">Fonts</h3>
  <p class="assistant"><b>Assistant</b></p>
  <p class="assistant">Aa Ba Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz</p>
  <p class="assistant">1 2 3 4 5 6 7 8 9 0</p>
  <div class="break"></div>
  <p class="lora"><b>Lora</b></p>
  <p class="lora">Aa Ba Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz</p>
  <p class="lora">1 2 3 4 5 6 7 8 9 0</p>
  <div class="break"></div>
  <p><code>@import url(//fonts.googleapis.com/css?family=Assistant:200,300,400,600,800);
/*https://fonts.googleapis.com/css?family=Assistant*/</code></p>
  <p><code>
    @import url(//fonts.googleapis.com/css?family=Lora:400,600,800); /*https://fonts.google.com/specimen/Lora*/</code></p>
</div>

<div class="wrapper" id="typography">
  <h3 class="section-head">Typography</h3>
    <h1>Heading Level 1</h1>
    <h2>Heading Level 2</h2>
    <h3>Heading Level 3</h3>  
    <h4>Heading Level 4</h4>
    <h5>Heading Level 5</h5> 
  
    <h1 class="secondary-set">Secondary Heading Level 1</h1>
    <h2 class="secondary-set">Secondary Heading Level 2</h2>
    <h3 class="secondary-set">Secondary Heading Level 3</h3>  
    <h4 class="secondary-set">Secondary Heading Level 4</h4>
    <h5 class="secondary-set">Secondary Heading Level 5</h5> 
    
    <p class="big">This is a lead paragraph.</p>
    <p>This is an <b>ordinary paragraph</b> that is <i>long enough</i> to wrap to <u>multiple lines</u> so that you can see how the line spacing looks.</p>
    <p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.</p>
    <p><small>This is text in a small wrapper.</small></p>
  </div>

<div class="wrapper" id="inline Elements">
  <h3 class="section-head">Inline Elements</h3>
    <p><a href="#">This is a text link</a></p>

    <p><strong>Strong is used to indicate strong importance</strong></p>

    <p><em>This text has added emphasis</em></p>

    <p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>

    <p>The <i>i element</i> is text that is set off from the normal text</p>

    <p>The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation</p>

    <p><del>This text is deleted</del> and <ins>This text is inserted</ins></p>

    <p><s>This text has a strikethrough</s></p>

    <p>Superscript<sup>®</sup></p>

    <p>Subscript for things like H<sub>2</sub>O</p>

    <p><small>This small text is small for for fine print, etc.</small></p>

    <p>Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr></p>

    <p>Keybord input: <kbd>Cmd</kbd></p>

    <p><q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation</q></p>

    <p><cite>This is a citation</cite>

    </p><p>The <dfn>dfn element</dfn> indicates a definition.</p>

    <p>The <mark>mark element</mark> indicates a highlight</p>

    <p><code>This is what inline code looks like.</code></p>

    <p><samp>This is sample output from a computer program</samp></p>

    <p>The <var>variarble element</var>, such as <var>x</var> = <var>y</var></p>
  						</div>
					</div>
</div>

<div class="wrapper" id="color Swatches">
  <h3 class="section-head">Color Swatches</h3>
  <section class="card-container">
        <div class="card">
            <div class="swatch primary-blue-swatch" onclick="window.prompt('Copy to clipboard: Ctrl+C, Enter', '#1dcdfe');"></div>
            <div class="name"><h5>Deep Sky Blue</h5>
            <p><samp>Hex: #1DCDFE</samp></p></div>
          <div class="color-pallet-container">
              <div class="swatch blue-shade-100-swatch" onclick="window.prompt('Copy to clipboard: Ctrl+C, Enter', '#01b5e7');">
                <p>#01b5e7</p>
              </div>
              <div class="swatch blue-shade-80-swatch" onclick="window.prompt('Copy to clipboard: Ctrl+C, Enter', '#019fcc');">
                <p>#019fcc</p>
              </div>
              <div class="swatch blue-shade-60-swatch" onclick="window.prompt('Copy to clipboard: Ctrl+C, Enter', '#0181a5');">
                <p>#0181a5</p>
              </div>
              <div class="swatch blue-shade-40-swatch" onclick="window.prompt('Copy to clipboard: Ctrl+C, Enter', '#01637e');">
                <p>#01637e</p>
              </div>
              <div class="swatch blue-shade-20-swatch" onclick="window.prompt('Copy to clipboard: Ctrl+C, Enter', '#014457');">
                <p>#014457</p>
              </div>
            </div>
        </div>
    <div class="card">
            <div class="swatch primary-orange-swatch" onclick="window.prompt('Copy to clipboard: Ctrl+C, Enter', '#F7AA62');"></div>
            <div class="name"><h5>Sandy Orange</h5>
            <p><samp>Hex: #F7AA62</samp></p></div>
            <div class="color-pallet-container">
              <div class="swatch orange-shade-100-swatch" onclick="window.prompt('Copy to clipboard: Ctrl+C, Enter', '#f59e4c');"><p>#f59e4c</p></div>
              <div class="swatch orange-shade-80-swatch" onclick="window.prompt('Copy to clipboard: Ctrl+C, Enter', '#f38a27');"><p>#f38a27</p></div>
              <div class="swatch orange-shade-60-swatch" onclick="window.prompt('Copy to clipboard: Ctrl+C, Enter', '#e6760d');"><p>#e6760d</p></div>
              <div class="swatch orange-shade-40-swatch" onclick="window.prompt('Copy to clipboard: Ctrl+C, Enter', '#c1630b');"><p>#c1630b</p></div>
              <div class="swatch orange-shade-20-swatch" onclick="window.prompt('Copy to clipboard: Ctrl+C, Enter', '#9c5009');"><p>#9c5009</p></div>
            </div>
        </div>

      <div><h4 class="h-blue">Blue Heading Hex: #014457</h4>
      <h4 class="h-orange">Orange Heading Hex: #9c5009</h4></div>
        </div>
    </section>
<div class="wrapper">
  <div class="name"><h5>Secondary Colours</h5></div>
    <div class="color-pallet-container">
      <div><div class="swatch-secondary green"></div><p>Light Green</p><p><samp>Hex: #86ea96</samp></p></div>
      <div><div class="swatch-secondary red"></div><p>Light Coral</p><p><samp>Hex: #f27070</samp></p></div>
      <div><div class="swatch-secondary purple"></div><p>Medium Purple</p><p><samp>Hex: #9b6cd8</samp></p></div>
      <div><div class="swatch-secondary yelow"></div><p>Navajo White</p><p><samp>Hex: #ffcb6c</samp></p></div>
    </div>
  </div>
</div>

<div class="wrapper" id="Navigation">
  <h3 class="section-head">Navigation</h3>
  <header class="header">
      <a href="#" class="header__icon" id="header__icon"></a>
      <a href="#" class="header__logo">PHES ODM</a>
      
      <nav class="menu">
        <a href="#">Home</a>
        <a href="#">Tools</a>
        <a href="#">Documentation</a>
        <a href="#">Community</a>
      </nav>
    </header>
</div>

<div class="wrapper" id="Buttons">
  <h3 class="section-head">Buttons</h3>
  <div class="overlay__btns">
    <button class="btn">
      Default
    </button>
    <button class="btn btn-hover">
      Hover
    </button>
    <button class="btn btn-secondary">
      Secondary
    </button>
    <button class="btn btn-disable">
      Disable 
    </button>
    <button class="btn btn-tertiary">
      Tertiary
    </button>
    </div>
  <div class="overlay__btns">
    <button class="btn btn-blue">
      Default Blue
    </button>
    <button class="btn btn-blue btn-hover">
      Hover Blue
    </button>
    <button class="btn btn-blue btn-secondary">
      Secondary Blue
    </button>
    <button class="btn btn-disable">
      Disable 
    </button>
    <button class="btn btn-tertiary">
      Tertiary
    </button>
    </div>
  <div class="overlay__btns">
    <button class="btn btn-dark">
      Default Black
    </button>
    <button class="btn btn-dark btn-hover">
      Hover Black
    </button>
    <button class="btn btn-dark btn-secondary">
      Secondary Black
    </button>
    <button class="btn btn-disable">
      Disable 
    </button>
    <button class="btn btn-tertiary">
      Tertiary
    </button>
    </div>
</div>
</div>
</div>
</div>

CSS

              
                /*FONTS *
-----------------------------------------------*/
@import url(//fonts.googleapis.com/css?family=Assistant:200,300,400,600,800);
/*https://fonts.googleapis.com/css?family=Assistant*/
@import url(//fonts.googleapis.com/css?family=Lora:400,600,800);
/*https://fonts.google.com/specimen/Lora*/

.assistant {
  font-family: 'assistant';
}

.lora {
  font-family: 'lora';
}

/*TYPOGRAPHY *
-----------------------------------------------*/
h1 {
  font: 800 48px "Lora";
  color: #333333;
}

h2 {
  font: 600 32px "Lora";
  color: #333333;
}

h3 {
  font: 600 26px "Lora";
  color: #333333;
}

h4 {
  font: 600 21px "Lora";
  color: #333333;
}

h5 {
  font: 600 16px "Lora";
  color: #333333;
}
.h-blue {
  font-color: #016581;
}
.h-orange {
  font-color: #016581;
}
.secondary-set {
  font-family: "assistant";
  font-weight: 600;
}

p {
  font-family: "assistant";
  font-weight: 400;
}

a {
  color: #2EA6CC;
}

.big {
  font-size: 1.25em;
}

mark {
  background-color: #FFCB6C;
  padding: .2rem;
}

/*LAYOUT *
-----------------------------------------------*/
html {
  scroll-behavior: smooth;
}

.wrapper {
  width: 80%;
  margin: 8rem auto;
}

.break {
  height: 5vh;
}

.section-head {
  margin: 2em 0;
  font-family: "HelveticaNeue", "Helvetica", "Arial", sans-serif;
  font-size: 70%;
  font-weight: normal;
  padding: 1em 0;
  color: #C4C4C4;
  border-bottom: 1px solid #C4C4C4;
}

/* COLORS */
.primary-blue {
  color: #1DCDFE;
}
.blue-shade-100{
  color: #01b5e7;
}
.blue-shade-80{
  color: #019fcc;
}
.blue-shade-60{
  color: #0181a5;
}
.blue-shade-40{
  color: #01637e;
}
.blue-shade-20{
  color: #014457;
}
.h-blue{
  color: #014457;
}

.primary-orange {
  background-color: #F7AA62;
}
.orange-shade-100 {
  color: #f59e4c;
}
.orange-shade-80 {
  color: #f38a27;
}
.orange-shade-60 {
  color: #e6760d;
}
.orange-shade-40 {
  color: #c1630b;
}
.orange-shade-20 {
  color: #9c5009;
}
.h-orange {
  color: #9c5009;
}

.green {
  color: #86ea96;
}
.red {
  color: #f27070;
}
.purple {
  color: #9b6cd8;
}
.yellow {
  color: #ffcb6c;
}
/* HEADER */
.header {
  left: 0;
  right: 0;
  height: 3rem;
  line-height: 3rem;
  color: #fff;
  background-color: #f1f1f1;
}

.header__logo {
  font-weight: 700;
  padding: 0 25px;
  float: left;
}

/* MENU */
# {
  
}
.menu {
  float: left;
  
  a {
    padding: 0 10px;
  }
  
  a:hover {
    color: #c5cae9;
  }
}

/* BUTTONS */
.overlay__btns {
  column-gap: 16px;
  padding: 0 0 16px 0;
  width: 100%;
  display: flex;
}

button {
  box-sizing: border-box;
  appearance: none;
  width: 100%;
  height: 2.5rem;
  justify-content: center;
  align-items: center;
  font-family: 'assistant';
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: #f38a27;
  border: 3px solid #F37F58;
  border-radius: 0.4rem;
  transition: transform 150ms ease;
}

.btn:hover {
  opacity: 0.9;
  cursor: pointer;
}

.btn-hover {
  opacity: 0.9;
  cursor: pointer;
}

.btn-blue {
  background: #0181a5;
  border: 3px solid #0181a5;
}

.btn-dark {
  background: #333333;
  border: 3px solid #333333;
}

.btn-secondary {
  color: black;
  background: 0;
}

.btn-tertiary {
  color: black;
  background: 0;
  border: 0;
  text-decoration: underline;
}

.btn-disable {
  background: #E4ECEF;
  border: 3px solid #E4ECEF;
  cursor: not-allowed;
  pointer-events: none;
}


/* CodePen Document */
.primary-blue-swatch {
  background-color: #1DCDFE;
}
.blue-shade-100-swatch{
  background-color: #01b5e7;
}
.blue-shade-80-swatch{
  background-color: #019fcc;
}
.blue-shade-60-swatch{
  background-color: #0181a5;
}
.blue-shade-40-swatch{
  background-color: #01637e;
}
.blue-shade-20-swatch{
  background-color: #014457;
}

.primary-orange-swatch {
  background-color: #F7AA62;
}
.orange-shade-100-swatch {
  background-color: #f59e4c;
}
.orange-shade-80-swatch {
  background-color: #f38a27;
}
.orange-shade-60-swatch {
  background-color: #e6760d;
}
.orange-shade-40-swatch {
  background-color: #c1630b;
}
.orange-shade-20-swatch {
  background-color: #9c5009;
}
.green {
  background-color: #86ea96;
}
.red {
  background-color: #f27070;
}
.purple {
  background-color: #9b6cd8;
}
.yellow {
  background-color: #ffcb6c;
}
.card-container {
    display: grid;
    grid-template-columns: repeat(2, .5fr);
    grid-gap: 2rem;
}

.card {
    box-shadow: 1px 2px 2px rgba(0, 0, 0, 0.2), 
                -1px -1px 5px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    margin: 0rem 0rem 2rem 0rem;
}
.flat {
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0), 
                0px 0px 0px rgba(0, 0, 0, 0);
}

.color-pallet-container {
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
 
.swatch {
  width: 97.5%;
  height: 3rem;
  border-radius: 2px;
  transition : transform .3s ease-in-out;
  padding: 0rem 0rem 0rem 1rem;
  
  &:not(:first-child) {
    margin-left: 1px;
  }

  &:hover {
    transform: scale(1.04);
    cursor: pointer;
  }
}
.swatch-secondary{
  width: 3rem;
  height: 3rem;
  border-radius: 6px;
  bottom-margin: 1rem;
}

.name {
    padding: 0px 0px 16px 16px;
}

.white-text {
  font-color: #000000;
}

JS

999px

Insecure Resource

About JavaScript Preprocessors

About External Resources

About Packages

HTML

CSS

JS

Console

HTML

HTML Preprocessor

About HTML Preprocessors

Add Class(es) to <html>

Adding Classes

Stuff for <head>

About the <head>

Insecure Resource

CSS

CSS Preprocessor

About CSS Preprocessors

CSS Base

About CSS Base

Vendor Prefixing

About Vendor Prefixing

Add External Stylesheets/Pens

About External Resources

JavaScript

JavaScript Preprocessor

About JavaScript Preprocessors

Add External Scripts/Pens

About External Resources

Packages

Add Packages

About Packages

Behavior

Auto Save

Auto-Updating Preview

Format on Save

Editor Settings

Code Indentation

Code Indent width

Want to change your Syntax Highlighting theme, Fonts and more?

HTML

CSS

JS

Console

Editor Commands

Editor Focus

Misc

HTML Specific

Pen Actions