Skip to content

Instantly share code, notes, and snippets.

Jonarod

Block or report user

Report or block Jonarod

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
@Jonarod
Jonarod / nano-base.css
Last active Feb 10, 2019
Minimalist CSS framework for Xtreme minimal devs :)
View nano-base.css
/* GLOBAL RESET */
@import url("https://gistcdn.githack.com/Jonarod/ab4e61a97aadd79db994c8dea3492a69/raw/49bac14b46470fd7933007fcdbedf219f173d087/reset.css");
/* TYPOGRAPHY */
@import url("https://gistcdn.githack.com/Jonarod/eed956dc8bd45fd90407de3eb740ec80/raw/a721babaa516b56e67bfb83b8d33c28a8f53120d/typography.css");
/* HELPERS */
@import url("https://gistcdn.githack.com/Jonarod/27e396f8b90498763e640ba9a6e27659/raw/c9a2cd4cc2ebdf8e1a17eed60de278639ca15454/helpers.css");
/* GRID */
@Jonarod
Jonarod / grid--xl.css
Created Feb 7, 2019
CSS minimal grid Xtra large screens
View grid--xl.css
@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; }
@Jonarod
Jonarod / grid--lg.css
Created Feb 7, 2019
CSS minimal grid large screens
View grid--lg.css
/* 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--md.css
Created Feb 7, 2019
CSS minimal grid medium screens
View grid--md.css
/* 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--sm.css
Created Feb 7, 2019
CSS minimal grid small screens
View grid--sm.css
/* 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.css
Last active Feb 27, 2019
CSS minimal grid
View grid.css
.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 / helpers.css
Last active Feb 9, 2019
CSS minimal helpers
View helpers.css
.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 / typography.css
Last active Feb 27, 2019
CSS minimal typography
View typography.css
.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 / spacing.css
Last active Feb 10, 2019
CSS minimal spacing
View spacing.css
.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 / reset.css
Last active Feb 9, 2019
CSS minimal reset
View reset.css
*, *::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;}
You can’t perform that action at this time.