Live data from Hacker News

Why the Bootstrap 3 Grid Works (2013)

helloerik.com

61–70 of 91 posts

Re: Why the Bootstrap 3 Grid Works (2013)

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

I've seen his blog before too. He has a lot of really good articles with clear, concise, and extremely useful writing. Most of his posts get lots of thoughtful comments, and presumably high powered links. I would assume this level of engagement+backlinking helps quite a bit with his search ranking.

Thanks.

I wrote the explanation above. Just good content on a topic that gets a ton of searches, but a lot of people don't write about it in clean, understandable ways. At the time, the Bootstrap doc didn't explain it in the same amount of detail. Now that google recognizes the content and the backlinks and social proof via HN, Twitter, etc, it's just on a snowball. It's at about 50k visitors a month, mostly from Stack Exchange and Google organic searches.

Once a blog gets a few top 3 ( and a few #1) hits in a google search, it just snowballs. I consistently get more and more visitors each day, more retweets, etc etc. Like after today, my average visitor count will jump up and then stabilize at a much higher average than yesterday, since once content like this that is instructional makes waves, people just link it and tweet it exponentially and it never dies off. Really crazy how useful content and targeted organic SEO can work.

Re: Why the Bootstrap 3 Grid Works (2013)

#62
post #29

Best description of the messy state of HTML: hacking a flowing document markup language to implement GUI. Why couldn't we just get all the nice XAML/WPF containers in HTML5? Instead we get one more way of delivering streaming video. Most developers have to deal with layouts - let's focus on fixing that instead.

The only HTML what is there is the "class" attribute. The rest is CSS.

Re: Why the Bootstrap 3 Grid Works (2013)

#63

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/

If you like Pure you might like my framework Min. It's way smaller than Pure and v2 (released in a couple of days from now) will have full compatibility with Bootstrap. https://github.com/owenversteeg/min

I like Min but the 10-column grid seems like a poor choice vs 12-col, IMO. What was the rationale behind that?

Re: Why the Bootstrap 3 Grid Works (2013)

#65
post #29

Best description of the messy state of HTML: hacking a flowing document markup language to implement GUI. Why couldn't we just get all the nice XAML/WPF containers in HTML5? Instead we get one more way of delivering streaming video. Most developers have to deal with layouts - let's focus on fixing that instead.

Kids these days, no idea how rough we had it back when IE had 90% marketshare and didn't update for decades on end.

You think HTML5 is just about streaming video? The standards are out there and they are improving rapidly, look into flexbox.

Re: Why the Bootstrap 3 Grid Works (2013)

#66

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

I've found the padding/margin issues annoying, too. But I'm only ever a few StackOverflow searches away from finding the right CSS to use to override the defaults. Also, it's helped playing around in Chrome devtools to inspect where particular CSS values are coming from. But on balance, I like Bootstrap. :-)

Re: Why the Bootstrap 3 Grid Works (2013)

#67

I've switched to foundation for my last projects. I just like the grid and defaults better. Also, there's an option to have collapsed (with no padding) columns which I've find useful.

Their block grid is pretty awesome.

The big problem comes when your project is big enough that you stop relying on the default CSS, and need to switch over to a full SASS pipeline incorporating their stuff. Lot to do.

Re: Why the Bootstrap 3 Grid Works (2013)

#69

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.

Is it a big undertake to read all of bootstrap to understand how it does everything? should I read the css or less files? having only finished reading a book about HTML and CSS.

Re: Why the Bootstrap 3 Grid Works (2013)

#70
Its worth pointing out that this all works because of the rule:

* { box-sizing: border-box; }

This rule enables you to set a % width of a column and specify a padding in pixels without pushing the width of the columns beyond the 100%.

(I spent ages trying to replicate the bootstrap grid system and just couldn't get it to work until I discovered this rule!)

Post reply on HN