materialize cssとは

デザインのライブラリである。
card/loader/icon/dialog/modal など様々なcss/javascriptの機能が充実している。
http://materializecss.com/

スマホ/タブレット/PC の使い分け

helperのcssを使って、デザインを分けます。

Classタグ	表示画面
.hide	Hidden for all Devices
.hide-on-small-only	Hidden for Mobile Only
.hide-on-med-only	Hidden for Tablet Only
.hide-on-med-and-down	Hidden for Tablet and Below
.hide-on-med-and-up	Hidden for Tablet and Above
.hide-on-large-only	Hidden for Desktop Only
.show-on-small	Show for Mobile Only
.show-on-medium	Show for Tablet Only
.show-on-large	Show for Desktop Only
.show-on-medium-and-up	Show for Tablet and Above
.show-on-medium-and-down	Show for Tablet and Below

実装方法

SinatraでMaterialize cssを使う方法がなかったのでCDNでしました。
もう少し良い方法があると思うので引き続き調査します。

 <!DOCTYPE html>
  <html>
    <head>
      <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <!-- Compiled and minified CSS -->
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    </head>

    <body>
      <!--Import jQuery before materialize.js-->
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
    </body>
  </html>