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

Twitter's Bootstrap 2 ready for testing and feedback

markdotto.com

Post reply on HN
Print view View original

41–50 of 87 posts

Re: Twitter's Bootstrap 2 ready for testing and feedback

#41

Post by dangrossman »

tstegart wrote: post #38
ThomPete wrote: post #34

Earlier quoted context omitted.

You get better divider flexibility with the columns. You basically can divide it in half (6 columns each), in thirds (four columns each) in fourth (three columns each), in 6th (two columns each and in all 12 plus of course spanning the entirety. 16 gives you only 1, half,

Any recommendations on how to use grids? I've seen them talked about but I don't actually know what to do with it. How does it help you?

You can line up every element in your design without figuring out and writing widths and margins for every element by hand. You just assign one of the provided class names and you automatically get the desired result.

Re: Twitter's Bootstrap 2 ready for testing and feedback

#42

Post by tptacek »

tstegart wrote: post #38
ThomPete wrote: post #34

Earlier quoted context omitted.

You get better divider flexibility with the columns. You basically can divide it in half (6 columns each), in thirds (four columns each) in fourth (three columns each), in 6th (two columns each and in all 12 plus of course spanning the entirety. 16 gives you only 1, half,

Any recommendations on how to use grids? I've seen them talked about but I don't actually know what to do with it. How does it help you?

Your whole web app becomes a giant nesting table, using divs, classes, and CSS instead of HTML table markup. The math on cell sizes is already done for you, and you're not stuck with wonky table markup and styling.

Re: Twitter's Bootstrap 2 ready for testing and feedback

#43

Post by nsxwolf »

ashot wrote: post #40
nsxwolf wrote: post #39

Earlier quoted context omitted.

Thanks for the tip! That looks a lot better now.

is this: http://paste.ly/pastes intentional?

That route is just left in as a placeholder until there's a better way to view and search the public pastes. One that's not currently jiving with the template.

Re: Twitter's Bootstrap 2 ready for testing and feedback

#44

Post by tstegart »

dangrossman wrote: post #41
tstegart wrote: post #38

Earlier quoted context omitted.

Any recommendations on how to use grids? I've seen them talked about but I don't actually know what to do with it. How does it help you?

You can line up every element in your design without figuring out and writing widths and margins for every element by hand. You just assign one of the provided class names and you automatically get the desired result.

So how do you find what to adjust in the CSS? Just read through it until you figure it out? For example, if I wanted to make four columns instead of three?

Re: Twitter's Bootstrap 2 ready for testing and feedback

#45

Post by jmoiron »

latchkey wrote: post #35
mrchess wrote: post #15

Does anyone know why LESS was picked over SASS for Bootstrap?

While Less and Sass are really similar products that do pretty much the same thing; I switched my site from initially using Sass (scss) to now using Less for three reasons: a) Bootstrap uses less and I'm using bootstrap. b) It was trivial to go from sass to less. Mostly just renaming files to have the right suffix. c) I'm sure someone can argue differently, but I really think that the mixin syntax for Less is signifi…

http://markdotto.com/bs2/docs/less.html

Odd, it says that lessc can take --compress, but using the most recent version of less in npm says that there's no such flag.

Maybe it's on the way, or the bootstrap authors know something we don't.

Re: Twitter's Bootstrap 2 ready for testing and feedback

#46

Post by tptacek »

tstegart wrote: post #44
dangrossman wrote: post #41

Earlier quoted context omitted.

You can line up every element in your design without figuring out and writing widths and margins for every element by hand. You just assign one of the provided class names and you automatically get the desired result.

So how do you find what to adjust in the CSS? Just read through it until you figure it out? For example, if I wanted to make four columns instead of three?

In Haml:

  .span3
    = render :partial => "col1"
  .span3
    = render :partial => "col2"
  .span3
    = render :partial => "col3"
  .span3
    = render :partial => "col4"
Or, to do 3-col:

  .span4
    = render :partial => "col1"
  .span4
    = render :partial => "col2"
  .span4
    = render :partial => "col3"
Nothing in the partial needs to especially care about the grid (as long as its simple) --- but if it wanted to, it could nest columns.

Re: Twitter's Bootstrap 2 ready for testing and feedback

#47

Post by dangrossman »

tstegart wrote: post #44
dangrossman wrote: post #41

Earlier quoted context omitted.

You can line up every element in your design without figuring out and writing widths and margins for every element by hand. You just assign one of the provided class names and you automatically get the desired result.

So how do you find what to adjust in the CSS? Just read through it until you figure it out? For example, if I wanted to make four columns instead of three?

You don't have to edit the CSS at all. You don't even have to open the file, ever, to use Bootstrap. Just link it in the head of your document like any stylesheet and use the class names from the documentation.

Want something on your page to be 3 columns wide? ...

Want to make it 4 columns wide instead? ...

Re: Twitter's Bootstrap 2 ready for testing and feedback

#48

Post by ThomPete »

tstegart wrote: post #38
ThomPete wrote: post #34

Earlier quoted context omitted.

You get better divider flexibility with the columns. You basically can divide it in half (6 columns each), in thirds (four columns each) in fourth (three columns each), in 6th (two columns each and in all 12 plus of course spanning the entirety. 16 gives you only 1, half,

Any recommendations on how to use grids? I've seen them talked about but I don't actually know what to do with it. How does it help you?

You use grids to group and align your content.

Basically you need look at your design in order to determine what would make most sense.

A very popular choice is to divide it into three equal sizes and then have one of them be the right or left column, while the two others combine to form the other column.

So you end up with two columns one for content and one for navigation (typical blog look)

Grids can obviously also be much more complicated as those used in photoshop, 3dmax, word or windows/osx.

If you want to get really into grids I can recommend probably the best book written about them.

Josef Muller Brockman Grid Systems

http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestal...

Re: Twitter's Bootstrap 2 ready for testing and feedback

#49

Post by phillmv »

nivertech wrote: post #20
dkhenry wrote: post #10

Earlier quoted context omitted.

Bootstrap and backbone are great together. I wish there was more concrete tutorials on getting the two to play nice, but all I could find was bits and pieces about both. Even with that I have managed to knock out a few prototypes fairly easily.

Any twitter bootstrap tutorials you can recommend, beside just using inspect element in Chrome console?

Frankly, that's about it, really. It's really straightforward imho.

Re: Twitter's Bootstrap 2 ready for testing and feedback

#50

Post by latchkey »

jmoiron wrote: post #45
latchkey wrote: post #35

Earlier quoted context omitted.

While Less and Sass are really similar products that do pretty much the same thing; I switched my site from initially using Sass (scss) to now using Less for three reasons: a) Bootstrap uses less and I'm using bootstrap. b) It was trivial to go from sass to less. Mostly just renaming files to have the right suffix. c) I'm sure someone can argue differently, but I really think that the mixin syntax for Less is signifi…

http://markdotto.com/bs2/docs/less.html Odd, it says that lessc can take --compress, but using the most recent version of less in npm says that there's no such flag. Maybe it's on the way, or the bootstrap authors know something we don't.

Ah, that got me looking more closely. There is an option to use yui-compress and it seems with the 1.2.1 version. I use the shortened -x argument.

https://github.com/cloudhead/less.js/pull/504/files

Post reply on HN