https://github.com/blocknotes/administrate-bootstrap-theme
A Bootstrap 5 theme for Administrate
https://github.com/blocknotes/administrate-bootstrap-theme
admin bootstrap rails ruby ruby-on-rails theme
Last synced: 10 days ago
JSON representation
A Bootstrap 5 theme for Administrate
- Host: GitHub
- URL: https://github.com/blocknotes/administrate-bootstrap-theme
- Owner: blocknotes
- License: mit
- Created: 2021-04-18T16:56:26.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2024-07-07T20:41:05.000Z (about 1 year ago)
- Last Synced: 2025-06-19T16:16:57.937Z (22 days ago)
- Topics: admin, bootstrap, rails, ruby, ruby-on-rails, theme
- Language: SCSS
- Homepage:
- Size: 3.25 MB
- Stars: 24
- Watchers: 1
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: MIT-LICENSE
Awesome Lists containing this project
README
# Administrate Bootstrap Theme
[](https://badge.fury.io/rb/administrate-bootstrap-theme)
[](https://rubygems.org/gems/administrate-bootstrap-theme)
[](https://github.com/blocknotes/administrate-bootstrap-theme/actions/workflows/linters.yml)
[](https://github.com/blocknotes/administrate-bootstrap-theme/actions/workflows/specs.yml)
[](https://github.com/blocknotes/administrate-bootstrap-theme/actions/workflows/codeql-analysis.yml)
A Bootstrap 5 theme for [Administrate](https://github.com/thoughtbot/administrate).
Features:
- easy to install: just run the generator installer;
- customizable via SASS variables;
- allow to use *Bootstrap* components in the admin.
See some [screenshots](#screenshots).
Please :star: if you like it.
## Installation
- Add to *Gemfile* (of an Administrate project): `gem 'administrate-bootstrap-theme', '~> 1.0'` (and execute `bundle`)
- Run the installer: `bin/rails generate administrate_bootstrap_theme:install`
## Customizations
Edit the variables defined in *app/assets/stylesheets/administrate-bootstrap-theme.scss*:
```scss
$navigation-width: 250px;
$navigation-bg: #055160;
$navigation-bg-active: #d51;
$navigation-fg: #eee;
$primary: #0d6ecd;
$secondary: #666;
$main-content-bg: #f4f8fb;
$main-content-fg: #222;
@import 'administrate-bootstrap-theme/theme'; // required after the variables setup
```
### Extra improvements
Choose a predefined color schema - *app/assets/stylesheets/administrate-bootstrap-theme.scss*:
```scss
@import 'administrate-bootstrap-theme/colors/default';
// @import 'administrate-bootstrap-theme/colors/autumn';
// @import 'administrate-bootstrap-theme/colors/forest';
// @import 'administrate-bootstrap-theme/colors/industrial';
// @import 'administrate-bootstrap-theme/colors/water';
@import 'administrate-bootstrap-theme/theme';
```
Set a UI font:
- you can of course import any font from Google fonts (or other providers);
- to use a pre-configured one - *app/assets/stylesheets/administrate-bootstrap-theme.scss*:
```scss
@import 'administrate-bootstrap-theme/fonts/roboto';
// @import 'administrate-bootstrap-theme/fonts/lato';
// @import 'administrate-bootstrap-theme/fonts/montserrat';
// @import 'administrate-bootstrap-theme/fonts/open_sans';
// @import 'administrate-bootstrap-theme/fonts/source_sans_pro';
@import 'administrate-bootstrap-theme/theme';
```
For more improvements to the sidebar:
- generate the navigation partial: `bin/rails generate administrate:views:navigation`
- edit the partial *app/views/admin/application/_navigation.html.erb*
- to change the _Back to app_ button to a title component: replace the classes for the first link (_back_to_app_) with `button--title`
- update the translation button title editing *config/locales/en.yml*:
```yml
en:
administrate:
navigation:
back_to_app: 'MyAdmin'
```
- to add a copyright line at the bottom, update the links part with:
```erb
<% Administrate::Namespace.new(namespace).resources_with_index_route.each do |resource| %>
...
<% end %>
by Mat
```
## Screenshots
- Index, show and edit pages: 
- Index page with some customized colors: 
- Color schemas (none, default, autumn, forest, water, industrial): 
## Do you like it? Star it!
If you use this component just star it. A developer is more motivated to improve a project when there is some interest.
Or consider offering me a coffee, it's a small thing but it is greatly appreciated: [about me](https://www.blocknot.es/about-me).
## Contributors
- [Mattia Roccoberton](https://blocknot.es/): author
## License
The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).