Home > css > Simple mobile-first/responsive Grid System (w/ IE8 Support)

Simple mobile-first/responsive Grid System (w/ IE8 Support)

March 18Hits:0
Advertisement

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>

Answers

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.

Tags:css, css3

Related Articles

  • Simple mobile-first/responsive Grid System (w/ IE8 Support)March 18

    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 g

  • Creating a Responsive Grid System with Susy and BreakpointDecember 9

    The big appeal behind CSS frameworks (like Bootstrap and Foundation) is that they come with a responsive grid system all set and ready to go. The downside is that you have to be content with their column count, the width of their gutters, and all the

  • What are "rows" in a responsive grid system?

    What are "rows" in a responsive grid system?January 22

    I'm looking at various grid systems to make a responsive design, but I keep coming across the same thing that puzzles me : What's a row in a design where everything can move based on the screen size ? Say I want the following design on a large screen

  • How to create interfaces in a graphics editor for responsive grid systems considering that they aren't pixel-perfect? September 7

    Any responsive CSS grid system uses long decimal point percentage values for columns' width (e.g. "16.66666667%"). I don't understand how to lay out the grid in Photoshop, because elements of the interface will either be longer, or shorter than

  • Simple grid system made out of CSS columnsApril 15

    I have been researching and experimenting with HTML5 and CSS3. I was aiming to create a very simple but efficient tiled gallery / grids. So some sort of grid system that I can layout anything inside. Below is what I have created, what are your opinio

  • Grid system for mobile app mockups?February 10

    1) For native mobile apps (iOS7, Android etc.), do you guys do mockups using the grid system too? Like maybe, 4-column grid layout for mobile apps? I heard of the grid system being used for responsive websites but don't seem to hear much of it being

  • Recommended grid systems or layouts for large display and responsive designs

    Recommended grid systems or layouts for large display and responsive designsJune 16

    I've been working with 960 layout for years – but was wondering if there are other grid systems that are strongly supported by the design and development community and also have blank or starter pages to work with. --------------Solutions------------

  • Bootstrap Grid System on mobiles?February 11

    See the following JSFIDDLE <div class="row"> <div class="col-md-3 col-xs-6"> <div style="background: blue;"> test & test & </div> </div> <div class="col-md-3 col-xs-6"> &l

  • Grid System Comparison: Bootstrap 3 vs. Foundation 5

    Grid System Comparison: Bootstrap 3 vs. Foundation 5January 6

    Bootstrap and Foundation are two of my favorite front-end frameworks, especially for rapid website prototyping. Both come with ready-to-use components that speed up my workflow. Beyond their small differences, most of their fundamental features look

  • Understanding CSS Grid Systems from the Ground UpMarch 11

    Over the past few years CSS grid systems have grown a lot in popularity, quickly becoming considered best practice for rapid layout scaffolding. As a result, there has been no shortage of frameworks popping up offering their own grid systems trying t

  • Introducing sGrid: A Stylus-based Flexbox Grid SystemDecember 2

    After reading the title of this post, you might ask: Why another grid system? This is a good question. Basically there are plenty of grids out there and many of them are flexbox grids too. So why have I built another tool that's similar? The short an

  • Bootstrap cards/thumbnails not lining up side by side correctly in the grid system & card deckFebruary 6

    I'm having a problem with getting Boostrap's thumbnails & cards to line up side by side in their grid system. Basically, this is an assignment & I have to follow certain parameters: -must use Bootstrap grid system sm-size columns -these squares of

  • Bootstrap's Grid System vs. Susy: A Comparison

    Bootstrap's Grid System vs. Susy: A ComparisonAugust 29

    There are a lot of grid frameworks for us the to choose from while developing websites nowadays. Of the many frameworks, one of most loved and yet most hated framework is definitely Bootstrap. Today, I'll like to introduce you to a slightly lesser kn

  • Understanding Bootstrap's Grid System

    Understanding Bootstrap's Grid SystemNovember 11

    Bootstrap is undoubtedly one of the most popular front-end frameworks. With more than 73k stars and 27k forks, Bootstrap is also one of the most popular GitHub repositories. In my last article, Responsive Web Design Tips from Bootstrap's CSS, I expla

  • My 960 grid system has wider columns that standard. 55px instead 40px for 16 columnsOctober 27

    I was surprised to discover my website is wider than is supposed to be. I am using Drupal + Omega Theme that uses 960 grid system. The total width of the site is 1180 instead 960. The columns are wider: On 16 columns options: they are supposed to be

  • Mixing the classic type size scale, grid systems and modular scalesNovember 25

    I'm coming from a programmers background and just trying to understand how sizes should relate. I read in the book "designing for the web" that these are the classic type sizes and text set in these size should look better if typeset correctly.

  • Designing for the Web: Templates and Grid Systems

    Designing for the Web: Templates and Grid SystemsDecember 12

    Continuing on from the previous article in this series, Designing for the Web: Resolution and Size, we cover some helpful and important factors while creating a template for designing a website. In this article, we will cover some important issues an

  • most efficient way to create a grid system in unityMay 19

    I'm creating a little tower defence game to get myself acquainted with unity. At first I was going to emulate a grid system by capturing touches / mouse clicks and rounding the coordinates to the nearest whole numbers. This is very low cost and works

  • How to choose a CSS grid system for new theme?August 4

    I am going to make a new responsive theme based on an existing base theme for drupal 6. The theme need to be minimal but flexible. As there are many CSS grid systems to choose from, I've read that 960.gs has fallen out of fashion as it is too small f

  • How does the grid system work for a full width page?August 25

    How does the grid system work for those websites that expand to the full size of the browser (no matter how you resize) while working with a base 12 grid system (such as 960.gs)? For example, take a look on these websites: http://vevo.com (Note: this

Copyright (C) 2017 ceus-now.com, All Rights Reserved. webmaster#ceus-now.com 14 q. 0.774 s.