Revision: 52902
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at November 4, 2011 08:57 by zachharkey
Initial Code
<div class="typo-title"> Headings </div> <h1>Heading one example</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h2>Heading two example</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h3>Heading three example</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h4>Heading four example</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h5>Heading five example</h5> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <h6>Heading six example</h6> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br /> <br /> </p> <div class="typo-title"> Normal Paragraph of text </div> <p>This is a Normal paragraph of text created with lorem ipsum text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <a href= "#">This is a link in normal paragraph text</a> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <p><br /> </p> <div class="typo-title"> Special Tags </div> <blockquote> This is a blocquote tag example created with lorem ipsum text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </blockquote> <pre> <strong>This is pre tag example:</strong> body { font-family:Arial,Helvetica,Verdana,"Bitstream Vera Sans",sans-serif; font-size:81.25%; line-height:150%; color:#252525; background:#ffffff; } </pre> <p><code><strong>This is code tag example:</strong><br /> body {<br /> font-family:Arial,Helvetica,Verdana,"Bitstream Vera Sans",sans-serif;<br /> font-size:81.25%;<br /> line-height:150%;<br /> color:#252525;<br /> background:#ffffff;<br /> }</code></p> <p><br /> </p> <div class="typo-title"> List Styles </div> <div class="clearfix"> <div style="float: left; width: 48%; padding-right: 1%;"> <ol> <li>This is a sample <strong>Ordered List Style</strong>.</li> <li>In order to use it, simply use:-</li> <li><strong><ul><li>.. Your text goes here ..</li></ul></strong></li> </ol> <ul class="arrow-list"> <li>This is a sample <strong>Arrow List Style</strong>.</li> <li>In order to use it, simply use:-</li> <li><strong><ul class="arrow-list"><li>.. your text goes here ..</li></strong></li> <li>and make your listing looking beautiful.</li> </ul> </div> <div style="float: left; width: 48%; padding-right: 1%;"> <ul> <li>This is a sample <strong>Unordered List Style</strong>.</li> <li>In order to use it, simply use:-</li> <li><strong><ol><li>.. Your text goes here ..</li></ol></strong></li> </ul> <ul class="star-list"> <li>This is a sample <strong>Star List Style</strong>.</li> <li>In order to use it, simply use:-</li> <li><strong><ul class="star-list"><li>.. your text goes here ..</li></strong></li> <li>and make your listing looking beautiful.</li> </ul> </div> <div style="float: left; width: 48%; padding-right: 1%;"> <ul class="check-list"> <li>This is a sample <strong>Check List Style</strong>.</li> <li>In order to use it, simply use:-</li> <li><strong><ul class="check-list"><li>.. your text goes here ..</li></strong></li> <li>and make your listing looking beautiful.</li> </ul> </div> </div> <p><br /> </p> <div class="typo-title"> Special Messaging Box styles </div> <div class="status-box"> Status Message Box: Use <strong><div class="status-box">.. Your text goes here ..</div></strong> to create this. </div> <div class="warning-box"> Warning Message Box: <strong>Use <div class="warning-box">.. Your text goes here ..</div></strong> to create this. </div> <div class="error-box"> Error Message Box: <strong>Use <div class="warning">.. Your text goes here ..</div></strong> to create this. </div> <div class="info-box"> Info Message Box:. Use <strong><div class="info-box">.. Your text goes here ..</div></strong> to create this. </div> <p><br /> </p> <div class="typo-title"> Special Buttons Styles </div> <p style="margin:0px">Use <strong>small medium large</strong> class respectively for example for small use small i.e.: -<br /> <strong><a href="#" class="button blue small"><span>Some Text</span></a></strong></p> <p style="margin-bottom:0px"><a class="button black small" href= "#"><span>Some Text</span></a> <a class="button black medium" href="#"><span>Some Text</span></a> <a class="button black large" href="#"><span>Some Text</span></a></p> <p style="margin-bottom:0px">Use <strong><a href="#" _cke_saved_href="#" class="button blue small"><span>Some Text</span></a></strong></p> <p><a class="button cyan" href="#"><span>Cyan</span></a> <a class="button blue" href="#"><span>Blue</span></a> <a class= "button green" href="#"><span>Green</span></a> <a class= "button orange" href="#"><span>Orange</span></a> <a class= "button pink" href="#"><span>Pink</span></a> <a class= "button purple" href="#"><span>Purple</span></a> <a class= "button red" href="#"><span>Red</span></a> <a class= "button yellow" href="#"><span>Yellow</span></a> <a class= "button white" href="#"><span>White</span></a> <a class= "button gray" href="#"><span>Gray</span></a> <a class= "button black" href="#"><span>Black</span></a></p> <p><br /> </p> <div class="typo-title"> More Paragraph Styles </div> <div style="width: 47%; float: left; margin-right: 2.5%;"> <p class="download">Downlod: Use <strong><p class="download">.. Your text goes here ..</p></strong> to create this.</p> <p class="upload">Upload: Use <strong><p class="upload">.. Your text goes here ..</p></strong> to create this.</p> <p class="note">Note: Use <strong><p class="note">.. Your text goes here ..</p></strong> to create this.</p> <p class="tip">Tip: Use <strong><p class="tip">.. Your text goes here ..</p></strong> to create this.</p> <p class="word">Word: Use <strong><p class="word">.. Your text goes here ..</p></strong> to create this.</p> <p class="excel">Excel: Use <strong><p class="excel">.. Your text goes here ..</p></strong> to create this.</p> <p class="pdf">Pdf: Use <strong><p class="pdf">.. Your text goes here ..</p></strong> to create this.</p> <p class="compressed">Compressed: Use <strong><p class="compressed">.. Your text goes here ..</p></strong> to create this.</p> <p class="user">User: Use <strong><p class="user">.. Your text goes here ..</p></strong> to create this.</p> <p class="comment">Comment: Use <strong><p class="comment">.. Your text goes here ..</p></strong> to create this.</p> <p class="alert">Alert: Use <strong><p class="alert">.. Your text goes here ..</p></strong> to create this.</p> <p class="info">Info: Use <strong><p class="info">.. Your text goes here ..</p></strong> to create this.</p> </div> <div style="width: 47%; float: left; margin-right: 2.5%;"> <p class="check">Check: Use <strong><p class="check">.. Your text goes here ..</p></strong> to create this.</p> <p class="arrow">Arrow: Use <strong><p class="arrow">.. Your text goes here ..</p></strong> to create this.</p> <p class="star">Star: Use <strong><p class="star">.. Your text goes here ..</p></strong> to create this.</p> <p class="email">Email: Use <strong><p class="email">.. Your text goes here ..</p></strong> to create this.</p> <p class="mobile">Mobile: Use <strong><p class="mobile">.. Your text goes here ..</p></strong> to create this.</p> <p class="tag">Tag: Use <strong><p class="tag">.. Your text goes here ..</p></strong> to create this.</p> <p class="cart">Cart: Use <strong><p class="cart">.. Your text goes here ..</p></strong> to create this.</p> <p class="home">Home: Use <strong><p class="home">.. Your text goes here ..</p></strong> to create this.</p> <p class="key">Key: Use <strong><p class="key">.. Your text goes here ..</p></strong> to create this.</p> <p class="lock">Lock: Use <strong><p class="lock">.. Your text goes here ..</p></strong> to create this.</p> <p class="image">Image: Use <strong><p class="image">.. Your text goes here ..</p></strong> to create this.</p> <p class="video">Video: Use <strong><p class="video">.. Your text goes here ..</p></strong> to create this.</p> </div> <div class="clearfix" style="clear:both;"> <p> </p> </div>
Initial URL
Initial Description
Initial Title
Styleguide Placeholder HTML
Initial Tags
Initial Language
HTML