Skip to content

Getting started

Jump to bottom Edit New page
Alexandre Mercier edited this page Jan 28, 2014 · 18 revisions

In this tutorial, we will create a simple search response page:

Result

You can see a similar page in the examples.

Requirements

  • A Linux or Mac OS machine
  • Installed node.js installed(1) with the following packages
    • bower
  • Basic knowledge about HTML and CSS

(1) To install a node.js package, do sudo npm install --global <package>

Install sass-bootstrap-purple

  • Create a new directory called tutorial-bootstrap-purple and go into it
$ mkdir tutorial-bootstrap-purple && cd $_
  • Create a file called bower.json containing:
{
  "name": "tutorial-bootstrap-purple",
  "dependencies": {},
  "devDependencies": {}
}
  • Import sass-bootstrap-purple:
$ bower install sass-bootstrap-purple --save

HTML Boilerplate

  • Create a file index.html containing:
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap Purple Tutorial</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="bower_components/sass-bootstrap-purple/dist/css/bootstrap-purple.css" />
  </head>
  <body>



    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/sass-bootstrap-purple/dist/js/bootstrap.js"></script>
  </body>
</html>

If you open index.html with your browser at this point, you should see this:

After installation

Add a global navigation bar

  • Add the following HTML code inside your body element:
<!-- Header -->
<header>

  <!-- Global navigation -->
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="container">

      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-global-navigation">
          <span class="sr-only">toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
      </div>

      <div class="collapse navbar-collapse" id="my-global-navigation">
        <ul class="nav navbar-nav">
          <li><a class="navbar-brand" href="#"><i class="glyphicon glyphicon-home"></i></a></li>
          <li class="active"><a href="#">news</a></li>
          <li><a href="#">shop</a></li>
          <li><a href="#">service</a></li>
          <li><a href="#">support</a></li>
          <li><a href="#">business</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">more <b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="#">action 1</a></li>
              <li><a href="#">another action</a></li>
              <li><a href="#">aomething else here</a></li>
              <li class="divider"></li>
              <li><a href="#">separated link</a></li>
              <li class="divider"></li>
              <li><a href="#">one more separated link</a></li>
            </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <i class="glyphicon glyphicon-user"></i> log in
            </a>
          </li>
        </ul>
      </div>

    </div>
  </nav>

</header>

For more information about navbars, see sass-bootstrap-purple documentation and the official Bootstrap documentation.

If you are using the navbar-fixed-top class (as in this example), you need to add a top padding to the body element, to prevent the navbar to overlap the page content. All you need is to add the following CSS declaration to your page's head element(2):

    <style>
body {
  padding-top: 40px;
}
    </style>

At this point, your page should look like this:

Navbar added

(2) In this tutorial, we are adding CSS inside the HTML page. In a real project, it is highly recommended to separate CSS from HTML by moving all your CSS code into an external stylesheet.

Add a title

  • Add the following HTML code inside your header element, just after the nav element of the navigation bar:
  <!-- title -->
  <h1 class="container">
    <img src="bower_components/sass-bootstrap-purple/dist/images/purple-logo.png" class="logo"/>
    search
  </h1>

For more information about navbars, see sass-bootstrap-purple documentation.

At this point, your page should look like this:

Title added

Add a local navigation bar

  • Add the following HTML code inside your header element, just after the h1 element of the title:
  <!-- Local navigation -->
  <nav class="container navbar navbar-inverse">

    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#my-local-navigation">
        <span class="sr-only">toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>

    <div class="collapse navbar-collapse" id="my-local-navigation">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">web</a></li>
        <li><a href="#">Purple</a></li>
        <li><a href="#">video</a></li>
        <li><a href="#">images</a></li>
        <li><a href="#">maps</a></li>
      </ul>
    </div>

  </nav>

For more information about navbars, see sass-bootstrap-purple documentation and the official Bootstrap documentation.

At this point, your page should look like this:

Local navbar added

Add a grid

  • Add the following HTML code after the header element:
<div class="container">
  <div class="row">

    <!-- left column -->
    <div class="col col-lg-8 col-md-8 col-sm-8">
    </div>

    <!-- right column -->
    <div class="col col-lg-3 col-lg-offset-1 col-md-3 col-md-offset-1 col-sm-3 col-sm-offset-1">
    </div>

  </div>
</div>

For more information about Bootstrap grid system, see the official Bootstrap documentation.

At this point, your page should look almost the same than the previous step (a small margin has been added at the bottom of the local navigation navbar).

Add menus in the right column

  • Add the following HTML code inside the second column's div element:
      <h3 class="text-primary">related searches</h3>
      <ul class="nav nav-stacked">
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right text-primary"></i> magasin apple</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right text-primary"></i> iphone 4s</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right text-primary"></i> iphone 4</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right text-primary"></i> iphone 3gs</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right text-primary"></i> apple care</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right text-primary"></i> ipad 3</a></li>
      </ul>

      <h3 class="text-primary">refine by date</h3>
      <ul class="nav nav-stacked">
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right text-primary"></i> last 24 hours</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right text-primary"></i> last week</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right text-primary"></i> last month</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right text-primary"></i> last 3 months</a></li>
        <li><a href="#"><i class="glyphicon glyphicon-chevron-right text-primary"></i> last 12 months</a></li>
      </ul>

For more information about stacked navs, see sass-bootstrap-purple documentation and the official Bootstrap documentation.

At this point, your page should look like this:

Right menu added

Add a secondary title

  • Add the following HTML code inside the first column's div element:
      <!-- Secondary title -->
      <h2 class="text-primary">results</h2>
      <ul class="list-unstyled list-inline">
        <li>number of results: <strong>1-11 of 14,758,699</strong></li>
        <li>search for: <strong>"iphone 5"</strong></li>
      </ul>
      <hr class="primary"/>

For more information about stacked navs, see the official Bootstrap documentation.

At this point, your page should look like this:

Secondary title added

Add items

  • Add the following HTML code inside the first column's div element, just after the secondary title:
      <!-- Items -->
      <h3 class="pp-result-title"><a href="http://www.apple.com/fr/iphone/">Apple - iPhone</a></h3>
      <p>
        Un design fin et léger. Connectivité sans fil 4G LTE ultra-rapide. Et
        une pléiade d'apps pour être productif. L'iPhone est l'associé idéal.
        iPhone en entreprise ...
      </p>
      <strong>www.apple.com/fr/iphone/‎</strong>
      <hr/>

      <h3 class="pp-result-title"><a href="http://boutique.orange.fr/mobile/apple-iphone5-16go-noir‎">Apple iPhone 5 16Go noir &amp; ardoise, iOS6, Écran rétina 4" sur ...</a></h3>
      <p>
        Venez découvrir le nouvel Apple iPhone 5 16Go noir &amp; ardoise avec
        écran rétina 4 pouces, puce A6, iSight 8 Mpx et Facetime HD 720p sur
        orange.
      </p>
      <strong>boutique.orange.fr/mobile/apple-iphone5-16go-noir‎</strong>
      <hr/>

      <h3 class="pp-result-title"><a href="#">iPhone 5 - Achat/Vente iPhone 5 - Rueducommerce</a></h3>
      <p>
        Profitez de notre sélection d'iPhone 5 et de tous les avantages
        RueDuCommerce.
      </p>
      <strong>www.rueducommerce.fr › Smartphones › Smartphones Apple‎</strong>
      <hr/>

At this point, your page should look like this:

Items added

Add pagination

  • Add the following HTML code inside the first column's div element, just after all items:
      <!-- Pagination -->
      <div class="text-center">
        <ul class="pagination">
          <li class="disabled"><span><i class="glyphicon glyphicon-chevron-left"></i> previous</span></li>
        </ul>
        <ul class="pagination">
          <li class="active"><a href="#">1</a></li>
          <li><a href="#">2</a></li>
          <li><a href="#">3</a></li>
          <li><a href="#">4</a></li>
          <li><a href="#">5</a></li>
        </ul>
        <ul class="pagination">
          <li><a href="#">next <i class="glyphicon glyphicon-chevron-right"></i></a></li>
        </ul>
      </div>

At this point, your page should look like this:

Pagination added

Add a footer

  • Add the following HTML code inside the body element, just after the grid:
<!-- footer -->
<footer class="footer">
  <div class="container">
    <div class="row">
      <div class="col-lg-2 col-md-2 col-sm-3">
        <ul class="list-unstyled">
          <li><strong>Purple shop</strong></li>
          <li class="divider"></li>
          <li><a href="#">iPad</a></li>
          <li><a href="#">iPhone</a></li>
          <li><a href="#">pay monthly phones</a></li>
          <li><a href="#">pay as you go phones</a></li>
          <li><a href="#">home broadband</a></li>
          <li><a href="#">mobile broadband</a></li>
          <li><a href="#">business shop</a></li>
          <li><a href="#">doing more, using less</a></li>
        </ul>
      </div>
      <div class="col-lg-2 col-md-2 col-sm-3">
        <ul class="list-unstyled">
          <li><strong>yout account</strong></li>
          <li class="divider"></li>
          <li><a href="#">mobile account</a></li>
          <li><a href="#">broadband account</a></li>
          <li><a href="#">mobile BB acount</a></li>
          <li><a href="#">Purple Credit Card</a></li>
          <li><a href="#">Purple Cash</a></li>
          <li><a href="#">register pay as you go</a></li>
          <li><a href="#">activate PAYM SIM</a></li>
          <li><a href="#">activate PAYG SIM</a></li>
          <li><a href="#">top up your phone</a></li>
        </ul>
      </div>
      <div class="col-lg-2 col-md-2 col-sm-3">
        <ul class="list-unstyled">
          <li><strong>communicate</strong></li>
          <li class="divider"></li>
          <li><a href="#">email</a></li>
          <li><a href="#">socialise</a></li>
          <li><a href="#">contacts backup</a></li>
          <li><a href="#">photography</a></li>
          <li><a href="#">Purple Messenger</a></li>
        </ul>
      </div>
      <div class="col-lg-2 col-md-2 col-sm-3">
        <ul class="list-unstyled">
          <li><strong>mobile services</strong></li>
          <li class="divider"></li>
          <li><a href="#">calling</a></li>
          <li><a href="#">messaging</a></li>
          <li><a href="#">mobile email</a></li>
          <li><a href="#">Purple World</a></li>
          <li><a href="#">contacts</a></li>
          <li><a href="#">mobile data services</a></li>
          <li><a href="#">roaming</a></li>
          <li><a href="#">Purple money</a></li>
          <li><a href="#">insurance &amp; protection</a></li>
          <li><a href="#">Swapables</a></li>
        </ul>
      </div>
      <div class="col-lg-2 col-md-2 col-sm-3">
        <ul class="list-unstyled">
          <li><strong>business</strong></li>
          <li class="divider"></li>
          <li><a href="#">sole trader</a></li>
          <li><a href="#">small business</a></li>
          <li><a href="#">medium business</a></li>
          <li><a href="#">corporate business</a></li>
          <li><a href="#">public sector</a></li>
        </ul>
      </div>
      <div class="col-lg-2 col-md-2 col-sm-3">
        <ul class="list-unstyled">
          <li><strong>help &amp; support</strong></li>
          <li class="divider"></li>
          <li><a href="#">mobile help</a></li>
          <li><a href="#">home broadband help</a></li>
          <li><a href="#">mobile broadband help</a></li>
          <li><a href="#">business help</a></li>
          <li><a href="#">top up your phone</a></li>
        </ul>
      </div>
      <div class="col-lg-12 col-md-12 col-sm-12">
        <hr/>
        <ul class="list-inline">
          <li><a href="#">about Purple</a></li>
          <li><a href="#">contact us</a></li>
          <li><a href="#">jobs</a></li>
          <li><a href="#">Purple newsroom</a></li>
          <li><a href="#">advertise</a></li>
          <li><a href="#">terms &amp; conditions</a></li>
          <li><a href="#">privacy</a></li>
          <li><a href="#">cookies</a></li>
          <li><a href="#">access for all</a></li>
          <li><a href="#">safety online</a></li>
        </ul>
      </div>
    </div>
  </div>
</footer>

For more information about footers, see sass-bootstrap-purple documentation.

At this point, the end of your page should look like this:

Footer added

Conclusion

You have created a search results web page containing:

  • A fixed global navigation bar
  • A page title
  • A local navigation bar
  • A grid system with 2 columns:
    • 1 column containing a secondary title, some items and a pagination
    • 1 column containing menus
  • A footer
Add a custom footer
Add a custom sidebar
Clone this wiki locally