2
\$\begingroup\$

I now use a grid system similar to that of the one created by André Luís located here: http://andr3.net/blog/post/142 and evolved by Lea Verou located here: http://lea.verou.me/2011/01/styling-children-based-on-their-number-with-css3/

Made my first grid system supported back to IE8 if respond.js is used (or another method such as modernizr, etc.)

This was made really just for use in a project I'm working on, so it's not as robust as it could be, but figured I'd share it and see what others thought of it.

It's also in a gist: here

  /*********************

    Stupid Simple Grid

  *********************/

  /* fix box-model */
  .row,.col,
  .row:after,.col:after,
  .row:before,.col:before{
    -webkit-box-sizing:border-box;
       -moz-box-sizing:border-box;
            box-sizing:border-box}

  /* clearfix */
  .row{*zoom:1}
  .row:before,
  .row:after{
    display:table;
    content:"";
    line-height:0}
  .row:after{clear:both}

  .row{
    padding:0;
    margin:0;} /* should probably put *zoom:1; here but for clarity it's separated*/
  ul.row,
  li.col{list-style-type:none}
  .col{float:left}
  .col,
  .fill{width:100%}

  /* grid mq */
  @media (min-width:30em){
    .col:not(.fill){width:50%}
    .col.third:nth-child(3),
    .col.fifth:nth-child(5),
    .col.fourth+div:nth-child(3).fill,
    .col.fifth+div:nth-child(3).fill{width:100%}
    .col+.fill{width:50%}

  }
  @media (min-width:50em){
    .col.half{width:50%}
    .col.half+.fill{width:50%}
    .col.third,
    .col.third:nth-child(3){width:33.333%}
    .col.third+.fill{width:66.666%}
    .col.fourth{width:25%}
    .col.fourth+.fill{width:75%}
    .col.fourth+div:nth-child(3).fill{width:50%;}
    .col.fifth,
    .col.fifth:nth-child(5){width:20%}
    .col.fifth+.fill{width:80%}
    .col.fifth+div:nth-child(3).fill{width:60%;}
    .col.fifth+div:nth-child(4).fill{width:40%;}
  }



/* ie8 overrides - I'd suggest using conditionals with either ".ie-8 class or loading in a separate legacy stylesheet with conditionals */
@media (min-width:30em){
  .row>.col{width:50%}
  .row>.fill.col{width:100%}
  .row>.half.col+.fill,
  .row>.third.col+.fill,
  .row>.fourth.col+.fill,
  .row>.fifth.col+.fill,
  .row>.fifth.col+div+div+.fill{width:50%}
  .row>.fourth.col+div+.fill,
  .row>.fifth.col+div+.fill,
  .row>.third.col+div+div,
  .row>.fifth.col+div+div+div+div{width:100%}
}
@media (min-width:50em){
  .row>.third.col,
  .row>.third.col+div+div{width:33.333%}
  .row>.third.col+.fill{width:66.666%}
  .row>.fourth.col{width:25%}
  .row>.fourth.col+.fill{width:75%}
  .row>.fourth.col+div+.fill{width:50%}
  .row>.fifth.col+.fill{width:80%}
  .row>.fifth.col,
  .row>.fifth.col+div+div+div+div{width:20%}
  .row>.fifth.col+div+.fill{width:60%}
  .row>.fifth.col+div+div+.fill{width:40%}
}






  /*******************

  demo specific styles

  *******************/

  html,body{
    font: 300 16px/1.2 "HelveticaNeue-Light",
                       "Helvetica Neue Light",
                       "Helvetica Neue",
                       Helvetica,
                       Arial,
                       "Lucida Grande",
                       sans-serif}
  h1{
    font-family:inherit;
    font-size:1.25em;
    font-weight:800}
  h1,p{margin:0 0 5px}
  .row{margin-bottom:.313em}
  .col{
    background-color:slategray;
    border:.063em solid white;
    color:white;
    padding:.188em .438em}
  <script type="text/javascript" src="//scottjehl.github.io/Respond/dest/respond.src.js"></script>
  <h1>Grid System</h1>
  <p>Simple basic grid</p>

  <!-- two 50% columns (e.g. 1/2) -->
  <div class="row">
    <div class="col half">1/2</div>
    <div class="col half">1/2</div>
  </div>

  <!-- three 33.333% columns (e.g. 1/3rd) -->
  <div class="row">
    <div class="col third">1/3</div>
    <div class="col third">1/3</div>
    <div class="col third">1/3</div>
  </div>

  <!-- four 25% columns (e.g. 1/4th) -->
  <div class="row">
    <div class="col fourth">1/4</div>
    <div class="col fourth">1/4</div>
    <div class="col fourth">1/4</div>
    <div class="col fourth">1/4</div>
  </div>

  <!-- five 20% columns (e.g. 1/5th) -->
  <div class="row">
    <div class="col fifth">1/5</div>
    <div class="col fifth">1/5</div>
    <div class="col fifth">1/5</div>
    <div class="col fifth">1/5</div>
    <div class="col fifth">1/5</div>
  </div>

  <p>Fill remaining space of row</p>

  <!-- fill remaining space -->
  <div class="row">
    <div class="col fill">Fill</div>
  </div>
  <div class="row">
    <div class="col half">1/2</div>
    <div class="col fill">Fill</div>
  </div>
  <div class="row">
    <div class="col third">1/3</div>
    <div class="col fill">Fill 2/3</div>
  </div>
  <div class="row">
    <div class="col fourth">1/4</div>
    <div class="col fill">Fill 3/4</div>
  </div>
  <div class="row">
    <div class="col fourth">1/4</div>
    <div class="col fourth">1/4</div>
    <div class="col fill">Fill 2/4</div>
  </div>
  <div class="row">
    <div class="col fifth">1/5</div>
    <div class="col fill">Fill 4/5</div>
  </div>
  <div class="row">
    <div class="col fifth">1/5</div>
    <div class="col fifth">1/5</div>
    <div class="col fill">Fill 3/5</div>
  </div>
  <div class="row">
    <div class="col fifth">1/5</div>
    <div class="col fifth">1/5</div>
    <div class="col fifth">1/5</div>
    <div class="col fill">Fill 2/5</div>
  </div>

\$\endgroup\$
3
\$\begingroup\$

Writing a "grid system" in vanilla CSS in this day and age is pure folly. Using unsemantic class names that express how an element should look rather than what its purpose is goes against the best practices that have been preached for the past 15 years.

If you want to make a grid system, use a CSS preprocessor. This will satisfy users who prefer to follow the best practices as well as those who spurn them: both groups of users will be able to decide for themselves what their selectors should look like.

\$\endgroup\$
  • \$\begingroup\$ Sometimes having a simple grid system naming convention really helps streamline a development process when you have a plethora of backend developers who need a quick and easy way to incorporate a grid. Not everyone has the time to learn/teach a team a preprocessing language either. For those instances, a simple quick "unsematic" class naming convention is key. Let alone semantic HTML markup is far more important then semantic classing. \$\endgroup\$ – darcher Mar 23 '15 at 17:37
  • \$\begingroup\$ @darcher When it comes to writing software, choosing a solution that is better when it comes time to maintain the project always provides better value in the long run than a solution that is faster to implement during the development phase. Polluting your markup with thousands of classes that dictate how things look will only bite you in the ass when your designer decides they want it to have fewer/more columns. \$\endgroup\$ – cimmanon Mar 23 '15 at 18:16
  • \$\begingroup\$ I don't disagree. But in our situation which had numerous developers working within a CMS tool, unsemantic classing was a necessary evil and a preproccessor language is out of the question for the time being on account of the project timeline. \$\endgroup\$ – darcher May 25 '15 at 16:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.