Skip to content

Instantly share code, notes, and snippets.


Kieran kieranmv95

View GitHub Profile
kieranmv95 / useTheme.js
Last active Jan 6, 2021
React hook for getting the users preffered themeName from OS and then adding a manual toggle option
View useTheme.js
import { useEffect, useState } from 'react';
// This hook checks if the prefers-color-scheme is supported in the users and if
// so grabs the theme from the OS settings.
// If the theme is not supported it defaults to return the string light
// If the user manually toggles the theme to light or dark that is preferred over
// the OS settings
View .gitconfig
email =
name = kieranmv95
co = checkout
cob = checkout -b
cm = commit -m
s = status -s
b = branch
kieranmv95 / vscode_settings.json
Last active Aug 29, 2020
Settings for visual studio code
View vscode_settings.json
"editor.fontFamily": "Fira Code",
"editor.fontSize": 14,
"editor.lineHeight": 18,
"editor.letterSpacing": 0.5,
"editor.cursorStyle": "line-thin",
"editor.minimap.enabled": false,
"editor.cursorBlinking": "smooth",
"editor.multiCursorModifier": "ctrlCmd",
"editor.smoothScrolling": true,
kieranmv95 / _center.mixin.scss
Last active Apr 26, 2018
Center anything horizontally vertically or on both axis in scss
View _center.mixin.scss
// Center anything horizontally, vertically or both (assuming that the parents position is set to relative)
// Codepen Example Usage:
@mixin center($center: 'all') {
position: absolute;
@if $center == 'all' {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
kieranmv95 / _spacing-helper.scss
Last active Feb 6, 2019
Generates a array of spacing helper classes for margin and padding
View _spacing-helper.scss
// Customisable spacing units. these can be changed and new ones added
$spacing-units: (
1: 3px,
2: 5px,
3: 8px,
4: 13px,
5: 21px,
// These will not change this is just to help generate the classes with the correct naming
kieranmv95 / _arrow.scss
Last active Apr 27, 2018
Create pure CSS triangles in a matter of seconds with this scss mixin
View _arrow.scss
Kieran Venison scss mixin
Example usage:
// Name: Arrow
// Params: direction, color, size
@mixin arrow($arrow-direction, $arrow-color, $arrow-size){