Developer Console Style Guide: All

Alerts

Alerts are used to display flash messages to the user.

Welcome to Pivotal Web Services!
Step 1: Download and Install the CLI
Step 2: Login to the CLI
$ cf login -a https://api.run.pivotal.io
Email: user@example.com
Password: ••••••••
Step 3: Push your app
Getting Started with Pivotal Web Services
.alert.alert-welcome.alert-dismissable
  %button.close{data: {dismiss: "alert"}}
    %i.fa.fa-times
  .h1.mvs.type-brand-3.em-high
    Welcome to Pivotal Web Services!
  .h3.mtxl.type-neutral-2
    Step 1: Download and Install the CLI
  .row
    .col-md-6
      %a.btn.btn-primary.btn-block.mbl{:href => "#"}
        %i.fa.fa-windows.prs
        Windows 64 bit
      %a.btn.btn-primary.btn-block.mbl{:href => "#"}
        %i.fa.fa-windows.prs
        Windows 32 bit
    .col-md-6
      %a.btn.btn-primary.btn-block.mbl{:href => "#"}
        %i.fa.fa-apple.prs
        Mac OSX 64 bit
    .col-md-6
      %a.btn.btn-primary.btn-block.mbl{:href => "#"}
        %i.fa.fa-linux.prs
        Linux 64 bit (.deb)
      %a.btn.btn-primary.btn-block.mbl{:href => "#"}
        %i.fa.fa-linux.prs
        Linux 32 bit (.deb)
    .col-md-6
      %a.btn.btn-primary.btn-block.mbl{:href => "#"}
        %i.fa.fa-linux.prs
        Linux 64 bit (.rpm)
      %a.btn.btn-primary.btn-block.mbl{:href => "#"}
        %i.fa.fa-linux.prs
        Linux 32 bit (.rpm)
  .h3.mtxl.type-neutral-2
    Step 2: Login to the CLI
  %pre.panel.bg-neutral-9{"ng-non-bindable" => "true"}
    %code.type-neutral-3
      :preserve
        $ cf login -a https://api.run.pivotal.io
        Email: user@example.com
        Password: ••••••••
  .h3.mtxl.type-neutral-2 Step 3: Push your app
  %a.btn.btn-highlight.btn-lg.mbxl{:href => "http://docs.run.pivotal.io/starting/", :target => "_blank"}
    %i.fa.fa-rocket.prs
    Getting Started with Pivotal Web Services

App Status

App

App Name

last push: sometime ago
#app_status.started.mtxl
  %svg#svg{width: "350", height:"350", viewPort:"0 0 100 100", version:"1.1", xmlns: "http://www.w3.org/2000/svg"}
    %circle{r: "170", cx: "175", cy: "175",  transform: "rotate(270, 175, 175)", "stroke-dasharray" => (2*Math::PI*170).ceil + 1, "stroke-dashoffset" => "0"}
  .content
    .name
      %h5.mbn
        %strong.type-neutral-5.em-alt.em-high App
      %h1.em-max.type-dark-1.mtn App Name
    .started-controls
      %button.btn.btn-primary
        %i.fa.fa-square.icon-control
      %button.btn.btn-primary.mll
        %i.fa.fa-repeat.icon-control
    .stopped-controls
      %button.btn.btn-primary
        %i.fa.fa-play.icon-control
    #last-push-info
      .small= "last push: sometime ago"
    #first-route-info
      .small.type-ellipsis-1-line
        %a{href: '#' }somerouteofsome.sort

ContentEditable

This form looks and behaves mostly like a contenteditable field

%form.form-contenteditable{'name' => 'newEditableForm',
                                 "ng-controller" => "FormContentEditableController",
                                 "ng-submit" => 'editText.save()',
                                 "ng-class"=>'{"saving": editText.saving, "editing": editText.editing}'}
  %label.txt-c
    .form-group.mbn
      %span.form-contenteditable-hint.link-lowlight Hover text
      %h5.showing-text.type-neutral-5 Default text
      .saving-text Updating Text...
      %input.em-max.type-dark-1.form-control{"name" => "name",
                          "type" => "text",
                          "ng-model" => "editText.newModel.name",
                          "tabIndex" => "-1",
                          :required => "required",
                          "ng-focus" => 'editText.enterEditMode()',
                          "ng-blur" => 'editText.save()'}

Health Indicators

App Health Indicator

This component indicates application health. It has many states.

States

The application health indicator can be .running, .warning_75, .warning_50, .warning_25, .warning_0, .stopped.

100%
75%
50%
25%
0%
STOPPED
.row
  .col-md-4
    .health.running
      .health-wrapper
        .indicator
        .value 100%

  .col-md-4
    .health.warning_75
      .health-wrapper
        .indicator
        .value 75%

  .col-md-4
    .health.warning_50
      .health-wrapper
        .indicator
        .value 50%

  .col-md-4
    .health.warning_25
      .health-wrapper
        .indicator
        .value 25%

  .col-md-4
    .health.warning_0
      .health-wrapper
        .indicator
        .value 0%

  .col-md-4
    .health.stopped
      .health-wrapper
        .indicator
        .value STOPPED

Inline Modal

.inline-modal{'ng-controller' => 'InlineModalExampleCtrl', 'ng-cloak' => true, 'ng-class' => 'inlineModalExample.state'}
  .modal-backdrop.animate-show
  .content
    .panel.panel-shadow
      .panel-body.pavxl.phxxl
        I'm the content!
        %a{'ng-click' => 'activateInlineModal()', 'ng-show' => 'inlineModalExample.state === "showing"'} Click here to inline-modal me.
        %a{'ng-click' => 'deactivateInlineModal()', 'ng-show' => 'inlineModalExample.state === "editing"'} Click here to de-inline-modal me.

Addable List

New elements fade in

  • item 1
  • item 2
  • item 3
Add an item
<ul class="list-group" id="list-group-adding-demo">
  <li class="list-group-item">
    item 1
  </li>
  <li class="list-group-item">
    item 2
  </li>
  <li class="list-group-item">
    item 3
  </li>
</ul>
<a data-add-item-to="#list-group-adding-demo">Add an item</a>

Log Lines

Log lines

2014-08-07T14:19:42.79-0700 [App] OUT Starting app instance (index 1) with guid 20b9f4f9-ce28-4165-b310-004c8d7145f6
2014-08-09T11:23:12.39-0700 [App] ERR [2014-08-09T11:23:12] INFO WEBrick 1.3.1
2014-08-07T14:19:51.37-0700 [DEA] OUT Stopping app instance (index 0) with guid 20b9f4f9-ce28-4165-b310-004c8d7145f6
.panel-border-bottom.bg-neutral-10.paxl.mbn
  %div.log-line.phm
    %span.source-name-app 2014-08-07T14:19:42.79-0700 [App]
    %span.message-out OUT Starting app instance (index 1) with guid 20b9f4f9-ce28-4165-b310-004c8d7145f6

  %div.log-line.phm
    %span.source-name-app 2014-08-09T11:23:12.39-0700 [App]
    %span.message-err ERR [2014-08-09T11:23:12] INFO  WEBrick 1.3.1

  %div.log-line.phm
    %span.source-name-sys 2014-08-07T14:19:51.37-0700 [DEA]
    %span.message-out OUT Stopping app instance (index 0) with guid 20b9f4f9-ce28-4165-b310-004c8d7145f6

Tailing Log Lines

Tailing Log lines

2014-08-07T14:19:42.79-0700 [App] OUT Starting app instance (index 1) with guid 20b9f4f9-ce28-4165-b310-004c8d7145f6
2014-08-09T11:23:12.39-0700 [App] ERR [2014-08-09T11:23:12] INFO WEBrick 1.3.1
2014-08-07T14:19:51.37-0700 [DEA] OUT Stopping app instance (index 0) with guid 20b9f4f9-ce28-4165-b310-004c8d7145f6
.panel-border-bottom.bkg-default-4.paxl.mbn
  %div.log-line.phm
    %span.source-name-app 2014-08-07T14:19:42.79-0700 [App]
    %span.message-out OUT Starting app instance (index 1) with guid 20b9f4f9-ce28-4165-b310-004c8d7145f6

  %div.log-line.phm
    %span.source-name-app 2014-08-09T11:23:12.39-0700 [App]
    %span.message-err ERR [2014-08-09T11:23:12] INFO  WEBrick 1.3.1

  %div.log-line.phm
    %span.source-name-sys 2014-08-07T14:19:51.37-0700 [DEA]
    %span.message-out OUT Stopping app instance (index 0) with guid 20b9f4f9-ce28-4165-b310-004c8d7145f6

Upgrade Your Account Widget

Upgrade your account

Upgrade from your free trial to gain immediate access to more application memory and premium marketplace services.

More Memory

10GB

Pay As You Go

$0.03
per gb per hour

Premium Service Plans

.panel.panel-shadow-3.bg-neutral-9#upgrade_your_account
  .panel-body
    %h1.mbl.txt-c.type-dark-1.em-high Upgrade your account
    %p.pbm.txt-c
      Upgrade from your free trial to gain immediate access to more application memory and premium marketplace services.
    .row.mtxl.ptl
      .col-md-24.txt-c
        .row
          .col-md-8.col-md-offset-8
            %button.btn.btn-highlight.btn-lg.btn-block Upgrade Now
    .row.mvxl.ptxl
      .col-md-8.txt-c
        %h4.em-alt.em-high.mvl More Memory
        .circle.panel-basic.bg-neutral-10
          .text.maxl.type-neutral-5 10GB 
      .col-md-8.txt-c
        %h4.em-alt.em-high.mvl Pay As You Go
        .row
          .col-md-18.col-md-offset-3
            .panel.panel-basic.bg-neutral-10.pvxxl
              .panel-body.pas
                .cost.type-neutral-5 $0.03
                .type-neutral-5 per gb per hour
      .col-md-8.txt-c
        %h4.em-alt.em-high.mvl Premium Service Plans
        .premium-services
          .panel.panel-basic.bg-neutral-10.pvm
            .panel-body
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>
              .tiny-circle>