Related Setup: https://gist.github.com/hofmannsven/6814278
Related Pro Tips: https://ochronus.com/git-tips-from-the-trenches/
const trigger = document.querySelector('button') | |
trigger.addEventListener('click', () => { | |
document.querySelector('h1').classList.add('blue') | |
}) | |
trigger.addEventListener('mouseenter', () => { | |
document.querySelector('h1').classList.add('blue') | |
}) |
<template> | |
<main> | |
<h1>{{ object.first }} {{ object.last }}</h1> | |
<p>{{ object.age }}</p> | |
</main> | |
</template> | |
<script> |
Related Setup: https://gist.github.com/hofmannsven/6814278
Related Pro Tips: https://ochronus.com/git-tips-from-the-trenches/
If applicable, make sure your design component accounts for all these states. This is basically copied from the Nine States of Design Medium article. 😛
<!-- layout --> | |
<template> | |
<router-link to="/"> | |
<div class="mw-grid debug"> | |
test | |
<img v-bind:class="{ triggerActive: move }" @click="move = !move" class="debug center" src="http://i.imgur.com/JQaaf8q.jpg" alt=""> | |
</div> |
/* https://gist.github.com/bendc/ac03faac0bf2aee25b49e5fd260a727d */ | |
:root { | |
--ease-in-quad: cubic-bezier(.55, .085, .68, .53); | |
--ease-in-cubic: cubic-bezier(.550, .055, .675, .19); | |
--ease-in-quart: cubic-bezier(.895, .03, .685, .22); | |
--ease-in-quint: cubic-bezier(.755, .05, .855, .06); | |
--ease-in-expo: cubic-bezier(.95, .05, .795, .035); | |
--ease-in-circ: cubic-bezier(.6, .04, .98, .335); |
*,*:before,*:after{box-sizing:inherit}html{box-sizing:border-box;overflow-x:hidden;font-size:62.5%;-webkit-font-smoothing:antialiased !important;text-rendering:optimizeLegibility !important}body{background:#fff;color:rgba(0,0,0,0.8);font:400 1.6rem/1.4 -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;overflow-x:hidden;margin:0;padding:0}a{color:inherit;text-decoration:none}h1,h2,h3,h4,h5,h6,img,ul,li,section,article,figure,main{margin:0;padding:0}button{border:none;background:black;cursor:pointer;margin:0}img{max-width:100%}ul{list-style-type:none}li{display:inline-block}.debug{outline:2px solid pink}.mb-0{margin-bottom:.809rem}.mb-1{margin-bottom:1.618rem}.mb-2{margin-bottom:3.236rem}.mb-3{margin-bottom:4.854rem}.mb-4{margin-bottom:6.472rem}.mb-5{margin-bottom:8.09rem}.mb-6{margin-bottom:9.708rem}.mb-7{margin-bottom:11.326rem}.mb-8{margin-bottom:12.944rem}.mb-9{margin-bottom:14.562rem}@media (min-width: 700px){.mt-6-ns{ |
// System Font Stack | |
$system-font: -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif; | |
// Gird | |
$columns: 12; | |
$gutter: 2%; | |
@function grid-width($cols, $has-gutter:false) { | |
@if $has-gutter { | |
@return calc(((100% / #{$columns}) * #{$cols}) - #{$gutter}); |
// https://codepen.io/cmykw/pen/gemxJm | |
// layout | |
<nav/> | |
// style | |
<style> | |
body { min-height: 200vh; } | |
nav { |