Skip to content

Instantly share code, notes, and snippets.

View hal0gen's full-sized avatar

Tommaso Marcelli hal0gen

3 followers · 1 following
  • Milan
View GitHub Profile
@hal0gen
hal0gen / Hello.vue
Created June 24, 2017 16:05
VueJS integration with Foundation 6.4.0
<template>
<div class="grid-container">
<div class="grid-x">
<div class="callout">
<p>
The <tooltip :title="'Fancy word for a beetle.'" :fade-in-duration="800" :position="'right'">scarabaeus</tooltip> hung quite clear of any branches, and, if allowed to fall, would have fallen at our feet. Legrand immediately took the scythe, and cleared with it a circular space, three or four yards in diameter, just beneath the insect, and, having accomplished this, ordered Jupiter to let go the string and come down from the tree.
</p>
</div>
</div>
</div>
@hal0gen
hal0gen / mutation-vs-reducer.js
Created February 27, 2017 22:41
Redux vs Vuex
state: {
count: 1
}
// Vuex Mutation
increment(state) {
// mutate state
state.count++;
}
@hal0gen
hal0gen / main.js
Created February 13, 2017 00:25
Vue app entry point
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import 'script-loader!jquery/dist/jquery.min';
import 'script-loader!what-input/dist/what-input.min';
import 'script-loader!foundation-sites/dist/js/foundation.min';
// Vue libraries
import Vue from 'vue';
import App from './App';
@hal0gen
hal0gen / foundation.js
Last active March 12, 2017 02:01
Vue mixin for including Foundation JavaScript
module.exports = {
mounted() {
// eslint-disable-next-line
$(this.$el).foundation();
},
destroyed() {
// eslint-disable-next-line
$(this.$el).foundation.destroy();
},
};
@hal0gen
hal0gen / utils.js
Created February 8, 2017 22:15
Modified vue-cli cssLoaders to include a SASS file in every component
exports.cssLoaders = function (options) {
// ...
return {
// ...
scss: generateLoaders(['css', 'sass?data=@import "~src/styles/app";']), // Make custom SASS available to all components
// ...
}
}
@hal0gen
hal0gen / app.scss
Created February 8, 2017 22:06
SCSS file to be imported in every Vue component
// Load custom Foundation variables
@import "./settings";
// Load Foundation
@import "~foundation-sites/scss/foundation";
@hal0gen
hal0gen / Slider.vue
Last active February 8, 2017 21:40
Vue component with a Foundation Slider
<template>
<div class="row">
<div class="medium-10 medium-offset-1 columns">
<h1>{{ msg }}</h1>
<div class="slider" data-slider v-bind:data-initial-start="this.dataValue" v-bind:data-end="this.dataEnd">
<span class="slider-handle" data-slider-handle role="slider" tabindex="1"></span>
<span class="slider-fill" data-slider-fill></span>
<input type="hidden" class="slider-input">
</div>
<p>Value: {{ dataValue }}</p>
@hal0gen
hal0gen / Gemfile
Created June 30, 2016 15:48
Wordmove + Bedrock + Capistrano: using Wordmove for DB and assets, Capistrano for all the rest
source 'https://rubygems.org'
gem 'capistrano', '~> 3.4.0'
gem 'capistrano-composer'
gem 'wordmove'
@hal0gen
hal0gen / _mobile-ready-web-app.html
Last active November 10, 2024 12:00 — forked from tfausak/ios-8-web-app.html
iOS + Android settings for web applications
<!doctype html>
<!-- Adapted from https://gist.github.com/tfausak/2222823 -->
<html>
<head>
<title>Mobile-ready web app</title>
<!-- CONFIGURATION -->