CodePen

HTML

            
              <h1>TinyBoots</h1>
<h2>A CSS framework for pixel fingers.</h2>

<ul class="box">
  <li>
    <button>Button</button>
    <input type="radio" name="radio" checked>
    <input type="radio" name="radio">
    <input type="checkbox" data-mb="check" checked>
    <input type="checkbox" data-mb="switch">
  </li>
  <li>
    <input type="range">
    <progress value=".5"></progress>
  </li>
  <li>
    <input type="number" value="0">
    <input type="text" placeholder="Text Input">
    <textarea placeholder="Text Area"></textarea>
  </li>
</ul>

<p class="fixed-size">Joking? Slide below. ↓</p>

<input id="root-size" type="range" min="40" value="40" max="200">

<p class="info">Half joking! ;-D Trying out resizable components based on REMs, the SCSS Extend feature and some Shadow DOM hacking. Theme is "stolen" from <a href="http://montagejs.org">MontageJS</a>.</p>
  

            
          
!
via HTML Inspector

CSS

            
              html {
  font-size: 4px; 
}

// vars ----------------------

// only the "darker" hues work
// like 310, 206, 26, 0
$hue: 206;

$color-back: hsl($hue,20%,90%);
$border: 1px solid hsl($hue,30%,82%);


// Extends ----------------------

.MB {
  appearance: none;
  font-size: 1rem;
}

.MB-action {
  color: hsl(0,0%,95%);
  border: 1px solid hsl($hue,100%,40%);
  text-shadow: 0 1px 0 hsla(0,0%,0%,.1);
  box-shadow: inset 0 1px 0 hsla(0,0%,100%,.25), 0 .1em .3em hsla(0,0%,0%,.15);
  @include background-image(linear-gradient( hsl($hue,100%,70%), hsl($hue,100%,50%) ));
  &:hover {
    @include background-image(linear-gradient( hsl($hue,100%,74%), hsl($hue,100%,54%) ));
  }
  &:active {
    @include background-image(linear-gradient( hsl($hue,100%,64%), hsl($hue,100%,44%) ));
  }
}

.MB-check {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: .3rem;
  border: $border;
  background: $color-back;
}

.MB-txt {
  width: 12rem;
  height: 2.4rem;
  padding: .5rem;
  font-family: inherit;
  color: hsl(0,0%,30%);
  border-radius: .3rem;
  border: $border;
  background: hsl(0,0%,98%);
  &:hover {
    background: hsl(0,0%,100%);
  }
  &:focus {
    outline: none;
    @extend .MB-focus;
  }
}

.MB-track {
  border: $border;
  background: $color-back;
}

.MB-focus {
  border-color: hsl($hue,100%,80%);
    background: hsl($hue,100%,97%);
}


// controls ----------------------

// button --------------------------------

button {
  @extend .MB;
  @extend .MB-action;
  border-radius: .4rem;
  padding: 0 1rem;
  height: 2.4rem;
  font-weight: bold;
}


// checks --------------------------------

input[type="checkbox"],
input[type="radio"] {
  @extend .MB;
  @extend .MB-check;
  position: relative;
  cursor: pointer;
}

input[type="checkbox"][data-mb="check"]:before {
  border-radius: .2rem;
}

input[type="radio"],
input[type="radio"]:before {
  border-radius: 50%;
}

input[type="checkbox"][data-mb="check"],
input[type="radio"] {
  &:checked {
    @extend .MB-focus;
  }
  &:before {
    @extend .MB-action;
    content:"";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    border: none;
    box-shadow: inset 0 0 0 .4rem hsla(0,0%,100%,.92);
    visibility: hidden;
  }
  &:checked:before {
    visibility: visible;
  }
}

input[type="checkbox"][data-mb="switch"] {
  width: 2.8rem;
  height: 1.4rem;
  border-radius: 1.4rem;
  
  &:before {
    @extend .MB-action;
    content:"";
    position: absolute;
    margin: 0 1px 0 0;
    left:0; right: 50%;
    bottom:0; top:0;
    border-radius: inherit;
  }
  &:checked {
    @extend .MB-focus;
  }
  &:checked:before {
    left: 50%; right: 0;
    margin: 0 0 0 1px;
  }
}


// range --------------------------------

input[type="range"] {
  @extend .MB;
  @extend .MB-track;
  width: 8rem;
  height: .4rem;
  min-height: 3px;
  border-radius: .2rem;
  
  &::-webkit-slider-thumb {
    @extend .MB;
    @extend .MB-action;
    width: 1.6rem;
    height: 1.6rem;
    min-width: 5px;
    min-height: 5px;
    border-radius: 50%;
    cursor: pointer;
  }
}


// progress --------------------------------

progress {
  @extend .MB;
  @extend .MB-track;
  width: 8rem;
  height: .8rem;
  min-height: 3px;
  border-radius: .3rem;
  pointer-events: none;
  &::-webkit-progress-bar {
    background: transparent;
  }
  &::-webkit-progress-value {
    @extend .MB-action;
    border-radius: .25rem;
  }
}


// number --------------------------------

input[type="number"] {
  @extend .MB;
  @extend .MB-txt;
  width: 6rem;
  position: relative;
  border-right: none;
  
  &::-webkit-inner-spin-button {
    @extend .MB;
    width: 2rem;
    height: 2.3rem;
    position: relative;
    cursor: pointer;
  }
  &::-webkit-inner-spin-button:before,
  &::-webkit-inner-spin-button:after {
    @extend .MB-action;
    position: absolute;
    width: 1.9rem;
    line-height: 1;
    text-align: center;
  }
  &::-webkit-inner-spin-button:before {
    content:"+";
    top: 0; bottom: 48%; right: 0; left: 0;
    border-bottom: 1px solid hsl(0,0%,82%);
    border-top-right-radius: .3em;
  }
  &::-webkit-inner-spin-button:after {
    content:"-";
    top: 48%; right: 0; bottom: 0; left: 0;
    border-bottom-right-radius: .3rem;
  }
}


// text --------------------------------

input[type="text"] {
  @extend .MB;
  @extend .MB-txt;
}


// textarea --------------------------------

textarea {
  @extend .MB;
  @extend .MB-txt;
  height: 4rem;
  resize: vertical;
  &::-webkit-resizer {
    @include background-image(linear-gradient( -45deg, hsla(0,0%,0%,.1) 4px, hsla(0,0%,0%,0) 4px ));
  }
}



// --------------------------------

button,
textarea,
input,
progress {
  margin: .3rem;
  vertical-align: middle;
}

#root-size {
  width: 200px;
  margin-bottom: 20px;
}

// --------------------------------

* { box-sizing: border-box; }

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);

html {
  font-family: Open Sans, sans-serif; 
}
html, body { height: 100%; }

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: hsl(0,0%,95%);
  text-align: center;
}

h1 {
  font-size: 20px;
  margin: 0 0 6px 0;
  padding-top: 30px;
}

h2 {
  margin: 0 0 30px 0;
  font-size: 14px;
  font-weight: normal;
  color: hsl(0,0%,50%);
}

a {
 text-decoration: none;
  color: hsl(206,50%,50%);
}

p {
  max-width: 460px;
  line-height: 1.4;
  margin-left: auto;
  margin-right: auto;
}

.info {
  padding-bottom: 30px;
}

.box {
  padding: 20px;
  list-style: none;
}

.box li {
  padding: .5rem;
}

.fixed-size {
 font-size: 12px;
 margin-top: 30px; 
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $('#root-size').change(function () {                    
  var fontsize = $(this).val()/10 + "px";
  $('html').css("font-size", fontsize );
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................