Search code examples
csstwitter-bootstrapyeomanyeoman-generator

Yeoman tutorial missing styling

I'm trying to get through this getting started tutorial provided by Yeoman. It is supposed to be styled with bootstrap css, but the initial launch looks like this:

enter image description here

I'm new at this, but I think this indicates missing CSS. The index file starts out like this...

<!doctype html>
<html class="no-js">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
    <!-- build:css(.) styles/vendor.css -->
    <!-- bower:css -->
    <!-- endbower -->
    <!-- endbuild -->
    <!-- build:css(.tmp) styles/main.css -->
    <link rel="stylesheet" href="styles/main.css">
    <!-- endbuild -->
  </head>
  <body ng-app="mytodoApp">
...

The stuff in comments, like build:css, does that mean I'm supposed to do something on the command line? The tutorial doesn't mention anything.

The main.css file looks okay, and looks like it contains CSS things that I need, like .jumbotron { ... }. Also, the bower directory contains a "bootstrap" subdirectory, with lots of promising looking CSS, but the tutorial doesn't mention anything about this either. The tutorial seems to assume that the first launch should look great already, here...

I'm sure I've done all of the steps to this point. Any idea what I missed?

Solution

  • This github issue solved my problem. The answer waaaay at the bottom suggests to do the following:

    $ bower install --save bootstrap#3.3.4

    and then 

    $ grunt wiredep

    It would be an even better answer if it explained what those things mean.