skeleton has the same approach
This seems like skeleton's exact syntax with a different name... http://getskeleton.com/
Pills: A simple responsive CSS grid for humans
91–100 of 102 posts
Re: Pills: A simple responsive CSS grid for humans
#92Earlier quoted context omitted.
Agreed, flexbox is one of the best things to happen to CSS in a very very long time.
> very very long time. It's sad really. Table-based layouts have been considered bad practice for years but CSS is only just now becoming a superset. That is if you're lucky enough to be free of old browsers. If you want everything to "just work" tables are still the practical choice to this day . Kudos to PG for sticking to what he learned in the 90's when he built HN.
Yes! It's sad that table-based layouts became "bad practice". Generally they're a lot simpler to understand than the mess of CSS and bizarrely named divs we have today.
Re: Pills: A simple responsive CSS grid for humans
#93What's the point of something like this is a world where flex box is a standard?
Re: Pills: A simple responsive CSS grid for humans
#94Earlier quoted context omitted.
> very very long time. It's sad really. Table-based layouts have been considered bad practice for years but CSS is only just now becoming a superset. That is if you're lucky enough to be free of old browsers. If you want everything to "just work" tables are still the practical choice to this day . Kudos to PG for sticking to what he learned in the 90's when he built HN.
Yes! It's sad that table-based layouts became "bad practice". Generally they're a lot simpler to understand than the mess of CSS and bizarrely named divs we have today.
I think part of the reason tables became considered "bad" was that back at that time most web pages were built by interspersed HTML and ASP or PHP code and getting all the TR and TD tags balanced especially with rowspans or colspans thrown in quickly became a mess. Every page was a standalone thing also, it was much less common to see templating systems used to establish the overall structure of the site. So if you ever got the assignment to "reskin" a website, it was a huge amount of very tedious work making repeated similar changes to all the tables and other markup on every page.
Today we have much better ways to create an overall layout and separate markup from content. Using tables today would be a lot less of a problem than it was when they were decreed to be "bad."
Re: Pills: A simple responsive CSS grid for humans
#95I created one grid system exactly like this [1] a couple of years ago as part of Picnic CSS [2]. However it was limiting in several factors, so I rewrote it from scratch as a flexbox solution, called it Flexpoint [3] and I love it. Now I need to integrate it back into Picnic. For instance, can you change elements order? How do you account for an undetermined number of elements (same size, full width total)? [1] http:…
Looks good! How does the grid handle columns with different heights?
Re: Pills: A simple responsive CSS grid for humans
#96Honestly, I just use .something { width: calc(33.33% - #{$spacing-small*3/2}); margin-left: $spacing-small; &:first-of-type { margin-left: 0; } } Well simple
Correction: .something { width: calc(33.33% - #{$spacing-small*2/3}); margin-left: $spacing-small; &:first-of-type { margin-left: 0; } }
For the gutters, just do:
.something {
width: calc(33.33% - #{$spacing-small * 2/3});
+ .something {
margin-left: $spacing-small;
}
}Re: Pills: A simple responsive CSS grid for humans
#97Earlier quoted context omitted.
Correction: .something { width: calc(33.33% - #{$spacing-small*2/3}); margin-left: $spacing-small; &:first-of-type { margin-left: 0; } }
For the gutters, just do: .something { width: calc(33.33% - #{$spacing-small * 2/3}); + .something { margin-left: $spacing-small; } }
I like that!
Re: Pills: A simple responsive CSS grid for humans
#98I created one grid system exactly like this [1] a couple of years ago as part of Picnic CSS [2]. However it was limiting in several factors, so I rewrote it from scratch as a flexbox solution, called it Flexpoint [3] and I love it. Now I need to integrate it back into Picnic. For instance, can you change elements order? How do you account for an undetermined number of elements (same size, full width total)? [1] http:…
Looks good! How does the grid handle columns with different heights?
They should be filled up to the size of the tallest one if I'm not mistaken. Though so far I've only tried it with uniform elements so I don't know first hand.
Re: Pills: A simple responsive CSS grid for humans
#99Earlier quoted context omitted.
Yes! It's sad that table-based layouts became "bad practice". Generally they're a lot simpler to understand than the mess of CSS and bizarrely named divs we have today.
I think part of the reason tables became considered "bad" was that back at that time most web pages were built by interspersed HTML and ASP or PHP code and getting all the TR and TD tags balanced especially with rowspans or colspans thrown in quickly became a mess. Every page was a standalone thing also, it was much less common to see templating systems used to establish the overall structure of the site. So if you e…
From what I could tell, it is because HTML tables have a specific structural meaning, which is among other things used by screen readers. So if used properly, a person who needs a screen reader could reliably have the contents of a table read to them, but if it's used for layout the result is useless. There seems to be enough people conscious of this that use of tables for layout has always been frowned on. Now there are better hints for screen readers, ,but tables are still useful for screen readers "out of the box."
In any case, tables are not nearly as flexible as a true responsive layout.
Re: Pills: A simple responsive CSS grid for humans
#100Hey there, I am the maker of Wing.css (http://usewing.ml)
This is a really nice grid system. I love the simplicity and the website. Keep it up!