Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Why the Bootstrap 3 Grid Works (2013)

helloerik.com

Post reply on HN
Print view View original

51–60 of 91 posts

Re: Why the Bootstrap 3 Grid Works (2013)

#51

Post by mikewhy »

owenversteeg wrote: post #45
Kiro wrote: post #12

Is the Bootstrap 3 grid better than the one from PureCSS? I'm building a thing where I use PureCSS only for the grid so I'm wondering if I should replace it with Bootstrap.

The Bootstrap 3 grid comes with a lot of what I like to call 'premade classes' - like .col-md-1 or .col-xs-1 . These are used to control the grid alignment at different sizes. Some people like them, some hate them. I personally dislike them because CSS classes should specify what an element is rather than what it will look like. e.x. if HN were to change from tables to CSS they would use .topbar { background: #ff6600…

So you use the Sass or LESS versions of bootstrap and use '@extend'

Re: Why the Bootstrap 3 Grid Works (2013)

#53

Post by eflowers »

I'm the author of this blog post. If you want to talk more or ask specific questions on problems you have or how to do certain things with the Less or grid, post it here or on the disqus comments on the article and I'll answer every question I get.

Re: Why the Bootstrap 3 Grid Works (2013)

#54

Post by eflowers »

philliphaydon wrote: post #24

Personally I don't like how it works. The padding / margin stuff just makes things too difficult to work with. /personal opinion

What I've found is that as you try to make a grid that is robust and works for a huge middle-ground of use cases, it really is tough. Bootstrap has a lot of strange nuance, but a lot of the time it's "one of the only ways" to make it work "almost every time" with CSS and HTML shortcomings and browser oddnesses.

There are smaller grids, simpler grids, etc, but none are as robust and generalized as Bootstrap/Foundation. These have to be as close to "one size fits all" as they can.

Re: Why the Bootstrap 3 Grid Works (2013)

#55

Post by scarecrowbob »

dictum wrote: post #28
sergiotapia wrote: post #25

Bootstrap's grid really is nice. I really prefer Bootstraps grid over something like Bourboun's Neat grid system[0] where I have to pollute my CSS with include statements. I've also been looking into http://purecss.io/ since it's grid is similar but the CSS package is lighter. [0] - http://neat.bourbon.io/

> I really prefer Bootstraps grid over something like Bourboun's Neat grid system[0] where I have to pollute my CSS with include statements. What about creating silent classes for the column sizes you use and `@extend`ing those classes? %three-columns { @include span-columns(3); } .sidebar { @extend %three-columns; } .menu { @extend %three-columns; background-color: #facade; }

This is a good idea and one I have done a bit-- IMO, it is the best of both worlds, though I hadn't thought of using a silent class (did not know there were silent classes, in fact).

Personally, if I am working quickly, I like having what amounts to a grid api exposed to my html and use it a lot, but I agree that it is better if it doesn't have to be baked into the markup.

Re: Why the Bootstrap 3 Grid Works (2013)

#56

Post by csswizardry »

Kiro wrote: post #43
csswizardry wrote: post #15

I came up with this (in relation to Bootstrap) in 2011: http://csswizardry.com/2011/08/building-better-grid-systems/ This then became the basis for CSS Wizardry Grids: http://csswizardry.com/2013/02/introducing-csswizardry-grids...

Sorry, but the need to put " " everywhere is a dealbreaker for me. Example: ... ... What's the rationale for using inline-block instead of float?

You can actually enable a CSS-only hack[1] to avoid using the comments.

Using `display: inline-block;` allows you to manipulate grids with text-level properties (e.g. `text-align: center;` to cause grid items to fill out from the center of the row), and also allows you to use `vertical-align: [top|middle|bottom];` to cause columns to start from different, well, alignments.

[1] https://github.com/csswizardry/csswizardry-grids/blob/master...

Re: Why the Bootstrap 3 Grid Works (2013)

#59

Post by eflowers »

SimeVidas wrote: post #26

What if you wanted the gutter between columns to be the same width as the padding to the edge of the screen? E.g. in the "Columns" screenshot, gutter = 30px, but screen edge padding = 15px. How would I achieve the same value for both? (I'm not a Bootstrap user.)

This is a tough one. I will have to think about it, I'll try and respond here later.

Re: Why the Bootstrap 3 Grid Works (2013)

#60

Post by eflowers »

xrjn wrote: post #9

I've been developing stuff based on Bootstrap lately, and it amazes me how this article appears on the first page of many of my related searches - something like a third I would say. I don't know if this is due to the article's excellent content or due to some good referencing.

These articles get about 50k visitors a month between the 3 Bootstrap articles. It's just clean SEO optimization to make Google like it, and then good content and tons of people who backlink them and tweet them.

It's legit ground-up SEO and content success, no magic. And, it helps that no one has ever tried to write Bootstrap articles and explanations like I did in my 3 articles.

BTW I am the author if that's not obvious =D

Post reply on HN