css code snippet for sparkle cms

css code snippet sparkle cms

Oh Hello Sparkle CMS...

Here's something I'm somewhat proud of. 
A few years back I decided to not use a ui framework to build my website(although I do enjoy using tailwindcss, tachyons, and bootstrap).
This gave me the opportunity to learn about sass, css resetting, and how to properly use mixins...
To see some of this css in action check out this page I created just for you SparkleCMS.
https://jasonchee.me/sparklecms/hello


_mixins.scss 

// Typography –––––––––––––––––––––––––––––––––––––––––––––––––––––––––(@_@)
$font-serif: 'Marriweather', Georgia, serif;
$font-sans: sans-serif;

@mixin font-smoothing($attr) {
  -webkit-font-smoothing: $attr;
          font-smoothing: $attr;
}

// Colors –––––––––––––––––––––––––––––––––––––––––––––––––––––––––(@_@)
$color-body: #F6F5ED;
$color-background: #F6F5ED;
$color-link: #596A6A;
$color-link-hover: #CA0813;
$color-link-visited: #596A6A;
$color-white-text: #fff8ef;
$color-text: #4C4C4C;
$color-spot: #FF548F;
$color-red-text: #F12625;

// Effects –––––––––––––––––––––––––––––––––––––––––––––––––––––––––(@_@)
@mixin border-radius($amount) {
  -webkit-border-radius: $amount;
     -moz-border-radius: $amount;
       -o-border-radius: $amount;
          border-radius: $amount;
}

@mixin box-shadow($attrs) {
  -webkit-box-shadow: $attrs;
     -moz-box-shadow: $attrs;
       -o-box-shadow: $attrs;
          box-shadow: $attrs;
}

@mixin opacity($amount) {
  -webkit-opacity: $amount;
     -moz-opacity: $amount;
       -o-opacity: $amount;
          opacity: $amount;
}

// Development –––––––––––––––––––––––––––––––––––––––––––––––––––––––––(@_@)
@mixin debug { background: #FFFFEE; outline: 1px solid red !important; }
@mixin hide { display: none; }

// Hacks –––––––––––––––––––––––––––––––––––––––––––––––––––––––––(@_@)
@mixin clearfix {
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  zoom: 1;
}

// Responsive –––––––––––––––––––––––––––––––––––––––––––––––––––––––––(@_@)
@mixin media($query) {
  @if $query == small {
    @media (max-width: 767px) { @content; }
  } @else if $query == medium {
    @media (min-width: 768px) { @content; }
  } @else if $query == large {
    @media (min-width: 992px) { @content; }
  } @else if $query == x-large {
    @media (min-width: 1600px) { @content; }
  } @else {
    @media (#{$query}) { @content; }
  }
}

// CSS Reset –––––––––––––––––––––––––––––––––––––––––––––––––––––––––(@_@)

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}
body{line-height:1;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block;}
nav ul{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:none;}
a{font-size:100%;vertical-align:baseline;background:transparent;margin:0;padding:0;}
ins{background-color:#ff9;color:#000;text-decoration:none;}
mark{background-image: linear-gradient(to right, rgba(250, 209, 109, 0.3), rgba(250, 209, 109, 0.6), rgba(250, 209, 109, 0.5)); font-style:italic; border-radius: 0.6em; border-top-left-radius: 0; border-bottom-right-radius: 0; padding: 0 0.5em;}
del{text-decoration:line-through;}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help;}
table{border-collapse:collapse;border-spacing:0;}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0;}
input,select{vertical-align:middle;}