
Hands on with Bootstrap 3 - A landing page - trumbitta2
http://www.williamghelfi.com/blog/2013/08/04/bootstrap-in-practice-a-landing-page/
======
lucisferre
One of my biggest complaints with Bootstrap is the grid system (classes or
mixins) and the very strict hierarchy of container > row > columns. I find
this pattern leads to a lot more extraneous elements than I would like.

I'd compare this to [Bourbon
Neat]([http://neat.bourbon.io/](http://neat.bourbon.io/)) (which I've only
looked over) and [Foundation's
grid]([http://foundation.zurb.com/docs/components/grid.html](http://foundation.zurb.com/docs/components/grid.html))
mixins which seem to be much more flexible and offer the ability to use
columns without rows (and no "container" required) allowing for a much more
"semantic" results.

I spent a lot of time trying to decide between Bootsrap, Foundation and
Bourbon + Neat recently and in the end had to settle for Foundation for the
following reasons:

* Has decent default typography settings (not available with Bourbon + Neat though Bootstrap's is fine)

* Much better Grid than Bootstrap (though I think I may like Neat better)

* SASS not LESS (all my current work is in SASS though switching wouldn't be all that painful)

I say "settle" because I think so much of Bootstrap's styles and UI components
are superior. Particularly the forms, but also progress bars, badges, labels,
navigation, menus are all nicer.

Right now I think what I'd love to have is a set of extension defaults for
Bourbon + Neat that bring in nice styling for forms, buttons, typography, etc.
In fact I'm half tempted to just copy it all from Bootstrap. Who knows when
I'll have time to do something like that though.

~~~
jlees
The timing of this post is fortuitous, as I'm looking at building a landing
page and had a long discussion last night with a front-end developer about
using Bootstrap to do it. He's urging me to use Foundation instead.

I haven't developed production level front-end code for years, and Bootstrap
looks like a quick and easy way to get something up that doesn't look like
arse (instead, it looks like Bootstrap). But I am hearing great things about
Foundation as a good basis for long-term development; semantic design being a
major point, plus lack of bloat.

~~~
lucisferre
I don't know why people say Bootstrap is "bloated" and Foundation is not. They
are pretty similar, in fact the Foundation CSS has a larger footprint (86kb vs
65kb). I think people say it because Foundation feels more "raw" but this is
not a selling point in my opinion. In fact I find that Foundation's biggest
flaw is that it's components don't look that hot.

I will also agree Bootstrap _is_ a quick and easy way to get something up. I
would argue it is quicker and easier than Foundation, but many people with
serious CSS skills don't want to work with it for some of the reasons I
brought up. I think that Foundation is more flexible and extensible which is a
big strength.

However, none of this is that important for a landing page, I have been able
to build landing pages quite comfortably with both and don't think either has
a huge advantage here. A landing page isn't a huge task either so I'd try
doing a rough design on paper and building with both to see which you like
best.

I will probably concede though for most "product/fit" finding experiments
Bootstrap may still have the speed advantage, particularly if you are not that
familiar with CSS (in fact I credit Bootstrap with teaching me a lot about
CSS).

~~~
tracker1
What's funny is how many people use the kitchen sink (all-in)
bootstrap.min.css files... I generally pull the source .less files and then
copy the variables, and mixins file, and create my own bootstrap-custom.less
that points to the copied files, and the rest of the original... from there, I
can modify the copied bits at will, and better integrate my own extensions.

------
svmegatron
Really nice walkthrough!

But, it's a little copy heavy. And you have to scroll a lot, there's too much
info below the fold. Let's use a carousel.

I kid, I kid!

Really, excellent walkthrough, the step by step screenshots were super
helpful.

~~~
trumbitta2
I know I know... needs also way more jQuery!

Joking :p Thank you

------
roybarberuk
I don't see the need to use a whole heavy framework for such a simple page. I
know it's just a demo but people need to be aware. I bet that page has only
used 15-20% of the selectors in bootstrap meaning 80-85% code bloat.

I do like bootstrap, if used correctly and in the right situation.

~~~
trumbitta2
True. But don't forget the CDN and caching shenanigans.

------
sologoub
Nice work!

Unfortunately, doesn't really work on either iPhone or Android 4.3 phone -
background is not visible and the design doesn't look as stunning.

That's the problem with responsive design - very difficult to get perfect.

~~~
trumbitta2
Thanks :)

The problems you are reporting sound strange to me, because it works on my
Android 2.3 with default browser...

BTW, I didn't specifically focus on obtaining a more than "ok" version on
mobile, this time ;)

~~~
sologoub
I'm using Chrome on 4.3 (Galaxy Nexus) and safari on the iphone (fully updated
to whatever is the latest).

~~~
sologoub
On Nexus 7 (1st gen) the background is visible, but in portrait mode only
covers 3/4 of the screen. In landscape looks normal.

------
endlessvoid94
I _love_ how you used song lyrics instead of Lipsum text. That's amazing, and
I will be stealing this.

------
uxwtf
Last week I switched my project to customized Bootstrap 3. It has lots of
useful features compared to previous version and it has a flat UI look and
feel. In your example, I would use a larger side margin around the text.
Otherwise, it lacks a bit of spacing.

~~~
AndyNemmity
I'd be interested in an article with the new features. I looked at Bootstrap
3, and as someone who casually uses Bootstrap 2, it looks the same to me.

------
SideburnsOfDoom
"We horizontally centered the content with a .col.lg-6 .col-offset-3."

It could do with explanation of or links to what that means. As it is,
".col.lg-6 .col-offset-3" meaning "horizontally centered" is completely opaque
to newcomers.

~~~
wilfra
It's a 12 column (col) grid, so a 'col-lg-6' takes up half of the page. 'col-
offset-3' adds a 3 column margin on the left, effectively centering the
element.

[http://getbootstrap.com/css/#grid](http://getbootstrap.com/css/#grid)

------
taspeotis
The Google Fonts link should be protocol relative.

------
Yhippa
I'm more of a server-side guy but have to make occasional trips to the front-
end. This guide was great for people like me who don't know all of the jargon.
Thanks, and I'm really looking forward to your e-book.

------
ghc
I looked at the live demo first. It didn't look like there'd be much bootstrap
involved so I almost closed the article, but it's actually worth a read
because there's more to it than meets the eye.

------
mg74
Totally unrelated, but what editor is this that is being used here for the
screenshots? Anyone know?

~~~
tjbiddle
It's not a screenshot - Just some CSS :-).

~~~
mg74
What with the Mac window chrome and all? Well, fooled me.

Thanks for the reply

------
vbsteven
This article shows that it's not too hard to get a bootstrap page to look
different from vanilla bootstrap. A lot of bootstrap users just slap a new
background color on the default navbar and that's the end of their
customization.

------
wil421
Bootstrap is great but I usually end up having to override a lot and it ends
up becoming a pain sometime. Also if the responsive theme isn't set up right
it can end up looking like a disaster.

~~~
tracker1
It works better if you use the source .less files, and make your own
modifications as needed.. I make copies of the variables and mixins, and
generally only need to edit my copies, then have a custom less that loads my
variables/mixins along with the other source files as-is.

------
tswartz
For someone just beginning to learn Rails and using Bootstrap this was a very
interesting post! Great to see the progression as you added on the different
parts.

------
weisser
Nice walkthrough and +1 for using Creedence Clearwater Revival lyrics for the
landing page copy! :)

------
tomorgan
what are you projected timelines for your book? I need to learn Bootstrap
"properly" for a project, sometime in the next 6-12 months, and wondering
whether your book will be around in time!

~~~
trumbitta2
I don't have a certain date, but it won't be too much after the final stable
release of Bootstrap 3

------
EugeneOZ
It's annoying that EACH input field in BS3 should have class .form-control and
that requirement to be inside span<row<container - very high coupled. But
Foundation 4 is unacceptable ugly, despite of awesome grid...

~~~
zalew
ugly? you know you're supposed to adapt css to your design, not the other way
around, right?

~~~
EugeneOZ
Yes ugly. And not, CSS framework it's not only grid, it's styles also.

------
clicks
Looks beautiful. I look forward to the book. :)

------
ricardobeat
Use Bootstrap + Angular and you can write your whole application in HTML-only!

~~~
phaedryx
This may interest you: [http://angular-
ui.github.io/bootstrap/](http://angular-ui.github.io/bootstrap/)

------
noelwelsh
[Oops. Wrong post!]

------
viennacoder
Nice tutorial

------
ivanbrussik
so nice, saving this

------
pearjuice
We can't have a submission related to Bootstrap without Foundation being
mentioned, can we?

