Stylibrary

Developer
Ed Ball
Size
3,200 Kb
Views
18,207
  1. Stylibrary Previews
  2. Stylibrary HTML Codes
  3. Stylibrary CSS Codes

How do I make an stylibrary?

A collection of front end style guides, to see how other people deal with the age old hyphen/camelCase, px/em, and tab/space dilemmas!. What is a stylibrary? How do you make a stylibrary? This script and codes were developed by Ed Ball on 12 November 2022, Saturday.

Stylibrary Previews
IQ Test

Stylibrary - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Stylibrary</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="wrapper">	<h1>Stylibrary</h1>	<div class="description">	<p>Hyphens or camelCase? Tabs or spaces? Px or em?</p>	<p>This collection of front-end style guides will give you an insight into how various developers from across the web organise and maintain their HTML and CSS.</p>	</div>	<div class="list">	<a class="item" href='https://csswizardry.com/2012/04/my-html-css-coding-style/' target='_blank'>	<h2>CSS Wizardry</h2>	</a>	<a class="item" href='https://github.com/styleguide/css' target='_blank'>	<h2>GitHub</h2>	</a>	<a class="item" href='https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml' target='_blank'>	<h2>Google</h2>	</a>	<a class="item" href='https://pasteup.guim.co.uk/styleguide.html' target='_blank'>	<h2>The Guardian</h2>	</a>	<a class="item" href='http://contribute.jquery.org/markup-conventions/' target='_blank'>	<h2>jQuery</h2>	</a>	<a class="item" href='https://github.com/Lullabot/lb-htmlcssguide' target='_blank'>	<h2>Lullabot</h2>	</a>	<a class="item" href='https://ux.mailchimp.com/patterns/' target='_blank'>	<h2>Mailchimp</h2>	</a>	<a class="item" href='https://www.mapbox.com/base/styling/' target='_blank'>	<h2>Mapbox</h2>	</a>	<a class="item" href='https://semantic-ui.com/' target='_blank'>	<h2>Semantic UI</h2>	</a>	<a class="item" href='https://itservices.stanford.edu/service/web/design/styleguide/modern' target='_blank'>	<h2>Stanford University</h2>	</a>	<a class="item" href='http://make.wordpress.org/core/handbook/coding-standards/css/' target='_blank'>	<h2>Wordpress</h2>	</a>	</div>	<div class="footer">	<p>Made by <a href='https://twitter.com/Aptary'>Ed Ball</a></p>	</div>	</div>	<a href="https://github.com/Aptary/stylibrary"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://aptary.github.io/stylibrary/fork-me-ribbon.png" alt="Fork me on GitHub"></a>
</body>
</html>

Stylibrary - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Lato:400,400italic|Sansita+One);
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
h1{	font-family: 'Sansita One', cursive;	font-size: 60px;	text-align: center;	margin: 40px 0;	color: #34495e;
}
@media (max-device-width : 479px) and (orientation : portrait) {	h1{	font-size: 30px;	margin-top: 20px;	text-align: left;	}
}
h2{	font-size: 30px;	text-align: center;
}
p{	margin-bottom:20px;	font-size: 20px;	line-height: 25px;
}
a{	color: #34495e;
}
body{	background: #ecf0f1;	font-family: Lato;	color:#34495e;
}
.wrapper{	box-sizing:border-box;	margin: 0 auto;	width:100%;	max-width:500px;	padding: 20px 20px 0;
}
.description{	margin-bottom: 40px;
}
.item{	padding:20px;	display:block;	margin-bottom: 20px;	border-radius: 7px;	background-color: #f7f9f9;	color: #34495e;	transition:background-color 0.3s;	text-decoration: none;
}
.item:hover{	background-color: #fff;	transition-duration:0;
}
.footer{	margin-top: 60px;	text-align: center;
}
.footer p{	font-size:16px;
}
Stylibrary - Script Codes
Stylibrary - Script Codes
Home Page Home
Developer Ed Ball
Username edball
Uploaded November 12, 2022
Rating 4
Size 3,200 Kb
Views 18,207
Do you need developer help for Stylibrary?

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!

Ed Ball (edball) Script Codes
Name
Planetary Gear System
Dial Tone in Web Audio
Web Audio TR-808 electronic cowbell
Chues
NASA Quindar tones in Web Audio
Ringback tone in Web Audio
Floating Helicopter
Alphabet Monogram with SCSS and SVG
Rain Landing in a Pond
Purple Rain
Create amazing captions 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!