Skip to content

Instantly share code, notes, and snippets.

Avatar
💻
typing...

Kieran kieranmv95

💻
typing...
View GitHub Profile
@kieranmv95
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
[user]
email = kieranmv@gmail.com
name = kieranmv95
[alias]
co = checkout
cob = checkout -b
cm = commit -m
s = status -s
b = branch
@kieranmv95
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
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: https://codepen.io/anon/pen/yPbgYW
@mixin center($center: 'all') {
position: absolute;
@if $center == 'all' {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
@kieranmv95
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
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
kieranmv95@gmail.com
Example usage: http://codepen.io/Kieranmv95/pen/QNYLvE
*/
// Name: Arrow
// Params: direction, color, size
@mixin arrow($arrow-direction, $arrow-color, $arrow-size){