Jose López Gonzálvez jofralogo

jofralogo / gulpfile.js

Last active August 29, 2015 14:26

	/*
	* Base Gulp.js workflow
	* for simple front-end projects
	* author: José López
	* version: 1.0
	* to-do:
	- Compile changed files only when watching. (gulp-changed)
	*/

	var browserSync = require('browser-sync');

jofralogo / centeralignmentmixins

Last active August 29, 2015 14:11

Mixins for easy vertical and horizontal center alignment with SCSS


	@mixin vertical-align {
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	}
	@mixin horizontal-align {
	position: relative;

jofralogo / parallaxbgs.js

Last active August 29, 2015 13:56

Parallax backgrounds for non-touch devices (using jQuery & Modernizr)

	/*
	HTML SYNTAX:
	<div id="example" data-parallax-bg="false" data-parallax-bg-speed="1.5">
	CONTENT
	</div>

	IMPORTANT:
	Don't forget tu place the background-image on your css file:

	#example{

jofralogo / scrollToAnchor.js

Last active August 29, 2015 13:56

Scroll To HTML anchor (jQuery)

	$(function () {
	$('a[href*=#]:not([href=#])').click(function () {
	if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {

	var target = $(this.hash);
	target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
	if (target.length) {
	$('html,body').animate({
	scrollTop: target.offset().top
	}, 1000);

jofralogo / responsivemixin-foundation5.scss

Last active January 1, 2016 00:39

Mixins for responsive properties for Foundation 5: Like a shorthand to play with media-queries.

	/*

	++ MIXIN: Zurb Foundation 5 Responsive CSS Property ++

	Define any CSS property and their values for phone, tablet and desktop.

	i.e.:

	@include rprop(margin-top,10px,20px,30px);

jofralogo / responsiveMixinsF4.sass

Last active December 15, 2015 21:18

Useful responsive SCSS mixins for Foundation 4.

	/*
	_______

	These simple SCSS/SASS mixins for Foundation 4 are made by me to deal with media-queries and have a clean code at the same time! ;)

	**IMPORTANT**

	Due to Foundation 4 uses mobile-first methodology, every $phone-"X" variable in these mixins defines the value for every screen size.
	$desktop-"X" values overrides $phone-"X" values when the width of the window is 768px and above.