Pattern Library

Developer
Eric Rogg
Size
6,763 Kb
Views
36,432
  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 Eric Rogg on 24 August 2022, Wednesday.

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="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<div class='group group-buttons'> <h1>Buttons</h1> <a href="#"><div class="btn btn-primary">Primary Button</div></a> <a href="#"><div class="btn btn-secondary">Secondary Button</div></a> <a href="#"><div class="btn btn-action">Action Button</div></a> <a href="#"><div class="btn btn-danger">Danger Button</div></a>
</div>
<div class="group group-inputs"> <h1>Inputs</h1> <!-- Single Line --> <div class="input"> <input id="foobar" type="text" class="input-input"/> <label for="foobar" class="input-label">Single Line</label> <div class="input-bar"></div> <div class="input-hint">Success or Error message!</div> </div> <!-- Textarea --> <div class="input input--multiline"> <textarea id="area" type="text" class="input-input"></textarea> <label for="area" class="input-label">Textarea Label</label> <div class="input-bar"></div> </div>
</div>
<div class="group group-table"> <h1>Table</h1> <table>	<thead> <tr> <th>Header 1</th> <th>Header 2</th> <th>Header 3</th> <th>Header 4</th> </tr>	</thead>	<tbody>	<tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td> </tr> <tr>	<td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td>	</tr> <tr>	<td>cell</td> <td>cell</td>	<td>cell</td>	<td>cell</td> </tr>	<tr> <td>cell</td> <td>cell</td> <td>cell</td> <td>cell</td>	</tr> </tbody> </table> <ul class="pagination"> <li><a href="#">First</a></li> <li class="active"><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">Last</a></li> </ul>
</div>
<div class="group group-checkbox"> <h1>Check Boxes</h1> <input id='check-1' type="checkbox" name='check-1' checked='checked' /> <label for="check-1">Apples</label> <input id='check-2' type="checkbox" name='check-1' /> <label for="check-2">Oranges</label>
</div>
<div class="group group-radio"> <input id='radio-1' type="radio" name='r-group-1' checked='checked' /> <label for="radio-1">Day</label> <input id='radio-2' type="radio" name='r-group-1' /> <label for="radio-2">Night</label>
</div>
<div class="group group-tags"> <h1>Tags</h1> <div class="tag tag-red"> <p>Red</p> </div> <div class="tag tag-orange"> <p>Orange</p> </div> <div class="tag tag-green"> <p>Green</p> </div> <div class="tag tag-blue"> <p>Blue</p> </div> <div class="tag tag-purple"> <p>Purple</p> </div> <div class="tag tag-pink"> <p>Pink</p> </div>
</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>

Pattern Library - Script Codes CSS Codes

html { box-sizing: border-box;
}
*,
*:before,
*:after { box-sizing: inherit;
}
.btn { margin: 15px 0;
}
.group h1 { margin-bottom: 20px;
}
.group-inputs { margin: 50px 15px; max-width: 400px;
}
.group-buttons { margin: 50px 15px;
}
.group-table { margin: 50px 15px; max-width: 700px;
}
.group-checkbox { margin: 50px 15px; max-width: 400px;
}
.group-radio { margin: 50px 15px; max-width: 400px;
}
.group-tags { margin: 50px 15px; max-width: 400px;
}
body { font-family: "open sans"; font-size: 14px;
}
h1 { font-size: 18px; font-weight: bold; color: #404040;
}
a { color: #fff; text-decoration: none;
}
.btn { border-radius: 3px; padding: 10px; max-width: 150px; text-align: center; -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.14), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.14), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.19); -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out;
}
.btn:hover { opacity: .85; -webkit-transition: all 100ms ease-in-out; -moz-transition: all 100ms ease-in-out; -ms-transition: all 100ms ease-in-out; -o-transition: all 100ms ease-in-out; transition: all 100ms ease-in-out;
}
.btn:active { opacity: 1; -webkit-box-shadow: inset 0 3px 4px 0 rgba(0, 0, 0, 0.19); box-shadow: inset 0 3px 4px 0 rgba(0, 0, 0, 0.19);
}
.btn-primary { background: #9ccc64;
}
.btn-secondary { background: #f8fafc; color: #63696f; -webkit-box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.05), inset 0 -1px 1px 0 rgba(0, 0, 0, 0.19);
}
.btn-action { background: #27b1db;
}
.btn-danger { background: #df6c4d;
}
textarea { font-family: 'open sans';
}
.input { position: relative; padding-top: 20px; border-bottom: 2px solid #c8c8c8; margin: 10px 0 20px 0;
}
.input-label { display: block; position: absolute; top: 20px; padding: 5px 0; pointer-events: none; color: #bdbdbd; transition: top 0.7s ease, font 0.7s ease, color 0.7s ease;
}
.input--select .input-label,
.input-input:focus ~ .input-label,
.input-input.is-not-empty ~ .input-label { top: 2px; font-size: .75em;
}
.input-input:focus ~ .input-label { color: #27b1db;
}
.input-input { font-size: 1em; line-height: 1.3; border: 0; background: transparent; width: 100%; height: 18px; margin: 5px 0; padding: 0; color: #4a4a4a;
}
.input-input:focus { outline: none;
}
.input--multiline .input-input { height: 100px;
}
.input--select { cursor: pointer;
}
.input--select .input-input { margin-right: 20px; width: auto;
}
.input--select .input-icon { float: right; width: 20px; line-height: 28px; color: #bdbdbd;
}
.input-bar { position: absolute; bottom: -2px; left: 50%; width: 0px; height: 3px; background: #27b1db; transition: left 0.7s ease, width 0.7s ease;
}
.input-input:focus ~ .input-bar,
.input-input.has-focus ~ .input-bar { width: 100%; left: 0;
}
.input-hint { position: absolute; top: 100%; height: 0; opacity: 0; transition: height 0.7s ease, opacity 0.7s ease; font-size: 0.8em; color: #27b1db; padding: 5px 0 0 0;
}
.input-input:focus ~ .input-hint { height: auto; opacity: 1;
}
.input-error { display: none; color: red; position: absolute; top: 100%; font-size: 0.8em; padding: 5px 0 0 0;
}
.input.has-error .input-bar { background: red;
}
.input.has-error .input-label { color: red;
}
.input.has-error .input-error { display: block;
}
table { width: 100%; color: #63696f; font-size: 12px;
}
th { background: #f4f8fb; padding: 17px; font-weight: bold; text-align: left; text-transform: uppercase; border-bottom: 3px solid #e6eaed; border-radius: 3px 3px 0 0;
}
td { padding: 17px;
}
tr { border-bottom: 1px solid #eff2f4;
}
tr:hover { background: #fbfcfd;
}
.pagination { width: 100%; border-top: 2px solid #ebf1f5;
}
.pagination a { color: #c1ccd2;
}
.pagination li { display: inline-block; text-transform: uppercase; line-height: 33px; padding: 0 10px; margin: 0 5px;
}
.pagination .active { font-weight: bold; margin-top: -3px; border-top: 3px #27b1db solid;
}
.pagination .active a { color: #27b1db !important;
}
input[type='radio'],
input[type='checkbox'] { display: none; cursor: pointer;
}
input[type='radio']:focus,
input[type='radio']:active,
input[type='checkbox']:focus,
input[type='checkbox']:active { outline: none;
}
input[type='radio'] + label,
input[type='checkbox'] + label { cursor: pointer; display: inline-block; position: relative; padding-left: 25px; margin-right: 10px; color: #63696f; font-size: 14px;
}
input[type='radio'] + label:before,
input[type='radio'] + label:after,
input[type='checkbox'] + label:before,
input[type='checkbox'] + label:after { content: ''; font-family: helvetica; display: inline-block; width: 18px; height: 18px; left: 0; bottom: 0; text-align: center; position: absolute;
}
input[type='radio'] + label:before,
input[type='checkbox'] + label:before { background-color: #fafafa; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; border: 2px solid #b3c5cb;
}
input[type='radio'] + label:after,
input[type='checkbox'] + label:after { color: #fff;
}
input[type='radio']:checked + label:before,
input[type='checkbox']:checked + label:before { -moz-box-shadow: inset 0 0 0 10px #9ccc64; -webkit-box-shadow: inset 0 0 0 10px #9ccc64; box-shadow: inset 0 0 0 10px #9ccc64;
}
/*Checkbox Specific styles*/
input[type='checkbox'] + label:before { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px;
}
input[type='checkbox'] + label:hover:after,
input[type='checkbox']:checked + label:after { content: "\2713"; line-height: 14px; font-size: 14px;
}
input[type='checkbox'] + label:hover:after { color: #27b2db; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; border: 2px solid #27b2db;
}
input[type='checkbox']:checked + label:after,
input[type='checkbox']:checked + label:hover:after { color: #fff; -moz-border-radius: 3px; -webkit-border-radius: 3px; border: 2px solid #9ccc64;
}
/*Radio Specific styles*/
input[type='radio'] + label:before { -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
input[type='radio'] + label:hover:after,
input[type='radio']:checked + label:after { content: '\2022'; position: absolute; top: -4px; font-size: 25px; line-height: 15px; border: 2px solid #27b2db; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
input[type='radio'] + label:hover:after { color: #27b2db;
}
input[type='radio']:checked + label:after,
input[type='radio']:checked + label:hover:after { color: #fff; border: 2px solid #9ccc64; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%;
}
.tag { display: inline-block; padding: 3px 5px; min-width: 50px; border-radius: 3px; color: #fff; font-size: 12px; min-width: 75px; margin: 5px 5px 5px 0;
}
.tag p { display: inline; margin-right: 15px;
}
.tag i { float: right; cursor: pointer;
}
.tag-red { background: #df6c4d;
}
.tag-orange { background: #f7941d;
}
.tag-green { background: #39b54a;
}
.tag-blue { background: #00bff3;
}
.tag-purple { background: #a864a8;
}
.tag-pink { background: #f06eaa;
}

Pattern Library - Script Codes JS Codes

// Input animation and label
(function() { var $input, $selects, setIsNotEmpty, toggle; toggle = function(clazz) { var $els, callback; $els = $('.' + clazz); callback = function() { return $els.each(function(i, el) { return $(el).toggleClass(clazz); }); }; return setInterval(callback, 1500); }; setIsNotEmpty = function(target) { var $target, tagName, val; $target = $(target); tagName = $target.prop('tagName').toLowerCase(); val = tagName === 'input' || tagName === 'textarea' ? $target.val() : $target.text(); if ((val != null) && val !== '') { return $target.addClass('is-not-empty'); } else { return $target.removeClass('is-not-empty'); } }; $input = $('.input-input'); $input.each(function(i, el) { return setIsNotEmpty(el); }); $input.on('change', function(e) { return setIsNotEmpty(e.currentTarget); }); $selects = $('[data-select]'); $selects.each(function(i, el) { var $display, $el, $menu, $menuItems, closeMenuHandler; $el = $(el); $menu = $el.find('.input-menu'); $menuItems = $menu.find('.menu-item'); $input = $el.find('.input-hidden'); $display = $el.find('.input-input'); closeMenuHandler = function(e) { var $target; if (!$menu.hasClass('is-active')) { return; } if (e == null) { $menu.removeClass('is-active'); return; } $target = $(e.target); if ($target.closest($el).length === 0) { return $menu.removeClass('is-active'); } }; $('html').on('click', closeMenuHandler); $menuItems.on('click', function(e) { var $target, val; $target = $(e.currentTarget); $menuItems.removeClass('is-active'); $target.addClass('is-active'); val = $target.data('value'); if (val == null) { val = $target.text(); } $input.val(val); $display.text($target.text()); return closeMenuHandler(); }); $el.on('click', function(e) { var $target; $target = $(e.target); if ($target.closest($menu).length === 0) { if ($menu.hasClass('is-active')) { return closeMenuHandler(); } else { $("html").on('click', closeMenuHandler); return $menu.addClass('is-active'); } } }); return $el.addClass('input--js'); });
}).call(this);
// Adds X at end of tag to cancel
$( "<i class='fa fa-times-circle'></i>" ).appendTo( ".tag" );
Pattern Library - Script Codes
Pattern Library - Script Codes
Home Page Home
Developer Eric Rogg
Username er40
Uploaded August 24, 2022
Rating 3
Size 6,763 Kb
Views 36,432
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!

Eric Rogg (er40) Script Codes
Name
JQuery Progress Bar22
Pagination
CSS Search Hover Animation
Header
Collapsing Widget
Profile CSS Hover Effect
Simple List
Google Play Ratings
CTA
Simple Animated Buttons Inspired by Material Design
Create amazing video scripts 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!