hello@scotchmedia.com

Bootstrap Smart Package

bootstrap is Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Bootstrap provides a nice foundation for ui. Through the course of these lessons we will be using it to assist with our design. To get started lets restructure our html to take advantage of [Bootstraps][] features.

  1. Install the smart package:

     $ mrt add bootstrap

  2. Change the contents of client/views/app.html to match:

    client/views/app.html

     <head>
   <title>presentski</title>
 </head>

 <body>
   <div class="container" role="main">
     <div class="page-header">
       <a href="/">
         <h1>Presentski</h1>
       </a>
     </div>
     <div class="content">
       {{> hello}}
     </div>
   </div>
 </body>

 <template name="hello">
   <h1>Hello World!</h1>
   {{greeting}}
   <input type="button" value="Click" />
 </template>

    All we have done is wrapped our hello template in some divs with bootstrap specific class names.

  3. Visit http://localhost:3000/ to see the changes

Resources

  • bootstrap - Sleek, intuitive, and powerful front-end framework for faster and easier web development.

Comments