adi518

<!-- Simplest solution is to just label the element as a element within an element -->
<div class="block">
  Content
  <div class="block__element">
    Content
    <div class="block__element__element">
      Content related to `block__element`
    </div>
  </div>
</div>

adi518

# Atom Beautify - Debugging information

The following debugging information was generated by `Atom Beautify` on `Wed Mar 29 2017 17:33:12 GMT+0300 (Jerusalem Daylight Time)`.

---

## Table Of Contents
- [Versions](#versions)
- [Original file to be beautified](#original-file-to-be-beautified)
  - [Original File Contents](#original-file-contents)

adi518

/**
 * Using Operator Mono in Atom
 * 
 * 1. Open up Atom Preferences.
 * 2. Click the “Open Config Folder” button.
 * 3. In the new window’s tree view on the left you should see a file called “styles.less”. Open that up.
 * 4. Copy and paste the CSS below into that file. As long as you have Operator Mono SSm installed you should be golden!
 * 5. Tweak away.
 *
 * Theme from the screenshot (http://cdn.typography.com/assets/images/blog/operator_ide2.png):

adi518

// Apply in your `main.js` or whatever suits you. ;)

const environment = {
  install(Vue) {
    Vue.prototype.$isdev = process.env.NODE_ENV === 'development'
    Vue.prototype.$isprod = process.env.NODE_ENV === 'production'
    Vue.prototype.$istest = process.env.NODE_ENV === 'testing'
  }
}
Vue.use(environment)

adi518

import * as components from '@@'

Object.keys(components).forEach((key) => {
  Vue.component(key, components[key])
})

adi518

// ./components/EventBus.vue
import Vue from 'vue'
export const EventBus = new Vue()

// ./plugins/EventBus.js
export default {
  install(Vue) {
    const { EventBus } = require('../components/EventBus')
    Vue.prototype.$bus = EventBus
  }

adi518

// https: //css-tricks.com/couple-takes-sticky-footer/
@mixin sticky-footer($master-container, $header-container, $content-container, $footer-container) {
  @at-root {
    html {
      height: 100%;
    }
    #{$master-container} {
      display: flex;
      flex-direction: column;
      height: 100vh;

adi518

// https://www.paulirish.com/2012/box-sizing-border-box-ftw/
html {
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
}

adi518

function generateClassName (amountOfLettersInClassName) {
    amountOfLettersInClassName = amountOfLettersInClassName || 9;
    var className = [];

    for (var i = 0; i < amountOfLettersInClassName; i++) {
        var charCodeOffset = 65;
        var numeral = Math.round(Math.random() * 25) + charCodeOffset;
        var letter = String.fromCharCode(numeral);
        className.push(letter);
    }

adi518

<template>
  <v-button v-on="$listeners">
    <slot/>
  </v-button>
</template>

<script>
// Abstract
import Button from './Button.bare'