https://github.com/dkniffin/active_material

ActiveAdmin skin based on Google's Material Design
https://github.com/dkniffin/active_material

activeadmin activeadmin-themes material-design rails

Last synced: about 2 months ago
JSON representation

ActiveAdmin skin based on Google's Material Design

• Host: GitHub
• URL: https://github.com/dkniffin/active_material
• Owner: dkniffin
• License: mit
• Created: 2015-04-16T17:06:49.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2024-07-30T15:28:50.000Z (about 2 months ago)
• Last Synced: 2024-08-05T17:04:27.880Z (about 2 months ago)
• Topics: activeadmin, activeadmin-themes, material-design, rails
• Language: SCSS
• Homepage:
• Size: 1.82 MB
• Stars: 177
• Watchers: 30
• Forks: 68
• Open Issues: 16
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE.txt

Awesome Lists containing this project

README

        
# ActiveMaterial

An ActiveAdmin skin based on Google's Material Design.



## Installation

### Importmap

- Add `gem 'active_material'` to `Gemfile` and run `bundle install`

- Add `import "active_material"` to JS entrypoint (a JS file that is included for activeadmin)

- Add `@import "active_material";` in your CSS style file (the active_material SCSS files are included in the asset path automatically, but you will need to have SCSS build capabilities, using dartsass-rails or similar)

NOTE: no need to pin the import in your application. That's handled internally by the gem.

### npm

- `npm install --save active_material` or `yarn add active_material`

- Add `import "active_material"` to your JS pack file

- Add `@import "active_material/app/assets/stylesheets/active_material.scss";` to your CSS style file

## Options

### Change font

By default, this gem will load the Roboto font from google APIs and use it in the SCSS. If you would like to change that behavior, you have a few options:

1. If you want to change to another font:

    - In your application config, set `config.active_material.font_url` to your font url

    - In your SCSS file, just before `@import "active_material";`, add `$am-font-sans: 'Roboto';`, replacing `Roboto` with your font name.

2. If you want to disable font loading altogether, you can use `config.active_material.load_font = true`

### Other customizations

For other customization options, see [customization.md](./docs/customization.md)

## Contributing

See [CONTRIBUTING.md](./CONTRIBUTING.md)