I would like to use triangle icons from Microsoft
fabric.min.css and
fabric.components.min.css.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
</head>
<body class="ms-font-m">
<div class="padding">
<span class="ms-Icon--triangleRight"></span>
</div>
</body>
</html>
However, the above code (JSBin) shows this:
Does anyone know how to show Microsoft's icons correctly?
You need to include the ms-Icon class in order to use any of the specific icons. Here's the fixed line:
<span class="ms-Icon ms-Icon--triangleRight"></span>
Related
I am having difficulty on how to properly display this like the real ones. Right, so
here's my piece of code. You can try this on your respective IDE's to view the page
because basically I cannot drag and drop here the image. I'm using html CSS, vs code. its just basically the interface of google with header, main, serach bar at the middle and those buttons and navs at the bottom of it.
I'm having difficulty on trying to make this like a real google ui. :(( Just a beginner.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Login</title>
<link rel="shortcut icon" href="google-logo-png-29534-32x32.ico" type="image/x-
icon">
</head>
<body>
<div id="header">
Gmail
Images
<img src="pad.png">
<img src="cs-logo.png">
</header>
<main>
<input type="search">
<img src="google-voice-search-icon.png">
<img src="googlelogo_color_272x92dp.png">
<button>Google Search</button>
<button>I'm feeling lucky</button>
</main>
<p>Google offered in: Filipino <a href="#">Cebuano</p>
</div>
</body>
</html>
The property src="" in the img tag will take the image from the local path or an URL to an image.
If you want, for example, the doodle's image you have two options:
Download the image from the Google web and then overwrite the img tag with something like this: <img src="/path/to/the/image.png"
Get the URL to the image in web(in this case: https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png) and then overwrite the img tag with something like this: <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
I hope this could help.
I followed a tutorial to set up what I need for a MEAN stack app and its went well so far but now I've tried testing some of the bootstrap components from there site after installing Bootstrap in the index.html file for Angular, Bootstrap is being loaded as the font of the text that the app first loads is different and the drop down button appears after adding it but the problem is when I try click the drop down button nothing happens, besides that components like a jumbotron load as usual and look how you would expect in Bootstrap so I dont think its the link in index or bower.
Heres the index.html file:
<html>
<head>
<title>MyTaskList</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Heres the html it loads in with the bootstrap applied:
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</div>
</body>
</html>
You have just added Bootstrap css in the html.So only css changes will reflect.To get full functionality of Bootstrap you need to add Bootstrap.js and JQuery. Without them bootstrap is incomplete.
I'm having issues getting my code: (http://codepen.io/hoschiCZ/pen/rOJmmr) to work.
<html>
<head>
<meta charset="utf-8">
<title>The title doesn't matter</title>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>
</head>
<body>
<div class="mdl-layout mdl-js-layout">
<header class="mdl-layout__header">
<div class="mdl-layout__header-row">
<span class="mdl-layout-title"><center>MDL test</center></span>
</div>
</header>
<div class="mdl-grid" style="margin: 0px">
<div class="mdl-cell mdl-cell--hide-phone mdl-cell--1-col-tablet mdl-cell--3-col-desktop">
<!-- An empty block of space, maybe some ads here? -->
</div>
<div class="mdl-cell mdl-cell--4-col-phone mdl-cell--6-col-tablet mdl-cell--6-col-desktop">
There is the main text/content located. This has to stay visible at all costs and screen sizes.
<br><small>Material Design Lite courtesy of Google, Inc.</small>
</div>
<div class="mdl-cell mdl-cell--hide-phone mdl-cell--1-col-tablet mdl-cell--3-col-desktop">
<!-- An empty block of space, maybe some ads here? -->
</div>
</div>
</div>
</body>
</html>
The intended columns layout & counts are as follows:
Desktop 3-6-3
Tablet 1-6-1
Phone 0-4-0
The outer numbers/cols are probably space for ads or just empty space, is just looks bad otherwise.
The problem is: it's not responsive, even after refreshing pages. I tried Chromium Linux mobile/tablet emulation and Nexus 5 Firefox & Chrome. Everywhere, the desktop version is used.
MDL requires you to include this in the header.
<meta name="viewport" content="width=device-width, initial-scale=1">
Btw I didn't see it written in the Getting Started guide, maybe add it there?
Working CodePen
Add
<meta name="viewport" content="width=device-width, initial-scale=1">
into
<head></head>
Your problem is that you haven't wrapped your .mdl-grid in a .mdl-layout__content
<div class="mdl-layout__content">
<div class="mdl-grid">row</div>
</div>
I made a jsfiddle example for you.
Just expand the window slider and you'll see what you are desiring.
I just want to add iframe in default.html but it not working showing white page ...
Here my code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>FinderToday</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<!-- FinderToday references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<p>Go to page 2</p>
<p>Search the web</p>
<iframe src="http://maps.bing.com" style="width:1366px; height: 768px"></iframe>
</body>
</html>
What version of Windows are you targeting - Windows 8 or Windows 8.1?
If you are targeting Windows 8.1, use the x-ms-webview element rather than iframe.
http://msdnstage.redmond.corp.microsoft.com/en-us/library/windows/apps/dn301831.aspx
http://blogs.windows.com/windows/b/appbuilder/archive/2013/10/01/blending-apps-and-sites-with-the-html-x-ms-webview.aspx
In Jade JS, it's very easy to extend a layout. Supposed one have layout.jade, and for the index.jade, just do:
extend layout
block content // content comes here
Then it's pretty sufficient.
I searched the official guide but didn't found how to do. The most similar seems to be something like:
{>partials}
But still that's not extending a layout. How to achieve similar thing in DustJS?
Thanks a lot.
I found the solution... turns out I didn't read the dust documents careful enough.
Layout File:
<html>
<head>
<title>{+title}Location of Title{/title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.js"></script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.css" rel="stylesheet">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.js"></script>
</head>
<body>
<header>
<h1 id="page-title" class="very-middle">{+title}Title Comes Here{/title}</h1>
</header>
<div id="content">
{+content}
Content Comes Here
{/content}
</div>
</body>
</html>
Content File:
{>layout/}
{<content}
{!
Content simply comes here
}
{/content}
So the point is the use of {+placeHolder}, {>toExtend} and {