Skip to content

Instantly share code, notes, and snippets.

View rolandtoth's full-sized avatar

Roland Toth Pal rolandtoth

View GitHub Profile
@rolandtoth
rolandtoth / uikit-extra-grid-sizes-mixin
Last active August 29, 2015 14:21
add extra Uikit grid sizes
/*
* add extra Uikit grid sizes
*
* usage:
* set custom breakpoint (1480px) and name ("xlarge-x")
* @media (min-width: 1480px) {
* .add-grid-sizes(xlarge-x);
* }
*/
@rolandtoth
rolandtoth / gotoByScroll.js
Created July 15, 2015 11:31
gotoByScroll
/**
Smooth scroll to element
gotoByScroll({
target: $(targetID),
speed: 700,
vOffset: 0,
easing: "easeInOutQuad",
onStart: function (trg) {
// your function...
@rolandtoth
rolandtoth / _fg_grid_mixin.scss
Last active January 27, 2017 08:34
simplest-flexbox-grid _fg_grid() mixin
/* Usage
pass columns list or column number and optionally gutter and padding
columns list: 1 2 1 => 4 columns altogether:
col 1/4 (25%), then col 2/4 (50%) and finally 1/4 (25%)
@include _fg_grid(1 2 1);
@include _fg_grid(1 2, 32, 24);
@include _fg_grid(1 2, $gutter: 32, $padding: 24);
if a number is passed instead of a list the mixin is equivalent to _fg() mixin
*/
@mixin _fg_grid($colList, $gutter: $_fg_gutter, $padding: $_fg_padding) {
@mixin fill($offset: 0) {
// get a list with 4 numbers
@if type_of($offset) == 'number' {
$offset: ($offset $offset $offset $offset);
} @else if type_of($offset) == 'list' {
@if length($offset) == 2 {
$offset: join($offset, $offset);
} @else if length($offset) == 3 {
@rolandtoth
rolandtoth / loadAsset.js
Created October 26, 2017 07:55
loadAsset.js CSS/Js loader
function loadAsset(path, callback, o) {
var selector = getUrlParameter('selector', path).replace(/['"]+/g, '').trim(),
async = getUrlParameter('async', path) === 'true',
version = getUrlParameter('v', path),
assetType = 'js',
assetTag = 'script',
assetSrc = 'src',
needAsset = true;
@rolandtoth
rolandtoth / index.html
Created April 19, 2018 15:33
Pure CSS scroll-to-top
<div class="container" id="top">
<h1>Pure CSS scroll-to-top</h1>
<div class="intro">
<p>
A CSS-only solution to reveal a scroll-to-top link on scrolling down the page + animated scroll back to top.
</p>
@rolandtoth
rolandtoth / pwFocusField.js
Created November 3, 2018 23:56
Focus field if hash contains a field name, or focus previously edited field (ProcessWire admin)
/**
* Focus field on page edit screen if hash contains "field=fieldName",
* or focus previously edited field using sessionStorage.
* Eg. /admin/page/edit/?id=1051#focus=title
*/
// need to set before document.ready()
var focusFieldNameFromHash = getFocusFieldNameFromHash();