A Pen by Ricardo Magalhães.

A-Pen-by-Ricardo-Magalhães.markdown

A Pen by Ricardo Magalhães

A Pen by Ricardo Magalhães on CodePen.

License.

index.html

<main>
<section class="promotions">
  <ul>
    <li class="flexible"></li>
    <li></li>
  </ul>
</section>

<section class="games-list">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</section>
  
 <section class="promotions-2">
  <ul>
    <li class="flexible">
      <header>
      </header>
    </li>
    <li class="flexible">
      <header>
      </header>
    </li>
  </ul>
</section>
  
<section class="promotions-3">
  <ul>
    <li>
    </li>
  </ul>
</section>

<section class="widgets">
  <ul>
    <li></li>
    <li></li>
    <li></li>
  </ul>
</section>
</main>

style.scss

@import "compass";
/***************************

Usage:

Jump to developer's styles section.
Each element/block is @extended based on a 1 to 6 grid.
Automatic resizing to a 5-grid layout happens when resized.

Available rules:

%col-1-6
(gives width based on the 6 column layout)

%hide-on-small-viewport
(hides a given grid for small resolution)

%col-2-of-3
(under a certain viewport size, col2 has a different specific width. This is a shortcut to apply it.)

*/

$grid-height: 24px;
$grid-width: 24px;

$column-width: $grid-width * 6; // 144px
$column-width-large: $grid-width * 7.5; // 180px

$gutter-height: $grid-height / 2; // 12px
$gutter-width: $grid-width / 2; // 12px

$gutter-ends-phone-portrait: 10px; // width? sides?
$gutter-ends: $grid-width / 2; // 12px
$gutter-ends-large: $grid-width * 0.75; // 18px

$columns-2-width: $column-width * 2 + $gutter-width; // 300px
$columns-3-width: $column-width * 3 + $gutter-width * 2; // 456px
$columns-2-width-large: $column-width-large * 2 + $gutter-width; // 372px
$columns-3-width-large: $column-width-large * 3 + $gutter-width * 2; // 564px
$columns-4-width-large: $column-width-large * 4 + $gutter-width * 3; // 756px
$columns-5-width-large: $column-width-large * 5 + $gutter-width * 4; // 948px
$columns-6-width-large: $column-width-large * 6 + $gutter-width * 5; // 1140px

$breakpoint-columns-2: $columns-2-width + $gutter-ends-phone-portrait * 2; // 320px
$breakpoint-columns-3: $columns-3-width + $gutter-ends * 2; // 480px
$breakpoint-columns-3-large: $columns-3-width-large + $gutter-ends-large * 2; // 600px
$breakpoint-columns-4-large: $columns-4-width-large + $gutter-ends-large * 2; // 792px
$breakpoint-columns-5-large: $columns-5-width-large + $gutter-ends-large * 2; // 984px
$breakpoint-columns-6-large: $columns-6-width-large + $gutter-ends-large * 2; // 1176px


/**** Extendables ****/
%hide-on-small-viewport {
  @media only screen and (max-width: 983px) {
      display: none;
  }
}

%column {
  float: left;
  margin: 0 0 12px 12px;
  
  // Hide 6th column to only display 5 under small viewport.
  @media only screen and (max-width: 1175px) and (min-width: 984px) {
    &:nth-child(5) {
      display: none;
   }
  }
}

// Generate column sizes
@for $i from 1 through 6 {
  %col-#{$i} {
    position: relative;
    width: $column-width-large * $i + $gutter-width * ($i - 1);
    &:after {
      text-align: center;
      content: $column-width-large * $i + $gutter-width * ($i - 1) + "";
      position: absolute;
    }
  }
}

// Resizing for smaller viewport.
@for $i from 3 through 6 {
  %col-#{$i} {
    @media only screen and (max-width: 1175px) and (min-width: 984px) {
      width: $column-width-large * ($i - 1) + $gutter-width * ($i - 2);

      &:after {
        text-align: center;
        content: $column-width-large * ($i - 1) + $gutter-width * ($i - 2) + "";
        position: absolute;
      }     
    }
  }
}

/**** Exceptions *****/

@media only screen and (max-width: 1175px) and (min-width: 984px) {
  %col-2-of-3 {
    width: 308px;
    &:after {content: "308px";}
  }
  
  %col-3 {
    width: 468px;
    &:after {content: "468px";}
  }
}


/*****************************************************
/**** Developer Styles ****/
/*****************************************************/

li {
  @extend %column;
  background: url(http://placekitten.com/g/1000/700) no-repeat;
  background-size: cover;
  opacity: .8;
  
}

// Promotions section
.promotions li:nth-child(1) {
  @extend %col-4;
}

.promotions li:nth-child(2) {
  @extend %col-2;
  @extend %hide-on-small-viewport;
}

// Games list section
.games-list li {
  @extend %col-1;
}

.promotions-2 li {
  @extend %col-3;
}

// Widgets section
.widgets li {
  @extend %col-2;
  @extend %col-2-of-3; // This has a different width.
}

// Promotions 3 section
.promotions-3 li {
  @extend %col-6;
}

// Main content
main {
  margin: 0 auto; 
  
  @media screen and (min-width: 600px) {
    width: 768px;
  }
  
  @media screen and (min-width: 1176px) {
    width: 1152px;
  }
  
  @media only screen and (max-width: 1175px) and (min-width: 984px) {
    width: 960px;
  }
}


/****** CSS RESET *****/

li { list-style: none; display: block; height: 200px; }

li:after {
  text-align: center;
  left: 40%;
  top: 30%; 
  font-size: 2em;
  color: #fff;
}

ul {
  margin: 0;
  overflow: hidden;
  padding: 0;
}

li {
  //background: #ddd;
  list-style: none;
  margin: 0 0 $gutter-height $gutter-width;
}

img {
  vertical-align: top;
}