{{> top title="Basic"}}

	<button type="button" class="listen">Add listener</button>
	<button type="button" class="ignore">Remove listener</button>

	<script>

		var qp = kist.querypoint;

		function cb ( mq ) {
			if ( mq.matches ) {
				if ( '\v'=='v' ) {
					console.log(JSON.stringify(mq));
				} else {
					console.log(mq);
				}
			} else {
				console.log('No media query');
			}
		}

		qp.add('bp-alpha-s','screen and (min-width:600px)');
		qp.add('bp-alpha-m','screen and (min-width:800px)');
		qp.add('bp-alpha-l','screen and (min-width:1000px)');

		$('.listen').on('click', function () {

			qp.get('bp-alpha-s').listen(cb);
			qp.get('bp-alpha-m').listen(cb);
			qp.get('bp-alpha-l').listen(cb);

		});

		$('.ignore').on('click', function () {

			qp.get('bp-alpha-s').ignore(cb);

		});

	</script>

{{> bottom}}