dxw style

Grid 

<div class="grid-container">

    <span>.grid-container</span>

    <div class="grid-demo column-full"><span>.column-full</span></div>

    <div class="grid-row">
        <div>.grid-row</div>
        <div class="grid-demo column-half"><span>.column-half</span></div>
        <div class="grid-demo column-half"><span>.column-half</span></div>
    </div>

    <div class="grid-row">
        <div>.grid-row</div>
        <div class="grid-demo column-two-thirds">
            <span>.column-two-thirds</span>
        </div>
        <div class="grid-demo column-one-third">
            <span>.column-one-third</span>
        </div>
    </div>

</div>
 
<div class="grid-container">

  <span>.grid-container</span>

  <div class="grid-demo column-full"><span>.column-full</span></div>

  <div class="grid-row">
    <div>.grid-row</div>
    <div class="grid-demo column-half"><span>.column-half</span></div>
    <div class="grid-demo column-half"><span>.column-half</span></div>
  </div>

  <div class="grid-row">
    <div>.grid-row</div>
    <div class="grid-demo column-two-thirds">
      <span>.column-two-thirds</span>
    </div>
    <div class="grid-demo column-one-third">
      <span>.column-one-third</span>
    </div>
  </div>

</div>
 
/* No context defined for this component. */
  • Content: 
    .grid-container {
  @include grid-container;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

.grid-row {
  @include clearfix;
  clear: both;
}

.column-full {
  @include grid-column(4);
  @include grid-media($sbc-grid-medium) {
    @include grid-column(12);
  }
}

.column-half {
  @include grid-column(4);
  @include grid-media($sbc-grid-medium) {
    @include grid-column(6);
  }
}

.column-one-third {
  @include grid-column(4);
  @include grid-media($sbc-grid-medium) {
    @include grid-column(4);
  }
}

.column-two-thirds {
  @include grid-column(4);
  @include grid-media($sbc-grid-medium) {
    @include grid-column(8);
  }
}
  • URL: /components/raw/grid/grid.scss
  • Filesystem Path: components/grid/grid.scss
  • Size: 654 Bytes

NOTE: This is a simple demo of neat, using some utility classes in the markup.