This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
_______ | |
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. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
++ 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
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{ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@mixin vertical-align { | |
position: relative; | |
top: 50%; | |
-webkit-transform: translateY(-50%); | |
-ms-transform: translateY(-50%); | |
transform: translateY(-50%); | |
} | |
@mixin horizontal-align { | |
position: relative; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
* 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'); |