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

51–60 of 87 posts

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

#51

Post by tstegart »

dangrossman wrote: post #47
tstegart wrote: post #44

Earlier quoted context omitted.

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? ...

You sirs, are both awesome. I think I need to do more research into all of this and find a good how-to guide because if I didn't know how to do the above, I probably shouldn't be doing it until I know more. I've been down that path before and it leads only to frustration when I realize I know no idea what I'm doing :)

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

#52

Post by aaronbrethorst »

tptacek wrote: post #46
tstegart wrote: post #44

Earlier quoted context omitted.

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.

or better yet, you have semantically named elements and assign them column values in your .less file:

    #sidebar {
      .makeColumn(4);
    }
    #main_pane {
      .makeColumn(8);
    }

    #sidebar
      = render :partial => 'common/sidebar'
    #main_pane
      = yield

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

#53

Post by tptacek »

ThomPete wrote: post #48
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 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 als…

I have this book and like it, but I doubt it's particularly useful for the typical nerd wiring up a credible looking web application.

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

#54

Post by scoot »

ibejoeb wrote: post #16
tptacek wrote: post #9

Have been using and loving Bootstrap for the past few weeks. Can't recommend it highly enough. I thought Themeforest templates were a great secret weapon, but the thoughtfulness that went into the actual markup in Bootstrap makes working with it fast and painless. That said: no idea what's in Bootstrap 2. Someone got a concise summary?

The big one, for me at least, is the move from a 16-column grid to a 12-column grid. I didn't look into the technical differences, just those that would impact development with it. I just converted a ton of stuff (like last week ), so it's pretty fresh in my mind. I feel like I should have checked the wip branch first, but this has really become my favorite kit. I've been about 95% YUI and the remainder OOCSS, and Bo…

It's imperial vs. base 2. Always knew there was a reason a foot has 12 inches, and a circle has 360 degrees...

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

#55

Post by tstegart »

tptacek wrote: post #53
ThomPete wrote: post #48

Earlier quoted context omitted.

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 als…

I have this book and like it, but I doubt it's particularly useful for the typical nerd wiring up a credible looking web application.

Can you recommend a different book that would be more useful to someone trying to edit Twitter Bootstrap from a beginner's perspective?

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

#56

Post by tptacek »

tstegart wrote: post #55
tptacek wrote: post #53

Earlier quoted context omitted.

I have this book and like it, but I doubt it's particularly useful for the typical nerd wiring up a credible looking web application.

Can you recommend a different book that would be more useful to someone trying to edit Twitter Bootstrap from a beginner's perspective?

You don't need a book. You just need to build a hello-world application with the Bootstrap CSS/JS code, using one of the layouts they provide as a starting point. Then just use the page of Bootstrap demos as an a la carte menu as you find yourself needing UI features.

The Grid Systems book that was recommended earlier is a better bet if you're a typographer or graphic designer, and particularly if you're thinking about designing novel grid systems. But you're not doing that. The Bootstrap grid is trivial and does not require any background in design to use.

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

#57

Post by mark_up »

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…

If you're on a Mac, use CodeKit or its predecessor LessApp... it has a Minify feature.

http://incident57.com/codekit/

http://incident57.com/less/

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

#58

Post by azylman »

ibejoeb wrote: post #16
tptacek wrote: post #9

Have been using and loving Bootstrap for the past few weeks. Can't recommend it highly enough. I thought Themeforest templates were a great secret weapon, but the thoughtfulness that went into the actual markup in Bootstrap makes working with it fast and painless. That said: no idea what's in Bootstrap 2. Someone got a concise summary?

The big one, for me at least, is the move from a 16-column grid to a 12-column grid. I didn't look into the technical differences, just those that would impact development with it. I just converted a ton of stuff (like last week ), so it's pretty fresh in my mind. I feel like I should have checked the wip branch first, but this has really become my favorite kit. I've been about 95% YUI and the remainder OOCSS, and Bo…

You've always been able to easily modify the grid size just by changing the less stylesheet.

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

#59

Post by loceng »

davidw wrote: post #31
aaronbrethorst wrote: post #11

Earlier quoted context omitted.

The docs offer more details: http://markdotto.com/bs2/docs/index.html Here's my quick (and probably incomplete) list: - new 12 column grid - responsive layout - tons of new JS plugins - stacked forms are now the default - lots of new 'controls', like split buttons, new tabs, toolbars, highly styled radio buttons and check boxes. - icons(!)

I wonder if this puts it 'ahead' of Zurb Foundation? I have this sneaking suspicion that even if Zurb does a 'good' job, unless it's way better, they're never going to get the publicity these guys do, and thus won't have quite the same feedback loop.

The one important thing Bootstrap was missing was the responsive layout.
Post reply on HN