It is so simple and so human it isn't even really responsive. Magic!
Can you explain?
When I resize the window, the demo (http://arkpod.in/pills/) reflows exactly like I'd expect.
Pills: A simple responsive CSS grid for humans
31–40 of 102 posts
Re: Pills: A simple responsive CSS grid for humans
#32Hey rohitkrai03, good on you for creating something that is useful to you and putting it out there for others on the chance it is useful for them too. There are so many approaches to styling web content. I enjoy finding all the projects that get brought up (and beat up) in these threads. CSS is all about figuring out what works for you. Cheers.
Re: Pills: A simple responsive CSS grid for humans
#33Hey rohitkrai03, good on you for creating something that is useful to you and putting it out there for others on the chance it is useful for them too. There are so many approaches to styling web content. I enjoy finding all the projects that get brought up (and beat up) in these threads. CSS is all about figuring out what works for you. Cheers.
Thanks a lot for appreciating my work.
Re: Pills: A simple responsive CSS grid for humans
#34Or, just write the display:flex you need, where you need it, as little as you actually need.. easy as pie unless your deadline was days-ago. This here might save you 10 minutes of manual work, at the expense of further code-base bloat, external-lib-dep accumulation, technical debt. OK fair game for your MVP-landing-page-A/B-split-test-shenanigans, granted.
Besides lack of good cross-browser support until recently, I think there are a few reasons why flexbox is still less popular than float- or margin-based grids: - Steeper learning curve and less accessible than adding a class like "col-3" or "grid--1/2". The latter is almost self-explanatory. - Requires an existing or new CSS class to bind the styles to. If it's a new class, you have to figure out a good name (which i…
... and it relies on DOM structure.
This is horrible, IMHO. Flex containers will layout the flex items, which are by definition its direct descendants. If by some reason [1] you get an extra DOM element between the flex container and the item you intend to layout, then you're in for a rewrite of the CSS and maybe some extra classes.
Also, this bug in Webkit is rather inconvenient: https://github.com/philipwalton/flexbugs/issues/115
[1] For instance, if you create an Angular element directive.
Re: Pills: A simple responsive CSS grid for humans
#35Please explain to me: What happened to the philosophy behind http://csszengarden.com ? Back when CSS needed evangelizing, the main selling point was "never touch the DOM for styling".
What went wrong?
Re: Pills: A simple responsive CSS grid for humans
#36Please explain to me: What happened to the philosophy behind http://csszengarden.com ? Back when CSS needed evangelizing, the main selling point was "never touch the DOM for styling". What went wrong?
Separation of different concerns.
The devs convey intent to the stylers through classes.
Re: Pills: A simple responsive CSS grid for humans
#37Please explain to me: What happened to the philosophy behind http://csszengarden.com ? Back when CSS needed evangelizing, the main selling point was "never touch the DOM for styling". What went wrong?
Nothing went wrong. The philosophy behind CSS Zen Garden is alive and well in some quarters, and in others it's not. It's the CSS world's version of EMACS vs VIM.
Re: Pills: A simple responsive CSS grid for humans
#38Another one. For lazy humans.
Re: Pills: A simple responsive CSS grid for humans
#39The problem with all of these responsive grid systems is that they are opinionated about how a component responds.
Responsiveness is not a document level problem, it's a component level problem and each component has it's own concerns. One component might keep the 2up grid from desktop to mobile, another might collapse to single column half way, and so on. Having generic desktop and mobile class names ala bootstrap doesn't solve this. You end up with components that have to collapse at pre-defined points and a massive amount of class soup on your containers.
This is related to the fact that components respond to the window width and not their parent containers size. Components are very dumb right now, we need smart components that understand their surroundings beyond the window. Then we will have truly portable components!
Re: Pills: A simple responsive CSS grid for humans
#40Please explain to me: What happened to the philosophy behind http://csszengarden.com ? Back when CSS needed evangelizing, the main selling point was "never touch the DOM for styling". What went wrong?
What went wrong: CSS codebases became unmaintainable over time.
I could go into more detail, but I think most people will concur.