My point wasn't to replace the classic class grid, just to give basic HTML5 grid if necessary. You can always add any other CSS Framework for grid formatting. About <section> and other HTML5 tags.. you can always personalise the code to your standards.
The grid is based on this:
parent element {display: flex; flex-flow: row wrap}
child element {flex:1}
Replace the parent element (container) with any HTML element, replace the child element with your preferred semantic element.
It is a simple solution for very common problem: styling a CSS button. There are many CSS buttons libraries but they usually force you to use their style or size. That is why this is interesting and simple solution born with my necessity not to recode and reinvent the CSS button for every new project.
"It sounds like you're saying today it's absolutely something you should use but you don't want to force it?"
Yes, correct.
Let me explain.. that is the most important decision you make when you plan your CSS layout. But is your decision to make. You can absolutely add this in the reset. Feel free to add stuff in the reset.
That will force you to use completely different CSS layout model. Yes today is common practice the use of box-sizing: border-box and it should be the first line of code when you set your layout. I don't what to force anyone to use box-sizing: border-box.
That is the point that I'm failing to make. It is all about reusability not about the grid system. You can use one CSS layout system in multiple cases otherwise you need to define separate CSS logic for every different web layout.
Few words about this CSS layout solution. It is meant to be starting point. Because is only 36 lines of code you could personalise anything in the main CSS file. Example you can change the main width form 960px to 60 % or 70 em. You can change the grid margin from 10px to xyz px. You can personalise how the responsive layout works. Like I said before is only a starting point..
The general idea is that because is already a grid you don't need another grid. The point of this project is not to make just another grid, but to make reusable system using the same CSS classes in your entire project.
The grid is based on this: parent element {display: flex; flex-flow: row wrap} child element {flex:1}
Replace the parent element (container) with any HTML element, replace the child element with your preferred semantic element.