H5C3.gs - HTML5 CSS3 Grid System

Hello readers, this blog post is about a grid system I developed to make creating HTML5 responsive websites more easily. This grid system, H5C3.gs, was designed based upon the math formula:

([target-width]-([desired-column-spacing]*[desired-columns+1]))/[desired-columns]

which calculates the grid columns. When I developed the stylesheet, I used this general formula and some of the new features found in CSS3 so that all websites using this grid system would be responsive. Here is an example of a website using H5C3.gs: https://www.danielburkhart.com/H5C3.gs/. I also utilized this grid system in the creation of my personal website. All in all, this system works well and utilizes some cool features new to the world of web development.

Technical Information

---

For those readers interested in the technical information of how this grid system works, then continue onward! To begin, not every browser yet supports display: grid; so I had to devise a way to check for browser support. I did this by using JavaScript - for IE-11 and earlier versions of Internet Explorer - and for more modern browsers, I used the new @supports feature built into CSS3. You can see how I used it by visiting this link to the file on my GitHub project. In order to get the general formula to work and be responsive, I utilized CSS3 variables. These variables enabled me to essentially type in the general formula and using more modern CSS features such as the repeat keyword, I was able to put together a general formula that allows developers to easily plug in new values without having to change the basic stylesheet. The last feature I implemented was the nested grid. This allows developers to have a grid inside of a grid. I used a very similar calculation as the main calculation used to generate the columns in the basic grid. Using this grid system, you can easily modernize your website and make it responsive and more user friendly. If you are interested in using H5C3.gs in your next web development project, please let me know. I am also willing to answer any questions regarding the usage or development of this grid system if you shoot me an email. You can find all the release of this system on the GitHub project page.