A Pen by sheriffderek.

Basic:-reset.markdown

Basic: reset

This is the user-reset I use on top of normalize.

A Pen by sheriffderek on CodePen.

License.

basic:-reset.markdown

basic: reset

This is the user-reset I use on top of normalize.

A Pen by sheriffderek on CodePen.

License.

index.html

<!-- 

I'm using this as my reset for codepen from now on.

-->

<h1 style="font-size: 4em">basic reset</h1>

script.js

// just foolin around --- 
// styles are in here to keep the scss clean of actual "Style"
/*$("h1").css('text-align','center');
wHeight = $(window).height();
$("h1").css('margin-top',wHeight);*/

/*$("body").html("<h1>Sheriff reset</h1>");*/

style.scss

@import "compass";
// $box model
*, *:before, *:after { 
  -moz-box-sizing: border-box; 
  -webkit-box-sizing: border-box; 
  box-sizing: border-box; 
}

// $clearfix
.clearfix { // clear floats
  zoom:1;
  &:before, &:after {
    content: "\0020";
    display: block;
    height: 0;
    overflow: hidden;
  }
  &:after {
    clear: both;
  }
}

// $global-cursor reset
html,
body {
  cursor: default;
}
code {
  cursor: text;
}
a,
label,
button, 
input[type="radio"], 
input[type="submit"],
input[type=file], 
input[type="checkbox"] {
  cursor: pointer;
}
button[disabled], 
input[disabled] {
  cursor: default;
}

// $global scrollbar fix // eh
html { // keep scroll bar to avoid shifting width
  margin: 0; // remove default
  @include bp(m-plus) {
    overflow-y: scroll;
  }
}





// to center block elements
@mixin center-block {
  margin-right: auto;
  margin-left: auto;
}




// @extend .clearfix to major elements
.master-container, 
.container, 
.inner-w, .block-list {
  @extend .clearfix;
}






body {
  margin: 0; padding: 0;
  font-family: 
    "HelveticaNeue-Light", 
    "Helvetica Neue Light", 
    "Helvetica Neue", 
    Helvetica, Arial, 
    "Lucida Grande", sans-serif; 
}

// $basic structure
.container {
  position: relative;
  // so we can absolutly position things inside if desired
}

.container, .column, .block-list, .block {
  width: 100%;
  float: left;
}

// $inner-wrapper and modifiers
.trim-width {
  max-width: $trim-width;
}

.inner-w {
  width: 100%;
  @include center-block;
  max-width: $trim-width;
}




// $columns
.column {
  //
}

// $responsive images
.image-w > img { // images in .image-w respond to it's wrapper size
  display: block;
  width: 100%;
  height: auto;
}

// $lists (block)
.block-list { // remove global list styling
  list-style: none;
  padding: 0; // remove default indent
  margin: 0;  // remove default margins from top and bottom
  > li {
    display: block;
    /*width: 100%;*/
    float: left;
  }
}

// $links
a { // reset global anchor links
  text-decoration: none;
  color: inherit;
}

p a {
  text-decoration: underline;
}
  
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  margin: 0;
  padding: 0;
}


// @davidwalshblog
input[placeholder] { text-overflow: ellipsis; }
::-moz-placeholder { text-overflow: ellipsis; } /* firefox 19+ */
input:-moz-placeholder { text-overflow: ellipsis; }