Skip to content

05 Layout and style

Jump to bottom Edit New page
Dave Strus edited this page Aug 20, 2015 · 2 revisions

Layout and Style

Now that we have Bootstrap and font stuff in place, let's start to make this look like a real app.

Edit app/index.html as follows:

app/index.html

<!DOCTYPE html>
<!--[if lt IE 7]>      <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html lang="en" ng-app="myApp" class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en" ng-app="myApp" class="no-js"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Notely</title>
  <meta name="description" content="Note taking to the next level">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/normalize.css">
  <link rel="stylesheet" href="bower_components/html5-boilerplate/dist/css/main.css">
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Merriweather:400,300,300italic|Oxygen:400,300,700">
  <link rel="stylesheet" href="app.css">
  <script src="bower_components/html5-boilerplate/dist/js/vendor/modernizr-2.8.3.min.js"></script>
</head>
<body>
  <!--ul class="menu">
    <li><a href="#/view1">view1</a></li>
    <li><a href="#/view2">view2</a></li>
  </ul-->

  <!--[if lt IE 7]>
      <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
  <![endif]-->

  <div class="container wrap">
    <div class="row">
      <div class="col-xs-12">
        <header>
          <div class="well">Notely</div>
        </header>
      </div>
    </div>
    <div class="container">
      <div class="row">
        <div class="col-xs-4">
          <nav id="sidebar">
            <div class="well">
              SIDEBAR
            </div>
          </nav>
        </div>
        <div class="col-xs-8">
          <main>
            <div class="well">
              <!-- BEGIN main content -->
              <div ng-view></div>
              <!-- END main content -->
            </div>
          </main>
        </div>
      </div>
    </div>
  </div>

  <!-- In production use:
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/x.x.x/angular.min.js"></script>
  -->
  <script src="bower_components/angular/angular.js"></script>
  <script src="bower_components/angular-route/angular-route.js"></script>
  <script src="app.js"></script>
  <script src="view1/view1.js"></script>
  <script src="view2/view2.js"></script>
  <script src="components/version/version.js"></script>
  <script src="components/version/version-directive.js"></script>
  <script src="components/version/interpolate-filter.js"></script>
  <script src="bower_components/jquery/dist/jquery.min.js"></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
</body>
</html>

Update app.css with some nice styles:

app/app.css

/* app css stylesheet */
body {
  font-family: Oxygen, Helvetica, Arial, sans-serif; }

.container {
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important; }

.row {
  margin-left: 0 !important;
  margin-right: 0 !important; }

.col-xs-12 {
  padding-left: 0 !important;
  padding-right: 0 !important; }

header .well {
  padding-top: 5px;
  padding-bottom: 5px; }
  header .well .user-links {
    float: right;
    color: #ccc; }

h1, h2, h3, h4, h5 {
  font-family: Merriweather;
  font-weight: 300;
  color: #FE5F55; }

a:link, a:visited, a:hover, a:active {
  color: #FE5F55; }

.bootsy_text_area {
  width: 100%;
  border-color: #ccc;
  border: none;
  font-size: 120%; }
  .bootsy_text_area:focus {
    outline: none; }

i.fa-trash-o {
  color: #ccc;
  font-size: 150%;
  vertical-align: middle;
  margin-left: 1em; }
  i.fa-trash-o:hover {
    color: #999; }

.wysihtml5-toolbar .btn-default {
  color: #999; }

input#note_title {
  border: none;
  font-size: 200%;
  font-family: Merriweather;
  color: #FE5F55;
  font-weight: 300;
  width: 100%; }
  input#note_title:focus {
    outline: none; }

ul#notes {
  list-style: none;
  margin-top: 1em;
  padding: 0;
  width: 100%;
  color: #999; }
  ul#notes li {
    border-top: 1px solid #ddd;
    padding: 1em;
    height: 100px;
    font-size: 90%;
    cursor: pointer;
    overflow: hidden; }
    ul#notes li:first-of-type {
      border-top: none; }
    ul#notes li:hover {
      color: white;
      background-color: #FE5F55; }
      ul#notes li:hover .note-title {
        color: white; }
    ul#notes li .note-title {
      color: black;
      font-family: Merriweather;
      font-size: 120%;
      font-weight: 300; }
    ul#notes li .note-body {
      height: 54px;
      overflow: hidden; }

#new_user input[type="text"],
#new_user input[type="password"] {
  width: 300px;
  font-size: 120%;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 0.25em; }

#welcome h1 {
  color: #FE5F55; }
#welcome main {
  margin: 0 auto;
  width: 360px; }

span.login {
  margin-left: 1em; }

Let's update view1 to give a nice welcome message:

app/view1/view1.html

Welcome to Notely.

Commit your work:

$ git add .
$ git commit -m "Add layout and styles"
$ git push

Next: Controllers, Routes, and Views

Add a custom footer
Add a custom sidebar
Clone this wiki locally