elwinschmitz/define-breakpoints-once.html

## define-breakpoints-once.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Single point of breakpoint-definition</title>

<style>
/*
    Baseline:
*/
body::before {
  display: block;
  content: "default-no-mq";
}

#test {
  width: 100px;
  height: 100px;
  background: grey;
  font-family: "default-no-mq", monospace;
}

#test2 {
  content: "default-no-mq";
}

/*
    Medium-screen width:
*/
@media all and (min-width: 600px) {

  body::before {
    content: "medium-screen";
  }

  #test {
    font-family: "medium-screen", monospace;
    background: red;
  }

  #test2 {
    content: "medium-screen";
  }
}

/*
    Large-screen width:
*/
@media all and (min-width: 1200px) {

  body::before {
    content: "large-screen";
  }

  #test {
    font-family: "large-screen", monospace;
    background: green;
  }

  #test2 {
    content: "large-screen";
  }
}

</style>
</head>
<body>

<h1>Define breakpoints once</h1>

<div id="test">
  Test-div
</div>

<div id="test2"></div>


<script>

  function whereAmI(id) {
    console.log("Test1: ", window.getComputedStyle(document.getElementById("test"),null).getPropertyValue('font-family') )
    console.log("Test2: ", window.getComputedStyle(document.getElementById("test2"),null).getPropertyValue('content') )
  }


  whereAmI()

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Single point of breakpoint-definition</title>

	<style>
	/*
	Baseline:
	*/
	body::before {
	display: block;
	content: "default-no-mq";
	}

	#test {
	width: 100px;
	height: 100px;
	background: grey;
	font-family: "default-no-mq", monospace;
	}

	#test2 {
	content: "default-no-mq";
	}

	/*
	Medium-screen width:
	*/
	@media all and (min-width: 600px) {

	body::before {
	content: "medium-screen";
	}

	#test {
	font-family: "medium-screen", monospace;
	background: red;
	}

	#test2 {
	content: "medium-screen";
	}
	}

	/*
	Large-screen width:
	*/
	@media all and (min-width: 1200px) {

	body::before {
	content: "large-screen";
	}

	#test {
	font-family: "large-screen", monospace;
	background: green;
	}

	#test2 {
	content: "large-screen";
	}
	}

	</style>
	</head>
	<body>

	<h1>Define breakpoints once</h1>

	<div id="test">
	Test-div
	</div>

	<div id="test2"></div>


	<script>

	function whereAmI(id) {
	console.log("Test1: ", window.getComputedStyle(document.getElementById("test"),null).getPropertyValue('font-family') )
	console.log("Test2: ", window.getComputedStyle(document.getElementById("test2"),null).getPropertyValue('content') )
	}


	whereAmI()

	</script>

	</body>
	</html>