Style Guide Template

index.html

<!-- you can put some webfonts here if you want -->
<link href='https://fonts.googleapis.com/css?family=Josefin+Slab:100,300,400,600,700' rel='stylesheet' type='text/css'>

<!-- change these titles to match your project -->
<div id="templateTitle">
  <span id="projectTitle">Project Title</span> <br/>
  <span id="projectDesc">This is a description</span>
  <div class="seperator"></div>
</div>

<!-- change the HEX values here -->
<div class="sectionHeading">
  <span class="sectionTitle">COLORS</span>
  <div class="sectionSeperator"></div>
</div>

<ul id="colors">
  <li class="colorCircle color-1">
      <div class="colorHex">#C7D6BA</div>
  </li>
  <li class="colorCircle color-2">
      <div class="colorHex">#BAE3C2</div>
  </li>
  <li class="colorCircle color-3">
      <div class="colorHex">#C7EDC2</div>
  </li>
   <li class="colorCircle color-4">
      <div class="colorHex">#E5EDC2</div>
  </li>
  <li class="colorCircle color-5">
      <div class="colorHex">#E3E1BA</div>
  </li>  
</ul>  

<!-- customize these heading descriptions if necessary -->
<div class="sectionHeading">
  <span class="sectionTitle">TYPOGRAPHY</span>
  <div class="sectionSeperator"></div>
</div>

<div id="typography">
  <h1>H1. This is a Page Title.</h1>
  <h2>H2. This is a header.</h2>
  <h3>H3. This is a medium header.</h3>
  <h4>H4. This is a sidebar header.</h4>
  <h5>H5. This is a small header.</h5>
  <h6>H6. This is a tiny header.</h6>
  <p>A general paragraph will look like this.</p>  
</div>

<!-- use these as needed -->
<div class="sectionHeading">
  <span class="sectionTitle">INLINE ELEMENTS</span>
  <div class="sectionSeperator"></div>
</div>

<div id="inlineElements">
  <p><a href="#">This is a text link</a></p>
  <p><strong>Strong is used to indicate strong importance</strong></p>
  
  <p>The <b>b element</b> is stylistically different text from normal text, without any special importance</p>
  
  <p>The <em>i element</em> 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><small>This small text is small for for fine print, etc.</small></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>
</div>

<!-- use these as needed -->
<div class="sectionHeading">
  <span class="sectionTitle">FORM ELEMENTS</span>
  <div class="sectionSeperator"></div>
</div>

<div id="formElements">
  <form>
		<div class="form-item">
			<input type="text" placeholder="text field" name="" id="">
		</div>
		<div class="form-item">
			<input type="text" required="required" placeholder="required text field" name="" id="">
		</div>
		<div class="form-item">
			<textarea name="" id="" cols="40" rows="5"></textarea>
	  </div>
    
		<div class="form-item">
			<select name="" id="">
				<option value="default">-- Select --</option>
				<option value="">Only</option>
				<option value="">One</option>
				<option value="">Item</option>
			</select>
		</div>
    
		<div class="form-item">
			<select multiple name="" id="">
				<option value="">Select</option>
				<option value="">Multiple</option>
				<option value="">Items</option>
			</select>
		</div>
    
		<div class="form-item form-type-radios">
			<div class="form-item"><input type="radio" name="example-radios" id=""><label for="" class="option">Radio One</label></div>
			<div class="form-item"><input type="radio" name="example-radios" id=""><label for="" class="option">Radio Two</label></div>
			<div class="form-item"><input type="radio" name="example-radios" id=""><label for="" class="option">Radio Three</label></div>
			<div class="form-item"><input type="radio" name="example-radios" id=""><label for="" class="option">Radio Four</label></div>
		</div>
    
		<div class="form-item form-type-checkboxes">
			<div class="form-item"><input type="checkbox" name="" id=""><label for="">checkbox 1</label></div>
			<div class="form-item"><input type="checkbox" name="" id=""><label for="">checkbox 2</label></div>
			<div class="form-item"><input type="checkbox" name="" id=""><label for="">checkbox 3</label></div>
			<div class="form-item"><input type="checkbox" name="" id=""><label for="">checkbox 4</label></div>
		</div>
    
		<div class="form-actions">
			<input type="submit" class="form-submit">
			<input type="button" value="Cancel" class="form-submit">
		</div>
	</form>
</div>  

style-guide-template.markdown

Style Guide Template

A basic CSS style guide template

// layout modified from Brian Krall's SCSS guide // codepen.io/bkrall

A Pen by Zachary Wall on CodePen.

License.

style.css

/* original SCSS style guide by Brian Krall (codepen.io/bkrall)

____,-------------------------,____
\   |   PROJECT STYLE GUIDE   |    /
/___|-------------------------|____\
                   guide styles at the end */

/* Colors
// ---------------------*/
.color-1 {background: #C7D6BA;} /* color desc goes over here */
.color-2 {background: #BAE3C2;} 
.color-3 {background: #C7EDC2;} 
.color-4 {background: #E5EDC2;}
.color-5 {background: #E3E1BA;}

/* Typography
// ---------------------*/
html, body {font-family: "Josefin Slab", serif;} /* change this */

h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}

p {}

/* Inline Elements
// ---------------------*/
a {}
a:visited {}
a:hover {}
a:active {}

b {}

/* Inline Elements
// ---------------------*/
input {}
input[type=] {}

input: required {}
input: valid {}
input: invalid {}

label {}
textarea {}
select {}
option {}





/* Style Guide
// --------------------- */
html {background: #f7f7f7;}
#templateTitle {width: 50%; position: relative; padding-top: 10px; margin: 0 auto; text-align: center;}
#projectTitle {font-size: 34px; font-weight: 700; color: #C4C4C4;}
#projectDesc {font-family: sans-serif; font-size: 12px; font-weight: 300; color: #DBDBDB;}
.seperator {width: 50%; position: relative; padding-top: 20px; margin: 0 auto; margin-bottom: 50px; border-bottom: 1px solid #EDEDED;}
.sectionHeading {width: 50%; margin: 0 auto; text-align: left;}
.sectionTitle {font-family: sans-serif; font-size: 12px; font-weight: 300; color: #848484;}
.sectionSeperator {position: relative; padding-top: 5px; margin: 0 auto; border-bottom: 1px solid #CCCCCC;}
ul#colors {width: 50%; position: relative; padding-top: 30px; margin: 0 auto; margin-bottom: 75px; text-align: center; list-style: none;}
li.colorCircle { width: 100px; height: 100px; border-radius: 50%; display: inline-block; margin-right: 20px;}
.colorHex { position: relative; color: #D1D1D1; top: 120px; right: 6px;}
#typography {width: 50%; position: relative; padding-top: 10px; margin: 0 auto; margin-bottom: 75px;}
#inlineElements {width: 50%; position: relative; padding-top: 10px; margin: 0 auto; margin-bottom: 75px;}
#formElements {width: 50%; position: relative; padding-top: 10px; margin: 0 auto; margin-bottom: 75px;}