MDC-Web: How to Setup MDC-Web Vanilla - material-design

I'm using a basic file manager to maintain my webpages files. How to I begin using MDC-Web Vanilla?
In the MDC-Web Github project folder are: README.md, index.js, material-components-web.scss, and package.json.
I would expect to find <link> and <script> elements to add to MDC-Web to my project, similar to how MDL and Bootstrap work. Where do I find those?

This works. You need to attach/initialize JS on some components/elements.
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:100,300,400,700,900">
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>

Related

asciidoctor: how to provide source-highlighter JavaScript File offline

I use Asciidoctor for our User Guide. A requirement is that there is no access to the internet for the users.
I use prettify:
:source-highlighter: prettify
This creates in the HTML:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script>prettyPrint()</script>
What I need is something, like
<link rel="stylesheet" href="assets/css/prettify.min.css">
<script src="assets/js/prettify.min.js"></script>
<script>prettyPrint()</script>
Is there a way to achieve this?
After looking at the source you can specify
:prettifydir: assets
to receive an HTML output of
<link rel="stylesheet" href="assets/prettify.min.css">
<script src="assets/run_prettify.min.js"></script>
To make it work for your users, you'll need to put the referenced files at the location yourself; Asciidoctor won't do that for you AFAIK.
Use asciidoctor-rouge or asciidoctor-highlight.js.

i cannot render my template css using ejs

i'm new at nodejs and i'm working on this project, and still learning to render ejs templates ,
So guys i have this template i had downloaded to work on my nodejs project with
"https://github.com/puikinsh/gentelella"
i put my template folders and files in the views folder then in my route i called index.ejs(have changed the type of the file from index.html to index.ejs) then i tested
the result was that my template was working but no css it was plain text and links , no images no style.
so i'v guessed that it's not loading the bootstrap nor the custom css
can you help me and tell me more on the simplest ways to render and how to solve this problem?
Most of the stylesheets of this template are in the vendor folder, you have to copy that folder in your views folder as well.
<!-- Bootstrap -->
<link href="../vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="../vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="../vendors/nprogress/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="../vendors/iCheck/skins/flat/green.css" rel="stylesheet">
<!-- bootstrap-progressbar -->
<link href="../vendors/bootstrap-progressbar/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<!-- JQVMap -->
<link href="../vendors/jqvmap/dist/jqvmap.min.css" rel="stylesheet"/>
<!-- bootstrap-daterangepicker -->
<link href="../vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<!-- Custom Theme Style -->
<link href="../build/css/custom.min.css" rel="stylesheet">
And make sure that href are pointing in the right folder.Also at the end of the index file there are also js files which point to the vendor folder, make sure to check those as well.

How to override bootstrap css in GWT Bootstrap 2.3

My css are overridden by bootstrap css.
Bootstrap is injecting css after my css.
Is there any why to add my css after injected css.
I know that we can use !important to achieve this, But it is not flexible as I need add it to every property.
<link type="text/css" rel="stylesheet" href="style.css">
<link rel="stylesheet" href="http://myapp.com/myapp/css/bootstrap.min.css">
<link rel="stylesheet" href="http://myapp.appspot.com/myapp/css/gwt-bootstrap.css">
<link rel="stylesheet" href="http://myapp.appspot.com/myapp/css/font-awesome.min.css">
is there any way to insert my style sheet after the injected css.
In your gwt.xml check that you add your style sheet file after you inherit the GWT bootstrap module.
The order bellow should fix your issue:
<inherits name='com.github.gwtbootstrap.Bootstrap' />
<stylesheet src='style.css'/>

Application Relative Paths IIS

I'm moving an web application to a subdirectory from it's root and having issues with paths.
Old: http://www.domain.com/
New: http://www.domain.com/app/
All of the include css, scripts and html links where in this format:
<link rel="stylesheet" type="text/css" href="/styles/menu.css" media="screen"/>
I've changed to:
<link rel="stylesheet" type="text/css" href="./styles/menu.css" media="screen"/>
or
<link rel="stylesheet" type="text/css" href="~/styles/menu.css" media="screen"/>
It works fine on links and others until I go one directory deep where links and paths are broken.
e.g.
www.domain.com/app/dir1/
www.domain.com/app/dir2/
There the link url or others (scripts, includes, etc) get duplicate paths.
e.g.
www.domain.com/app/dir1/dir1/
www.domain.com/app/dir2/dir2/
How could I approach this as absolute?
Using ~/style... etc is the easiest solution in ASP.NET but you must put runat="server" in the tag for it to actually work

How to embed a javascript/jquery file in ExpressionEngine?

I need to embed jquery files in ExpressionEngine.
I have created the template js under the main site template group.
I know that the css is embedding with the following tag:
<link rel="stylesheet" href="{stylesheet=template_group/template}" type="text/css" media="screen" />
for css its {stylesheet=template_group/template}
I want to know what is the tag for embedding js files
<script src=" [-->> ?? <<--] " type="text/javascript"></script>
Just make sure that your template containing your javascript is of the "JavaScript" type, and link it using the standard path syntax:
<script src="{path="scripts/myscript"}" type="text/javascript"></script>

Resources