CODEWITHSUNDEEP
meteorsassmaterialize
David C
David C

Reputation: 2038

What packages do I need when using materialize sass source code in a meteor project?

I am using materialize with meteor. I have been using the meteor add materialize:materialize command for installing. This works but I would like to be able to edit the sass files before they compile into css files (so that I can change things like primary color and what not). What I have done so far to achieve this: downloaded the sass source files from http://materializecss.com/getting-started.html#download and copied them into the client folder. I also added a scss compiler meteor add fourseven:scss. Even after all this on a fresh meteor project somethings are quite right, I am wondering if I am missing a key package for materialize to work? I believe I am probably just missing a package or library for some of the functionality.

Issues experience so far after using setup mentioned below: (there likely to more be more issues)

Issue 1: Waves effect does not disappear - After clicking on a button the wave appear but does not clear the transparency effect afterwards.

Issue 2: Elements disappear on form submit - After submitting a form the form input fields disappear and my other buttons on the page disappear.

Issue 3: Unable to use the materialize icons - When using an icon from materialize it does not show up or uses a different one. If you are wondering what the icons should look like, check here: http://materializecss.com/icons.html

Setup:

$ meteor create test
$ cd test
$ rm test.html test.css test.js
$ meteor add fourseven:scss
$ mkdir client

copied materialize-src into test/client/
created client/main.html

main.html:

<head>
  <title>Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
</head>

<body>

  <nav class="blue darken-3">
    <div class="nav-wrapper">
      <a href="#" class="brand-logo center">
        Logo
      </a>

      <!-- EXAMPLE ICONS (in navbar) -->
      <ul class="right">
        <li><a href="#" class="tooltipped" data-position="bottom" data-delay="1000" data-tooltip="Map"><i class="mdi-social-public"></i></a></li>
        <li><a href="#" class="tooltipped" data-position="bottom" data-delay="1000" data-tooltip="List"><i class="mdi-action-view-list"></i></a></li>
        <li><a href="#" class="tooltipped" data-position="left" data-delay="1000" data-tooltip="Logout"><i class="mdi-content-clear"></i></a></li>
      </ul>
    </div>
  </nav>

  <!-- EXAMPLE FORM -->
  <form>
    <div class="row">
      <div class="input-field">
        <input id="email" type="email">
        <label for="email">Email</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field">
        <input id="password" type="password">
        <label for="password">Password</label>
      </div>
    </div>
    <div class="row">
      <button class="btn-large col s12 blue darken-3 waves-effect waves-light" type="submit" name="">Log In</button>
    </div>
  </form>
  <div class="row center-align">
    <a class="btn-flat waves-effect waves-teal">Create Account</a>
  </div>
  <div class="row center-align">
    <a class="btn-flat waves-effect waves-teal">Forgot Password</a>
  </div>
</body>

Thank you for any help!

Upvotes: 3

Views: 1439

Answers (2)

Carla
Carla

Reputation: 156

I have been experiencing similar problems using the sass source files with meteor.

The link sokki sent has a line of code that helped me fix the icons problem https://github.com/Dogfalo/materialize/issues/1018

There are 2 parts to fixing the problem.

  1. In your client/sass/components/_icons-material-design.scss file you need to replace

    @each $mdi-icon-name, $mdi-icon-value in $mdi-list-icons {
.#{$mdi-prefix}#{$mdi-icon-name}:before {
  content: unicode($mdi-icon-value);
 }
}

    with

    @each $mdi-icon-name, $mdi-icon-value in $mdi-list-icons {
  .#{$mdi-prefix}#{$mdi-icon-name}:before {
  content: "\"" + $mdi-icon-value + "\"";
 }
}

    This should add blocks where your icons should be but the images won't be there.

  2. Move your /font folder to your /public folder so you have /public/font/material-design-icons and /public/font/roboto

(I am new to writing on SO so excuse any editing problems.)

Upvotes: 3

sokki
sokki

Reputation: 35

There is a related issue on github you could join: https://github.com/Dogfalo/materialize/issues/1018

Upvotes: 1

Related Questions