Style Guide

index.html

<div class="wrapper">
  <h1 class="page-title"> Federal Citizen Science and Crowdsourcing Toolkit<small style="display:block;">Style Guide</small></h1>
<div class="pattern">
  <h2 class="pattern-head">Site Colors</h2>
  <div class="pattern-body">
    <ul class="colors">
      <li class="swatch c-blue">@blue #3a7498</li>
       <li class="swatch c-grey-dark">@grey-dark #cccccc</li>
      <li class="swatch c-black">@black #000000</li>
      <li class="swatch c-white">@white #ffffff</li>
      <li class="swatch c-grey-light">@grey-light #f1f1f1</li>
      
    </ul>
  </div>
</div>
  <div class="pattern">
  <h2 class="pattern-head">Process Step Colors</h2>
  <div class="pattern-body">
    <ul class="colors">
      <li class="swatch c-tan">@tan #e8d0a9</li>
      <li class="swatch c-clay">@clay #b7afa3</li>
      <li class="swatch c-cyan-grey">@cyan-grey #c1dad6</li>
      <li class="swatch c-light-blue">@light-blue #c1dad6</li>
      <li class="swatch c-sea-green">@sea-green #6c919a</li>
    </ul>
  </div>
</div>
<div class="pattern">
  <h2 class="pattern-head">Fonts</h2>
  <div class="pattern-body">
    <p>Primary font: 'Lato', sans-serif;</p>
    <p><em>Primary font italic: 'Lato', sans-serif;</em></p>
    <p><strong>Primary font bold: 'Lato', sans-serif;</strong></p>
    <p class="serif">Secondary font: 'Roboto Slab', 'Source Sans Pro', Arial, sans-serif</p>
    <p class="serif"><em>Secondary font italic: 'Roboto Slab', 'Source Sans Pro', Arial, sans-serif</em></p>
    <p class="serif"><strong>Secondary font bold: 'Roboto Slab', 'Source Sans Pro', Arial, sans-serif</strong></p>
  </div>
</div>
<div class="pattern">
  <h2 class="pattern-head">Typography</h2>
  <div class="pattern-body">
    <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> 
    <h6>Heading Level 6</h6>
    
    <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>
    <p class="muted">Muted color paragraph.</p>
    <p class="meta">Meta Information.</p>
              
  </div>
</div>

<div class="pattern">
  <h2 class="pattern-head">Buttons</h2>
  <div class="pattern-body">
    <p><a href="">This is a Link</a></p>
							    <p><button>button</button></p>
    <p class="category">category</button></p>
					  </div>
						</div>    
<div class="pattern">
  <h2 class="pattern-head">Site Navigation</h2>
  <div class="pattern-body">
    <nav id="nav" class="nav clearfix">
      <ul class="site-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">How To</a></li>
        <li><a href="#">Case Studies</a></li>
        <li><a href="#">Resource Library</a></li>
        <li><a href="#">Legal And Policy</a></li>
      </ul>
    </nav>
  </div>
</div>
   
<div class="pattern">
  						<h2 class="pattern-head">Inline Elements</h2>
  						<div class="pattern-body">
    <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 class="pattern">
  <h2 class="pattern-head">Backgrounds</h2>
  <div class="pattern-body">
    <div class="bg-grey-dark">
      <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> 
      <h6>Heading Level 6</h6>

      <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>
      <p class="muted">Muted color paragraph.</p>
      <p class="meta">Meta Information.</p>
    </div>
    
    <div class="bg-blue">
      <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> 
      <h6>Heading Level 6</h6>

      <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>
      <p class="muted">Muted color paragraph.</p>
      <p class="meta">Meta Information.</p>
    </div>
    
    <div class="bg-black">
      <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> 
      <h6>Heading Level 6</h6>

      <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>
      <p class="muted">Muted color paragraph.</p>
      <p class="meta">Meta Information.</p>
    </div>
    
    
  </div>
</div>
</div><!--*end wrapper*-->

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Style Guide.markdown

Style Guide

Style Guide for the Federal Crowdsourcing and Citizen Science Toolkit.

Forked from Andrew's Pen Style Guide Template.

A Pen by Sara Cope on CodePen.

License.

style.css

* {
  box-sizing: border-box;
}

.clearfix:after{
 visibility:hidden;display:block;content:"";clear:both;height:0;line-height:0;margin:0;padding:0;
}

.wrapper {
  width: 80%;
  margin: 0 auto;
}

h1.page-title {
  font-size: 2.4em;
  
  small {
    font-size: .5em;
    font-weight: normal;
    color: @red;
  }
}

.pattern {
  margin-bottom: 2em;
  position: relative;
}

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

/*COLORS *
-----------------------------------------------*/
@black: #000000;
@white: #ffffff;
@grey-dark: #555;
@grey-light: #f1f1f1;

@red: #ff5656;
@blue: #3a7498;

@tan: #e8d0a9;
@clay: #b7afa3;
@cyan-grey: #c1dad6;
@light-blue: #a6d8e9;
@sea-green: #6c919a;


.colors {
  padding: 0;
  
  li {
    list-style: none;
  }
}

.colors li {
  display: inline-block;
  height: 100px;
  width: 100px;
  text-align: center;
  margin-right: 30px;
  padding-top: 1.5em;
  border-radius: 500px;
  vertical-align: middle;
  position: relative;
  border: 5px solid white;
  box-shadow: 0 0 1px @grey-light/2;
}


.c-black {
  background-color: @black;
  color: @white;
}

.c-white {
  background-color: @white;
  color: @black;
}

.c-grey-dark {
  background-color: @grey-dark;
  color: @white;
}

.c-grey-light {
  background-color: @grey-light;
  color: @black;
}

.c-red {
  background-color: @red;
  color: @white;
}

.c-blue {
  background-color: @blue;
  color: @white;
}

.c-tan {
  background-color: @tan;
  color: @white;
}

.c-clay {
  background-color: @clay;
  color: @white;
}

.c-cyan-grey {
  background-color: @cyan-grey;
  color: @white;
}

.c-light-blue {
  background-color: @light-blue;
  color: @white;
}

.c-sea-green {
  background-color: @sea-green;
  color: @white;
}

/*FONTS *
-----------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,700);

body {
  .lato;
}

.lato {
  font-family: 'Lato', sans-serif;
}

.serif {
  font-family:"roboto slab","source sans pro",arial, sans-serif;
}


/*TYPOGRAPHY *
-----------------------------------------------*/
h2 {
	font-size: 25px;
	letter-spacing: -.03em;
}

h3 {
	font-size: 22px;
	letter-spacing: -.03em;
	line-height: 1.2em;
}

h4 {
	font-size: 20px;
	letter-spacing: -.03em;
	line-height: 1.3em;
}

h5,h6,h7 {
	font-size: 18px;
	letter-spacing: -.02em;
	line-height: 1.3em;
}

p {
  margin: 0 0 1em 0;
}

.big {
  font-size: 1.25em;
}

.muted {
  color: #999;
}

.meta {
  font-size: 80%;
  .muted;
}

/*BUTTONS *
-----------------------------------------------*/

a {
  color: @blue;
  outline: 0;
}

.btn,
button {
  display: inline-block;
  background: @blue;
  color: white;
  line-height: 1;
  padding: 1em;
  padding: 0.4em 0.7em 0.4em 0.7em;
  border: 0;
  text-align: center;
  .transition;
  .border-radius;
  //box-shadow: 0 3px 0 @blue/1.2;
  
  &:hover, 
  &:focus {
    background: @white;
    color: black;
  }
}

.category {
  display: inline-block;
  background: @grey-light;
  color: @grey-dark;
  line-height: 1;
  padding: 1em;
  padding: 0.4em 0.7em 0.4em 0.7em;
  border: 0;
  text-align: center;
  .transition;
  //box-shadow: 0 3px 0 @blue/1.2;
  
  &:hover, 
  &:focus {
    background: @blue;
    color: white;
    text-decoration: underline;
  }
}

/*ELEMENTS *
-----------------------------------------------*/
.border-radius {
  border-radius: 3px;
}

.transition {
  	transition: all ease-out 300ms;	
}


/*SITE NAV *
-----------------------------------------------*/
.site-nav {
  font-size: 16px;
  text-transform: uppercase;
  font-family: "roboto condensed","source sans pro",arial, sans-serif;
  width: auto;
  list-style: none;
}

.site-nav a {
  color: @black;
  text-decoration: none;
  font-weight: 400;
  display: block;
  position: relative;
  line-height: 60px;
  width: auto;
  padding: 0 15px;

  &:hover, 
  &:focus {
    color: @white;
    background-color: @blue;
    text-decoration: underline;
  }
}

.site-nav li {
  float: left;
  width: auto;
}


/*BACKGROUNDS *
-----------------------------------------------*/
[class*='bg-'] {
  padding: 2em;
}

.bg-grey-dark {
  background: @grey-dark;
  color: @white;
}

.bg-blue {
  background: @blue;
  color: @white;
}

.bg-black {
  background: @black;
  color: @white;
}