Skip to content

Instantly share code, notes, and snippets.

@Jonarod
Jonarod / CSVtoJSON.js
Last active April 3, 2020 09:39
Parse CSV and convert it to JSON with ES6
function CSVToMatrix(csv,delimiter){
let matrix = [];
csv.split('\n').map( l => { l.trim() == "" ? 0 : matrix.push(l.trim().split(delimiter).map(v=>v.trim())) })
return matrix
}
function MatrixToJSON(matrix,from,to){
let jsonResult = []; from = from||0;
matrix.map((a,i) => {
let obj = Object.assign({}, ...matrix[0].map((h, index) => ({[h]: matrix[i][index]})))
@Jonarod
Jonarod / reset.css
Last active February 9, 2019 20:16
CSS minimal reset
*, *::before, *::after {margin:0;padding:0;border:0;border-collapse:collapse;border-spacing:0;box-sizing:border-box;outline:none;font-size:100%;font:inherit;vertical-align:baseline;list-style:none;quotes:none;}
html {font-family: "Quicksand", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;font-weight: 300;font-size: 16px;line-height:1.5;overflow-x:hidden;}
body {font-size : 1em; -webkit-font-smoothing: antialiased; overflow-x: hidden;}
img {max-width: 100%;}
fieldset, img {border:0;}
legend {color:#000;}
li {list-style:none;}
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;font-size:80%;}
table {border-collapse:collapse;border-spacing:0;}
@Jonarod
Jonarod / spacing.css
Last active February 10, 2019 15:46
CSS minimal spacing
.p-0 {padding: 0px !important;}
.p-1 {padding: 4px !important;}
.p-2 {padding: 8px !important;}
.p-3 {padding: 12px !important;}
.p-4 {padding: 16px !important;}
.p-5 {padding: 24px !important;}
.p-6 {padding: 32px !important;}
.p-7 {padding: 48px !important;}
.p-8 {padding: 64px !important;}
.p-9 {padding: 96px !important;}
@Jonarod
Jonarod / typography.css
Last active February 27, 2019 14:57
CSS minimal typography
.fs-1 {font-size:12px;}
.fs-2 {font-size:14px;}
.fs-3 {font-size:16px;}
.fs-4 {font-size:18px;}
.fs-5 {font-size:20px;}
.fs-6 {font-size:24px;}
.fs-7 {font-size:30px;}
.fs-8 {font-size:36px;}
.fs-9 {font-size:48px;}
.fs-10 {font-size:60px;}
@Jonarod
Jonarod / helpers.css
Last active February 9, 2019 17:57
CSS minimal helpers
.shadow-1 {box-shadow: 0 1px 3px hsla(0,0%,0%,.12), 0 1px 2px hsla(0,0%,0%,.24);}
.shadow-2 {box-shadow: 0 3px 6px hsla(0,0%,0%,.15), 0 2px 4px hsla(0,0%,0%,.12);}
.shadow-3 {box-shadow: 0 10px 20px hsla(0,0%,0%,.15), 0 3px 6px hsla(0,0%,0%,.10);}
.shadow-4 {box-shadow: 0 15px 25px hsla(0,0%,0%,.15), 0 5px 10px hsla(0,0%,0%,.05);}
.shadow-5 {box-shadow: 0 20px 40px hsla(0,0%,0%,.2);}
.hide {display:none}
.invisible {vibility: hidden;}
.visible {visibility: visible;}
@Jonarod
Jonarod / grid.css
Last active February 27, 2019 14:25
CSS minimal grid
.row {
display: flex;
flex-wrap: wrap;
margin-top: -15px;
margin-right: 0px;
margin-bottom: 15px;
margin-left: -15px;
}
.row > .col,
.row > [class*="col__"] {
@Jonarod
Jonarod / grid--sm.css
Created February 7, 2019 15:12
CSS minimal grid small screens
/* Small screens: tablets */
@media (min-width: 576px) {
.contain { width: 500px; }
.contain-fluid__slim--sm { width: 70%; }
.contain-fluid__medium--sm { width: 80%; }
.contain-fluid__wide--sm { width: 90%; }
.contain__slim, .contain__slim--sm { width: 300px; }
.contain__medium, .contain__medium--sm { width: 400px; }
.contain__wide, .contain__wide--sm { width: 520px; }
@Jonarod
Jonarod / grid--md.css
Created February 7, 2019 15:13
CSS minimal grid medium screens
/* Medium screens: desktops */
@media (min-width: 768px) {
.contain { width: 700px; }
.contain-fluid__slim--md { width: 70%; }
.contain-fluid__medium--md { width: 80%; }
.contain-fluid__wide--md { width: 90%; }
.contain__slim, .contain__slim--md { width: 500px; }
.contain__medium, .contain__medium--md { width: 600px; }
.contain__wide, .contain__wide--md { width: 720px; }
@Jonarod
Jonarod / grid--lg.css
Created February 7, 2019 15:14
CSS minimal grid large screens
/* Large screens: big screens */
@media (min-width: 992px) {
.contain-fluid__slim--lg { width: 70%; }
.contain-fluid__medium--lg { width: 80%; }
.contain-fluid__wide--lg { width: 90%; }
.contain { width: 900px; }
.contain__slim, .contain__slim--lg { width: 700px; }
.contain__medium, .contain__medium--lg { width: 800px; }
.contain__wide, .contain__wide--lg { width: 920px; }
@Jonarod
Jonarod / grid--xl.css
Created February 7, 2019 15:15
CSS minimal grid Xtra large screens
@media (min-width: 1200px) {
.contain-fluid__slim--xl { width: 70%; }
.contain-fluid__medium--xl { width: 80%; }
.contain-fluid__wide--xl { width: 90%; }
.contain { width: 1000px; }
.contain__slim, .contain__slim--xl { width: 800px; }
.contain__medium, .contain__medium--xl { width: 900px; }
.contain__wide, .contain__wide--xl { width: 1020px; }
.items__start--xl { align-items: flex-start; }