spemer

require('es6-promise').polyfill();

spemer

<template lang="pug">
  div#app
    div(
      v-for="user in users"
      :key="users.id"
    )
      h1 {{ user.name }}
      p {{ user.email }}
    button(@click="fetchUsers") Click me!
</template>

spemer

import Vue from 'vue'
import App from './App'
import axios from 'axios'

Vue.prototype.$http = axios

app = new Vue({
  el: '#app',
  components: { App },
  template: '<App/>'

spemer

nav {
  margin: 0 auto; }
  nav ul {
    margin: 8px;
    padding: 0;
    list-style-type: disc; }
  nav li {
    font-size: 16px; }
  nav a {
    display: block;

spemer

nav {
  margin: 0 auto;
  ul {
    margin: 8px;
    padding: 0;
    list-style-type: disc;
  }

  li {
    font-size: 16px;

spemer

h1 {
  font-size: 32px;
  font-size: 2rem;
}

p {
  font-size: 16px;
  font-size: 1rem;
}

spemer

@function calculateRem($size) {
  $remSize: $size / 16px;
  @return $remSize * 1rem;
}

@mixin font-size($size) {
  font-size: $size;
  font-size: calculateRem($size);
}

spemer

.normal {
  opacity: 1;
  filter: alpha(opacity=100);
}

.disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
}

spemer

@mixin opacity($opacity) {
  opacity: $opacity;
  $opacity-ie: $opacity * 100;
  filter: alpha(opacity=$opacity-ie);
}

.normal {
  @include opacity(1); 
}

spemer

.code-block {
  font: 100% Menlo, monospace, consolas;
  color: #656c7a;
  background-color: #e7e9ee;
}

.article-par {
  font: 100% 'Merriweather',serif;
}