kieranmv95
/ _arrow.scss
Last active
April 27, 2018 04:11
Create pure CSS triangles in a matter of seconds with this scss mixin
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
| /* | |
| Kieran Venison scss mixin | |
| [email protected] | |
| Example usage: http://codepen.io/Kieranmv95/pen/QNYLvE | |
| */ | |
| // Name: Arrow | |
| // Params: direction, color, size | |
| @mixin arrow($arrow-direction, $arrow-color, $arrow-size){ | |
kieranmv95
/ _spacing-helper.scss
Last active
February 6, 2019 02:10
Generates a array of spacing helper classes for margin and padding
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
| // 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
/ _center.mixin.scss
Last active
April 26, 2018 20:07
Center anything horizontally vertically or on both axis in 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
| // 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%); |
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
| { | |
| "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, |
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
| [user] | |
| email = [email protected] | |
| name = kieranmv95 | |
| [alias] | |
| co = checkout | |
| cob = checkout -b | |
| cm = commit -m | |
| s = status -s | |
| b = branch |
kieranmv95
/ useTheme.js
Last active
January 6, 2021 15:30
React hook for getting the users preffered themeName from OS and then adding a manual toggle option
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
| 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 | |
| // |