Pattern Library

Developer
Ashepherd1
Size
5,332 Kb
Views
10,120
  1. Pattern Library Previews
  2. Pattern Library HTML Codes
  3. Pattern Library CSS Codes
  4. Pattern Library JS Codes

How do I make an pattern library?

What is a pattern library? How do you make a pattern library? This script and codes were developed by Ashepherd1 on 29 November 2022, Tuesday.

Pattern Library Previews
IQ Test

Pattern Library - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Pattern Library</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">	<div class="main">	<section id="headings">	<p class="title">Headings</p>	<div class="crate">	<h1>Heading 1</h1>	<h2>Heading 2</h2>	<h3>Heading 3</h3>	<h4>Heading 4</h4>	</div>	<div class="cb2">	<h1>Heading 1</h1>	<h2>Heading 2</h2>	<h3>Heading 3</h3>	<h4>Heading 4</h4>	</div>	</section>	<section id="fonts">	<p class="title">Fonts</p>	<div class="crate">	<span class="primary">Primary</span> <span class="secondary">Secondary</span> <span class="content-default">Content Default</span> <span class="content-small">Content Small</span> <span class="content-subtext">Content Subtext</span>	</div>	<div class="cb2">	<span class="primary">Primary</span> <span class="secondary">Secondary</span> <span class="content-default">Content Default</span> <span class="content-small">Content Small</span> <span class="content-subtext">Content Subtext</span>	</div>	</section>	</div>	<section id="buttons">	<p class="title">Buttons</p>	<div class="crate">	<button class="primary">Button</button> <button class="secondary">Secondary</button> <button class="inverse">Secondary</button> <button class="default">Default</button> <button class="detail">Detail</button> <button class="small">Small</button>	</div>	<div class="cb2">	<button class="primary">Button</button> <button class="secondary">Secondary</button> <button class="inverse">Secondary</button> <button class="default">Default</button> <button class="detail">Detail</button> <button class="small">Small</button>	</div>	</section>	<section id="icons">	<p class="title">Icons</p>	<div class="crate"><img alt="icon" class="icon" src="http://www.entypo.com/images/shopping-cart.svg"> <img alt="icon" class="icon" src="http://www.entypo.com/images/user.svg"> <img alt="icon" class="icon" src="http://www.entypo.com/images/chevron-with-circle-right.svg"> <img alt="icon" class="icon" src="http://www.entypo.com/images/location-pin.svg"> <img alt="icon" class="icon" src="http://www.entypo.com/images/circle-with-cross.svg"> <img alt="icon" class="icon" src="http://www.entypo.com/images/check.svg"> <img alt="Shopping cart pictogram" class="icon" src="http://www.entypo.com/images/mail.svg"> <img alt="icon" class="icon" src="http://www.entypo.com/images/warning.svg"></div>	<div class="cb2"><img alt="icon" class="icon" src="http://www.entypo.com/images/shopping-cart.svg"> <img alt="icon" class="icon" src="http://www.entypo.com/images/user.svg"> <img alt="icon" class="icon" src="http://www.entypo.com/images/chevron-with-circle-right.svg"> <img alt="icon" class="icon" src="http://www.entypo.com/images/location-pin.svg"> <img alt="icon" class="icon" src="http://www.entypo.com/images/circle-with-cross.svg"> <img alt="icon" class="icon" src="http://www.entypo.com/images/check.svg"> <img alt="Shopping cart pictogram" class="icon" src="http://www.entypo.com/images/mail.svg"> <img alt="icon" class="icon" src="http://www.entypo.com/images/warning.svg"></div>	</section>	<section id="forms">	<p class="title">Forms</p>	<div class="crate">	<form>	<label for="name">Name:</label><br>	<input id="name" name="textfield" type="text"><br>	<br>	<label for="name">Email:</label><br>	<input id="email" name="textfield" type="text"><br>	<br>	<fieldset>	<legend>Choose a shipping method:</legend> <input id="overnight" name="shipping" type="radio" value="overnight"> <label for="overnight">Overnight</label><br>	<input id="twoday" name="shipping" type="radio" value="twoday"> <label for="twoday">Two day</label><br>	</fieldset><br>	<br>	<label for="comments">Comments:</label><br>	<textarea id="comments" name="comments"></textarea><br>	<br>	<input name="submit" type="submit" value="Submit">	</form>	</div>	<div class="cb2">	<form>	<label for="name">Name:</label><br>	<input id="name" name="textfield" type="text"><br>	<br>	<label for="name">Email:</label><br>	<input id="email" name="textfield" type="text"><br>	<br>	<fieldset>	<legend>Choose a shipping method:</legend> <input id="overnight" name="shipping" type="radio" value="overnight"> <label for="overnight">Overnight</label><br>	<input id="twoday" name="shipping" type="radio" value="twoday"> <label for="twoday">Two day</label><br>	</fieldset><br>	<br>	<label for="address">Comments:</label><br>	<textarea id="comments" name="comments"></textarea><br>	<br>	<input name="submit" type="submit" value="Submit">	</form>	</div>	</section>	<section id="typography">	<p class="title">Typography</p>	<div class="crate"> <h1>Heading 1</h1> <span class="secondary">Secondary</span> <p class="content-default">People who work on software create flexible systems that can deal with variability: content of varying lengths, connections of different speeds, users with many kinds of ability and attention. What does the page look like if it is empty? If it is full? And every possibility in between on mobile? Working with software is never designing towards a fixed artifact, like designing a chair or book.</p> <p class="content-subtext">Instead, it is defining and designing conditions for a whole set of possibilities.</p> <a href="#" target="_blank">Example Link</a> </div> <div class="cb2"> <h1>Heading 1</h1> <span class="secondary">Secondary</span> <p class="content-default">People who work on software create flexible systems that can deal with variability: content of varying lengths, connections of different speeds, users with many kinds of ability and attention. What does the page look like if it is empty? If it is full? And every possibility in between on mobile? Working with software is never designing towards a fixed artifact, like designing a chair or book.</p> <p class="content-subtext">Instead, it is defining and designing conditions for a whole set of possibilities.</p> <a href="#" target="_blank">Example Link</a> </div> </section>	</div>	<header>	<div class="logo"><img alt="Crate and Barrel" class="crate" src="https://images.crateandbarrel.com/is/image/Crate/WebsiteHeaderLogo/fmt=png-alpha/170428041254/WebsiteHeaderLogo.jpg"></div>	<div class="logo"><img alt="CB2" class="cb2" src="https://images.cb2.com/is/image/CB2/cb2-mobile-logo/fmt=png-alpha&amp;wid=165/170428040206/cb2-mobile-logo.jpg"></div>	</header>	<div class="left-nav">	<a class="smooth" href="#headings">Headings</a> <a class="smooth" href="#fonts">Fonts</a> <a class="smooth" href="#buttons">Buttons</a> <a class="smooth" href="#icons">Icons</a> <a class="smooth" href="#forms">Forms</a> <a class="smooth" href="#typography">Typography</a>	</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Pattern Library - Script Codes CSS Codes

.wrapper { width: calc(100% - 175px); min-width: 400px; float: left; margin-left: 175px; padding: 90px 0 400px 0;
}
.wrapper.tiny { padding-top: 60px;
}
.wrapper section { width: 100%; min-height: 200px; font-size: 1.2em; color: #333; margin-bottom: 40px; float: left;
}
.wrapper section#headings h1, .wrapper section#fonts h1, .wrapper section#typography h1 { font-size: 30px;
}
.wrapper section#headings h2, .wrapper section#fonts h2, .wrapper section#typography h2 { font-size: 26px;
}
.wrapper section#headings h3, .wrapper section#fonts h3, .wrapper section#typography h3 { font-size: 22px;
}
.wrapper section#headings h4, .wrapper section#fonts h4, .wrapper section#typography h4 { font-size: 18px;
}
.wrapper section#headings span,
.wrapper section#headings p, .wrapper section#fonts span,
.wrapper section#fonts p, .wrapper section#typography span,
.wrapper section#typography p { display: block; margin-bottom: 10px;
}
.wrapper section#headings span.primary,
.wrapper section#headings p.primary, .wrapper section#fonts span.primary,
.wrapper section#fonts p.primary, .wrapper section#typography span.primary,
.wrapper section#typography p.primary { font-size: 20px; font-weight: 600;
}
.wrapper section#headings span.secondary,
.wrapper section#headings p.secondary, .wrapper section#fonts span.secondary,
.wrapper section#fonts p.secondary, .wrapper section#typography span.secondary,
.wrapper section#typography p.secondary { font-size: 16px; font-weight: 600;
}
.wrapper section#headings span.content-default,
.wrapper section#headings p.content-default, .wrapper section#fonts span.content-default,
.wrapper section#fonts p.content-default, .wrapper section#typography span.content-default,
.wrapper section#typography p.content-default { font-size: 14px;
}
.wrapper section#headings span.content-small,
.wrapper section#headings p.content-small, .wrapper section#fonts span.content-small,
.wrapper section#fonts p.content-small, .wrapper section#typography span.content-small,
.wrapper section#typography p.content-small { font-size: 12px;
}
.wrapper section#headings span.content-subtext,
.wrapper section#headings p.content-subtext, .wrapper section#fonts span.content-subtext,
.wrapper section#fonts p.content-subtext, .wrapper section#typography span.content-subtext,
.wrapper section#typography p.content-subtext { font-size: 12px; font-style: italic;
}
.wrapper section#buttons button { display: block; margin-bottom: 20px;
}
.wrapper section#buttons button.primary { font-size: 26px; padding: 12px 40px;
}
.wrapper section#buttons button.secondary { font-size: 20px; padding: 8px 20px; border: 1px solid #222; background: #222; color: white;
}
.wrapper section#buttons button.inverse { font-size: 20px; padding: 8px 20px; border: 1px solid #222; background: #fff;
}
.wrapper section#buttons button.default { font-size: 18px; padding: 8px 20px;
}
.wrapper section#buttons button.detail { font-size: 14px; padding: 6px 10px;
}
.wrapper section#buttons button.small { font-size: 12px; padding: 4px 8px;
}
.wrapper section#icons .icon { filter: invert(0.8); width: 30px; margin: 20px 60px 40px 0;
}
.wrapper section#forms fieldset { border: 0; padding: 10px 0 0; margin: 10px 0 0;
}
.wrapper section .crate,
.wrapper section .cb2 { width: calc(50% - 20px); min-width: 150px; padding-right: 20px; float: left;
}
body,
html,
.main { height: 100%; margin: 0; padding: 0; font-family: Arial, san-serif; font-size: 10px;
}
body a,
html a,
.main a { color: #333; font-size: 1.2em;
}
header { height: 75px; width: calc(100% - 140px); min-width: 400px; position: fixed; top: 0; background: white; z-index: 100; box-shadow: 0px 6px 24px -8px rgba(0, 0, 0, 0.35); padding: 0 0 0 140px; transition: all 0.3s;
}
header .logo { width: 50%; min-width: 200px; text-align: center; float: left; transition: all 0.4s ease;
}
header .logo img { width: auto; transition: all 0.4s ease;
}
header .logo img.crate { margin-top: 24px; height: 27px;
}
header .logo img.cb2 { margin-top: 19px; height: 37px;
}
header.tiny { height: 55px; padding: 0 0 0 140px; transition: all 0.4s ease;
}
header.tiny img { width: auto; transition: all 0.4s ease;
}
header.tiny img.crate { margin-top: 15px; height: 25px;
}
header.tiny img.cb2 { margin-top: 12px; height: 32px;
}
.left-nav { width: 95px; position: fixed; top: 0; left: 0; padding: 110px 10px 0 20px; height: 100%; z-index: 99; box-shadow: 0px 6px 24px -8px rgba(0, 0, 0, 0.35); background: white;
}
.left-nav a { display: block; margin: 0 0 20px; font-size: 1.2em; text-decoration: none;
}
.title { font: 500 18px/18px Segoe UI Light, "Helvetica Neue", "Gill Sans", Arial, sans-serif; width: 200px; color: #222; display: block; margin-bottom: 20px;
}

Pattern Library - Script Codes JS Codes

$('a.smooth') .click(function(event) { if ( location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname ) { var target = $(this.hash); target = target.length ? target : $('[name=' + this.hash.slice(1) + ']'); if (target.length) { event.preventDefault(); $('html, body').animate({ scrollTop: target.offset().top-120 }, 1000, function() { var $target = $(target); $target.focus(); if ($target.is(":focus")) { return false; } else { }; }); } } });
$(window).on("scroll touchmove", function () { $('header, .wrapper').toggleClass('tiny', $(document).scrollTop() > 0);
});
Pattern Library - Script Codes
Pattern Library - Script Codes
Home Page Home
Developer Ashepherd1
Username ashepherd1
Uploaded November 29, 2022
Rating 3
Size 5,332 Kb
Views 10,120
Do you need developer help for Pattern Library?

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!

Ashepherd1 (ashepherd1) Script Codes
Name
Image swap fade on hover.
DeferCuralate
Lazy Sizes
GR TYM
A Pen by ashepherd1
Multiple modals from top at variable heights
Fade Show Reveal by height
Partially Responsive Content Layout
Menu Toggle
Spill AMP Page
Create amazing art & images 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!