EaRPjN

EaRPjN.markdown

EaRPjN

A Pen by Captain Anonymous on CodePen.

License.

index.html

<h1>Normal bootstrap class names</h1>
<br>
<div class="container">
    <div class="row">
        <main class="col-xs-12 col-sm-12 col-md-6 col-lg-6" style="background-color: red; color: #ffffff;">
         col-xs-12 col-sm-12 col-md-6 col-lg-6
        </main>
        <aside class="col-xs-12 col-sm-6 col-md-3 col-lg-3" style="background-color: green; color: #ffffff;">
        col-xs-12 col-sm-6 col-md-3 col-lg-3
        </aside>
        <aside class="col-xs-12 col-sm-6 col-md-3 col-lg-3" style="background-color: blue; color: #ffffff;">
        col-xs-12 col-sm-6 col-md-3 col-lg-3
        </aside>
    </div>
</div>


<br>
<br>
<h1>Using custom bootstrap class names - layout should be the same as above</h1>
<br>

<div class="content-sidebar-sidebar">
  
  <div class="site-inner">
    <div class="content-sidebar-wrap">
        <main class="content" style="background-color: red; color: #ffffff;">
          main content
        </main>
        <aside class="sidebar-primary" style="background-color: green; color: #ffffff;">
          sidebar primary
        </aside>
        <aside class="sidebar-secondary" style="background-color: blue; color: #ffffff;">
          sidebar secondary
        </aside>
    </div>
</div>
 
</div>

style.less

.site-inner {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px;
}
.site-inner:before,
.site-inner:after {
  content: " ";
  /* 1 */

  display: table;
  /* 2 */

}
.site-inner:after {
  clear: both;
}
.site-inner:before,
.site-inner:after {
  content: " ";
  /* 1 */

  display: table;
  /* 2 */

}
.site-inner:after {
  clear: both;
}
@media (min-width: 768px) {
  .site-inner {
    width: 750px;
  }
}
@media (min-width: 992px) {
  .site-inner {
    width: 970px;
  }
}
@media (min-width: 1200px) {
  .site-inner {
    width: 1170px;
  }
}
.content-sidebar-wrap {
  margin-left: -15px;
  margin-right: -15px;
}
.content-sidebar-wrap:before,
.content-sidebar-wrap:after {
  content: " ";
  /* 1 */

  display: table;
  /* 2 */

}
.content-sidebar-wrap:after {
  clear: both;
}
.content-sidebar-wrap:before,
.content-sidebar-wrap:after {
  content: " ";
  /* 1 */

  display: table;
  /* 2 */

}
.content-sidebar-wrap:after {
  clear: both;
}
.content-sidebar .content {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .content-sidebar .content {
    float: left;
    width: 75%;
  }
}
@media (min-width: 992px) {
  .content-sidebar .content {
    float: left;
    width: 66.66666666666666%;
  }
}
@media (min-width: 768px) {
  .content-sidebar .content {
    float: left;
    width: 100%;
  }
}
.content-sidebar .sidebar-primary {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .content-sidebar .sidebar-primary {
    float: left;
    width: 25%;
  }
}
@media (min-width: 992px) {
  .content-sidebar .sidebar-primary {
    float: left;
    width: 33.33333333333333%;
  }
}
@media (min-width: 768px) {
  .content-sidebar .sidebar-primary {
    float: left;
    width: 100%;
  }
}
.content-sidebar-sidebar .content {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .content-sidebar-sidebar .content {
    float: left;
    width: 50%;
  }
}
@media (min-width: 992px) {
  .content-sidebar-sidebar .content {
    float: left;
    width: 50%;
  }
}
@media (min-width: 768px) {
  .content-sidebar-sidebar .content {
    float: left;
    width: 100%;
  }
}
.content-sidebar-sidebar .sidebar-primary,
.content-sidebar-sidebar .sidebar-secondary {
  position: relative;
  float: left;
  width: 100%;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px;
}
@media (min-width: 1200px) {
  .content-sidebar-sidebar .sidebar-primary,
  .content-sidebar-sidebar .sidebar-secondary {
    float: left;
    width: 25%;
  }
}
@media (min-width: 992px) {
  .content-sidebar-sidebar .sidebar-primary,
  .content-sidebar-sidebar .sidebar-secondary {
    float: left;
    width: 25%;
  }
}
@media (min-width: 768px) {
  .content-sidebar-sidebar .sidebar-primary,
  .content-sidebar-sidebar .sidebar-secondary {
    float: left;
    width: 50%;
  }
}