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
Same in Chrome and Firefox. Basically between 481px and 984px viewport widths, you're going to have horizontal scrolling. Can't say I've seen this approach to a responsive grid before.
edit:
I think 10 second fix is to just change .main from width: 960px; to max-width: 960px; width: 100%;.
I'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.
After looking at the CSS, it seems entirely redundant. It's 36 lines, and only contains the basic grid setup you'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.
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.
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.
You could roll your own easy enough sure, I think the author is saying "Look! I have used the tools available and built the wheel, and I am giving it to you so you can save time."... does that sound about right?
I want to check this out but I'm on my phone so there's no way to "view source" and see how to actually use the framework. All I can see is the resulting grid on the demo page. Maybe add code snippets?
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.
In my opinion, classnames should say what the HTML element represents, and a stylesheet contains the definitions for styling and sizing.
Your HTML should not include information about the size of an element. Your HTML document should represent the content & structure of your document. Your stylesheet is then responsible for layout, design, color and dimensions.
There’s a problem with this approach, which I found out about the hard way.
Like you I thought I should keep my html “semantic”. The problem with this approach is that you end up tightly coupling the stylesheet and the html, because it requires you to recreate the html’s tag structure using contextual selectors.
Besides becoming very complex this means that every time you need to change the html you also need to change the css.
The other major downside is that all those mixins end up generating a ton of duplicate rules in the stylesheet.
Note that if you define everything using classes and then put those classes in the html you have none of these issues. The coupling is much more straightforward and the stylesheets can be much smaller. Besides that, contextual selectors are many times slower than a single classname.
The inline styles thing I can’t agree with, classes are much more DRY.
I found the methodologies outlined by Harry Roberts to change the ways I structure my css for the better. (www.csswizardry.com)
This, or something similar, should be your guideline for naming things in CSS: https://en.bem.info
IMO a "modern CSS frameworks" should have 0 classnames and should not inject any CSS statement anywhere. They should only provide mixins for LESS/SCSS to be included by the user.
On Monday, I was at a very interesting talk about what's coming up and what's available in modern CSS. Apart from one exception, I can't use anything that was gone over in an hour's talk. Why? IE11.
Exactly. I would so much love to use css grid but it won’t be possible for the foreseeable future. Financial organizations stuck on windows 7 locked workstations represent a major part of our clients.
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..
> works in < 90% of browsers [0], so it's kind of for academic consideration only for now.
Says your particular organizations policies, why is the line drawn at 90%, why not 95%? Is this restriction based on calculations or was it simply arbitrarily chosen?
If it's arbitrary, allow me to offer an alternative, focus support only on "modern generation" browsers which auto-update by default. All popular browsers adopted auto-updates as a collective effort to improve end-user security, and so as web developers we're able to encourage this by only supporting those platforms.
As you can see on caniuse, grid support on those modern browser platforms is 100%. The only ones lacking are IE which microsoft has abandoned, and Opera Mini (I can't speak good or bad about that, I haven't examined it).
The idea that you must support as many browsers as possible is a relic of the 1990s dot com bubble when it was unclear which browser was best and there were no agreed upon standards. It's now 2018 and you're either using Firefox or Chrome and to a much smaller extent, Edge or Safari. Any other browser that wants to be taken seriously is going to support the standards set by those platforms.
If you're a business with actual customers, your decision about which browsers to support and where to draw the line is going to be driven by whether not supporting them costs more money than supporting them, not by whether the dev team would prefer people to download software worth taking seriously or buy a newer phone if they wish to continue being customers.
I actually agree with you 100%. I disagree with the presumption that those "13%" unsupported cases are "actual customers".
In the same way that I've always thought it was false to suggest all software pirates are potential customers. Some simply arent.
If you're so desperate for revenue that you have to scrape those "13%", that your product can't attract enough of the remaining "87%" to put keep your grandkids fed, then maybe the more significant admission is that the market you're in is "too" saturated.
> The idea that you must support as many browsers as possible is a relic of the 1990s dot com bubble
Your notion of forcing people to change browsers (who may not be able to for accessibility reasons, corporate policy reasons, or hardware reasons) is the real relic of the 1990's.
Remember when half the web sites you'd visit put up a big notice "Your browser is not supported. Download the latest browser here?"
Non-support is the relic. Support is what makes a business work.
The customer's money is still green, even if they're not using the latest tech.
That's the wrong way to look at it. Is the FDA "forcing" you to eat non-poisonous food? No of course not.
As the more technologically knowledgeable and competent of our society it's our responsibility to help steer the evolution of internet applications in the right direction.
> Remember when half the web sites you'd visit put up a big notice "Your browser is not supported. Download the latest browser here?"
Your example is not lost on me, I was there. But this is different. That was about promoting proprietary features of specific browsers. That was corporations vying for market control. Today the only thing that matters to anyone is standards compliance, performance and security.
Developers are the architects of the internet. It's not only a responsibility to build it with a forward-thinking approach, it's an opportunity to have a positive impact on the world.
The difference is seen throughout the world when comparing communities where people care, versus cities where people are just collecting their paychecks.
> The customer's money is still green
That sentiment gets it's origin from people who had business deals with the Nazis in the early 20th century.
----
Speaking of money, the 13% of "outdated browsers" is not actually 13% real people using real browsers. It's robots, it's faked agent strings, it's web scraping tools. We're not talking about actual customers who would be spending money on your services or products. The actual number of real people still using crap like IE9 is very tiny, if not zero.
"Active" users, the sort who participate in the online economy, are using modern browsers that auto-update themselves and already have full support for Grid.
For browsers that support grid you can use grid and then have a fallback layout for browsers that don't. You can even user `@supports(display: grid)` feature query to specifically target browsers that support grid.
47 comments
[ 2.9 ms ] story [ 113 ms ] threadhttps://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
https://github.com/vladocar/SMART-CSS-GRID/blob/a0cfd2c730e9...
edit: I think 10 second fix is to just change .main from width: 960px; to max-width: 960px; width: 100%;.
After looking at the CSS, it seems entirely redundant. It's 36 lines, and only contains the basic grid setup you'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.
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.
P.S Yes, using fr is good idea..
Simple naming system! Only 0.5KB!
Plugins available for font styles & variants! Use our CDN! Always available!https://mincss-fontsize.xyz/simple-font-sizes.0.3.1.min.css
https://mincss-fontsize.xyz/simple-font-styles.0.3.1.min.css
https://mincss-fontsize.xyz/simple-font-variants.0.3.1.min.c...
Changelog:
0.3.1
- Changed .sixteen to be actually 16px instead of 17px (typo)
0.3.0
- Added .sixteen for even larger text!
In my opinion, classnames should say what the HTML element represents, and a stylesheet contains the definitions for styling and sizing.
Your HTML should not include information about the size of an element. Your HTML document should represent the content & structure of your document. Your stylesheet is then responsible for layout, design, color and dimensions.
It is all about semantics. See: https://maintainablecss.com/chapters/semantics/
By writing the column sizes in the HTML, you're effectively reinventing inline styles
Here is blog post about this (It is from 2008): http://www.vcarrer.com/2008/08/when-to-use-css-framework.htm...
Like you I thought I should keep my html “semantic”. The problem with this approach is that you end up tightly coupling the stylesheet and the html, because it requires you to recreate the html’s tag structure using contextual selectors.
Besides becoming very complex this means that every time you need to change the html you also need to change the css.
The other major downside is that all those mixins end up generating a ton of duplicate rules in the stylesheet.
Note that if you define everything using classes and then put those classes in the html you have none of these issues. The coupling is much more straightforward and the stylesheets can be much smaller. Besides that, contextual selectors are many times slower than a single classname.
The inline styles thing I can’t agree with, classes are much more DRY.
I found the methodologies outlined by Harry Roberts to change the ways I structure my css for the better. (www.csswizardry.com)
IMO a "modern CSS frameworks" should have 0 classnames and should not inject any CSS statement anywhere. They should only provide mixins for LESS/SCSS to be included by the user.
My site CSS has the following just to make sure that the mobile browser (from testing) doesn't make the font unreadable:
No doubt there are some breaking cases still!But agreed, this is getting quite ridiculous...
<crytoselfincorner />
[0] https://caniuse.com/#feat=css-grid
Says your particular organizations policies, why is the line drawn at 90%, why not 95%? Is this restriction based on calculations or was it simply arbitrarily chosen?
If it's arbitrary, allow me to offer an alternative, focus support only on "modern generation" browsers which auto-update by default. All popular browsers adopted auto-updates as a collective effort to improve end-user security, and so as web developers we're able to encourage this by only supporting those platforms.
As you can see on caniuse, grid support on those modern browser platforms is 100%. The only ones lacking are IE which microsoft has abandoned, and Opera Mini (I can't speak good or bad about that, I haven't examined it).
The idea that you must support as many browsers as possible is a relic of the 1990s dot com bubble when it was unclear which browser was best and there were no agreed upon standards. It's now 2018 and you're either using Firefox or Chrome and to a much smaller extent, Edge or Safari. Any other browser that wants to be taken seriously is going to support the standards set by those platforms.
In the same way that I've always thought it was false to suggest all software pirates are potential customers. Some simply arent.
If you're so desperate for revenue that you have to scrape those "13%", that your product can't attract enough of the remaining "87%" to put keep your grandkids fed, then maybe the more significant admission is that the market you're in is "too" saturated.
(I don't believe in "too saturated". <3)
Your notion of forcing people to change browsers (who may not be able to for accessibility reasons, corporate policy reasons, or hardware reasons) is the real relic of the 1990's.
Remember when half the web sites you'd visit put up a big notice "Your browser is not supported. Download the latest browser here?"
Non-support is the relic. Support is what makes a business work.
The customer's money is still green, even if they're not using the latest tech.
That's the wrong way to look at it. Is the FDA "forcing" you to eat non-poisonous food? No of course not.
As the more technologically knowledgeable and competent of our society it's our responsibility to help steer the evolution of internet applications in the right direction.
> Remember when half the web sites you'd visit put up a big notice "Your browser is not supported. Download the latest browser here?"
Your example is not lost on me, I was there. But this is different. That was about promoting proprietary features of specific browsers. That was corporations vying for market control. Today the only thing that matters to anyone is standards compliance, performance and security.
Developers are the architects of the internet. It's not only a responsibility to build it with a forward-thinking approach, it's an opportunity to have a positive impact on the world.
The difference is seen throughout the world when comparing communities where people care, versus cities where people are just collecting their paychecks.
> The customer's money is still green
That sentiment gets it's origin from people who had business deals with the Nazis in the early 20th century.
----
Speaking of money, the 13% of "outdated browsers" is not actually 13% real people using real browsers. It's robots, it's faked agent strings, it's web scraping tools. We're not talking about actual customers who would be spending money on your services or products. The actual number of real people still using crap like IE9 is very tiny, if not zero.
"Active" users, the sort who participate in the online economy, are using modern browsers that auto-update themselves and already have full support for Grid.
Is the home page, itself, not using this responsive framework?