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

71–80 of 91 posts

Re: Why the Bootstrap 3 Grid Works (2013)

#71

Post by eflowers »

derengel wrote: post #69
eflowers wrote: post #53

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.

Read the doc and the Less files. To really use bootstrap, you gotta use their Less and then your own on top of it.

Re: Why the Bootstrap 3 Grid Works (2013)

#72

Post by zecho »

dpearce wrote: post #23
junto wrote: post #8

Earlier quoted context omitted.

Isn't he saying that you should always use a container?

Any content should always be in a container. The 15px margin keeps the content from laying against the side of the browser. If you want to do a fullscreen background or image or something then you don't need the container.

Exactly this. If you want to create a bleed, don't use a container, but if you want content inside that bleeding element, put a container inside of it, which will keep content from bleeding.

If you need multiple bleeds on a page, use multiple containers. Just don't nest containers inside of containers.

Re: Why the Bootstrap 3 Grid Works (2013)

#73

Post by epidemian »

derengel wrote: post #69
eflowers wrote: post #53

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.

I'm not the author, but if you want to learn how something specific about Bootstrap works, i'd recommend inspecting a page with the browser's dev tools. You can immediately see which styles apply to each element, its paddings and margins, and play with the classes' style values and see how they affect its positioning: http://imgur.com/ZzkF0Jb.png

This approach has helped me a lot in understanding how many of Bootstrap components work, and why they are structured the way they are :)

Re: Why the Bootstrap 3 Grid Works (2013)

#74

Post by epidemian »

eflowers wrote: post #59
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.

I'm probably missing something, but wouldn't applying a 30px left and right margin to the specific container work? E.g.: http://jsfiddle.net/xyM48/

The -15px margin on the rows and 15px margin on the columns would still do their job, only that the rows would be 15 pixels smaller.

Re: Why the Bootstrap 3 Grid Works (2013)

#75

Post by eflowers »

zecho wrote: post #72
dpearce wrote: post #23

Earlier quoted context omitted.

Any content should always be in a container. The 15px margin keeps the content from laying against the side of the browser. If you want to do a fullscreen background or image or something then you don't need the container.

Exactly this. If you want to create a bleed, don't use a container, but if you want content inside that bleeding element, put a container inside of it, which will keep content from bleeding. If you need multiple bleeds on a page, use multiple containers. Just don't nest containers inside of containers.

For bleeds I just use the same container structure inside of a wrapper div that has the bleed.

For images that you want to touch the side or whatever, there is some of that fiddling with the margins on the interior elements, yeah.

Re: Why the Bootstrap 3 Grid Works (2013)

#77

Post by mcallan83 »

owenversteeg wrote: post #48
peaton wrote: post #40

The biggest problem I've had with bootstrap is that it is so large. There is so much overhead. My company is working on a project and it would have taken a ton of work to port to bootstrap. For lightweight grids that support dynamically sized containers, masonry was great. But there a ton of issues with keeping the content centered when the container changes size. We dealt with this by using inline-blocked elements w…

Min is an extremely small CSS framework (995 bytes) that has compatibility with Bootstrap but unlike Bootstrap isn't prescriptive in how you do things. It's easy to port sites to Min, and when you do the loading times will shock you. https://github.com/owenversteeg/min (Disclosure: I'm the author)

Min looks like a nice attempt at a lightweight framework, but it is so minimal that I am not sure I could ever find a use case for it. One could easily start with something like normalize and get something up and running just as quickly as implementing Min. I like Bootstrap because I can rapidly lay out an entire application interface in minutes. From there, I can digg into the LESS to customize components and remove the stuff I don't need. Sure, you end up with a larger CSS file, but if optimized it isn't much of an issue.

Re: Why the Bootstrap 3 Grid Works (2013)

#78

Post by [deleted] »

weavie wrote: post #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!)

[deleted]

Re: Why the Bootstrap 3 Grid Works (2013)

#79

Post by owenversteeg »

lowboy wrote: post #63
owenversteeg wrote: post #47

Earlier quoted context omitted.

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?

It was ridiculous, but back for Min 1.0 and 1.5 I couldn't fit in the extra ten or so bytes gzipped and minified. Back then, Min's priorities were "fit in as much stuff in 995 bytes and support IE5.5 as an intellectual exercise".

They have since shifted to "make a CSS framework that can actually be used by other people, while still staying under 995 bytes". I also got another person (Scott O'Hara, https://github.com/scottaohara) to contribute; he made several useful contributions and also made size optimizations. As a result, Min 2.0 will be 995 bytes and also include a (clearly superior) 12-column grid. It will also include many other useful features, like a better responsive navbar and better icons, include all of Bootstrap's features, and it will still support IE5.5+.

Re: Why the Bootstrap 3 Grid Works (2013)

#80

Post by [deleted] »

dasil003 wrote: post #65
CmonDev wrote: 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.

[deleted]
Post reply on HN