Literatum Style Guide

Developer
Stuart Allen
Size
8,561 Kb
Views
8,096
  1. Literatum Style Guide Previews
  2. Literatum Style Guide HTML Codes
  3. Literatum Style Guide CSS Codes

How do I make an literatum style guide?

What is a literatum style guide? How do you make a literatum style guide? This script and codes were developed by Stuart Allen on 18 January 2023, Wednesday.

Literatum Style Guide Previews
IQ Test

Literatum Style Guide - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Literatum Style Guide</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- header/intro -->
<section class="card"> <h1>Wiley Online Library UI Style Guide</h1> <h2>Introduction</h2> <p>This style guide builds on and improves the style rules set out by Atypon UI Designers. Although the code does not need to be taken 'as is', the final visual for all elements should be adhered to.</p>
</section>
<!-- 1.0 Elements -->
<section class="card"> <h2>1.0 Elements</h2> <!-- 1.1 Colors --> <section> <h3>1.1 Colors</h3> <hr> <ul class="swatches"> <h4>1.1.1 Call-to-actions</h4> <div class="well"> <li class="swatch swatch--blue-link"> <h3 class="swatch--name">Blue Link</h3> <h4 class="swatch--hex">#2b709e</h4> </li> <li class="swatch swatch--blue-link-hover"> <h3 class="swatch--name">Blue Link Hover</h3> <h4 class="swatch--hex">#075b81</h4> </li> <li class="swatch swatch--orange-link"> <h3 class="swatch--name">Orange Link</h3> <h4 class="swatch--hex">#cc4e00</h4> </li> <li class="swatch swatch--orange-link-hover"> <h3 class="swatch--name">Orange Link Hover</h3> <h4 class="swatch--hex">#993b00</h4> </li> </div> <h4>1.1.2 Access icons and labels (only)</h4> <div class="well"> <li class="swatch swatch--full-access"> <h3 class="swatch--name">Full Access</h3> <h4 class="swatch--hex">#008765</h4> </li> <li class="swatch swatch--open-access"> <h3 class="swatch--name">Open Access</h3> <h4 class="swatch--hex">#6d2077</h4> </li> <li class="swatch swatch--free-access"> <h3 class="swatch--name">Free Access</h3> <h4 class="swatch--hex">#4c6fd9</h4> </li> </div> <h4>1.1.3 Typography</h4> <div class="well"> <li class="swatch swatch--dark-text"> <h3 class="swatch--name">Dark Text</h3> <h4 class="swatch--hex">#1c1d1e</h4> </li> <li class="swatch swatch--lightgray-text"> <h3 class="swatch--name">Light Gray Text</h3> <h4 class="swatch--hex">#74767C</h4> <p><small>This gray is the lightest AA compliant gray that can be used on a white background</small></p> </li> </div> <h4>1.1.4 Decorative</h4> <div class="well"> <li class="swatch swatch--background-lightgray"> <h3 class="swatch--name">Light Gray Background</h3> <h4 class="swatch--hex">#edebe6</h4> </li> <li class="swatch swatch--background-lightgray-hover"> <h3 class="swatch--name">Light Gray Background Hover</h3> <h4 class="swatch--hex">#faf7f2</h4> </li> <li class="swatch swatch--background-white"> <h3 class="swatch--name">White Background</h3> <h4 class="swatch--hex">#ffffff</h4> </li> <li class="swatch swatch--borders"> <h3 class="swatch--name">Borders</h3> <h4 class="swatch--hex">#dfddd6</h4> </li> </div> </ul> </section> <!-- 1.2 Typography --> <section> <h3>1.2 Typography</h3> <hr> <h4>1.2.1 Default Headings <br><small>To be used in widgets and other locations in the UI where styles have not been explicitly set</small></h4> <p><strong>Open Sans</strong> is the primary font for WOL</p> <div class="well"> <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> <p>Paragraph Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <h4>1.2.2 Specific Headings</h4> </section> <!-- 1.3 Iconography --> <section> <h3>1.3 Iconography</h3> <hr> <div> <p>UI Icons should use the same format/template as the material design icons. Each icon is created on a 24x24px size canvas. Icons can be smaller than this upon creation, but cannot be cropped and should always retain the full 24x24px size.</p> <p>You can see the boundaries clearly in the inverted icon below.</p> <p>Icons can be rendered in 3 sizes, each a factor of 24px. 0.75x (18px), full size (24px), and 1.5x (36px)</p> <div class="well"> <i class="material-icons icon-small" style="background-color: black; color: white;">lock_open</i> <i class="material-icons icon-small">account_circle</i> <i class="material-icons icon-small">person</i> <i class="material-icons icon-small">list</i> <i class="material-icons icon-small">error_outline</i> <br> <i class="material-icons icon-medium" style="background-color: black; color: white;">lock_open</i> <i class="material-icons icon-medium">account_circle</i> <i class="material-icons icon-medium">person</i> <i class="material-icons icon-medium">list</i> <i class="material-icons icon-medium">error_outline</i> <br> <i class="material-icons icon-large" style="background-color: black; color: white;">lock_open</i> <i class="material-icons icon-large">account_circle</i> <i class="material-icons icon-large">person</i> <i class="material-icons icon-large">list</i> <i class="material-icons icon-large">error_outline</i> </div> </div> </section> <!-- 1.4 Links --> <section> <h3>1.4 Links</h3> <hr> <h4>1.4.1 Basic Text Link</h4> <p><a href="#">Basic text link</a></p> <h4>1.4.2 Single Link</h4> <a class="single-link">Single Link</a> </section> <!-- 1.5 Buttons --> <section> <h3>1.5 Buttons</h3> <hr> <h4>1.5.1 Large Button</h4> <div class="elements"> <button class="btn btn--large">Active Button</button> <button class="btn btn--large btn--disabled">Disabled Button</button> </div> <h4>1.5.2 Default Button</h4> <div class="elements"> <button class="btn">Active Button</button> <button class="btn btn--disabled">Disabled Button</button> </div> <h4>1.5.3 Small Button</h4> <div class="elements"> <button class="btn btn--small">Active Button</button> <button class="btn btn--small btn--disabled">Disabled Button</button> </div> </section>
</section>
<!-- 2.0 Components -->
<section class="card"> <h2>2.0 Components</h2> <section> <h3>2.1 Article view | Author List</h3> <hr> <div class="well"> <ul class="author-list"> <li class="author"> <a href="#">John Smith</a> <div class="author-info"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> </div> </li> <li><a href="#">Jane Brown</a> <div class="author-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> </li> <li><a href="#">Adell Acy</a> <div class="author-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> </li> <li><a href="#">Pearline Pasko</a> <div class="author-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> </li> <li><a href="#">Leesa Laplant</a> <div class="author-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> </li> <li><a href="#">Marielle Manke</a> <div class="author-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> </li> <li><a href="#">Leonard Lyda</a> <div class="author-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> </li> <li><a href="#">Billie Billick</a> <div class="author-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> </li> <li><a href="#">Broderick Brenes</a> <div class="author-info">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</div> </li> </ul> </div> </section> <section> <h3>2.2 Artice View | Corrections Alert</h3> <hr> <a href="#" class="corrections-link">Correction(s) for this article</a> </section> <section id="small-list"> <h3>2.6 Small List | Right Rail</h3> <hr> <div class="well well--lightgray"> <div class="small-list"> <div class="small-list__heading">Small list heading</div> <ul class="small-list__list"> <li><a href="#small-list">Small list link</a></li> <li><a href="#small-list" class="active">Active Small list link</a></li> <li><a href="#small-list">Small list link</a></li> <li><a href="#small-list" class="hover">Hover Small list link</a></li> <li><a href="#small-list">Small list link</a></li> </ul> </div> </div> </section> <section id="quick-links"> <h3>2.6 Quick Links | Right Rail</h3> <hr> <div class="well well--lightgray"> <div class="quick-links"> <ul class="quick-links__list"> <li><a href="#quick-links"><i class="material-icons icon-medium">add_alert</i>Subscribe to alerts</a></li> <li><a href="#quick-links" class="active"><i class="material-icons icon-medium">account_circle</i>Active Small list link</a></li> <li><a href="#quick-links"><i class="material-icons icon-medium">class</i>Small list link</a></li> <li><a href="#quick-links" class="hover"><i class="material-icons icon-medium">description</i>Hover Small list link</a></li> <li><a href="#quick-links"><i class="material-icons icon-medium">comment</i>Small list link</a></li> <li><a href="#quick-links"><i class="material-icons icon-medium">comment</i>Small list link</a></li> </ul> </div> </div> </section>
</section>
</body>
</html>

Literatum Style Guide - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i");
@import url(//fonts.googleapis.com/icon?family=Material+Icons);
html { background-color: #edebe6; font-family: 'Open Sans', sans-serif;
}
body { padding: 100px; max-width: 760px; color: #1C1D1E;
}
section { margin-bottom: 20px;
}
hr { border-style: solid; border-width: 0px; border-top-width: 1px; border-color: #dfddd6; margin: 10px 0 20px;
}
h1, h2, h3, h4, h5, h6 { font-weight: 700; margin-top: 0;
}
p { margin-top: 0; margin-bottom: 10px; font-size: 16px; line-height: 22px;
}
a { color: #2b709e; text-decoration: none; font-weight: 600;
}
a:hover { text-decoration: underline; color: #075b81; cursor: pointer;
}
a.single-link { display: inline-block; position: relative; margin-bottom: 10px; text-transform: uppercase; border-bottom: 2px solid transparent; -webkit-transition-property: border-color; transition-property: border-color; -webkit-transition-duration: 0.25s; transition-duration: 0.25s;
}
a.single-link:after { text-transform: none; font-weight: normal; font-size: 24px; position: absolute; top: -4px; right: -26px; font-family: 'Material Icons'; content: 'chevron_right'; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; -webkit-transition-duration: 0.25s; transition-duration: 0.25s;
}
a.single-link:hover { text-decoration: none; border-bottom: 2px solid #075b81;
}
a.single-link:hover:after { -webkit-transform: translatex(4px); transform: translatex(4px);
}
button, input, optgroup, select, textarea { font-family: 'open sans', sans-serif;
}
.clearfix:after { content: ""; display: table; clear: both;
}
.material-icons { font-family: 'Material Icons'; font-weight: normal; font-style: normal; font-size: 24px; /* Preferred icon size */ display: inline-block; line-height: 1; text-transform: none; letter-spacing: normal; word-wrap: normal; white-space: nowrap; direction: ltr; /* Support for all WebKit browsers. */ -webkit-font-smoothing: antialiased; /* Support for Safari and Chrome. */ text-rendering: optimizeLegibility; /* Support for Firefox. */ -moz-osx-font-smoothing: grayscale; /* Support for IE. */ -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga';
}
.material-icons.icon-small { font-size: 18px;
}
.material-icons.icon-medium { font-size: 24px;
}
.material-icons.icon-large { font-size: 36px;
}
.card { padding: 20px; border: 1px solid #dfddd6; border-radius: 4px; margin: 0 0 20px; background-color: #ffffff; box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
}
.well { padding: 20px; border: 1px solid #dfddd6; border-radius: 4px; margin: 0 0 20px; background-color: #ffffff; box-shadow: inset 0px 0px 4px 0px rgba(0, 0, 0, 0.1);
}
.well.well--lightgray { background-color: #edebe6;
}
.swatches { display: block; padding: 0;
}
.swatches h4 { clear: both;
}
.swatches .swatch { vertical-align: top; font-size: 0; display: inline-block; margin: 10px; padding: 20px; width: 150px; height: 150px;
}
.swatches .swatch .swatch--name { font-size: 16px;
}
.swatches .swatch .swatch--hex { font-size: 12px; text-transform: uppercase;
}
.swatches .swatch.swatch--blue-link { color: white; background-color: #2b709e;
}
.swatches .swatch.swatch--blue-link-hover { color: white; background-color: #075b81;
}
.swatches .swatch.swatch--orange-link { color: white; background-color: #cc4e00;
}
.swatches .swatch.swatch--orange-link-hover { color: white; background-color: #993b00;
}
.swatches .swatch.swatch--full-access { color: white; background-color: #07A363;
}
.swatches .swatch.swatch--open-access { color: white; background-color: #61165E;
}
.swatches .swatch.swatch--free-access { color: white; background-color: #003BFF;
}
.swatches .swatch.swatch--dark-text { color: white; background-color: #1C1D1E;
}
.swatches .swatch.swatch--lightgray-text { color: white; background-color: #74767C;
}
.swatches .swatch.swatch--background-lightgray { color: black; background-color: #edebe6;
}
.swatches .swatch.swatch--background-lightgray-hover { color: black; background-color: #faf7f2;
}
.swatches .swatch.swatch--background-white { color: black; background-color: #ffffff;
}
.swatches .swatch.swatch--borders { color: black; background-color: #dfddd6;
}
.btn { font-weight: 500; margin-bottom: 20px; cursor: pointer; border-radius: 2px; box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.75); border-width: 1px; border-color: #2b709e; border-style: solid; padding: 12px; color: white; background-color: #2b709e; outline: none; -webkit-transition-property: box-shadow, background-color; transition-property: box-shadow, background-color; -webkit-transition-duration: 0.25s; transition-duration: 0.25s;
}
.btn:hover { background-color: #075b81; border-color: #075b81; box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
}
.btn:active { background-color: white; color: #2b709e; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
}
.btn:focus { background-color: white; color: #2b709e; box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.5);
}
.btn.btn--large { padding: 16px; font-size: 20px;
}
.btn.btn--small { padding: 8px; font-size: 12px;
}
.btn.btn--disabled { box-shadow: 0px 0px 0 0 black; background-color: white; color: #bdbbb7; border-color: #bdbbb7; cursor: not-allowed;
}
ul.author-list { list-style: none; padding: 0;
}
ul.author-list li { display: inline-block;
}
ul.author-list li a { text-decoration: none; margin-right: 10px; font-size: 14px; font-weight: 400; line-height: 24px; color: #2b709e; display: inline-block; border-bottom: 2px solid transparent;
}
ul.author-list li a:after { content: ',';
}
ul.author-list li .author-info { z-index: 100; position: absolute; background-color: white; padding: 10px; border: 1px solid #2b709e; width: 250px; display: none;
}
ul.author-list li:last-child a:after { content: '';
}
ul.author-list li:hover a { border-color: #2b709e;
}
ul.author-list li:hover .author-info { display: block;
}
.corrections-link { display: inline-block; color: #cc4e00; text-decoration: none; margin-left: 20px; position: relative; font-size: 12px; font-weight: 600; border-bottom: 2px solid transparent;
}
.corrections-link:before { font-weight: normal; font-size: 18px; font-family: 'Material Icons'; content: 'info'; position: absolute; left: -22px; top: -3px;
}
.corrections-link:after { font-weight: normal; font-family: 'Material Icons'; content: 'expand_more'; font-size: 14px; right: -18px; top: 0; position: absolute;
}
.corrections-link:hover { text-decoration: none; color: #cc4e00; border-bottom: 2px solid #cc4e00;
}
.small-list { max-width: 320px;
}
.small-list ul { padding: 0; list-style: none; margin: 0;
}
.small-list ul li a { display: block; padding: 12px; background-color: #edebe6; border-left: 2px solid transparent; -webkit-transition-property: border, background, color; transition-property: border, background, color; -webkit-transition-duration: 0.25s; transition-duration: 0.25s; cursor: pointer;
}
.small-list ul li a:hover, .small-list ul li a:active, .small-list ul li a:focus, .small-list ul li a.active, .small-list ul li a.hover { color: #075b81; text-decoration: underline; background-color: #faf7f2; border-left: 2px solid #075b81;
}
.small-list ul li a.active { color: white; cursor: default; text-decoration: none; background-color: #2b709e;
}
.small-list .small-list__heading { padding: 12px; border-left: 2px solid transparent; background-color: #faf7f2; font-weight: 700; margin-bottom: 4px;
}
.quick-links { max-width: 320px;
}
.quick-links ul { padding: 0; margin: 0; list-style: none;
}
.quick-links ul li a { position: relative; display: block; padding: 16px 0px 12px 40px; border-bottom: 2px solid #dfddd6; background-color: #edebe6; -webkit-transition-property: background, color; transition-property: background, color; -webkit-transition-duration: 0.25s; transition-duration: 0.25s;
}
.quick-links ul li a .material-icons { position: absolute; left: 8px; top: 13px;
}
.quick-links ul li a:hover, .quick-links ul li a:active, .quick-links ul li a:focus, .quick-links ul li a.active, .quick-links ul li a.hover { color: #075b81; text-decoration: none; background-color: #faf7f2;
}
.quick-links ul li a.active { color: white; cursor: default; text-decoration: none; background-color: #2b709e;
}
.quick-links ul li:last-child a { border-bottom: none;
}
Literatum Style Guide - Script Codes
Literatum Style Guide - Script Codes
Home Page Home
Developer Stuart Allen
Username rarebush
Uploaded January 18, 2023
Rating 3
Size 8,561 Kb
Views 8,096
Do you need developer help for Literatum Style Guide?

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!

Stuart Allen (rarebush) Script Codes
Name
WOL 2 Bootstrap
Hub styleguide
Dashboard Builder - geochart
Research ecosystem graphic-chord
WileyPLUS styles
WOL 2 styleguide
Animated leaderboard
Blur background on search focus
Dashboard Builder - piechart
AAA Header
Create amazing marketing copy 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!