ActiveAdmin Bootstrap

README.md

ActiveAdmin Bootstrap

This is a rough proof of concept.

There will be broken things.

Comments are welcome.

Installation

• Place the admin_bootstrap file in app/assets/stylesheets/active_admin/admin_bootstrap.css.scss
• Ensure gem 'bootstrap-sass' is in your Gemfile
• Change your active_admin.css.scss to include admin_bootstrap in place of the default styles.

Screenshots

See below.

active_admin.css.scss

// SASS variable overrides must be declared before loading up Active Admin's styles.
//
// To view the variables that Active Admin provides, take a look at
// `app/assets/stylesheets/active_admin/mixins/_variables.css.scss` in the
// Active Admin source.
//
// For example, to change the sidebar width:
// $sidebar-width: 242px;

// Active Admin's got SASS!
// @import "active_admin/mixins";
// @import "active_admin/base";

// Bootstrap Active Admin
@import 'active_admin/admin_bootstrap';

// Overriding any non-variable SASS must be done after the fact.
// For example, to change the default status-tag color:
//
//   .status_tag { background: #6090DB; }

admin_bootstrap.css.scss

@import 'bootstrap';

#wrapper { @extend .container; }

/* Header and Nav */
#header {
  @extend .navbar;
  @extend .navbar-inverse;

  #site_title {
    @extend .navbar-brand;
    margin-top:    0;
    margin-bottom: 0;
  }

  .header-item.tabs {
    @extend .nav;
    @extend .navbar-nav;

    li.current { @extend .active; }
  }
}

#title_bar {
  @extend .clearfix;

  #titlebar_left {
    @extend .pull-left;
  }

  #titlebar_right {
    @extend .pull-right;
  }

  .action_item a {
    @extend .btn;
    @extend .btn-primary;
  }
}

/* Sidebar */
.filter_form {
  .filter_form_field {
    @extend .form-group;

    input,select { @extend .form-control; }
  }

  .buttons {
    input, a { @extend .btn; @extend .btn-default; }
    input[type="submit"] { @extend .btn-primary; }
  }
}

/* Main Content */
#active_admin_content {
  @extend .row;

  &.without_sidebar {
    #main_content_wrapper { @extend .col-md-12; }
  }

  &.with_sidebar {
    #main_content_wrapper { @extend .col-md-10; }
    #sidebar              { @extend .col-md-2;  }
  }
}

/* Tables */
.index_table      { @extend .table; }
.attributes_table table { @extend .table; }

/* Forms */
form {
  @extend form[role="form"];

  .inputs, .actions {
    ol {
      padding-left: 0;
      list-style: none;
    }
  }

  .inputs {
    li {
      @extend .form-group;

      input,select,textarea { @extend .form-control; }
    }
  }

  .actions {
    li {
      display: inline-block;

      input, a { @extend .btn; @extend .btn-default; }
      input[type="submit"] { @extend .btn-primary; }
    }
  }

  label.label {
    /* The label class has a different meaning in bootstrap */
    display: inline-block;
    font-weight: bold;

    padding: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    text-align: inherit;
    white-space: inherit;
    vertical-align: inherit;
    border-radius: inherit;
  }
}

form.png

show.png

everything works fine except this : @extend form[role="form"];

ActionView::Template::Error ("form" failed to @extend "form[role="form"]".
The selector "form[role="form"]" was not found.

I had to comment out the whole form{ section in the scss.