Jony Ive redesigns Bootstrap

by paulftw

HTML

<link rel="stylesheet" href="http://bootswatch.com/cosmo/bootstrap.min.css">
<link rel="stylesheet" href="http://bootswatch.com/default/bootstrap-responsive.min.css">
<link rel="stylesheet" href="http://bootswatch.com/css/bootswatch.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.0/css/font-awesome.min.css">
    <title>Bootstrap 7.0</title>
  <body class='ive'>

    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="#">Bootstrap 7.0</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              Logged in as <a href="#" class="navbar-link">Username</a>
            </p>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header">Sidebar</li>
              <li class="active"><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="nav-header">Sidebar</li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li><a href="#">Link</a></li>
              <li class="nav-header">Sidebar</li>
     ...

CSS

html, body {
  background-repeat: repeat-x;
  background: -webkit-linear-gradient(top, #01FF15, #44FCFC, #F94F4F);
  background: -moz-linear-gradient(top, #01FF15, #44FCFC, #FC4C4C);
    min-height: 100%;
}

html, .ive, body {
    min-height: 100%;
}

.well {
  background: -webkit-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0.9));
  background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(255,255,255,0.9));

}

body.ive .navbar.navbar-inverse, body.ive .navbar .navbar-inner {
    
  background: -webkit-linear-gradient(top, #63D9FD, #678CDC);
  background: -webkit-linear-gradient(top, #63D9FD, #678CDC);
}

body.ive .navbar.navbar-inverse, body.ive .navbar.navbar-inverse .brand {
    color: #304E8C;
}

.hero-unit {
    background-color: #87B0E6;
      background: -webkit-radial-gradient(80% 20%, closest-corner, rgba(255,255,255,0.8), #fff);
  background: -moz-radial-gradient(80% 20%, closest-corner, #1a82f7, #2F2727);
  background: radial-gradient(80% 20%, closest-corner, rgba(255,255,255,0.8), #fff);

}
.hero-unit h1,.hero-unit h2,.hero-unit p, .well li {
    color: #565C74;
}

body.ive a.btn {
    background-color: #01FF15;
    border-radius: 5px;
}

.copyri {
    color: #fff;
    text-align: center;
    margin-top: 32px;
}











      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }

      @media (max-width: 980px) {
        /* Enable use of floated navbar text */
        .navbar-text.pull-right {
          float: none;
          padding-left: 5px;
          padding-right: 5px;
        }
      }