CodePen Starter Template - Alternate

codepen-starter-template-alternate.markdown

CodePen Starter Template - Alternate

A Pen by Matt Daniel Brown on CodePen.

License.

index.html

<header>
	<hgroup>
		<h1>
			Starter Pen Template 
			<small><var>{{title}}</var></small>
		</h1>
		<h2>
			Usually For Demos or Something...
			<small><var>{{description}}</var></small>
		</h2>
	</hgroup>
</header>

<main>
	<section>
		<h3>Syntax Highlighting Demo</h3>
		
		<p>
			<mark>
				<em>Everything is already setup for 
					automatic syntax-highlighting,
					just remember to <strong>add the class, </strong><samp>.language-[CLASS]</samp> 
					<strong>to the</strong> <samp>&lt;pre&gt;</samp> <strong>element</strong>,
					where <samp>CLASS</samp> is the language of the code snippet.
					So the markup for the following example is:</em><br>
<pre class="language-markup"><code>&lt;pre class=&quot;language-markup&quot;&gt;&lt;code&gt;
    &lt;!-- code content to highlight... --&gt;
&lt;/code&gt;&lt;/pre&gt;</code></pre>
			</mark>
		</p>
		
		
		
		<p><strong>Which renders this:</strong></p>
<pre class="language-javascript"><code>// Call the fetch() method to fetch the image, and store it in a variable
async function myFetch() {
	let response = await fetch('coffee.jpg');
	// Use a then() block to respond to the promise's successful completion
	// by taking the returned response and running blob() on it to transform 
	// it into a blob
	if (!response.ok) {
		throw new Error(`HTTP error! status: ${response.status}`);
	} else {
		return await response.blob();
	}
	// blob() also returns a promise; when it 
	// successfully completes it returns
	// the blob object in the callback
	}

	myFetch().then((blob) =&gt; {
	// Create an object URL that points to the blob object
	let objectURL = URL.createObjectURL(blob);
	// Create an &lt;img&gt; element to display the blob (it's an image)
	let image = document.createElement('img');
	// Set the src of the &lt;img&gt; to the object URL so the image displays it
	image.src = objectURL;
	// Append the &lt;img&gt; element to the DOM
	document.body.appendChild(image);
}).catch(e =&gt; console.log(e));</code></pre>
	</section>
	
	
	<section>
		<h3>Demo Section Title</h3>
		<p>Lorem ipsum dolor sit amet consectetur 
			adipisicing elit. Sapiente veritatis 
			eaque voluptatum ducimus, neque 
			dignissimos! Tempore omnis magni nihil 
			laudantium dolorem hic, cumque rerum 
			sapiente soluta laboriosam consequatur 
			cupiditate dolores.</p>
	</section>
	
	<section>
		<h3>Live Demo or Example</h3>
		
		<h4>Ordered List</h4>
		<ol>
			<li>List Item</li>
			<li>List Item</li>
			<li>List Item</li>
		</ol>
		
		<h4>Unordered List</h4>
		<ul>
			<li>List Item</li>
			<li>List Item</li>
			<li>List Item</li>
		</ul>
		
		<h4>Here are some buttons <small>(within an undorderd list)</small></h4>
		<ul class="button-list">
			<li><button type="button">Default</button></li>
			<li><button type="button" class="primary">Primary</button></li>
			<li><button type="button" class="secondary">Secondary</button></li>
			<li><button type="button" class="primary outline">Outline</button></li>
		</ul>
		
		<h4>Here's a form:</h4>
		<form action="">
			<fieldset>
				<legend>Basic Inputs</legend>
				
				<label for="text-input">Text Input Label</label>
				<input type="text" name="text-input" id="text-input" placeholder="Text Input">
				
				<label for="email-input">Email Input</label>
				<input type="email" name="email-input" id="email-input" placeholder="Email Input">
				
				<label for="textarea-input">Textarea Input</label>
				<textarea name="textarea-input" id="textarea-input" placeholder="Textarea Input" cols="30" rows="10"></textarea>
				
				
			</fieldset>
			<button type="submit">Submit Form</button>
		</form>
		
	</section>
	
	
</main>

<footer>
	<p>Copyright &copy; 2021. All Rights Reserved.</p>
</footer>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/9000.0.1/prism.min.js"></script>

style.scss

//---------------------------
/* VARIABLES */
//---------------------------


/* Fontstacks */
$inter-fontstack: 'Inter UI', Inter UI, "Inter",
									 Inter, 'inter-ui', inter;
$system-fonts		: -apple-system, system-ui, 
							 		BlinkMacSystemFont,"Segoe UI",
							 		"Roboto","Helvetica Neue",
							 		Arial, sans-serif !default;
$main-fontstack:  $inter-fontstack,$system-fonts;
$firacode-font :  'Fira Code', "Fira Code", Fira Code;
$code-fontstack: 	$firacode-font,menlo,Menlo,
									"menlo","Menlo",monospace;


//Basic stylings
$br: .25rem !default;
$xs-pad: .25rem !default;
$sm-pad: .5rem !default;
$md-pad: 1rem !default;
$lg-pad: 1.25rem !default;
$xlg-pad: 4rem !default;
$trans: 0.3s !default;

//Breakpoints
$small-breakpoint: 400px !default;
$large-breakpoint: 768px !default;
$sm-brkpoint: 400px !default;
$lg-brkpoint: 768px !default;

//Colors
// $primary: #007bff !default;
$primary: #6400FF;
$secondary: #434343;
$default-button: #dedede;
$default: $default-button;
$default-text: #444;
$accent: #64ffda !default;
$red: #f44336 !default;
$yellow: #ffeb3b !default;
$grey: #f7f7f9 !default;
$white: #fff !default;
$black: #000 !default;

//Text
$text: rgba(0, 0, 0, 0.8) !default;
$secondary: rgba(0, 0, 0, 0.54) !default;
$disabled: rgba(0, 0, 0, 0.38) !default;
$dividers: rgba(0, 0, 0, 0.12) !default;

//Links
$link-color: $primary !default;
$link-hover-color:darken($link-color, 15%)!default;

// Element Selector Variables

$button-selectors: 'input[type=submit]',
	'input[type=reset],input[type=button]',
	'button';
$text-inputs-selectors: (
  "[type='color']",
  "[type='date']",
  "[type='datetime']",
  "[type='datetime-local']",
  "[type='email']",
  "[type='month']",
  "[type='number']",
  "[type='password']",
  "[type='search']",
  "[type='tel']",
  "[type='text']",
  "[type='time']",
  "[type='url']",
  "[type='week']",
  "input:not([type])",
  "textarea",
);


//---------------------------
/* LAYOUT AND UTILS */
//---------------------------
%container {
	width: 90%;
	max-width: 768px;
	margin-left: auto;
	margin-right: auto;
	max-width: 65ch;
	/* padding: 2em 0; */
}
*,*::before,*::after {
	box-sizing: border-box !important;
}
.container,
body>header:first-of-type>*,
body>main>* {@extend %container;}
body>footer:last-of-type {
	background-color: ghostwhite;
	width: 100vw;
	padding: 2rem 0;
	margin: 0;
	text-align: center;
	line-height: 1;
	p {
		font-size: small;
		text-align: center;
		margin: 0 auto !important;
		line-height: 1;
		padding: 0;
		color: gray;
		font-weight: 500;
		vertical-align: middle;
	}
}
body>header:first-of-type {
	width: 100vw;
	padding: 2rem 0;
	background-color: ghostwhite;
}


//---------------------------
/* BASE */
//---------------------------
:root {
	font-size: 19px;
}
html,body {
	font-family: $main-fontstack;
	height: 100%;
	min-height: 100vh;
	width: 100vw;
	max-width: 100vw;
	min-width: 320px;
	margin: 0;
	padding: 0;
	background-color: #fff;
	background-color: ghostwhite;
}
body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}


//---------------------------
/* Typography */
//---------------------------
h1, h2, h3, h4, h5, h6 {
	line-height: 1;
	margin: .25rem auto .75rem;
}
p {
	line-height: 1.5;
	font-size: 1rem;
	margin-bottom: 1rem;
	// outline: red solid 1px;
	&:last-of-type, &:last-child, & + p {
		margin-bottom: 2rem;
	}
}
em {
	samp,code {
		font-style: normal;
	}
}
ul,ol {
	padding: 0 0 1rem 0;
	padding: 0;
	margin: 0 auto ;
	list-style-position: inside;
	// outline: red solid 1px;
	background-color: #fff;
	padding: .25rem 1rem;
	border-radius: 8px;
	box-shadow: 0 8px 24px -5px rgba(#333, 0.1);
	li {
		// outline: red solid 1px;
		padding: 0;		
		line-height: 1.5;
		margin: 0.5rem auto;
	}
	margin-bottom: 2rem !important;
}
h4 {
	margin-top: 1.75rem !important;
	margin-bottom: .75rem !important;
	// outline: red solid 1px;
	small {
		font-weight: normal;
		font-style: italic;
		color: gray;
	}
}
strong {
	font-weight: 600;
}
mark {
	$_box-shadow-1: 0 8px 24px -5px rgba(yellow, 0.5);
	$_box-shadow-2: 0 8px 24px -5px rgba(#333, 0.1);
	box-shadow: $_box-shadow-1 , $_box-shadow-2;
	padding: .5rem 1rem !important;
	border-radius: 8px !important;
	line-height: 1.5;
	margin-bottom: 0.25rem !important;
	margin-top: .5rem !important;
	display: inline-block;
	background-color: rgba(yellow, 0.5);
	
}
var  {
	font-weight: normal;
	color: $primary;
	opacity: 0.25;
	text-transform: lowercase;
	margin-left: .5rem;
	letter-spacing: -0.125em;
	font-style: normal;
}

//---------------------------
/* Layout */
//---------------------------
section {
	// outline: red solid 1px;
	padding: 1rem 0;
	margin-bottom: 4rem;
	& > h3, h3:first-child, h3:first-of-type {
		// outline: red solid 1px;
		margin-bottom: 0 !important;
		margin-top: 0 !important;
	}
}
main {
	padding: 1rem 0;
	flex-grow: 1;
}


//---------------------------
/* FIXED WIDTH ELEMENTS */
//---------------------------
samp {
	font-size: 0.75rem !important;
	line-height: 1 !important;
	font-weight: 500 !important;
}
pre,code,samp, var {
	border-radius: 6px !important;
	// font-family: "FiraCode", FiraCode, 
	// 	"Firacode", Firacode, "firacode", 
	// 	firacode, monospace !important;
}
pre,code {
	border-radius: 8px !important;
	font-size: small !important;
	line-height: 1 !important;
	margin: 0;
	display: block;
}
pre[class*="language"] {
	padding: 1.5em !important;
	line-height: 1.5 !important;
	vertical-align: middle;
	margin-bottom: 2rem;
	margin-top: 0 !important;
	code {
		padding: 0 !important;
		line-height: 1.75 !important;
		vertical-align: baseline;
		margin: 0 !important;
	}
	box-shadow: 0 4px 10px rgba(#333, 0.4) !important;
	overflow: visible !important;
	display: block !important;
}
.language-markup {
	font-size: 1rem !important;
	margin: 0 auto !important;
	padding: 0 !important;
	vertical-align: middle !important;
	code {
		// font-size: normal !important;
		line-height: 1 !important;
		margin: 0 auto !important;
		padding: 0 !important;
	}
}
pre,code,samp,var,kbd,output {
	font-family: $code-fontstack !important;
}

pre ~ p {
	margin-bottom: 1rem !important;
}
p ~ pre[class*="language"] {
	margin-bottom: 2rem !important;
	display: block !important;
}


//---------------------------
/* BUTTONS */
//---------------------------
.button {
	
	appearance: none;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
	-webkit-tap-highlight-color: transparent !important;
  background-color: $default;
  border: $default-text;
  // border-radius: $br;
	border-radius: 3px;
  // color: $white;
	text-decoration: none;
	color: $default-text;
  // padding:  $md-pad;
  display: inline-block;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none !important;
  border: 2px solid transparent;
  font-size: 1rem;
  line-height: 1;
	cursor: pointer;
	letter-spacing: .5px;
	transform: translatey(0);
  transition: color .12s ease-out, 
		background-color .12s ease-out, 
		border-color .12s ease-out, 
		box-shadow .12s ease-out,
		transform .12s ease-out;
	
	padding: unset !important;
	padding: .5rem 1rem !important;
	&::-moz-focus-inner { padding: 0; border: 0; }
	
	&:hover {
		background-color: darken($default, 10%);
		border-color: darken($default, 10%);
		color: $default-text;
	}
	&:not(:disabled):active {
		background-color: darken($default, 20%);
		border-color: darken($default, 20%);
		color: $default-text;
		transform: translatey(2px);
	}
	&:focus {
		background-color: darken($default, 15%);
		border-color: darken($default, 15%);
		outline: 0;
		box-shadow: 0 0 0 0.2rem rgba($primary, 0.25);
	}
	&:disabled {
		opacity: .65;
		cursor: not-allowed;
		background-color: $primary;
		border-color: $primary;
		color: $white;
	}
	
	&.primary {
		background-color: $primary;
	  border-color: $primary;
  	color: $white;
		
		&:hover {
			background-color: darken($primary, 10%);
			border-color: darken($primary, 10%);
			color: $white;
		}
		
		&:not(:disabled):active {
			background-color: darken($primary, 20%);
			border-color: darken($primary, 20%);
			color: $white;
		}
		&:focus {
		outline: 0;
		background-color: darken($primary, 15%);
		border-color: darken($primary, 15%);
		box-shadow: 0 0 0 0.2rem rgba($primary, 0.25);
	}
	}
	&.secondary {
		background-color: $secondary;
	  border-color: $secondary;
  	color: $white;
		
		&:hover {
			background-color: darken($secondary, 10%);
			border-color: darken($secondary, 10%);
			color: $white;
		}
		&:not(:disabled):active {
			background-color: darken($secondary, 20%);
			border-color: darken($secondary, 20%);
			color: $white;
		}
		&:focus {
			outline: 0;
			background-color: darken($secondary, 15%);
			border-color: darken($secondary, 15%);
			box-shadow: 0 0 0 0.2rem rgba($secondary, 0.25);
		}
	}
	&.outline {
		background-color: transparent;
		color: $secondary;
		border-color: $secondary;
		border-width: 2px;
		font-weight: 400 !important;
		letter-spacing: 1px !important;
		&:hover {
			background-color: rgba($secondary, 0.125);
			color: $secondary;
			border: 2px solid $secondary;
		}
		&:focus {
			color: $secondary;
			background-color: rgba($secondary, 0.25);
		}
		&:active {
			color: $secondary;
			border-color: $secondary;
			background-color: rgba($secondary, 0.5);
		}
	}
}
.outline.primary,.primary.outline {
	background-color: transparent;
		color: $primary;
		border-color: $primary;
		border-width: 2px;
		font-weight: 400 !important;
		letter-spacing: 1px !important;
		&:hover {
			$_color: darken($primary, 8%);
			background-color: rgba($_color, 0.125) !important;
			color: $_color;
			border-color: $_color;
		}
		&:focus {
			// color: $primary;
			// background-color: rgba($primary, 0.25);
			
			$_color: darken($primary, 16%);
			color: $_color;
			background-color: rgba($_color, 0.2) !important;
		}
		&:active {
			
			$_color: darken($primary, 20%);
			color: $_color !important;
			border-color: $_color !important;
			background-color: rgba($_color, 0.4) !important;
		}
}
#{$button-selectors} {
	@extend .button;
}
.button-list {
	list-style: none;
	padding: 0;
	margin: 1em 0 2em;
	background-color: #fff;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	li {
		list-style: none;
		margin: .5em 0;
		padding: 0;
		display: block;
		& > * {
			display: block;
			width: 100%;
			margin: 0 !important;
			line-height: 1.5 !important;
		}
	}
	@media screen and (min-width: 560px) {
		flex-direction: row;
		justify-content: space-between;
		li {
			width: unset;
			display: inline-block;
			margin: 0 1em 0 0 !important;
			& > * {
				width: unset;
				display: inline-block;
				margin: 0 !important;
				line-height: 1 !important;
				min-width: 128px !important;
			}
		}
	}
}


//---------------------------
/* FORMS AND INPUTS */
//---------------------------
input[type="text"],input[type="password"],
input[type="email"],input[type="url"],
input[type="date"],input[type="month"],
input[type="time"],input[type="datetime"],
input[type="datetime-local"],
input[type="week"],input[type="number"],
input[type="search"],input[type="tel"],
select, textarea {
  background: $white;
  background-clip: padding-box;
  border: solid 2px lightgray;
  border-radius: $br;
  color: $text;
  display: block;
  width: 100%;
  font-size: 1rem;
  padding: .75rem;
	font-weight: 500;
	padding-top: .6rem !important;
  line-height: 1;
	vertical-align: middle !important;
  transition: all .15s ease-out;
	
  word-break: normal;
	&:hover {
		background-color: ghostwhite !important;
		border-color: darken(lightgray, 20%) !important;
	}
	&:focus {
  	background-color: $white;
  	// border-color: mix($primary, $white);
		border-color: $primary;
 	 	outline: 0;
  	// box-shadow: 0 0 0 0.2rem fade_out($primary, 0.75);
		box-shadow: 0 0 0 0.2rem rgba($primary, 0.25);
		&:hover {
		box-shadow: 0 0 0 0.2rem rgba($primary, 0.3);
		border-color: darken($primary, 20%) !important;
	}
	}
	
	&[disabled] {
  	background-color: $dividers;
  	color: $secondary;
  	cursor: not-allowed;
  	opacity: 1;
	}
}

input[type="color"], {
  background: $white;
  border-radius: $br;
  display: inline-block;
  vertical-align: middle;
	border: solid 2px lightgray;
}

input:not([type]) {
  -webkit-appearance: none;
  background: $white;
  background-clip: padding-box;
	border: solid 2px lightgray;
  border-radius: $br;
  color: $text;
  display: block;
  width: 100%;
  padding: $sm-pad $md-pad;
  line-height: 1.5;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  text-align: left;
  word-break: normal;
}
input:not([type]):focus {
  background-color: $white;
  border-color: mix($primary, $white);
  outline: 0;
  box-shadow: 0 0 0 0.2rem fade_out($primary, 0.75);
}

input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: 1px thin $dividers;
}

input:not([type])[disabled] {
  background-color: $dividers;
  color: $secondary;
  cursor: not-allowed;
  opacity: 1;
}
input[readonly],select[readonly],
textarea[readonly] {
  border-color: $dividers;
  color: $secondary;
}

input:focus:invalid,textarea:focus:invalid,
select:focus:invalid {
  border-color: darken($red, 10);
  color: $red;
}

input[type="file"]:focus:invalid:focus,
input[type="radio"]:focus:invalid:focus,
input[type="checkbox"]:focus:invalid:focus {
  outline-color: $red;
}

select {
border: solid 2px lightgray;
  vertical-align: sub;
}

select:not([size]):not([multiple]) {
  height: calc(2.25rem + 2px);
}
select[multiple] {
  height: auto;
}
label {
  display: inline-block;
	display: block;
  line-height: 2;
	font-weight: 600;
	margin-top: 1.5rem;
}
fieldset {
  border: 0;
  margin: 0;
	margin-bottom: 1rem;
  padding: .125rem 0;
	display: block;
}
legend {
  border-bottom:solid 2px lightgray;
  color: $text;
  display: block;
  margin: .125rem auto !important;
  padding: 0 !important;
	border: none;
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1;
  width: 100%;
	display: block;
}
textarea {
  overflow: auto;
  resize: vertical;
}
[type="checkbox"],[type="radio"] {
	appearance: none;
  box-sizing: border-box;
  padding: .125rem;
  display: inline-block;
	line-height: 1 !important;
	margin: 0 !important;
	background-color: ghostwhite;
	min-width: .5em;
	min-height: .5em;
	width: 1.125em;
	height: 1.125em;
	font-size: 1em;
	vertical-align: middle;
	border: 2px solid darkgray;
	box-sizing: border-box !important;
	cursor: pointer;
	user-select: none !important;
	border-radius: 3px;
	transition: all .15s;
	&::before, &::after {
		user-select: none !important;
	}
	& + label {
		&::before, &::after {
			user-select: none !important;
		}
		user-select: none !important;
		line-height: 1 !important;
		margin: 0 !important;
		display: inline-block;
		// vertical-align: baseline;
		vertical-align: middle;
		margin-left: .25rem !important;
		cursor: pointer;
		user-select: none;
		margin-right: 2em !important;
		font-size: 1rem !important;
	}
	&:focus, &:active, &:checked {
		outline: none !important;
	}
}

form {
	display: block;
	width: 100%;
	padding: 1rem 0 !important;
	margin: 1rem auto;
	
	padding: 0 !important;
	display: block;
	width: 100%;
	// max-width: 640px;
	margin: 0 auto 2rem !important;
	background-color: #fff;
	// outline: red solid 1px;
	padding: 1rem 1.5rem !important;
	border-radius: 8px;
	box-shadow: 0 8px 24px -5px rgba(#333, 0.1);
	legend, fieldset, input, label, textarea {
		display: block;
		// outline: red solid 1px;
	}
	legend {
		margin: 0 auto !important;
		padding: 0 !important;
		line-height: 1 !important;
	}
	fieldset {
		margin: .5rem 0 !important;
		width: 100%;
		padding: .5rem 0 !important;
		
	}
}

label:first-of-type {
	margin-top: 1rem;
}
form * {
	// border: red solid 1px !important;
}
[type="radio"] {
	user-select: none !important;
	&::before, &::after {
		user-select: none !important;
	}
	border-radius: .75em;
	display: inline-block;
	// max-width: 25%;
	// float: left;
	text-align: left;
	margin: .5rem .5rem .5rem .5rem !important;
	&:selection, &:focus, &:checked, &::checked, &:active {
		background-color: $primary !important;
		outline: none !important;
		&::before, &::after {
			background: $primary !important;
		}
	}
	& + label {
		user-select: none !important;
		&::before, &::after {
			user-select: none !important;
		}
		// float: right;
		// display: block;
		// text-align: left;
		// display: block !important;
		// max-width: 50%;
		
	}
}
[type="checkbox"]:checked {
	background-color: $primary !important;
	display: block;
	&::before {
		content: "\2713" !important;
		color: white;
		bottom: 1px;
		width: 95%;
		height: 95%;
		// left: 1px !important;
		position: relative;
		font-weight: 500;
		transition: all 120ms !important;
		vertical-align: baseline !important;
		// line-height: .75 !important;
	}
}
[type="color"] {
	display: block;
	width: 100%;
	// padding: .5rem 0;
	line-height: 2;
	margin: .25rem auto 1rem auto;
	min-height: 3rem !important;
	user-select: none;
	border-radius: 8px !important;
	appearance: none !important;
	border: 2px solid lightgray !important;
	&::before, &::after {
		border-radius: 8px !important;
	}
}
fieldset ~ button {
	margin-top: 1rem;
}
#{$text-inputs-selectors} {
	letter-spacing: .5px;
	display: block !important;
	line-height: 1 !important;
	margin: 0 !important;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/sanitize.css/2.0.0/sanitize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/modern-normalize/1.1.0/modern-normalize.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/mobi.css/3.1.1/mobi.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/reseter.css/2.0.0/reseter.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/firacode/5.2.0/fira_code.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/inter-ui/3.19.3/inter.css" rel="stylesheet" />
<link href="https://unpkg.com/dracula-prism/dist/css/dracula-prism.min.css" rel="stylesheet" />