Normally we are link the css with like
<environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/css/IndexCss.css" />
</environment>
But can i just link the folder ? Cus have too many css need to link ...
Or any suggustion
ASP.NET Core MVC comes with a built in bundler and minifier so that many CSS files can become one, also does the same for JavaScript files.
Just create a file called bundleconfig.json at the root of the project with content like this:
[
{
"outputFileName": "wwwroot/css/site.min.css",
"inputFiles": [
"~/lib/bootstrap/dist/css/bootstrap.css",
"~/css/*.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"~/js/*.js"
],
"minify": {
"enabled": true,
"renameLocals": true
},
"sourceMap": false
}
]
More info here:
https://learn.microsoft.com/en-us/aspnet/core/client-side/bundling-and-minification?view=aspnetcore-2.2&tabs=visual-studio
Related
I have 2 css files. and both of them are for all pages except that one of them is the fix for right to left languages and it will exist in all pages when a right to left culture is selected, and will be in none of them otherwise.
Current definition in Layout file:
<environment names="Development">
<link rel="stylesheet" href="~/css/site.css" />
</environment>
<environment names="Staging,Production">
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
</environment>
bundleconfig.json:
{
"outputFileName": "wwwroot/css/site.min.css",
// An array of relative input file paths. Globbing patterns supported
"inputFiles": [
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"wwwroot/js/site.js"
],
// Optionally specify minification options
"minify": {
"enabled": true,
"renameLocals": true
},
// Optionally generate .map file
"sourceMap": false
}
Is there any way to include it in the bundling when needed? I don't want to include it separately.
I solved the problem.
In bundleconfig.json I choose to create 2 different minified css, one with rtl patch and one without it:
[
{
"outputFileName": "wwwroot/css/site.min.css",
// An array of relative input file paths. Globbing patterns supported
"inputFiles": [
"wwwroot/css/site.css"
]
},
{
"outputFileName": "wwwroot/css/sitertl.min.css",
// An array of relative input file paths. Globbing patterns supported
"inputFiles": [
"wwwroot/css/site.css",
"wwwroot/css/rtl.css"
]
},
{
"outputFileName": "wwwroot/js/site.min.js",
"inputFiles": [
"wwwroot/js/site.js"
],
// Optionally specify minification options
"minify": {
"enabled": true,
"renameLocals": true
},
// Optionally generate .map file
"sourceMap": false
}
]
And in layout I add a condition like this:
<environment names="Development">
<link rel="stylesheet" href="~/css/site.css" />
#if (CultureInfo.CurrentUICulture.Name.ToLower() == "fa-ir")
{ <link href="~/css/rtl.css" rel="stylesheet" />}
</environment>
<environment names="Staging,Production">
#if(CultureInfo.CurrentUICulture.Name.ToLower()=="fa-ir"){
<link rel="stylesheet" href="~/css/sitertl.min.css" asp-append-version="true" />}
else{
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
}
</environment>
I recently started a angular2 web app using ng-cli. i'm trying to add Twitter-bootstrap (which I installed with npm) to my index.html file. For some reason it doesn't seem to find bootstrap even though the path is correct. Am I missing something? Is ng-cli moving bootstrap somewhere else?
My code:
<link rel="stylesheet" href="./../node_modules/bootstrap/dist/css/bootstrap.min.css" type="text/stylesheet">
Angular cli does not work the way you are doing. it add third party library like below.
add install library using NPM
npm install bootstrap#next
add your script and style files in apps[0].scripts and apps[0].styles properties of angular-cli.json. like
apps": [
{
"root": "src",
"outDir": "dist",
......
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.css",
"styles.css"
],
"scripts": [
"../node_modules/bootstrap/dist/js/bootstrap.js",
],
"environments": {
"source": "environments/environment.ts",
"dev": "environments/environment.ts",
"prod": "environments/environment.prod.ts"
}
}
],
after adding like this. it will add all the files into index.html
I've just started to learn and use polymer and I've made all the installations and imports as in Google's Polymer website but I still can't make a single polymer element to work. These are the files:
bower.json
{
"name": "take0",
"description": "0.0",
"main": "index.html",
"moduleType": [
"amd"
],
"keywords": [
"polymer"
],
"authors": [
"Balajee"
],
"license": "MIT",
"homepage": "",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"core-component-page": "Polymer/core-component-page#^0.5",
"core-elements": "Polymer/core-elements#^0.5.6",
"paper-elements": "Polymer/paper-elements#^0.5.6",
"platform": "Polymer/platform#^0.4.2",
"polymer": "Polymer/polymer#^1.3.0"
}
}
Index.html:
<!DOCTYPE HTML>
<html>
<head>
<title>
Take 0 on polymer
</title>
<link rel"import" href="bower_components/polymer/polymer.html">
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<!-- Componenet kicks in-->
<link rel="import" href="components/component-one.html">
</head>
<body>
<component-one>
</component-one>
</body>
</html>
components/component-one.html:
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<!-- Component one-->
<dom-module id="component-one">
<style>
paper-button.fancy {
background: green;
color: yellow;
}
paper-button.fancy:hover {
background: lime;
}
</style>
<template>
<h1>{{title}}</h1>
<p>Ready to take you out with polymer!!</p>
<paper-button raised>
Click Me!!</paper-button>
</template>
</dom-module>
<script>
Polymer({
is: "component-one",
properties: {
title: {
type: String,
value: "Hello World!!!"
}
},
ready: function() {
console.log("I'm Working!!!!!")
}
});
</script>
I've spent 2 days of looking for the problem and can't find anything that solves the issue.
The problem here is that you are using Polymer 1.3.0 with elements build for the 'ancient' Polymer 0.5.
Try replacing the dependency part of your bower.json file with this one :
"dependencies": {
"iron-component-page": "PolymerElements/iron-component-page#^1.0.0",
"iron-elements": "PolymerElements/iron-elements#^1.0.0",
"paper-elements": "PolymerElements/paper-elements#^1.0.0",
"polymer": "Polymer/polymer#^1.3.0"
}
You can see that the core-elements library is replaced by the iron-elements.
To avoid this kind of error, I recommend you to always use the Polymer Elements Catalog to find Google elements (For example here is the paper-button page, use the recommended bower command displayed at the bottom of the menu drawer to import it).
Also, if you find an interesting element on Github or customelements.io, always check it's bower.json to be certain of which Polymer version it is based on.
How can we add an Icon for Home Screen in HTML5 when we browse a webpage in chrome app and in option we choose Add To Home Screen. then theres an Icon Shortcut placed on your Home Screen.
I used:
<link rel="apple-touch-icon-precomposed" href="...\icon.png">
<link rel="apple-touch-icon" href="...\icon.png">
nothing happens it display again a default icon.! Just Like the AmStalker Home Screen Icon
What is the best way to do it?
First of all I want to show project structure in image below .
I have made a public folder and all the file is inside the folder .
And the manifest file is out of public folder .this is image
After That we will create Manifest file code of file is given below.
Manifest.json
{
"short_name": "BetaPage",
"name": "BetaPage",
"theme_color": "#4A90E2",
"background_color": "#F7F8F9",
"display": "standalone",
"icons": [
{
"src": "assets/layouts/layout2/img/icon/android-icon-36x36.png",
"sizes": "36x36",
"type": "image/png",
"density": "0.75"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-48x48.png",
"type": "image/png",
"sizes": "48x48"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-72x72.png",
"sizes": "72x72",
"type": "image/png",
"density": "1.5"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-96x96.png",
"sizes": "96x96",
"type": "image/png",
"density": "2.0"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-144x144.png",
"sizes": "144x144",
"type": "image/png",
"density": "3.0"
},
{
"src": "assets/layouts/layout2/img/icon/android-icon-192x192.png",
"sizes": "192x192",
"type": "image/png",
"density": "4.0"
}
],
"start_url": "/index.html"
}
// After that we will add service worker
service-worker.js
self.addEventListener("fetch", function(event){
});
// Now go to index.html and put the following code in head section
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
// After that you need to put following code before body closing
<script type="text/javascript">
if ('serviceWorker' in navigator) {
console.log("Will the service worker register?");
navigator.serviceWorker.register('service-worker.js')
.then(function(reg){
console.log("Yes, it did.");
}).catch(function(err) {
console.log("No it didn't. This happened:", err)
});
}
</script>
Now Run your project and wait for few minute and reload your page and ENJOY !
In your href you have an extra dot i think, and it should be a forward slash not a backslash. try "../icon.png"
Also Android using apple icon references have been depreciated so these would not work - FOR ANDROID. Please look at https://developer.chrome.com/multidevice/android/installtohomescreen for more information.
The cited source recommends you do this:
<link rel="icon" sizes="192x192" href="../icon.png">
Of course with this method I advise that your image is 192x192 in size.
The modern way is to make it a Progressive Web App and the browser will offer this on its behalf.
Here - https://developers.google.com/web/fundamentals/engage-and-retain/app-install-banners/ - you can see the criteria and check for yourself if you've met them.
All the meta information have been added according to the doc's given in chrome-developers site.
But the Add to homescreen is not working on chrome mobile browser -- The ICON given is not getting saved on the phone. The app's icon is taking some random screenshot of the page.
The site that I'm working on - here
Here's the code -->
// for chrome
<meta content="yes" name="mobile-web-app-capable" />
<link href="/images/inkl-196.png" rel="shortcut icon" sizes="196x196" />
<link href="/images/inkl-128.png" rel="shortcut icon" sizes="128x128" />
// for safari
<link href="/images/touch-icon-iphone-default.png" rel="apple-touch-icon" />
<link href="/images/touch-icon-ipad.png" rel="apple-touch-icon" sizes="76x76" />
<link href="/images/touch-icon-iphone-retina.png" rel="apple-touch-icon" sizes="120x120" />
<link href="/images/touch-icon-ipad-retina.png" rel="apple-touch-icon" sizes="152x152" />
Please comments on where I might have gone wrong.
Not sure why, tried other solutions online - dint help.
Firstly, we had an issue with our docs where we recommended 196px and in fact it should have been 192px - this might explain the issue.
Secondly, now (Dec 2015) the recommended solution is to use the web app manifest. The Web App manifest describes what the browser should launch and how it should launch it from the homescreen. You will need to create a manifest file (see below) and link to it from your pages with <link rel="manifest" href="{url to your manifest}"> in the head of your html page.
Example (launches the index page fullscreen):
{
"short_name": "Kinlan's Amaze App",
"name": "Kinlan's Amazing Application ++",
"icons": [
{
"src": "launcher-icon-2x.png",
"sizes": "96x96",
"type": "image/png"
},
{
"src": "launcher-icon-3x.png",
"sizes": "144x144",
"type": "image/png"
},
{
"src": "launcher-icon-4x.png",
"sizes": "192x192",
"type": "image/png"
}
],
"start_url": "/index.html",
"display": "standalone",
"orientation": "landscape"
}