Difference between revisions of "Style Guide"

From Freephile Wiki
Jump to navigation Jump to search
Line 8: Line 8:
 
padding-right: 12px;
 
padding-right: 12px;
 
padding-top: 9px;">
 
padding-top: 9px;">
<span style="color:white;">This is a navline, or header</span></div>
+
<span style="color:white;">This is a navline, or header with background-color:#212121</span></div>
<h2 style="color: #2c2c2c; display: block; font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 19px; font-weight: bold;">Heading</h2>
+
<h2 style="color: #2c2c2c; display: block; font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 19px; font-weight: bold;">Heading color #2c2c2c</h2>
<p style="color: #464946; display: block; font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 12px;">This is paragraph text.  Links within the text <a href="#" style="color: rgb(6, 51, 96);">are colored, and decorated for email</a></p>
+
<p style="color: #464946; display: block; font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 12px;">This is paragraph text in #464946.  Links within the text <a href="#" style="color: rgb(6, 51, 96);">are colored rgb(6, 51, 96) or #063360, and decorated for email</a></p>
<p style="color: #333333; display: block; font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 12px;">This is darker text</p>
+
<p style="color: #333333; display: block; font-family: 'Trebuchet MS', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 12px;">This is darker text in #333333</p>
 
</html>
 
</html>
  
 
[[Category:Design]]
 
[[Category:Design]]
 
[[Category:Marketing]]
 
[[Category:Marketing]]

Revision as of 12:13, 26 January 2016

A long time ago, I created a script that would parse a CSS file and generate the unwritten style guide that's embodied in it. Until I resurrect that script, you might need to refer to other helpful resources on creating a Style Guide

Really Simple Example[edit | edit source]

This is a navline, or header with background-color:#212121

Heading color #2c2c2c

This is paragraph text in #464946. Links within the text are colored rgb(6, 51, 96) or #063360, and decorated for email

This is darker text in #333333