Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  
  <div class="container">
    <div class="row">
      <div class="content-main">
        Main content
      </div>
      <div class="content-secondary">
        Secondary
      </div>
    </div>
  </div>
</body>
</html>
 
$grid-gutter-width: 1.5rem;
$grid-columns: 12;
*{
  box-sizing: border-box;
}
html {
  font-size: 16px;
  font-family: "Helvetica Neue", sans-serif;
  margin: 0;
}
body {
  font-size: 1rem;
  padding: 1.5rem;
  background-color: #fff;
}
.content-main,
.content-secondary {
  background: #eee;
  line-height: 100px;
  text-align: center;
  border: 1px solid #ddd;
}
// Grid system
//
// Generate semantic grid columns with these mixins.
// Centered container element
@mixin make-container($gutter: $grid-gutter-width)
{
  margin-right: auto;
  margin-left: auto;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
}
// Creates a wrapper for a series of columns
@mixin make-row($gutter: $grid-gutter-width)
{
  margin-left:  ($gutter / -2);
  margin-right: ($gutter / -2);
}
@mixin make-col($gutter: $grid-gutter-width)
{
  position: relative;
  float: left;
  min-height: 1px;
  padding-left:  ($gutter / 2);
  padding-right: ($gutter / 2);
}
@mixin make-col-span($columns)
{
  width: percentage(($columns / $grid-columns));
}
@mixin make-col-offset($columns)
{
  margin-left: percentage(($columns / $grid-columns));
}
@mixin make-col-push($columns)
{
  left: percentage(($columns / $grid-columns));
}
@mixin make-col-pull($columns)
{
  right: percentage(($columns / $grid-columns));
}
.container {
  @include make-container();
}
.row {
  @include make-row();
}
.content-main {
  @include make-col();
  @media (max-width: 32em) {
    @include make-col-span(6);
  }
  @media (min-width: 32.1em) {
    @include make-col-span(8);
  }
}
.content-secondary {
  @include make-col();
  @media (max-width: 32em) {
    @include make-col-span(6);
  }
  @media (min-width: 32.1em) {
    @include make-col-span(4);
  }
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kkirschepro
0viewers