Skip to content

Instantly share code, notes, and snippets.

@d-qn

d-qn/index.html

Created October 11, 2021 17:43
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save d-qn/506bb5a9f5529e0958c7236c410fd8df to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save d-qn/506bb5a9f5529e0958c7236c410fd8df to your computer and use it in GitHub Desktop.
Download ZIP
Style Guide Template
Raw
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>
Raw
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.

Raw
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;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment