Style Guide Template

Developer
Icebob
Size
10,550 Kb
Views
54,648
  1. Style Guide Template Previews
  2. Style Guide Template HTML Codes
  3. Style Guide Template CSS Codes
  4. Style Guide Template JS Codes

How do I make an style guide template?

What is a style guide template? How do you make a style guide template? This script and codes were developed by Icebob on 12 June 2022, Sunday.

Style Guide Template Previews
IQ Test

Style Guide Template - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Style Guide Template</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1 class="masterTitle">Style Guide</h1>
<div class="guide"> <section> <h2><span class="number">1.</span><span class="text">Color palette</span></h2> <div class="content flex colors"> <div class="box box1"> <div class="main"></div> <div class="light"></div> <div class="dark"></div> <div class="code"></div> </div> <div class="box box2"> <div class="main"></div> <div class="light"></div> <div class="dark"></div> <div class="code"></div> </div> <div class="box box3"> <div class="main"></div> <div class="light"></div> <div class="dark"></div> <div class="code"></div> </div> <div class="box box4"> <div class="main"></div> <div class="light"></div> <div class="dark"></div> <div class="code"></div> </div> <div class="box box5"> <div class="main"></div> <div class="light"></div> <div class="dark"></div> <div class="code"></div> </div> </div> </section> <section> <h2><span class="number">2.</span><span class="text">Typography</span></h2> <div class="content typo"> <div class="headers"> <h1>Heading #1 - <span></span></h1> <h2>Heading #2 - <span></span></h2> <h3>Heading #3 - <span></span></h3> <h4>Heading #4 - <span></span></h4> <h5>Heading #5 - <span></span></h5> </div> <div class="paragraph"> <p>Paragraph <span> </span>. ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789</p> <p>An example paragraph with <strong>strong text</strong> and <em>emphasized text</em>, spanning <br/>multiple lines so you can see the line-height.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec varius ipsum tortor, eget convallis ante sagittis ac. Nulla eget bibendum dolor. Praesent at ipsum bibendum, malesuada quam tincidunt, lobortis purus. Donec vel mi mollis, sagittis libero non, ultrices elit. Nulla non mauris in sapien mattis scelerisque. Vivamus maximus tincidunt mi, interdum pellentesque urna feugiat sed. Suspendisse vulputate metus leo, nec hendrerit sapien tincidunt ac. Vivamus non libero luctus, suscipit libero ut, elementum enim. <a href="#">Read more</a></p> <p>Fusce aliquam sem lorem, in porttitor orci dignissim at. Sed non dolor at orci dignissim bibendum a non nibh. Duis nec vestibulum dui, sit amet lobortis ligula. Sed aliquam mauris nunc, eu sodales est faucibus vitae. Ut sed accumsan lectus. Interdum et <a href="#">malesuada</a> fames ac ante ipsum primis in faucibus. Aenean dignissim odio vehicula ligula varius, ac ullamcorper tortor molestie. Phasellus dolor dui, egestas id ornare in, suscipit et dolor.</p> </div> </div> </section> <section> <h2><span class="number">3.</span><span class="text">Buttons</span></h2> <div class="content flex buttons"> <button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-outline">Outline</button> </div> <div class="content flex buttons"> <button class="btn btn-primary btn-disabled" disabled="disabled">Primary disabled</button> <button class="btn btn-secondary btn-disabled" disabled="disabled">Secondary disabled</button> <button class="btn btn-outline btn-disabled" disabled="disabled">Outline disabled</button> </div> </section> <section> <h2><span class="number">4.</span><span class="text">Form elements</span></h2> <div class="content forms"> <form action="#"> <div class="input-container"> <label for="text1">Label</label> <input id="text1" type="text" name="name" placeholder="Placeholder"/> </div> <div class="input-container input-container-valid"> <label for="text2">Label for valid input</label> <input id="text2" type="text" name="name" placeholder="Placeholder"/> </div> <div class="input-container input-container-error"> <label for="text3">Label for invalid input</label> <input id="text3" type="text" name="name" placeholder="Placeholder"/> </div> <fieldset> <legend>Radio Label</legend> <div class="option-container"> <input id="radio1" type="radio" name="radio"/> <label for="radio1">Option one</label> </div> <div class="option-container"> <input id="radio2" type="radio" name="radio"/> <label for="radio2">Option two</label> </div> </fieldset> <fieldset> <legend>Checkbox Label</legend> <div class="option-container"> <input id="check1" type="checkbox"/> <label for="check1">Option one</label> </div> <div class="option-container"> <input id="check2" type="checkbox"/> <label for="check2">Option two</label> </div> </fieldset> </form> </div> </section> <section> <h2><span class="number">5.</span><span class="text">Alerts</span></h2> <div class="content alerts"> <p class="alert">This is a neutral alert.<a class="alert-close" href="x">&times;</a></p> <p class="alert alert-success">This is a success alert.<a class="alert-close" href="x">&times;</a></p> <p class="alert alert-error">This is an error alert.<a class="alert-close" href="x">&times;	</a></p> </div> </section> <section> <h2><span class="number">6.</span><span class="text">Tables</span></h2> <div class="content tables"> <table> <thead> <tr> <th>#</th> <th>Name</th> <th>Mail</th> <th>Phone</th> <th class="align-right">Outstanding</th> <th>Functions</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Johnny Avlony</td> <td>[email protected]</td> <td>(740) 841-7566</td> <td class="align-right">$2,400.00</td> <td class="align-right"> <button class="btn btn-secondary">Edit</button> <button class="btn btn-secondary">Disable</button> </td> </tr> <tr> <td>2</td> <td>Johnny Avlony</td> <td>[email protected]</td> <td>(740) 841-7566</td> <td class="align-right">$2,400.00</td> <td class="align-right"> <button class="btn btn-secondary">Edit</button> <button class="btn btn-secondary">Disable</button> </td> </tr> <tr> <td>3</td> <td>Johnny Avlony</td> <td>[email protected]</td> <td>(740) 841-7566</td> <td class="align-right">$2,400.00</td> <td class="align-right"> <button class="btn btn-secondary">Edit</button> <button class="btn btn-secondary">Disable</button> </td> </tr> <tr> <td>4</td> <td>Johnny Avlony</td> <td>[email protected]</td> <td>(740) 841-7566</td> <td class="align-right">$2,400.00</td> <td class="align-right"> <button class="btn btn-secondary">Edit</button> <button class="btn btn-secondary">Disable</button> </td> </tr> </tbody> <tfoot> <tr> <td>4</td> <td> </td> <td> </td> <td> </td> <td class="align-right">$15,500.00</td> <td class="align-right"> </td> </tr> </tfoot> </table> </div> </section>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Style Guide Template - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700|Open+Sans+Condensed:300,700&subset=latin,latin-ext);
h1, h2, h3, h4, h5 { font-family: "Open Sans Condensed"; font-weight: 300; margin: 10px 0px 0px 0px;
}
h1 { font-size: 2.5rem;
}
h2 { font-size: 2.2rem;
}
h3 { font-size: 2.0rem;
}
h4 { font-size: 1.8rem;
}
h5 { font-size: 1.6rem;
}
p { margin: 20px 0px; font: 16px/22px "Open Sans", Arial, sans-serif; text-align: justify;
}
strong { font-weight: 700;
}
em { font-style: italic;
}
a { text-decoration: none; cursor: pointer; color: #5f8ee4;
}
a:hover { text-decoration: underline;
}
.float-left { float: left;
}
.float-right { float: right;
}
.align-left { text-align: left;
}
.align-center { text-align: center;
}
.align-right { text-align: right;
}
.align-justify { text-align: justify;
}
.btn { margin: 0 1em; padding: .6em 2.2em; cursor: pointer; background: #5f8ee4; border: none; -moz-border-radius: 0.4em; -webkit-border-radius: 0.4em; border-radius: 0.4em; box-shadow: none; font: 1.1rem "Open Sans", Arial, sans-serif; color: #ffffff;
}
.btn:not(.btn-disabled):hover { background: #759de8;
}
.btn.btn-secondary { background: #82B31E;
}
.btn.btn-secondary:not(.btn-disabled):hover { background: #92c922;
}
.btn.btn-outline { background: transparent; border: 1px solid #5f8ee4; color: #5f8ee4;
}
.btn.btn-outline:not(.btn-disabled):hover { background: transparent; color: #759de8; -moz-box-shadow: 0 0 3px #497fe0 inset; -webkit-box-shadow: 0 0 3px #497fe0 inset; box-shadow: 0 0 3px #497fe0 inset;
}
.btn.btn-disabled { opacity: 0.6; cursor: default;
}
form .input-container input[type="text"] { border: 2px solid #e0e0e0; border-radius: 4px; padding: .5rem .7rem; width: 100%; background-color: #ffffff; color: #19191a; font-family: "Open Sans", Arial, sans-serif;
}
form { font-family: "Open Sans", Arial, sans-serif;
}
form fieldset { margin-bottom: 1rem;
}
form fieldset legend { display: block; color: #19191a; font-size: 1.0rem; font-weight: 600; margin-bottom: 0.55rem;
}
form .input-container { position: relative; margin-bottom: 1rem;
}
form .input-container label { display: block; color: #323234; font-family: "Open Sans", Arial, sans-serif; font-size: 1.0rem; font-weight: 600; margin-bottom: 0.55rem; text-transform: uppercase; position: absolute; left: .85rem; top: .65rem;
}
form .input-container input[type="text"] { font-family: "Open Sans", Arial, sans-serif; font-size: 1rem; padding-top: 2rem;
}
form .input-container input[type="text"]:focus { border-color: #5f8ee4; outline: 0;
}
form .input-container.input-container-error input[type="text"] { border: 2px solid #ff797c;
}
form .input-container.input-container-error label { color: #ff797c;
}
form .input-container.input-container-valid input[type="text"] { border: 2px solid #82c451;
}
form .input-container.input-container-valid label { color: #82c451;
}
form .option-container { position: relative; width: 100%;
}
form .option-container input { display: none;
}
form .option-container label { width: 100%; display: block; font-family: "Open Sans", Arial, sans-serif; font-size: 1rem; padding-top: 1.0rem; padding-bottom: 1.0rem; padding-left: 2.4rem; -moz-user-select: -moz-none; -ms-user-select: none; -webkit-user-select: none; user-select: none;
}
form .option-container label:before { background-color: #ffffff; border: 1px solid lightgray; -moz-box-shadow: 0 0 1px lightgray, 0 0 1px lightgray inset; -webkit-box-shadow: 0 0 1px lightgray, 0 0 1px lightgray inset; box-shadow: 0 0 1px lightgray, 0 0 1px lightgray inset; content: ''; display: block; position: absolute; top: 0.95em; left: .75em; height: 16px; width: 16px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px;
}
form .option-container input:checked + label:after { background-color: #5f8ee4; content: ''; display: block; width: 10px; height: 10px; position: absolute; top: 1.2em; left: 1em; -moz-border-radius: 1px; -webkit-border-radius: 1px; border-radius: 1px;
}
form .option-container input[type="radio"] + label:before { -moz-border-radius: 9px; -webkit-border-radius: 9px; border-radius: 9px;
}
form .option-container input[type="radio"]:checked + label:after { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
}
.alert { border-radius: 4px; background-color: #5f8ee4; color: #ffffff; padding: 0.4rem .9rem 0.4rem; position: relative; max-width: 100%;
}
.alert.alert-success { background-color: #82c451;
}
.alert.alert-error { background-color: #ff797c;
}
.alert .alert-close { border: 0; border-left: 2px solid rgba(0, 0, 0, 0.12); color: #ffffff; font-family: "Open Sans", Arial, sans-serif; font-size: 1.8em; font-weight: 800; position: absolute; right: 0px; top: 0px; bottom: 0px; padding: 0 .625em; line-height: 1.25em;
}
.alert .alert-close:hover { color: #ffffff; text-decoration: none;
}
table { width: 100%; font-family: "Open Sans", Arial, sans-serif; font-size: 0.9rem; color: #19191a;
}
table thead tr { background-color: lightgray; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; overflow: hidden; text-transform: uppercase; font-weight: 600;
}
table thead tr th { padding: 15px 20px;
}
table thead tr:first-child th:first-child { -moz-border-radius: 10px 0 0 0; -webkit-border-radius: 10px; border-radius: 10px 0 0 0;
}
table thead tr:first-child th:last-child { -moz-border-radius: 0 10px 0 0; -webkit-border-radius: 0; border-radius: 0 10px 0 0;
}
table tbody tr { cursor: pointer; border-bottom: 1px solid lightgray;
}
table tbody tr td { padding: 15px 20px;
}
table tbody tr td .btn { padding: .2em 1.2em; margin: 0 0.2em; display: inline-block; font-size: 0.9rem;
}
table tbody tr:nth-child(even) { background-color: #ededed;
}
table tbody tr:hover { background-color: #759de8; color: #ffffff;
}
table tfoot tr { background-color: lightgray; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; overflow: hidden; text-transform: uppercase; font-weight: 600;
}
table tfoot tr td { padding: 15px 20px;
}
table tfoot tr td:first-child { -moz-border-radius: 0 0 0 10px; -webkit-border-radius: 0; border-radius: 0 0 0 10px;
}
table tfoot tr td:last-child { -moz-border-radius: 0 0 10px 0; -webkit-border-radius: 0; border-radius: 0 0 10px 0;
}
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased;
}
html, body { background-color: #ffffff; color: #19191a;
}
.guide section .colors .box { border: 1px solid #e6e6e6; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;
}
h1.masterTitle { text-align: center; text-transform: uppercase; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6);
}
.guide { font-family: Arial, sans-serif; padding: 20px;
}
.guide section { margin-bottom: 40px;
}
.guide section > h2 { font-size: 1.5rem; margin-bottom: 20px; padding: 8px 10px; background-color: #f2f2f2; border: 1px solid #ebebeb; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-radius: 8px;
}
.guide section > h2 .number { color: #888;
}
.guide section > h2 .text { margin-left: 4px; font-weight: bold; text-transform: uppercase;
}
.guide section > h2:before, .guide section > h2:after { content: ""; display: table;
}
.guide section > h2:after { clear: both;
}
.guide section .content { margin: 0px 2rem;
}
.guide section .flex { display: -webkit-flex; display: flex; align-items: center; justify-content: space-around;
}
.guide section .colors .box { width: 150px; height: 150px; margin: 5px 20px; padding: 2px;
}
.guide section .colors .box .main { float: left; width: 100%; height: 90px;
}
.guide section .colors .box .light { float: left; width: 50%; height: 30px;
}
.guide section .colors .box .dark { float: right; width: 50%; height: 30px;
}
.guide section .colors .box .code { float: left; width: 100%; position: relative; margin-top: 5px;
}
.guide section .colors .box .code:after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 100%; text-align: center; font-family: "Consolas"; color: #19191a;
}
.guide section .colors .box.box1 .main { background-color: #5f8ee4;
}
.guide section .colors .box.box1 .light { background-color: #759de8;
}
.guide section .colors .box.box1 .dark { background-color: #497fe0;
}
.guide section .colors .box.box1 .code:after { content: "#5f8ee4";
}
.guide section .colors .box.box2 .main { background-color: #19191a;
}
.guide section .colors .box.box2 .light { background-color: #262627;
}
.guide section .colors .box.box2 .dark { background-color: #0d0d0d;
}
.guide section .colors .box.box2 .code:after { content: "#19191a";
}
.guide section .colors .box.box3 .main { background-color: #82B31E;
}
.guide section .colors .box.box3 .light { background-color: #92c922;
}
.guide section .colors .box.box3 .dark { background-color: #729d1a;
}
.guide section .colors .box.box3 .code:after { content: "#82B31E";
}
.guide section .colors .box.box4 .main { background-color: #e0e0e0;
}
.guide section .colors .box.box4 .light { background-color: #ededed;
}
.guide section .colors .box.box4 .dark { background-color: lightgray;
}
.guide section .colors .box.box4 .code:after { content: "#e0e0e0";
}
.guide section .colors .box.box5 .main { background-color: #ffffff;
}
.guide section .colors .box.box5 .light { background-color: white;
}
.guide section .colors .box.box5 .dark { background-color: #f2f2f2;
}
.guide section .colors .box.box5 .code:after { content: "#ffffff";
}
.guide section .buttons { margin-bottom: 20px;
}

Style Guide Template - Script Codes JS Codes

/*	Style guide template */
(function() { var heading, paragraph, setTypographyInfo; setTypographyInfo = function(parent, elType) { var element, fontFamily, fontSize, fontStyle, fontWeight, span; element = parent.find(elType); span = element.find("span"); fontStyle = element.css('font'); fontSize = Math.round(element.css('font-size').replace('px', '')) + 'px'; fontFamily = (element.css('font-family').split(','))[0].replace(/\'/g, '').replace(/\"/g, ''); fontWeight = element.css('font-weight'); return span.text(fontFamily + " " + fontWeight + ", " + fontSize); }; heading = $(".headers"); setTypographyInfo(heading, "h1"); setTypographyInfo(heading, "h2"); setTypographyInfo(heading, "h3"); setTypographyInfo(heading, "h4"); setTypographyInfo(heading, "h5"); paragraph = $(".paragraph"); setTypographyInfo(paragraph, "p");
}).call(this);
Style Guide Template - Script Codes
Style Guide Template - Script Codes
Home Page Home
Developer Icebob
Username icebob
Uploaded June 12, 2022
Rating 4.5
Size 10,550 Kb
Views 54,648
Do you need developer help for Style Guide Template?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Icebob (icebob) Script Codes
Name
A Pen by Icebob
Memory card game with VueJS
Task manager UI
Dashboard info panels with animation
Loading animation with css
Full responsive keypad
Animated popup window
Angular Sample App with Semantic UI
Notification popups
User administration page
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!