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
  
  %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'}
	
  %h2 About the media query debugging
  %p
    Found the technique via
    %a{:href => "http://www.johanbrook.com/articles/debugging-css-media-queries/"} Johan Brook.
    This helps seeing quickly what media query is applied. 
            
          
!

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';
  }
}
            
          
!

JS

            
              
            
          
!
999px
Loading ..................