Nikolas Wise nikolaswise

Typography

If using a grid system:

	export const $ = (selector, context = document) => Array(...context.querySelectorAll(selector))

	export const isEven = n => n === 0 \|\| !!(n && !(n%2));

	export const isInViewport = (el)=> {
	var rect = el.getBoundingClientRect();
	return (
	rect.top >= 0 &&
	rect.left >= 0 &&
	rect.bottom <= (window.innerHeight \|\| document.documentElement.clientHeight) && /or $(window).height() /

	// TOGS????

	<section class="js-toggle-group">
	<nav>
	<button
	data-toggle="one"
	class="js-toggle-link">
	One
	</button>
	<button

	<!-- html -->
	<figure class="multiply-image lead-1 ns-lead-0">
	<img class="multiply-image-source" src="{{section.settings.about_image \| img_url: '900x' }}" alt="{{section.settings.about_caption}}">
	<img class="multiply-image-copy" src="{{section.settings.about_image \| img_url: '900x' }}" alt="{{section.settings.about_caption}}">
	<caption class="txt-gray multiply">{{section.settings.about_caption}}</caption>
	</figure>

	<!-- css -->

	.multiply-image {

	const channels = {
	z: {
	channel: 'z',
	description: 'Getting nothing but static, getting nothing but static / Static in my attic from Channel Z',
	emits: 'Space Junk',
	listeners: []
	}
	}

	const check = channel => typeof channels[channel] == 'object'

	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<meta name="viewport" content="width=device-width, user-scalable=no">
	<title>Your Title</title>
	<link rel="shortcut icon" href="/img/favicon.ico">
	<!-- get calcite-web css from the cdn (use latest version) -->
	<link rel="stylesheet" href="/style.min.css?v1.0.0">

	<div class="product-options">
	{% for option in product.options_with_values %}
	<div class="product-option">
	<h4 class="txt-size-0">{{ option.name }}</h4>
	<select class="product-option-select js-variant-select" data-axis="{{ option.name \| downcase }}">

	{% for value in option.values %}
	<option {% if option.selected_value == value %}selected{% endif %}>
	{{ value }}
	</option>


	// ┌────────────┐
	// │ CSS Grid: │
	// │ Good for │
	// │ spanning │
	// │ horizontal │
	// └────────────┘
	.masonry {
	display: grid;
	grid-template-columns: repeat(4, 1fr);