9 ms·
Hands on with Bootstrap 3 - A landing page
- weisser 13y agoNice walkthrough and +1 for using Creedence Clearwater Revival lyrics for the landing page copy! :)
- lucisferre 13y agoOne 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.
- rpedela 13y agoBootstrap 2 or 3 or both? BS3's grid system is certainly an improvement over BS2 and looks like it was modelled on Foundation's grid system from your link. I haven't used Foundation or Bourbon Neat though.
- lucisferre 13y agoI've used both, but I'm talking about 3. I tried it out after extensively trying out Foundation's grid and found it does not work nearly as well. It does some odd things with negative margins and such that make it impossible to use any of the mixins without following the exact prescription of container > row > column.
- naf 13y agoWhy not use Neat for your grid and Foundation for typography?
- lucisferre 13y agoHonestly, I've been thinking about it. Have not tried it out that way yet. One step at a time. Step one was upgrading from 3 to 4 and doing some semantic cleanup (no more grid classes anywhere).
- ayi 13y agoyou can use semantic naming with bootstrap too. .wrapper { .make-row(); } .content-main { .make-column(8); } .content-secondary { .make-column(3); .make-column-offset(1); } <div class="wrapper"> <div class="content-main">...</div> <div class="content-secondary">...</div> </div>
- lucisferre 13y agoThis is the exact thing I'm talking about. Try doing that without a container as a top-level container so you actually have: <div class="container"> <div class="wrapper"> <div class="content"> Besides what, semantically speaking, is a wrapper anyways?
- rimantas 13y agoAnd what is a div, semantically speaking? Wrapper is the same, only with class attached for identification/styling purposes.
- lucisferre 13y agoI'm not sure why that is a counter argument. The point I'm making is that I can use Foundation's Grid with a minimum of extraneous container divs levels which I prefer. Bootstrap has a minimum of two. Bootstrap's grid styles use negative margins and other weirdnesses that make them awkward if not used exactly as they were intended to be. If that's fine for what you're doing great, but I found Foundation's grid easier to use as a result of it's different design.
- jlees 13y agoThe 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 13y agoI 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 13y agoWhat'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.
- 13y ago
- dictum 13y ago>SASS not LESS Did you try bootstrap-sass? https://github.com/thomas-mcdonald/bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass
- ricardobeat 13y agoUse Bootstrap + Angular and you can write your whole application in HTML-only!
- phaedryx 13y agoThis may interest you: http://angular-ui.github.io/bootstrap/ http://angular-ui.github.io/bootstrap/
- ghc 13y agoI 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.
- sologoub 13y agoNice 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 13y agoThanks :) 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 13y agoI'm using Chrome on 4.3 (Galaxy Nexus) and safari on the iphone (fully updated to whatever is the latest).
- dangrossman 13y agoThe background is visible on Chrome 28 on Android 4.3 here (Nexus 4).
- vbsteven 13y agoThis 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.
- roybarberuk 13y agoI 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 13y agoTrue. But don't forget the CDN and caching shenanigans.
- pearjuice 13y agoWe can't have a submission related to Bootstrap without Foundation being mentioned, can we?
- taspeotis 13y agoThe Google Fonts link should be protocol relative.
- svmegatron 13y agoReally 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 13y agoI know I know... needs also way more jQuery! Joking :p Thank you
- clicks 13y agoLooks beautiful. I look forward to the book. :)
- noelwelsh 13y ago[Oops. Wrong post!]
- uxwtf 13y agoLast 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 13y agoI'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.
- mg74 13y agoTotally unrelated, but what editor is this that is being used here for the screenshots? Anyone know?
- nickthemagicman 13y agoProbably Sublime text. http://www.sublimetext.com/ http://www.sublimetext.com/ It is the shit.
- alexnorton 13y agoYou mean the code snippets? That's the default styling that comes with Octopress[1], which the author is using for their blog. [1] http://octopress.org/ http://octopress.org/
- lclarkmichalek 13y agoAs far as I can tell, the colour theme is solarized dark (http://ethanschoonover.com/solarized http://ethanschoonover.com/solarized), if that is what you are interested it. It's available for quite a few editors (I use it with emacs via `(load-theme 'solarized-dark t)`).
- tjbiddle 13y agoIt's not a screenshot - Just some CSS :-).
- mg74 13y agoWhat with the Mac window chrome and all? Well, fooled me. Thanks for the reply
- ivanbrussik 13y agoso nice, saving this
- EugeneOZ 13y agoIt'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...
- tswartz 13y agoFor 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.
- endlessvoid94 13y agoI love how you used song lyrics instead of Lipsum text. That's amazing, and I will be stealing this.
- tomorgan 13y agowhat 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 13y agoI don't have a certain date, but it won't be too much after the final stable release of Bootstrap 3
- wil421 13y agoBootstrap 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 13y agoIt 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.
- Yhippa 13y agoI'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.
- viennacoder 13y agoNice tutorial
- SideburnsOfDoom 13y ago"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 13y agoIt'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