I have found this very great looking Polymer-starter-kit-lite V1.0.1 here. When trying to create my own page some text appears while loading the page. Here is mine:
and here is the Polymer Starter Kit that i downloaded from github, it comes in with a smooth fading effect:
Maybe someone knows how this is done!
<!DOCETYPE html>
<!-- General -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-size=1.0, minimum-size=1.0, user-scalable=no">
<title>Foodify - Einfach Einkaufen!</title>
<!-- SEO Tags -->
<meta name="author" content="Andre Kuhlmann">
<meta name="page-topic" content="Branche Produkt">
<meta name="page-type" content="Private Homepage">
<meta name="audience" content="Alle">
<meta http-equiv="content-language" content="de">
<meta name="robots" content="index, follow">
<!-- Don't forget to place the favicon and the apple-touch-icons -->
<!-- Chrome ThemeColor for Android -->
<meta name="theme-color" content="#2ECC71">
<!-- Web Application Manifest -->
<link rel="manifest" href="manifest.json">
<!-- Title Color for Windows 8 -->
<meta name="msapplication-TintColor" content="#2ECC71">
<!-- Tile icon for Win8 (144x144) -->
<meta name="msapplication-TileImage" content="images/touch/ms-touch-icon-144x144-precomposed.png">
<!-- Add to homescreen for Chrome on Android -->
<meta name="mobile-web-app-capable" content="yes">
<meta name="application-name" content="Polymer Starter Kit">
<link rel="icon" sizes="192x192" href="images/touch/chrome-touch-icon-192x192.png">
<!-- Add to homescreen for Safari on iOS -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="Polymer Starter Kit">
<link rel="apple-touch-icon" href="images/touch/apple-touch-icon.png">
<!-- build:css css/main.css -->
<link rel="stylesheet" href="css/main.css">
<!-- endbuild-->
<!-- will be replaced with elements/elements.vulcanized.html -->
<link rel="import" href="elements/elements.html">
<!-- endreplace-->
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<!-- endbuild -->
</head>
<body fullbleed layout vertical>
<!-- Drawer -->
<paper-drawer-panel>‚
<paper-header-panel drawer mode="seamed">
<paper-toolbar class="tall green">
<div horizontal layout end>
<div>Menu</div>
</div>
</paper-toolbar>
</paper-header-panel>
<paper-header-panel main class="main" mode="seamed">
<paper-toolbar>
<paper-icon-button icon="menu" tabIndex="1" id="paperToggle" paper-drawer-toggle></paper-icon-button>
<div class="flex">Foodify</div>
<paper-icon-button icon="refresh"></paper-icon-button>
<paper-icon-button icon="search"></paper-icon-button>
</paper-toolbar>
</paper-header-panel>
</paper-drawer-panel>
</body>
Thanks, André
To replicate how the starter kit fades in on load, change the body by adding an unresolved attribute as follows:
<body class="fullbleed layout vertical" unresolved>
// ... content here
</body>
from the docs:
The unresolved attribute on the element is used to prevent a
flash of unstyled content (FOUC) on browsers that lack native support
for custom elements. For details, see the Polymer styling reference.
Note that this documentation refers to version 0.5 but this works in version 1.0 as well.
Related
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Start Meta -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="description" content="Beorx - Creative Agency HTML5 Template" />
<meta name="author" content="ThemeOri">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Title of Site -->
<title>Protonix</title>
<!-- Favicons -->
<link rel="icon" type="image/png" href="assets/img/favicon.png">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="assets/css/bootstrap.min.css">
<!-- fontawesome -->
<link rel="stylesheet" href="assets/css/fontawesome.min.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- Swiper -->
<link rel="stylesheet" href="assets/css/swiper-bundle.min.css">
<!-- Magnific -->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- Nice Select -->
<link rel="stylesheet" href="assets/css/nice-select.css">
<!-- Mean menu -->
<link rel="stylesheet" href="assets/css/meanmenu.min.css">
<!-- Flaticon -->
<link rel="stylesheet" href="assets/fonts/flaticon.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="assets/sass/style.css">
<!--#include file="header.shtml"-->
</head>
above is the code of my html plesk panel file I copied data of header.shtml from the same file and then removed that data from source file while keeping those in header.shtml without making any change but issue is the file header.shtml is not getting called any solution for it?
How do I convert this to cshtml with razor tags?
<head>
<!-- Basic -->
<meta charset="UTF-8">
<title>Modals | SHARED ON THEMELOCK.COM</title>
<meta name="keywords" content="HTML5 Admin Template" />
<meta name="description" content="Porto Admin - Responsive HTML5 Template">
<meta name="author" content="okler.net">
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<!-- Web Fonts -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800|Shadows+Into+Light" rel="stylesheet" type="text/css">
<!-- Vendor CSS -->
<link rel="stylesheet" href="assets/vendor/bootstrap/css/bootstrap.css" />
<link rel="stylesheet" href="assets/vendor/font-awesome/css/font-awesome.css" />
<link rel="stylesheet" href="assets/vendor/magnific-popup/magnific-popup.css" />
<link rel="stylesheet" href="assets/vendor/bootstrap-datepicker/css/datepicker3.css" />
<!-- Specific Page Vendor CSS -->
<link rel="stylesheet" href="assets/vendor/pnotify/pnotify.custom.css" />
<!-- Theme CSS -->
<link rel="stylesheet" href="assets/stylesheets/theme.css" />
<!-- Skin CSS -->
<link rel="stylesheet" href="assets/stylesheets/skins/default.css" />
<!-- Theme Custom CSS -->
<link rel="stylesheet" href="assets/stylesheets/theme-custom.css">
<!-- Head Libs -->
<script src="assets/vendor/modernizr/modernizr.js"></script>
</head>
Lets start a journey:
Open HTML document
Click CTRL+A
Click CTRL+C
Enter to your solution directory
Create new empty *.cshtml file
Click CTRL+V
That's all - it will be work. (In future add in tags what version of .Net are you using and what exactly need because my answer is correct to your question. For more information about Razor read this)
Create a new cshtml file. and paste your code
This is my HTML and the nav is not working.
This is new to me, the only thing I am doing different this time is using Angular. When I click in any nav button the address bar goes like
http://localhost:8018/#/WebDev
insted of
http://localhost:8018/#WebDev
What am I doing wrong here?
<head>
<!-- Basic Page Needs
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta charset="utf-8">
<title>DevMash</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Metas
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=yes" />
<!-- FONT
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400|Roboto+Mono" rel="stylesheet">
<!-- CSS
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/skeleton.css">
<!-- Favicon
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<link rel="icon" type="image/png" href="images/favicon.png">
<!-- Scripts
–––––––––––––––––––––––––––––––––––––––––––––––––– -->
<script type="text/javascript" src="js\jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="js\angular.min.js"></script>
</head>
<body>
<nav>
<ul>
<li>
WebDev
</li>
<li>
Android
</li>
<li>
Python
</li>
<li>
FAQs
</li>
</ul>
</nav>
<div id="WeDev"><ng-include src="'WebDev.html'"></ng-include></div>
<div id="Android" ng-include="'android.html'"></div>
<div id="Python" ng-include="'python.html'"></div>
<div id="faq" ng-include="'faq.html'"></div>
</body>
</html>
Update: I just want it to work as it does normally in HTML,ie, when tag is clicked, the page should be directed to the target div.
You are supposed to do it in AngularJs Way if you are in an AngularJs environment. if you want to do it in a native way, then remove angularJs from your script.
For more detail, please see https://docs.angularjs.org/api/ng/service/$anchorScroll
I replaced from href="#target" to href="##target". Seems to work.
I am trying to use "vulcanize index1.html > index2.html", but am stumbling on an issue in IE. I have condensed it into this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src='bower_components/webcomponentsjs/webcomponents.min.js'></script>
<link rel="import" href="bower_components/polymer/polymer.html"/>
<link rel='import' href='bower_components/paper-drawer-panel/paper-drawer-panel.html'>
</head>
<body>
<paper-drawer-panel id="paperDrawerPanel">
<div drawer>
drawer
</div>
<div main>
main
</div>
</paper-drawer-panel>
</body>
In Chrome the result is fine, but in IE, "drawer" and "main" are shown incorrectly
Anyone?
Seems to be a bug which is already logged
https://github.com/Polymer/vulcanize/issues/209
I am using a main template with a {{> yield}} statement to render my Meteor JS pages. This is how it looks like:
<template name="main">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="author" href="humans.txt">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/spacers.css">
</head>
<body>
<div class="container">
{{> yield}}
</div>
<!-- Bootstrap JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</template>
And with it, I render my actual pages e.q.:
<template name="home">
HOME
</template>
This all is functional because I use Iron Router like so:
Router.configure({
layoutTemplate: "main",
notFoundTemplate: "404"
});
Router.route("/", function() {
this.render("home");
});
The problem I face is that the page title isn't being rendered. I would expect the page title to be "Title" because I have defined <head> -> <title> to be "Title" (as you can see in my main template).
The weird thing here is that all the CSS does load, which indicates that the <head> section is - at least partially - rendered.
The head is rendered in a special process. Let's call it bundling for the lack of a better word. In that bundling-process the contents of all body and head elements are put into the HTML that will be served first. iron-router appends the contents of your template to the body after meteor is loaded on the client. These elements are only being searched for on the root level. The link tags are loaded, because most browsers (more or less) don't care where they occur.
I'd do something like this:
client/main.html
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="author" href="humans.txt">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/spacers.css">
</head>
<body>
<!-- Bootstrap JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
client/templates/main.html
<template name="main">
<div class="container">
{{> yield}}
</div>
</template>