CODEWITHSUNDEEP
webpolymercomponentsstyling
Jens Kvist
Jens Kvist

Reputation: 559

Google Polymer no Styles on Elements

I heard about Google Polymer and decided to try it out. I have had some trouble loading the components properly. It does not seem that my elements have any colors or anything.

When I download the Starter Kit 1.0 from Google Polymer website, then it appears like this.

enter image description here

But when I try to import to my own project it appears like this (The functionality works)

enter image description here

Here is my HTML

<!DOCTYPE html>
<html>

  <head>

    <title>DueDay</title>

    <!-- Google Fonts -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700">

    <!-- Web Components -->
    <script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>

    <!-- Paper Elements -->
    <link rel="import" href="bower_components/paper-elements/paper-elements.html">

    <!-- Iron Elements -->
    <link rel="import" href="bower_components/iron-elements/iron-elements.html">

    <!-- App Layout -->
    <link rel="import" href="bower_components/app-layout/app-layout.html">

    <!-- Stylesheet -->
    <link rel="stylesheet" href="css/index.css">

  </head>

  <body>

    <app-header reveals>
      <app-toolbar>
        <paper-icon-button icon="search"></paper-icon-button>
        <div id="title" main-title>Tasks</div>
        <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
      </app-toolbar>
    </app-header>
    <app-drawer id="drawer" align="end" swipe-open>
      <paper-menu class="drawer-menu">
        <paper-item>Item 1</paper-item>
        <paper-item>Item 2</paper-item>
      </paper-menu>
    </app-drawer>

  </body>

</html>

Here is my bower.json file

{
  "name": "DueDay",
  "description": "A simple to-do application",
  "main": "index.html",
  "authors": [
    "John Doe"
  ],
  "license": "MIT",
  "homepage": "",
  "private": true,
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "polymer": "Polymer/polymer#^1.7.1",
    "paper-elements": "PolymerElements/paper-elements#^1.0.7",
    "iron-elements": "PolymerElements/iron-elements#^1.0.10",
    "app-layout": "PolymerElements/app-layout#^0.10.6"
  }
}

Can someone tell me why my components are not showing corretly?

Browser: Google Chrome Version 55.0.2883.95 (64-bit)

Any help are appreciated! Thanks in advance.

Upvotes: 3

Views: 273

Answers (1)

ddp
ddp

Reputation: 122

you can add some custom style to your element, like it's in the docs
https://www.polymer-project.org/1.0/toolbox/app-layout
<style is="custom-style"> body { /* No margin on body so toolbar can span the screen */ margin: 0; } app-toolbar { /* Toolbar is the main header, so give it some color */ background-color: #1E88E5; font-family: 'Roboto', Helvetica, sans-serif; color: white; --app-toolbar-font-size: 24px } </style>

<head>
  <title>DueDay</title>
  <base href="https://polygit.org/polymer+:master/components/">
  
  <!-- Web Components -->
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  
  <!-- Google Fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,700">

  <!-- Paper Elements -->
  <link rel="import" href="paper-elements/paper-elements.html">

  <!-- Iron Elements -->
  <link rel="import" href="iron-elements/iron-elements.html">

  <!-- App Layout -->
  <link rel="import" href="app-layout/app-layout.html">

  <!-- Stylesheet -->
  <link rel="stylesheet" href="css/index.css">

  <style is="custom-style">
    body {
      /* No margin on body so toolbar can span the screen */
      margin: 0;
    }
    app-toolbar {
      /* Toolbar is the main header, so give it some color */
      background-color: #1E88E5;
      font-family: 'Roboto', Helvetica, sans-serif;
      color: white;
      --app-toolbar-font-size: 24px
    }
  </style>
</head>
<body>
  <app-header reveals>
    <app-toolbar>
      <paper-icon-button icon="search"></paper-icon-button>
      <div id="title" main-title>Tasks</div>
      <paper-icon-button icon="menu" onclick="drawer.toggle()"></paper-icon-button>
    </app-toolbar>
  </app-header>
  <app-drawer id="drawer" align="end" swipe-open>
    <paper-menu class="drawer-menu">
      <paper-item>Item 1</paper-item>
      <paper-item>Item 2</paper-item>
    </paper-menu>
  </app-drawer>

</body>

</html>

Upvotes: 1

Related Questions