How I use bootstrap material design

1

Hi,

wanted to share some knowledge.

I am fighting with material design package

fezvrasta:bootstrap-material-design

It uses tws:boostrap so you dont need to directly add bootstrap to your project.

One thing worth mentioning is that you need to somehow instruct material itself that element was added.
Arrive.js works like a charm for me, so for me I needed to do few things.

  1. Add api.use(['ryne:arrive-debug'],'client' , {weak: true, unordered: false}); to it’s package.js
  2. Clone that arrive-debug to my packages, remove debug option :smiley:
  3. Add that arrive package to my meteor project, cause we added it as weak dependency meteor add ryne:arrive-debug

And I forgot 1 more thing, I patched that bootstrap-material-design to work in 1.2
So

Package.onUse(function (api) {
  api.versionsFrom(['METEOR@0.9.0', 'METEOR@1.0']);
  api.use('twbs:bootstrap@3.3.1');
  api.use('jquery');
  api.use(['ryne:arrive-debug'],'client' , {weak: true, unordered: false});
  api.addAssets([
    // we bundle all font files, but the client will request only one of them via the CSS @font-face rule
    'fonts/Material-Design-Icons.eot',  // IE8 or older
    'fonts/Material-Design-Icons.svg',  // SVG fallback for iOS < 5 - http://caniuse.com/#feat=svg-fonts, http://stackoverflow.com/a/11002874/126903
    'fonts/Material-Design-Icons.ttf',  // Android Browers 4.1, 4.3 - http://caniuse.com/#feat=ttf
    'fonts/Material-Design-Icons.woff' // Supported by all modern browsers
  ], 'client');
  api.addFiles([
    'css/material.css',
    'css/ripples.css',
    'js/material.js',
    'js/ripples.js',
    'init.js'
  ], 'client');
});

I dont care about versioning on my local packages, so please stay calm :smiley:
Have fun.

Forgot 1 more thing, you also need to copy these included files from “dist” directory inside git clone there.

And if you want to see my humble application, I am online right now for example on https://www.livecoding.tv/shockitv/

1 Like
2

And when I am at it, this is Toggle Button template for autoform I am using for my interface

<template name="afCheckbox_toggle">
  <div class="togglebutton">
    <label>
      {{atts.label}}
      <input type="checkbox" {{atts}} />
    </label>
  </div>
</template>

Than in code for example

<template name="twitterSettings">
  <div class="twitter-settings">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span class="name">
          Twitter
        </span>
        <div class="switch">
          {{> afFieldInput name='twitter_show' template="toggle" label="Show"}}
        </div>
      </div>
      <div class="panel-body">
        <div class="form-group">
          <label for="slidoTag" class="tag col-lg-1 control-label">#</label>
          <div class="col-lg-11 input-container">
            {{> afFieldInput name='twitter_tag' placeholder="Type Twitter tag"}}
            <!--<input type="text" class="form-control floating-label" id="slidoTag" placeholder="Type slido tag">-->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

Some CSS
.

twitter-settings {
  .panel-heading {
    .name {
      display: inline-block;
      font-weight: bold;
    }
    .switch {
      display: inline-block;
      float: right;
    }
  }
  .panel-body {
    .tag {
      padding-right: 5px;
      margin-top: 0;
      font-size: 17px;
    }
    .input-container {
      padding-left: 10px;
    }
  }
}

And screen with few more fields from my admin interface

374×665 19.7 KB

Let me know if you wanna see here more such stuff.

3

And the blog version :smiley: