Meshiest/magical-css.html

## magical-css.html
<!-- You are not supposed to edit this document ;) -->
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <title>Magical CSS Tester</title>
    <style type="text/css">
      /*
        You like memes?
        https://i.imgur.com/qYag1jU.png
      */

      /*
        In the webdev world, we call this "Reset CSS"
        Some elements have default margins that vary between
        browsers. Talk about a compatibility nightmare!

        Here's a great reset CSS document for personal use:
          https://meyerweb.com/eric/tools/css/reset/

        This splat/star/asterisk here is called a "universal-selector"!
        It matches everything! Unfortunately it's laggy....

        .... Sorry
      */
      * {
        margin: 0;
        padding: 0;
        border: 0;
      }

      body {
        background-color: #eee;
      }

      .frame-container {
        /*
          Interested in this weird CSS black magic?
          http://flexboxfroggy.com/
          Become a sorcerer!
        */
        display: flex;
        flex-direction: column;
        /*
          margin: y x; or margin: topbottom leftright;
          margin: top right bottom left;
          margin: allsides;

          When you do margin auto on the horizontal axis,
          it centers the element. This doesn't work very
          effectively on the vertical axis :(
          As a result we have this funny website:
            http://howtocenterincss.com/

          Units are optional when using the number 0
        */
        margin: 0 auto;
        width: 800px;
      }

      .display-frame {
        margin: 8px 0;
        min-height: 300px;
      }

      .card {
        background-color: #fff;

        /*
          I've found the nicest shadows follow this formula:
            box-shadow 0 (n)px (2n)px rgba(0, 0, 0, 0.4);

          Where n is how far up you want your element to look.

          If you want to go absolutely nuts on stylish websites,
          check out this design langauge:
            https://material.io/guidelines/
         */
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
      }

      .modal {
        /*
          position: fixed
            Positioning relative to the page

          position: relative
            Tells childen with absolute to use the bounds of this
            of this element instead of the page

          position: absolute
            Positioning relative to any 'relative' parent
            It's liked fixed but for only a small part of the page

          position: sticky
            That cool effect where something sticks to a certain
            part of the page when you scroll far enough

          position: static
            Like sticky, but it starts stuck and doesn't move
            with scroll
        */
        left: 50%;
        position: fixed;
        /*
          top/left are relative to the document or a parent
          relative element, so this 50% is relative to the document.
        */
        top: 50%;
        /*
          translate via transform is relative to the element
          so 50% would be 50% of the element's width

          This combination centers the element in the exact middle of
          the page
        */
        transform: translate(-50%, -50%);
      }

      nav {
        align-items: center;
        /*
          For easy color picking, check out this cool resource:
            https://material.io/color/#!/
        */
        background-color: #00695c;
        color: #fff;
        display: flex;
        height: 48px;
        padding: 0 8px;
      }

      nav .title {
        font-weight: normal;
      }

    </style>
  </head>
  <body>
    <nav>
      <h1 class="title">Magical CSS Tester</h1>
    </nav>
    <i class="subhead">
      This magical tester runs CSS on many different HTML documents at once! This means that the CSS you write will be applied to more than one document!
    </i>
    <section class="frame-container">
      <!--
        In HTML, Id's should be used once because they are used
        for JavaScript! Classes are supposed to be used very often
        because they are used for CSS!

        An iframe is like a website-in-a-box: It allows rendering
        of another page but the way I use it is to contain our
        template documents.
      -->
      <iframe id="twitterFrame" class="card display-frame">
      </iframe>
      <iframe id="facebookFrame" class="card display-frame">
      </iframe>
      <iframe id="redditFrame" class="card display-frame">
      </iframe>
    </section>

    <!--
      No one uses really the template tags because JavaScript
      is better suited for this purpose. However, I am working
      limited to a single document!

      Please keep your workspace organized <3
    -->
    <template id="twitterTemplate">
      asdf
    </template>

    <template id="facebookTemplate">
      adsfasdffdsafds
    </template>

    <template id="redditTemplate">
      asdfasdffdsafdfdfd
    </template>

    <script>
      const $ = document.querySelector.bind(document);

      function writeFromTemplate(iframe, template) {
        let doc = iframe.contentWindow.document;
        doc.open();
        doc.write(template.innerHTML);
        doc.close();
        return doc;
      }

      window.addEventListener('load', async () => {
        let css = fetch('style.css');

        writeFromTemplate($('#twitterFrame'), $('#twitterTemplate'));
        writeFromTemplate($('#facebookFrame'), $('#facebookTemplate'));
        writeFromTemplate($('#redditFrame'), $('#redditTemplate'));

        if(!(await css).ok) {
          alert('You need to create a style.css file!');
        }

        console.log(css);
      });
    </script>
  </body>
</html>
	<!-- You are not supposed to edit this document ;) -->
	<!DOCTYPE html>
	<html lang="en-US">
	<head>
	<title>Magical CSS Tester</title>
	<style type="text/css">
	/*
	You like memes?
	https://i.imgur.com/qYag1jU.png
	*/

	/*
	In the webdev world, we call this "Reset CSS"
	Some elements have default margins that vary between
	browsers. Talk about a compatibility nightmare!

	Here's a great reset CSS document for personal use:
	https://meyerweb.com/eric/tools/css/reset/

	This splat/star/asterisk here is called a "universal-selector"!
	It matches everything! Unfortunately it's laggy....

	.... Sorry
	*/
	* {
	margin: 0;
	padding: 0;
	border: 0;
	}

	body {
	background-color: #eee;
	}

	.frame-container {
	/*
	Interested in this weird CSS black magic?
	http://flexboxfroggy.com/
	Become a sorcerer!
	*/
	display: flex;
	flex-direction: column;
	/*
	margin: y x; or margin: topbottom leftright;
	margin: top right bottom left;
	margin: allsides;

	When you do margin auto on the horizontal axis,
	it centers the element. This doesn't work very
	effectively on the vertical axis :(
	As a result we have this funny website:
	http://howtocenterincss.com/

	Units are optional when using the number 0
	*/
	margin: 0 auto;
	width: 800px;
	}

	.display-frame {
	margin: 8px 0;
	min-height: 300px;
	}

	.card {
	background-color: #fff;

	/*
	I've found the nicest shadows follow this formula:
	box-shadow 0 (n)px (2n)px rgba(0, 0, 0, 0.4);

	Where n is how far up you want your element to look.

	If you want to go absolutely nuts on stylish websites,
	check out this design langauge:
	https://material.io/guidelines/
	*/
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
	}

	.modal {
	/*
	position: fixed
	Positioning relative to the page

	position: relative
	Tells childen with absolute to use the bounds of this
	of this element instead of the page

	position: absolute
	Positioning relative to any 'relative' parent
	It's liked fixed but for only a small part of the page

	position: sticky
	That cool effect where something sticks to a certain
	part of the page when you scroll far enough

	position: static
	Like sticky, but it starts stuck and doesn't move
	with scroll
	*/
	left: 50%;
	position: fixed;
	/*
	top/left are relative to the document or a parent
	relative element, so this 50% is relative to the document.
	*/
	top: 50%;
	/*
	translate via transform is relative to the element
	so 50% would be 50% of the element's width

	This combination centers the element in the exact middle of
	the page
	*/
	transform: translate(-50%, -50%);
	}

	nav {
	align-items: center;
	/*
	For easy color picking, check out this cool resource:
	https://material.io/color/#!/
	*/
	background-color: #00695c;
	color: #fff;
	display: flex;
	height: 48px;
	padding: 0 8px;
	}

	nav .title {
	font-weight: normal;
	}

	</style>
	</head>
	<body>
	<nav>
	<h1 class="title">Magical CSS Tester</h1>
	</nav>
	<i class="subhead">
	This magical tester runs CSS on many different HTML documents at once! This means that the CSS you write will be applied to more than one document!
	</i>
	<section class="frame-container">
	<!--
	In HTML, Id's should be used once because they are used
	for JavaScript! Classes are supposed to be used very often
	because they are used for CSS!

	An iframe is like a website-in-a-box: It allows rendering
	of another page but the way I use it is to contain our
	template documents.
	-->
	<iframe id="twitterFrame" class="card display-frame">
	</iframe>
	<iframe id="facebookFrame" class="card display-frame">
	</iframe>
	<iframe id="redditFrame" class="card display-frame">
	</iframe>
	</section>

	<!--
	No one uses really the template tags because JavaScript
	is better suited for this purpose. However, I am working
	limited to a single document!

	Please keep your workspace organized <3
	-->
	<template id="twitterTemplate">
	asdf
	</template>

	<template id="facebookTemplate">
	adsfasdffdsafds
	</template>

	<template id="redditTemplate">
	asdfasdffdsafdfdfd
	</template>

	<script>
	const $ = document.querySelector.bind(document);

	function writeFromTemplate(iframe, template) {
	let doc = iframe.contentWindow.document;
	doc.open();
	doc.write(template.innerHTML);
	doc.close();
	return doc;
	}

	window.addEventListener('load', async () => {
	let css = fetch('style.css');

	writeFromTemplate($('#twitterFrame'), $('#twitterTemplate'));
	writeFromTemplate($('#facebookFrame'), $('#facebookTemplate'));
	writeFromTemplate($('#redditFrame'), $('#redditTemplate'));

	if(!(await css).ok) {
	alert('You need to create a style.css file!');
	}

	console.log(css);
	});
	</script>
	</body>
	</html>