Jose López Gonzálvez jofralogo
jofralogo
/ gulpfile.js
Last active
August 29, 2015 14:26
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'); |
jofralogo
/ centeralignmentmixins
Last active
August 29, 2015 14:11
Mixins for easy vertical and horizontal center alignment with SCSS
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; |
jofralogo
/ parallaxbgs.js
Last active
August 29, 2015 13:56
Parallax backgrounds for non-touch devices (using jQuery & Modernizr)
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
| $(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.
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); |
jofralogo
/ responsiveMixinsF4.sass
Last active
December 15, 2015 21:18
Useful responsive SCSS mixins for Foundation 4.
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. |