CodePen

HTML

            
              %header
  %img.site-logo{:src => 'http://placehold.it/50'}
  .site-title Site title

%article.main
  %h1 Responsive without max-width
  
  %p Inspired by the 'fluid type' post by Trent Walton I wanted to try my own approach on this subject.
  %blockquote
    %p As I widen the browser window, if at any point the two asterisks appear on the same line of text, I know it’s time to increase the font size.
    .source
      %a{:href => 'http://trentwalton.com/2012/06/19/fluid-type/'} Trent Walton
  %p Lorem ipsum dolor sit amet, consectetur adip*isicing elit, sed do eiusmod *tempor incididunt ut labore et dolore magna aliqua.
  
  %h2 About the paddings
  %p I read about this technique on Elliots blog a while ago. Today I decided to have a go myself.
  %blockquote
    %p Unlike almost any other responsive site I’ve designed, there’s no max-width set anywhere in the CSS file: it’s actually padding set on the html element that does a similar (but more flexible) job.
    .source
      %a{:href => 'http://elliotjaystocks.com/blog/made-to-measure/'} Elliot Jay Stocks

  %img{:src => 'http://placehold.it/400x240/2c3d48/4ebdaa&text=image'}
  %p Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus provident distinctio nulla. Numquam laudantium voluptatibus officiis recusandae inventore itaque nostrum molestias commodi odit ipsa distinctio cumque ipsam omnis magnam adipisci veniam incidunt eligendi quasi vitae autem! Blanditiis ad corporis non pariatur vitae soluta? Quis?
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              @mixin wrapper {
  padding: 0 4%;
  
  @media screen and (min-width: $bp-s) {
    padding: 0 6%;
  }
  @media screen and (min-width: $bp-m) {
    padding: 0 9%;
  }
  @media screen and (min-width: $bp-l) {
    padding: 0 12%;
  }
  @media screen and (min-width: $bp-xl) {
    padding: 0 18%;
  }
  @media screen and (min-width: $bp-xxl) {
    padding: 0 24%;
  }
  @media screen and (min-width: $bp-xxxl) {
    padding: 0 30%;
  }
}
@mixin grid {
  text-align: justify;
  
  &:after {
    content: "";
    display: inline-block;
    width: 100%;
  }
}
@mixin grid__item {
  display: inline-block;
  vertical-align: middle;
}

// Breakpoints (takes a lot of tweaking)
$bp-s: 20em;
$bp-m: 39em;
$bp-l: 48em;
$bp-xl: 57em;
$bp-xxl: 76em;
$bp-xxxl: 109em;

// Typographic Scale: http://bit.ly/1dkuqjZ
// Spacing unit = 16 x 1.777
$su: 28.432px;

html {
  font: 400 1em/1.5 "Lato", sans-serif;
  background-color: #fefefe;
  color: #323232;
  
  @media screen and (min-width: $bp-s) {
    font-size: 112.5%;
  }
  @media screen and (min-width: $bp-m) {
    font-size: 125%;
  }
  @media screen and (min-width: $bp-l) {
    font-size: 137.5%;
  }
  @media screen and (min-width: $bp-xl) {
    font-size: 150%;
  }
  @media screen and (min-width: $bp-xxl) {
    font-size: 162.5%;
  }
  @media screen and (min-width: $bp-xxxl) {
    font-size: 175%;
  }
}

header, article,
p, blockquote, ul,
h1, h2,
.main img {
  margin-top: 0;
  margin-bottom: $su;
}
a { 
  color: #999;
  text-decoration: none;
  border-bottom: 1px solid #999;
}
a:hover { color: #4ebdaa; }

header {
  @include wrapper;
  @include grid;
  background-color: #2c3d48;
}
.site-logo,
.site-title {
  @include grid__item;
}
.site-logo {
  height: 2.369em;
}
h1 { font-size: 1.777em; }
h2 { font-size: 1.333em; }
h1, h2, .site-title { line-height: 1; }
.site-title {
  font-weight: 700;
  color: #fff;
  font-size: 1.777em;
}
.main {
  @include wrapper;
  
  img {
    display:block;
    margin-right:auto;
    margin-left:auto;
    max-width:100%;
  }
}
.quotes-list {
  padding-left: 0;
  list-style: none;
  
  > li { margin-bottom: $su; }
}
blockquote {
  margin-left: 0;
  border-left: $su / 2 solid #eee;
  padding-left: $su;
  
  p {
    font-size: 1.333em;
    line-height: 1.333;
  }
  
  p:last-of-type {
    margin-bottom: $su / 2;
  }
}
.source {
  text-align: right;
}







body:after {
  content:'No media query';
  position:fixed; top:0; right:0;
  background:#f00; color:#fff;
  padding:0 0.33em;
  
  @media screen and (min-width: $bp-s) {
    content: 'small';
  }
  @media screen and (min-width: $bp-m) {
    content: 'medium';
  }
  @media screen and (min-width: $bp-l) {
    content: 'large';
  }
  @media screen and (min-width: $bp-xl) {
    content: 'x-large';
  }
  @media screen and (min-width: $bp-xxl) {
    content: 'xx-large';
  }
  @media screen and (min-width: $bp-xxxl) {
    content: 'xxx-large';
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................