Giter Club home page Giter Club logo

administrate-materialize-theme's Introduction

Administrate Materialize Theme

Gem Version CircleCI

A Material theme form Administrate, based on Materialize framework.

Features:

  • easy to install, just include CSS/JS to apply the theme;
  • Material Design responsive theme;
  • customizable via SASS variables;
  • allow to use Materialize components in the admin.

screenshot

Installation

  • After installing Administrate, add to Gemfile: gem 'administrate-materialize-theme' (and execute bundle)
  • Edit app/assets/config/manifest.js, adding at the end:
//= link administrate-materialize-theme/theme.css
//= link administrate-materialize-theme/theme.js
  • Edit app/views/layouts/admin/application.html.erb (you can generate it using rails generate administrate:views:layout), adding before head closing tag:
<%= stylesheet_link_tag 'administrate-materialize-theme/theme', media: 'all' %>
<%= javascript_include_tag 'administrate-materialize-theme/theme' %>

Customizations

To change Materialize variables it's necessary to create a new .scss (or .sass) file like this one (ex. admin.scss):

// app/assets/stylesheets/admin.scss
$primary-color: #FB1;
@import 'administrate-materialize-theme/theme';

And replace the link tag in the application.html.erb with: <%= stylesheet_link_tag 'admin', media: 'all' %>

For the complete list of options take a look here.

Extra features

  • Sidebar example:
<div class="row">
  <div class="col s3">
    <section class="mt-sidebar z-depth-1">
      <h3>Sidebar</h3>
      <p>Some content</p>
    </section>
  </div>
  <div class="col s9">
    <section class="main-content__body main-content__body--flush">
      <!-- ... -->
    </section>
  </div>
</div>

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.

Contributors

License

The gem is available as open source under the terms of the MIT License.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.