6 ms·

Minimal Responsive Grid System

52 points by vladocar 8y ago

drinchev 8y ago
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
- RichWalton 8y ago
  Indeed they are. CSS even has a `grid` layout style: https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/
- purerandomness 8y ago
  CSS Grid is a newer concept than Flexbox, and solves a different problem. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout#Grid_and_flexbox https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
tfeldmann 8y ago
This is not responsive when resizing the browser window in Safari...
- italiancheese 8y ago
  I don't understand how they're demonstrating a responsive grid framework with a non-responsive demo.
  - remi 8y ago
    It’s not really responsive, it just stacks grid elements vertically when the viewport width is < 480px. https://github.com/vladocar/SMART-CSS-GRID/blob/a0cfd2c730e900c9e62d24b3eeedcb1b4ad14319/smart-grid.css#L31-L36 https://github.com/vladocar/SMART-CSS-GRID/blob/a0cfd2c730e9...
- vladocar 8y ago
  The default of the system is less then 480px for some reason Safari doesn't resize try Chrome or Firefox..
- graedus 8y ago
  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%;.
- jordache 8y ago
  it's not.. it's a subpar demo page.
fabian2k 8y ago
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.
- vladocar 8y ago
  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. P.S Yes, using fr is good idea..
- originalsimba 8y ago
  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?
- djsumdog 8y ago
  I agree. With CSS Grid now part of the browser in Chrome/FF/Edge, we really should be ditching these frameworks and using CSS Grid directly.
timwis 8y ago
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?
- regularfry 8y ago
  Follow the github link. The CSS file itself is tiny, and the demo HTML is in the repo.
tobyhinloopen 8y ago
Next: Minimal CSS font-size system CSS framework! Simple naming system! Only 0.5KB! .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; } Plugins available for font styles & variants! .bold { font-weight: bold; } .italic { font-variant: italic; } Use our CDN! Always available! https://mincss-fontsize.xyz/simple-font-sizes.0.3.1.min.css 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-styles.0.3.1.min.css https://mincss-fontsize.xyz/simple-font-variants.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!
- vladocar 8y ago
  I know you are joking .. but there are some CSS Frameworks with really terrible names and naming logic. If you have better naming system let me know.
  - joshribakoff 8y ago
    The joke was that its a framework to do what is now natively supported. I would look into CSS grid.
    - vladocar 8y ago
      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.
      - tobyhinloopen 8y ago
        I don't understand your reasoning. 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/ https://maintainablecss.com/chapters/semantics/ By writing the column sizes in the HTML, you're effectively reinventing inline styles
regularfry 8y ago
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.
- andrei_says_ 8y ago
  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.
  - tatersolid 8y ago
    1000 times this. We do SaaS for the Banking industry and 72% of our traffic is IE11/Win7. In May 2018. <crytoselfincorner />
vladocar 8y ago
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..
jordache 8y ago
the demo is not responsive.... hmm
boffinism 8y ago
Lovely... but works in < 90% of browsers [0], so it's kind of for academic consideration only for now. [0] https://caniuse.com/#feat=css-grid https://caniuse.com/#feat=css-grid
- originalsimba 8y ago
  > 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.
  - notahacker 8y ago
    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.
    - originalsimba 8y ago
      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. (I don't believe in "too saturated". <3)
reaperducer 8y ago
I don't understand how this is "Responsive." When I resize the browser window, it doesn't respond. All it does is go off-screen like a standard table. Is the home page, itself, not using this responsive framework?
- chrismorgan 8y ago
  It’s broken between 960px and 480px, that’s all.
- djsumdog 8y ago
  It's responsive for me using Vivaldi 1.15
tzahola 8y ago
Minimal JS Integer Framework: function plusOne(x) { return x + 1 } function plusTwo(x) { return x + 2 } function plusThree(x) { return x + 3 } function plusFour(x) { return x + 4 } Using this framework, you can truly adhere to the DRY principle: instead of repeating x++ all around your codebase, you can simply do: x = plusOne(x)

52 points by vladocar 8y ago

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

RichWalton 8y ago
Indeed they are. CSS even has a `grid` layout style: https://css-tricks.com/snippets/css/complete-guide-grid/ https://css-tricks.com/snippets/css/complete-guide-grid/
purerandomness 8y ago
CSS Grid is a newer concept than Flexbox, and solves a different problem. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout#Grid_and_flexbox https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...

tfeldmann 8y ago

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

italiancheese 8y ago
I don't understand how they're demonstrating a responsive grid framework with a non-responsive demo.
- remi 8y ago
  It’s not really responsive, it just stacks grid elements vertically when the viewport width is < 480px. https://github.com/vladocar/SMART-CSS-GRID/blob/a0cfd2c730e900c9e62d24b3eeedcb1b4ad14319/smart-grid.css#L31-L36 https://github.com/vladocar/SMART-CSS-GRID/blob/a0cfd2c730e9...
vladocar 8y ago
The default of the system is less then 480px for some reason Safari doesn't resize try Chrome or Firefox..
graedus 8y ago
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%;.
jordache 8y ago
it's not.. it's a subpar demo page.

fabian2k 8y ago

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.

vladocar 8y ago
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. P.S Yes, using fr is good idea..
originalsimba 8y ago
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?
djsumdog 8y ago
I agree. With CSS Grid now part of the browser in Chrome/FF/Edge, we really should be ditching these frameworks and using CSS Grid directly.

timwis 8y ago

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?

regularfry 8y ago
Follow the github link. The CSS file itself is tiny, and the demo HTML is in the repo.

tobyhinloopen 8y ago

Next: Minimal CSS font-size system CSS framework! Simple naming system! Only 0.5KB! .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; } Plugins available for font styles & variants! .bold { font-weight: bold; } .italic { font-variant: italic; } Use our CDN! Always available! https://mincss-fontsize.xyz/simple-font-sizes.0.3.1.min.css 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-styles.0.3.1.min.css https://mincss-fontsize.xyz/simple-font-variants.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!

vladocar 8y ago
I know you are joking .. but there are some CSS Frameworks with really terrible names and naming logic. If you have better naming system let me know.
- joshribakoff 8y ago
  The joke was that its a framework to do what is now natively supported. I would look into CSS grid.
  - vladocar 8y ago
    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.
    - tobyhinloopen 8y ago
      I don't understand your reasoning. 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/ https://maintainablecss.com/chapters/semantics/ By writing the column sizes in the HTML, you're effectively reinventing inline styles

regularfry 8y ago

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.

andrei_says_ 8y ago
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.
- tatersolid 8y ago
  1000 times this. We do SaaS for the Banking industry and 72% of our traffic is IE11/Win7. In May 2018. <crytoselfincorner />

vladocar 8y ago

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

jordache 8y ago

the demo is not responsive.... hmm

boffinism 8y ago

Lovely... but works in < 90% of browsers [0], so it's kind of for academic consideration only for now. [0] https://caniuse.com/#feat=css-grid https://caniuse.com/#feat=css-grid

originalsimba 8y ago
> 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.
- notahacker 8y ago
  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.
  - originalsimba 8y ago
    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. (I don't believe in "too saturated". <3)

reaperducer 8y ago

I don't understand how this is "Responsive." When I resize the browser window, it doesn't respond. All it does is go off-screen like a standard table. Is the home page, itself, not using this responsive framework?

chrismorgan 8y ago
It’s broken between 960px and 480px, that’s all.
djsumdog 8y ago
It's responsive for me using Vivaldi 1.15

tzahola 8y ago

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