Responsive Grid With Images (fluid)

index.html

<div class="wrap">
  <nav class="main-nav">
    <div class="logo"></div>
  </nav>
  <div class="full-bleed fma-box">
    <div class="carousel">
      <div class="title-text">
        <h1>Magna Adipiscing Malesuada Dolor</h1>
        <p>Etiam porta sem malesuada magna mollis euismod.</p>
      </div>
    </div>
  </div>
  <div class="full-bleed sec-fma">
    <div class="grid upwards">
      <div class="column1">
        <div class="title-text">
          <h3>Sollicitudin Vulputate Amet Cursus</h3>
          <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
        </div>
      </div>
    <div class="column2">
      <div class="title-text"> 
        <h3>Magna Adipiscing Malesuada Dolor</h3>
        <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
        </div>
      </div>
    </div>
  </div>
  <div class="grid">
    <div class="fixed-module lg-image">      
    </div>
    <div class="fixed-module md-image top">      
    </div>    
    <div class="fixed-module md-image bottom">      
    </div>
  </div>
</div>

Responsive Grid With Images (fluid).markdown

Responsive Grid With Images (fluid)

This is the Responsive Grid proposed for BMW USA.

A Pen by Mark Reilly on CodePen.

License.

style.css

@import "modular-scale";
@import "breakpoint";
@import "susy";

//////////////////////////////
// VARIABLES: For layout breakpoints 
//////////////////////////////

// https://github.com/at-import/breakpoint/wiki/Respond-To
$breakpoint-to-ems: true;

//// Older Syntax for Codepen
$breakpoints: add-breakpoint("xxx-large", (1440px));
$breakpoints: add-breakpoint("xx-large", (1240px 1439px));
$breakpoints: add-breakpoint("x-large", (960px 1239px, 'no-query' true));
$breakpoints: add-breakpoint("large", (768px 959px));
$breakpoints: add-breakpoint("medium", (480px 767px));
$breakpoints: add-breakpoint("small", (240px 479px));

$xxx-large-layout: layout(1600px 12);
$xx-large-layout: layout(12);
$x-large-layout: layout(12);
$large-layout: layout(9);
$medium-layout: layout(6);
$small-layout: layout(4);

$susy: (
  container-position: center,
  gutters: 1/4,
  math: fluid,
  output: float,
  gutter-position: split,
	global-box-sizing: border-box,
	debug: (image: show, // show | hide
    color: rgba(red, .25),
    output: background // background | overlay
    )
); 

////
// Modular Scale Variables
////
$ms-base: .813em, 1.25em; // 13, 20
$ms-ratio: 1.175;

////
// CSS Proper
//// 
@include border-box-sizing;

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: ms(12);
  line-height: 1;
  text-transform: uppercase;
  margin-top: 0;
}

h2 {
  font-size: ms(9);
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin-top: 0;
}

h3 {
  font-size: ms(6);
  line-height: 1.25;
  text-transform: uppercase;
  font-weight: bold;
}
h4 {
  font-size: ms(5);
}
h5 {
  font-size: ms(4);
}
h6 {
  font-size: ms(3);
}

:root {

  @include respond-to("small") {
    font-size: 12px;
    line-height: 1.3;
  }
  @include respond-to("medium") {
    font-size: 12px;
    line-height: 1.4;
  }
  @include respond-to("large") {
    font-size: 13px;
    line-height: 1.5;
  }
  @include respond-to("x-large") {
    font-size: 14px;
    line-height: 1.5;
  }  
  @include respond-to("xx-large") {
    font-size: 16px;
    line-height: 1.5;
  }
  @include respond-to("xxx-large") {
    font-size: 20px;
    line-height: 1.5;
  }
}

.title-text {
  color: #fff;

  h2 {
    padding-top: 30%;
  }
  h1, 
  h2, 
  h3 {
    font-weight: normal;
  }
}
.full-bleed {
  max-width: 1920px;
  margin: 0 auto;
}
.fma-box {
  background-image: url(http://placekitten.com/1920/640);
  background-size: cover;
  background-position: top center;
  .title-text {
    max-width: span(6 of 12);
    //padding-left: span(1 of 12);
    padding-left: span(1 of 12 wide);
  }
}

.logo {
  display: block;
  background-color: #ddd;
  background-image: linear-gradient(to top right, grey 25%, transparent 25%, transparent 75%, grey 75%, grey), 
linear-gradient(to top right, grey 25%, transparent 25%, transparent 75%, grey 75%, grey);;;
  margin: 4px 8px 4px 8px;
  border-radius: 50%;
  border: .725em solid black;
}
.sec-fma {
  .title-text {
    padding-left: span(1 of 6 wide);
    max-width: span(5 of 6 wide);
  }
}
.upwards {
  border-top: 6px #fff solid;
}
.column1 {
  background-image: url(http://placekitten.com/960/480);
  background-size: cover;
  height: 100%;    
  border-right: 3px #fff solid;
  }
.column2 {
  background-image: url(http://placekitten.com/960/481);
  background-size: cover;
  height: 100%;
  border-left: 3px #fff solid;
}
.fixed-module {
  background-repeat: no-repeat;
}
.lg-image {
  background-image: url(http://placekitten.com/g/800/450);
  background-size: cover;
}
.md-image {
  &.top {
    background-image: url(http://placekitten.com/g/400/225);
  }
  &.bottom {
    background-image: url(http://placekitten.com/g/400/226);
  }
  background-size: cover;
}

// Layout

.wrap {

 @include respond-to("small") {

    @include layout($small-layout);

    @include show-grid(4);
    @include container();
  }

  @include respond-to("medium") {

    @include layout($medium-layout);

    @include show-grid(6);
    @include container();

  }

  @include respond-to("large") {

    @include layout($large-layout);

    .grid {
      @include show-grid(9);
      @include container();
    }
  }

    @include respond-to("x-large") {

    @include layout($x-large-layout);
  
   .main-nav {
      @include container();
    }
    .grid {
      @include container();
    }
    .carousel {
      @include container();
    }
    .logo {
      height: 64px;
      width: 64px;
      background-size: 64px 64px;
      background-position:0 0, 22px 22px;
    }
    .carousel {
      height: 540px;
    }
    .column1, .column2 {
      @include span(6 of 12 wide);
      margin: 0;
    }
    .lg-image {
      padding-top: span(8 of 12 wide) / 16 * 9;
      @include span(8 of 12 wide);
      margin-left: 0;
      margin-right: 0;
    }
    .upwards {
      height: 480px;
    }   
    .md-image {
      //height: 180px;
      padding-top: span(4 of 12 wide) / 16 * 9;
      @include span(4 of 12 wide);
      margin-left: 0;
      margin-right: 0;
    }
  }

  @include respond-to("xx-large") {

    @include layout($xx-large-layout);
    .main-nav {
      @include container();
    }
    .grid {
      @include container();
    }
    .carousel {
      @include container();
    }
    
    .carousel {
      height: 540px * 1.2;
    }
    .upwards {
      height: 480px * 1.2;
    }
    .logo {
      height: 80px;
      width: 80px;
      background-size: 80px 80px;
      background-position:0 0, 26px 26px;
    }
    .column1, .column2 {
      @include span(6 of 12 wide);
      margin: 0;
    }
    .lg-image {
      height: 450px;
      @include span(8 of 12 wide);
      margin-left: 0;
      margin-right: 0;
    }
    .md-image {
      height: 225px;
      @include span(4 of 12 wide);
      margin-left: 0;
      margin-right: 0;
    }
  }
  
   @include respond-to("xxx-large") {

    @include layout($xxx-large-layout);
    .main-nav {
      @include container();
    }
    .grid {
      @include container();
    }
    .carousel {
      @include container();
    }
    .carousel {
      height: (540px * 1.2) * 1.2;
    }
    .upwards {
      height: (480px * 1.2) * 1.2;
    }
    .logo {
      height: 80px;
      width: 80px;
      background-size: 80px 80px;
      background-position:0 0, 26px 26px;
    }
    .column1, .column2 {
      @include span(6 of 12 wide);
      margin: 0;
      border-top: 6px #fff;
    }
    .lg-image {
      height: 450px;
      @include span(8 of 12 wide);
      margin-left: 0;
      margin-right: 0;
    }
    .md-image {
      height: 225px;
      @include span(4 of 12 wide);
      margin-left: 0;
      margin-right: 0;
    }
  }
}