Skip to content

Instantly share code, notes, and snippets.

View adi518's full-sized avatar
🌴
On vacation

Adi adi518

🌴
On vacation
View GitHub Profile
@adi518
adi518 / bem.html
Created February 23, 2017 17:34 — forked from Integralist/bem.html
In CSS/BEM: how do we name a sub-block that is related to its parent block?
<!-- 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>
# 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
adi518 / styles.less
Created April 26, 2017 23:43 — forked from brandondurham/styles.less
Using Operator Mono in Atom
/**
* 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
adi518 / VueEnvironmentPlugin.js
Last active September 11, 2017 14:36
Vue Environment Plugin
// 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)
import * as components from '@@'
Object.keys(components).forEach((key) => {
Vue.component(key, components[key])
})
@adi518
adi518 / VueGlobalEventBusGist.js
Last active September 17, 2017 20:51
Vue Global Event-Bus
// ./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
}
const isPlainObject = require('is-plain-object');
/**
* [Nightmare Action for injecting remote jQuery (http://jquery.com/download/)]
* @param {[Object]} options [List of options]
* @param {[Function]} onJqueryLoadCallback [A function to execute once jQuery has loaded]
* @return {[Promise]} [Evaluated]
* Usage:
* Nightmare.injectJQ(
* {
// 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;
// http://wicky.nillia.ms/enquire.js/
// https://www.sitepoint.com/javascript-media-queries/
// https://modernweb.com/using-media-queries-in-javascript/
// https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
// https://coderwall.com/p/i817wa/one-line-function-to-detect-mobile-devices-with-javascript
const generateDebounce = require('lodash.debounce')
export default {
install(Vue, options = {}) {
// https://www.paulirish.com/2012/box-sizing-border-box-ftw/
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}