10 ms·
Pills: A simple responsive CSS grid for humans
- rightnow 10y agoDamn.. i wanted the animal version
- andrewfromx 10y agothis is great. I really like how he breaks down the three types of grid systems out there. And "just memorize the cryptic codes like col-md-6 or whatever from their favourite CSS Framework like Bootstrap" is so true. I knew there had to be a better way and pills could be it. I starred it and forked it.
- rohitkrai03 10y agoThanks for checking it out and appreciating my work.
- mariusmg 10y ago>just memorize the cryptic codes like col-md-6 It's awkward at first, becomes second nature after you use Bootstrap for a while. I guess a grid only framework makes sense if you only use the grids from the big frameworks, but it's not my use scenario since i use LOTS of stuff from Bootstrap .
- timlyo 10y agoI like simple libraries like this that do one thing well. Too many web libraries try to do everything, when all I don't need anywhere near that much.
- deusex_ 10y agoIt would be nice to mention on the grid website what is the key difference from other grids. e.g. what is the difference from Bootstrap? both 12 columns, grid based on floats. Is there any difference than naming?
- rohitkrai03 10y agoOne difference from bootstrap would be it handles desktop and tablets using fluid layout instead of breakpoints. The only breakpoint in the grid is for mobile.
- nilliams 10y agoYeah it's more like the Boostrap 2 grid, which will be a step back for some people used to multiple breakpoints of Bootstrap 3.
- xunra 10y agoLooks a lot like semantic-ui http://semantic-ui.com/collections/grid.html http://semantic-ui.com/collections/grid.html
- dualogy 10y agoOr, 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.
- franciscop 10y agoI would call technical debt to writing it as you go, since there are many small bugs and inconsistencies that (hopefully) are fixed by these libraries. Just a couple of random examples: - https://github.com/picnicss/picnic/issues/79 https://github.com/picnicss/picnic/issues/79 - https://github.com/picnicss/picnic/issues/64 https://github.com/picnicss/picnic/issues/64 So you can have a half-baked solution with 10 more minutes or use a tested and documented one and save 10 minutes.
- threatofrain 10y agoI think a more on-point rebuttal would give us examples of flexbox-specific bugs.
- franciscop 10y agoTrue, I thought it was widely know but there's a whole Flexbugs project [1] and that there are many Known Issues with flexbox [2]. Some with solution, some without them. [1] https://github.com/philipwalton/flexbugs https://github.com/philipwalton/flexbugs [2] http://caniuse.com/#feat=flexbox http://caniuse.com/#feat=flexbox
- irrational 10y agoThank you! I've never heard of flexbugs.
- matt4077 10y agoIndeed. Flexbox made grids superfluous. Except people expect it.
- fimdomeio 10y agoa css grid for humans... First thought flexbox for distributing people waiting for the subway. On a more serious tought... the great thing about bootstrap whille I admit is sometimes a bit messy is the fact that you can use different sizes for different breakpoints which is something this method apparently does not allow.
- drinchev 10y agoReally nice, though these days flexbox should kill libraries for that. Also I hate when you have fixed break points. Sometimes you need elements to be visible hidden on different screen width and frameworks like this limit the ability to change the breakpoints. Take as an example the smashing magazine [1] and count the breakpoints there [1] : https://www.smashingmagazine.com https://www.smashingmagazine.com
- colourgarden 10y agoWhilst 'three' is better than 'col-3', it's still based on a 12-column way of thinking. Try Avalanche (https://github.com/colourgarden/avalanche https://github.com/colourgarden/avalanche) for a grid system based on percentages or fractions (you choose) </plug>
- rohitkrai03 10y agoPills also has support for fractions along with normal four columns like namespace.
- lucianmarin 10y agoWhy not go gridless? https://github.com/lucianmarin/gridless https://github.com/lucianmarin/gridless
- xyience 10y agoI hate that pixels made a comeback. They are a total pain in the era of multiple resolution sizes, aspect ratios, orientations, and densities.
- XCSme 10y agoWell, usually grid systems are used for responsiveness and the ability to have a specific design for individual screen sizes. As far as I read through the docs, unlike bootstrap, this library does not allow to target specific screen sizes like xs,md,lg, etc... Just pointing this out :D
- Tiquor 10y agoThis framework is getting posted everywhere and it's not even really responsive. I saw this junk on Reddit too. People were defending it saying it had mobile and desktop sizes. What?
- mpetrovich 10y agoAt NextBigSound.com, we've found that a nestable fractional-based grid is generally easier, faster, and more flexible to work with than traditional N-column grids: <div class="grid--1/2 grid--2/3@M"> <div class="grid--1/3"></div> <div class="grid--1/3"></div> <div class="grid--1/3"></div> </div> <div class="grid--1/2 grid--1/3@M"></div>
- rohitkrai03 10y agoPills also support fractional based grid like half, one-third or two-third like that.
- staticelf 10y agoI've found https://milligram.github.io/ https://milligram.github.io/ very nice. Sure, it's a bit more than a grid system (it uses flexbox) but it's very nice and doesn't take up much bandwidth.
- franciscop 10y agoI 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://web.archive.org/web/20150713011953/http://www.picnicss.com/plugins/grids/ http://web.archive.org/web/20150713011953/http://www.picnics... [2] http://picnicss.com/ http://picnicss.com/ [3] http://francisco.io/flexpoint/ http://francisco.io/flexpoint/
- findjashua 10y agoflexpoint looks fantastic, nice work!
- raytracer 10y agoLooks good! How does the grid handle columns with different heights?
- franciscop 10y agoThey 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.
- romanovcode 10y agoWhy not just use flex? https://philipwalton.github.io/solved-by-flexbox/demos/grids/ https://philipwalton.github.io/solved-by-flexbox/demos/grids...
- SwellJoe 10y agoBecause IE 9 is still (unbelievably) a top 10 browser. But, it won't be for much longer, at which point I'll start converting. (https://www.w3counter.com/globalstats.php https://www.w3counter.com/globalstats.php)
- megalodon 10y agoWrote this [0] more than a year ago, it generates a tiny CSS grid template using attribute selectors. Should work with any amount of columns. Might be useful for someone here. [0] https://github.com/mateogianolio/griderator https://github.com/mateogianolio/griderator
- lcmatt 10y agoSmall point which I see fairly regularly. Please provide a partial sass/less partial in addition to the css file.
- Tiquor 10y agoIt is so simple and so human it isn't even really responsive. Magic!
- brianzelip 10y agoHey 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.
- rohitkrai03 10y agoThanks a lot for appreciating my work.
- plq 10y agoPlease explain to me: What happened to the philosophy behind http://csszengarden.com http://csszengarden.com ? Back when CSS needed evangelizing, the main selling point was "never touch the DOM for styling". What went wrong?
- pygy_ 10y agoSeparation of different concerns. The devs convey intent to the stylers through classes.
- ChrisLTD 10y agoNothing 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.
- 0xADADA 10y agoWhat went wrong: CSS codebases became unmaintainable over time. I could go into more detail, but I think most people will concur.
- deleted 10y ago[deleted]
- armandososa 10y agoCSS Zen Garden was more close to art than to real world production work. It existed to draw a line between the old days' table-based layouts and what CSS brought to the table. In those days CSS was perceived as not powerful and flexible enough, and capable only of boring boxy layouts (which is in fact the favoured aesthetic nowadays) and CSS Zen Garden and other similar sites existed to disprove that notion. Also, some of the core ideals of the time, like obsessing over having 100% semantic markup and the ability to change styles without having to touch the markup turned out not to be that important. And, lastly, if you look at the provided source in CSS Zen Garden you can see that it has a lot of DOM affordances like classes, IDs and even some extra markup to make sure that the CSS author had everything she needed to make his design work. source: I got a design published in the garden a long time ago http://www.csszengarden.com/110/ http://www.csszengarden.com/110/
- gchokov 10y agoAnother one. For lazy humans.
- have_faith 10y agoThe 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!
- JustSomeNobody 10y ago> Components are very dumb right now, we need smart components that understand their surroundings beyond the window. Then we will have truly portable components! This is the iceberg problem. Component based programming has been around since probably the 60's. The easy part is making components. The hard part is making them (and this is the Holy Grail), portable. Pipes and Filters in the Unix OS is a simple example of one form of component development that actually works well.
- have_faith 10y agoThis is what I feel is missing from web components. Some sort of generic api for components to reason about their immediate environment. Similar to the Unix OS pipes and filter api that means every program understands how to get some information about the context that it is being run in. It's not difficult to imagine a calendar component that needs to visually display vastly differently depending on how much space it's parent gives it. Currently there is no generic way to solve this.
- mikewhy 10y ago> It's not difficult to imagine a calendar component that needs to visually display vastly differently depending on how much space it's parent gives it. Currently there is no generic way to solve this. Maybe I'm being naive here, but isn't this solved really by getting the width of a block level element rendered by the Calendar component? Yeah it does mean you need to get the width and then render everything else, but it's doable.
- Etheryte 10y agoSo it's just a clone of Bootstrap with different class names.
- the_jp 10y agoWithout the ability to control width percentage in mobile, or set it differently between tablet and desktop.
- pweissbrod 10y agoPardon my cynicism but the adjective 'simple' has been abused to the point where it repels me when I find it in framework descriptions. Calling something 'simple' is a subjective statement which is a meaningless waste of words, especially from the author of the framework. Of course you perceive your own framework as simple. Nobody designs a framework to intentionally make something more complicated. The word 'simple' is repeated 8 times in the first 2 paragraphs of your description. It reads like something thrown together in a thoughtless hurry. Your framework could be wonderful but it leaves the reader wondering if the code has the same level of investment as the description.
- calinet6 10y agoMost Hacker Newsy Hacker News Comment Of The Year Award
- apeace 10y agoAs Rich Hickey argues[1], 'simple' can be an objective statement. Though I agree that without an explanation of what exactly makes this library 'simple', the better word may be 'easy'. [1] https://www.infoq.com/presentations/Simple-Made-Easy https://www.infoq.com/presentations/Simple-Made-Easy
- aybarshazar 10y agoI was just thinking about this the other day and the subjective statement was "powerful".
- dfar1 10y agoGrids make for fast development but boring websites. I find the design I work with more often break the grid than conform to it.
- armandososa 10y agoAre you serious? Unless you're David Carson, you should always design based on a grid if you want good design. Mark Boulton wrote some amazing articles about grid design long before grid frameworks were a thing http://www.markboulton.co.uk/journal/five-simple-steps-to-designing-grid-systems-part-1 http://www.markboulton.co.uk/journal/five-simple-steps-to-de...
- taesu 10y agoHonestly, I see one~three of these simple, responsive, lightweight CSS frameworks every week on HN. I wonder how many people actually get to use these new shiny frameworks over the reputable ones. I personally use bootstrap, and will try foundation next, but none of these new ones.
- connorjburton 10y agoHonestly, I just use .something { width: calc(33.33% - #{$spacing-small*3/2}); margin-left: $spacing-small; &:first-of-type { margin-left: 0; } } Well simple
- deleted 10y ago[deleted]
- connorjburton 10y agoCorrection: .something { width: calc(33.33% - #{$spacing-small*2/3}); margin-left: $spacing-small; &:first-of-type { margin-left: 0; } }
- err4nt 10y ago.something { width: calc(33.33% - .66em); margin-left: 1em; } .something:first-of-type { margin-left: 0; }
- qbert 10y agoFor the gutters, just do: .something { width: calc(33.33% - #{$spacing-small * 2/3}); + .something { margin-left: $spacing-small; } }
- connorjburton 10y agoI like that!
- fredleblanc 10y agoAdding my own me-too onto the pile of "I made something just like this:" https://github.com/secondparty/arrange https://github.com/secondparty/arrange — I built it out of curiosity, and have used it in my projects, (shrug emoji). These types of projects are fun.
- rxaxm 10y agoi made something like this (although much less extensive) because i found myself using the same pattern for a few freelance gigs https://github.com/r-medina/grid https://github.com/r-medina/grid thanks for sharing!
- hit8run 10y agoskeleton has the same approach
- revx 10y agoThis seems like skeleton's exact syntax with a different name... http://getskeleton.com/ http://getskeleton.com/
- combatentropy 10y agoUsing tables for layout sometimes makes sense: https://www.combatentropy.com/coming_back_to_the_table https://www.combatentropy.com/coming_back_to_the_table How are these DIV's with presentational class names any better?
- windsurfer 10y agoAre there any sites that use grid systems? I can't think of any off the top of my head.
- bodytaing 10y agoPill is almost 400 lines just for the grid. Here's a 48 line alternative that's customizable: https://github.com/doximity/vital/blob/master/source/stylesheets/_grid.sass https://github.com/doximity/vital/blob/master/source/stylesh...
- armandososa 10y agoI don't get the author's pain point. `col-md-12` looks like pretty self-explanatory class name (or `medium-12 columns` in foundation). I mean, you're already writing HTML where `img` means "Image" and `div` means "arbitrary container", so unless you don't understand (or don't care about) the value of a 12 columns grid I don't see what's so bad about bootstrap's column names. Especially if you're already OK with having presentational classes in your markup.
- YngwieMalware 10y agoIt will never not be faster to roll your own based on the project needs. Aside from knowing how to use Bootstrap, I can appreciate the work on these CSS grid systems and frameworks but I don't see any need for most of them. Do people use Blueprint anymore?
- donatj 10y agoI created SlenderGrid [1] a while ago which I believe is really all you need. It's 16 lines of code and you define your OWN actual semantic grid classes. so for instance: .content { @include box-size(3/4); } .sidebar { @include box-size(1/4); } [1] https://github.com/donatj/SlenderGrid/blob/master/src/_slendergrid.scss https://github.com/donatj/SlenderGrid/blob/master/src/_slend...
- wavelattice 10y agoWhat's the point of something like this is a world where flex box is a standard?
- kbr 10y agoHey there, I am the maker of Wing.css (http://usewing.ml http://usewing.ml) This is a really nice grid system. I love the simplicity and the website. Keep it up!