Minimal Responsive Grid System

Next: Minimal CSS font-size system CSS framework!<p>Simple naming system! Only 0.5KB!<p><pre><code> .ten { font-size: 10px; } .eleven { font-size: 11px; } .twelve { font-size: 12px; } .thirteen { font-size: 13px; } .fourteen { font-size: 14px; } .fifteen { font-size: 15px; } .sixteen { font-size: 16px; } </code></pre> Plugins available for font styles &amp; variants!<p><pre><code> .bold { font-weight: bold; } .italic { font-variant: italic; } </code></pre> Use our CDN! Always available!<p><a href="https:&#x2F;&#x2F;mincss-fontsize.xyz&#x2F;simple-font-sizes.0.3.1.min.css" rel="nofollow">https:&#x2F;&#x2F;mincss-fontsize.xyz&#x2F;simple-font-sizes.0.3.1.min.css</a><p><a href="https:&#x2F;&#x2F;mincss-fontsize.xyz&#x2F;simple-font-styles.0.3.1.min.css" rel="nofollow">https:&#x2F;&#x2F;mincss-fontsize.xyz&#x2F;simple-font-styles.0.3.1.min.css</a><p><a href="https:&#x2F;&#x2F;mincss-fontsize.xyz&#x2F;simple-font-variants.0.3.1.min.css" rel="nofollow">https:&#x2F;&#x2F;mincss-fontsize.xyz&#x2F;simple-font-variants.0.3.1.min.c...</a><p>Changelog:<p>0.3.1<p>- Changed .sixteen to be actually 16px instead of 17px (typo)<p>0.3.0<p>- Added .sixteen for even larger text!

I&#x27;ve played around a bit with CSS grid, and to me it seemed like it would just make this kind of grid frameworks unnecessary. Everything I see on that page are native CSS grid features.<p>After looking at the CSS, it seems entirely redundant. It&#x27;s 36 lines, and only contains the basic grid setup you&#x27;d do by hand. Using CSS grid directly would not be hardly more difficult or verbose, and far more powerful than restricting yourself to the subset used in this.<p>What I also find strange is that this project still calculates the column width based on percentages, instead of the native support for fractions in CSS grid.

I don&#x27;t understand how this is &quot;Responsive.&quot; When I resize the browser window, it doesn&#x27;t respond. All it does is go off-screen like a standard table.<p>Is the home page, itself, not using this responsive framework?

On Monday, I was at a very interesting talk about what&#x27;s coming up and what&#x27;s available in modern CSS. Apart from one exception, I can&#x27;t use <i>anything</i> that was gone over in an hour&#x27;s talk. Why? IE11.

Are grids still a thing? I hardly had to use any for the last 2-3 years. I just have a `display: flex` and control the direction with media queries. Seems much more easy than learning a grid css file

This is not responsive when resizing the browser window in Safari...

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..

Minimal JS Integer Framework:<p><pre><code> function plusOne(x) { return x + 1 } function plusTwo(x) { return x + 2 } function plusThree(x) { return x + 3 } function plusFour(x) { return x + 4 } </code></pre> Using this framework, you can truly adhere to the DRY principle: instead of repeating x++ all around your codebase, you can simply do:<p><pre><code> x = plusOne(x)</code></pre>

Lovely... but works in &lt; 90% of browsers [0], so it&#x27;s kind of for academic consideration only for now.<p>[0] <a href="https:&#x2F;&#x2F;caniuse.com&#x2F;#feat=css-grid" rel="nofollow">https:&#x2F;&#x2F;caniuse.com&#x2F;#feat=css-grid</a>

I want to check this out but I&#x27;m on my phone so there&#x27;s no way to &quot;view source&quot; and see how to actually use the framework. All I can see is the resulting grid on the demo page. Maybe add code snippets?

the demo is not responsive.... hmm