Rizky Syazuli rizkysyazuli
This file contains hidden or 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 clearfix { | |
| *zoom:1; | |
| &:before, &:after { content: " "; display: table; } | |
| &:after { clear: both; } | |
| } |
rizkysyazuli
/ foundation-breakpoints.scss
Last active
February 20, 2020 14:56
[SCSS - Breakpoints] #scss #responsive
This file contains hidden or 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
| // Here we define the lower and upper bounds for each media size | |
| $small-range: (0em, 40em); /* 0, 640px */ | |
| $medium-range: (40.063em, 64em); /* 641px, 1024px */ | |
| $large-range: (64.063em, 90em); /* 1025px, 1440px */ | |
| $xlarge-range: (90.063em, 120em); /* 1441px, 1920px */ | |
| $xxlarge-range: (120.063em); /* 1921px */ | |
| // We use these functions to get the ranges for the media queries variables. | |
| @function lower-bound($range){ | |
| @if length($range) <= 0 { |
rizkysyazuli
/ mixins-positioning.scss
Last active
February 20, 2020 16:14
[SCSS - Positioning] #scss
This file contains hidden or 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 position($position, $args) { | |
| @each $o in top right bottom left { | |
| $i: index($args, $o); | |
| @if $i and $i + 1 <= length($args) and type-of(nth($args, $i + 1)) == number { | |
| #{$o}: nth($args, $i + 1); | |
| } | |
| } | |
| position: $position; | |
| } |
This file contains hidden or 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 size($width, $height: $width) { | |
| width: $width; | |
| height: $height; | |
| } |
rizkysyazuli
/ element-range.js
Last active
February 20, 2020 11:30
[JavaScript - Check if element in viewport] A function to detect if a "page" element is visible in the browser viewport. It was used on a single-page website i made for changing the address, lazy-loading assets and updating the navigation menu. #javascript #jquery
This file contains hidden or 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 range() { | |
| // the outer most container element that wraps the pages | |
| var $viewport = $('.viewport'); | |
| // the container element for each pages | |
| var $page = $('.page'); | |
| // viewport dimension | |
| var viewX = $viewport.scrollLeft(), | |
| viewY = $viewport.scrollTop(), | |
| viewWidth = $viewport.width(), |
rizkysyazuli
/ google-maps.js
Last active
February 20, 2020 11:29
[JavaScript - Google Maps] Maps with custom styles and map markers. #javascript #jquery
This file contains hidden or 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
| // sanity checks | |
| var $map = $('.map-container'); | |
| if ($map.length) { | |
| // on page load, run the main map handler | |
| google.maps.event.addDomListener(window, 'load', originsMap); | |
| } | |
| // custom map style. see: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html | |
| var mapStyle = [{featureType:'water',elementType:'all',stylers:[{hue:'#281d01'},{saturation:100},{lightness:-89},{visibility:'simplified'}]},{featureType:'landscape',elementType:'all',stylers:[{hue:'#d2ac43'},{saturation:47},{lightness:-39},{visibility:'on'}]},{featureType:'road',elementType:'all',stylers:[{hue:'#d2ac43'},{saturation:-39},{lightness:-15},{visibility:'off'}]},{featureType:'poi',elementType:'all',stylers:[{hue:'#d2ac43'},{saturation:32},{lightness:-30},{visibility:'off'}]},{featureType:'administrative.province',elementType:'all',stylers:[{hue:'#d2ac43'},{saturation:61},{lightness:7},{visibility:'off'}]},{featureType:'administrative.locality',elementType:'all',stylers:[{hue:'#d2ac43'},{saturation:61},{lightness:54 |
rizkysyazuli
/ kirbycms-pagination.php
Created
September 30, 2013 20:41
Kirby CMS Snippets: pagination with page numbers.
This file contains hidden or 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
| <? if ($articles->pagination()->hasPages()): ?> | |
| <ul class="pagination"> | |
| <? if($articles->pagination()->hasNextPage()): ?> | |
| <li><a class="prev" href="<?= $articles->pagination()->nextPageURL() ?>">Older posts</a></li> | |
| <? endif; ?> | |
| <? foreach($articles->pagination()->range(5) as $paging): ?> | |
| <li><a href="<?= $articles->pagination()->pageURL($paging); ?>"><?= $paging; ?></a></li> | |
| <? endforeach ?> |
rizkysyazuli
/ foundation-top-bar-reset.scss
Created
April 8, 2013 17:36
Foundation: Top Bar Background Colour Reset
This file contains hidden or 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
| .top-bar { | |
| background-color: transparent; | |
| &.expanded { | |
| .title-area { | |
| background-color: transparent; | |
| } | |
| } | |
| } |
This file contains hidden or 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
| // jQuery SheepIt Configuration - http://goo.gl/7VrJu | |
| // SheepIt plugin defaults | |
| var defaults = { | |
| separator: '', | |
| // controls | |
| allowRemoveLast: true, | |
| allowRemoveCurrent: true, | |
| allowRemoveAll: false, | |
| allowAdd: true, |
rizkysyazuli
/ jquery-sheepit-template-basic.html
Created
January 14, 2013 15:48
jQuery: SheepIt Form Template
This file contains hidden or 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
| <!-- jQuery SheepIt HTML Template - http://goo.gl/7VrJu --> | |
| <!-- start: SheepIt Form --> | |
| <div id="myform"> | |
| <!-- start: Form template--> | |
| <div class="template" id="myform_template"> | |
| <label for="myform_#index#_name">Name <span id="myform_label"></span></label> | |
| <input id="myform_#index#_name" name="myform_name[#index#]" type="text"/> | |
| <div> | |
| <a href="#" id="myform_remove_current" class="icon-remove-sign"></a> |