I'm new to react and started to hate it
there are literally no documents about how to use CSS frameworks offline with react.
I don't wanna use npm or CDN all the time because I'm usually offline
Is there any way to add materialize CSS and js to react like a normal project with link and script
yes, you can install the assets of materialize from the offical site
https://materializecss.com/getting-started.html
then you can add the files into public folder after that add the following scripts at public/index.html file like that:-
<head>
<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/css/materialize.min.css" media="screen,projection"/>
</head>
<body>
<script type="text/javascript" src="%PUBLIC_URL%/js/materialize.min.js"></script>
</body>
but this isn't the best practice for react projects.
Related
I have installed font-awesome 4.7 in my nodejs application
I have to get it in my views.ejs file.
i tried importing using tag...
<link rel="stylesheet" href="../node_modules/font-awesome/css/font-awesome.min.css" >
and from css file like this...
#import url('../node_modules/font-awesome/css/font-awesome.min.css');
but they doesn't help....
It is failing to load when looking at the browser's network tab...
Please help.. Thanks in advance!
I have an ejs app in production that uses font awesome and I just use the CDN. But also Atheesh Thirumalairajan post is a valid way. Just make sure you are serving from a public folder.
<script src="https://kit.fontawesome.com/c03ec31dc2.js" crossorigin="anonymous"></script>
You need not use node_modules instead, the easy way of doing it is to download Font Awesome from https://fontawesome.com/v4.7.0/get-started/
Then, extract the files your public folder (You need to define the public directory in express)
Then, In the <head></head> section of your HTML, add:
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
You can also checkout their official examples.
The same thing applies to Font Awesome 5 But, you need to download from https://fontawesome.com/how-to-use/on-the-web/setup/hosting-font-awesome-yourself
I am trying to host my website for free using GitHub (and I'm new to GitHub so sorry if this is a dumb question), but it just is not using the stylesheet I created and uploaded with all my files. It also is not loading images from my images folder. So from what I can tell, it doesn't like using local files, but it is fine using linked stylesheets like Bootstrap and images linked from somewhere online.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="_css/bootstrapOverride.css">
<link rel="stylesheet" type="text/css" href="_css/animate.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
It refuses to use my bootstrapOverride.css and the animate.css.
How can I make it use local files like these? Same question with images as well?
I figured out the problem. The issue was my folder names in linking to my stylesheets. GitHub pages uses Jekyll and Jekyll ignores anything after an underscore. Since the folder I had my CSS in was "_css" it would see the underscore and stop there. I took the underscores out of the folder names, updated my links to the CSS and now we are all good!
I want to using in my service webjars bootstrap.
I added dependency
compile group: 'org.webjars', name: 'bootstrap', version: '4.0.0-alpha.6-1'
I register source
registry
.addResourceHandler("/webjars/**")
.addResourceLocations("/webjars/");
I using bootstrap css in thymeleaf
<link rel="stylesheet" th:href="#{webjars/bootstrap/4.0.0-alpha.6-1/css/bootstrap.min.css}">
And bootstrap does not work at all. No items. How this service did not see the bootstrap css file? In the project I use, for example, Spring Security. Could it have any effect? And is it worth the trouble of fixing it? What is the speed between a webjars file and such a plain css file in the 'resource' folder?
To add Bootstrap as webjar pls add the following to build.gradle:
dependencies {
...
compile 'org.webjars:bootstrap:4.1.3'
}
And attach it to html template:
<body>
<script src="/webjars/bootstrap/4.1.3/js"></script>
...
</body>
You can add bootstrap.min.css file like below:
<link href="http://cdn.jsdelivr.net/webjars/bootstrap/3.3.4/css/bootstrap.min.css"
th:href="#{/webjars/bootstrap/3.3.4/css/bootstrap.min.css}"
rel="stylesheet" media="screen" />
A github example is given in this link: https://github.com/springframeworkguru/springbootwebapp
Full tutorial is here: https://springframework.guru/spring-boot-web-application-part-2-using-thymeleaf/
With node and browserify it's easy to manage js dependencies by just buttoning it all up into a bundle.js file and including that in the parent html.
What I'm wondering is how do you guys manage libs like bootstrap?
They download just fine to node_modules but how do you get them into your html files or asset folder?
Do you just reference them straight from node_modules? Have a task copy them in? Etc?
Caveat, I was hoping to do this without the browserify-css plugin because I want to keep my css and js separate.
I personally have a Gulp / Grunt workflow setup in which I included my js/css modules and then it automatically do all the important task and at the end I have only one css and js file. Then I import them to HTML.
I suggest you to make task for gulp or grunt which will check for changes in the folder that you decide ( where download of libraries will be ). If there is a change - it will automatically copy the .css files into another working directory.
I hope I understand what you want correctly.
i have created a little python script that allows me to import files(.js, .css, .younameit) from a directory to the html.
before:
<html>
<head>
<!-- {SVN_AUTO_IMPORT type:.js; dir:../tsc_out; exclude:; template:<script src="%PATH"</script>;} -->
</head>
after:
<html>
<head>
<script src="../tsc_out/script1.js"></script>
<script src="../tsc_out/script2.js"></script>
<script src="../tsc_out/script3.js"></script>
<script src="../tsc_out/script4.js"></script>
<script src="../tsc_out/script5.js"></script>
</head>
https://github.com/seven-jerry/html-importer
I'm using Yeoman to develop a new site with angularJS. I've tried with bower install materialize and bower install angular-material but nothing happens, I mean, it doesn't change the appearance and functionality. I've add also to the index.html these two lines:
<script src="bower_components/angular-aria/angular-aria.js"></script <script src="bower_components/angular-material/angular-material.js"></script>
I guess I may change the css route for the style, but not sure how...
bower install angular-material --save
This will install and (--save) update your package.json file.
when you make use of bower it will automatically update your index.html (add css and js files), you dont have to add any it manually.
In your case i would suggest you to check whether the dependency is added to your app.js or not, this could possibly be issue.
Late to the party but I know how to do it with Angular Projects
Angular 1.xx
Simply import Materialise CSS in your project like this
<script type="text/javascript" src="./js/cdn/jquery-3.2.1.min.js"></script>
<!-- Angular Material requires Angular.js Libraries -->
<script src="./js/cdn/angular.min.js"></script>
<script src="./js/cdn/angular-route.js"></script>
<script src="./js/cdn/angular-animate.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="./js/cdn/materialize.min.js"></script>
<!--Initalize MaterializeCSS-->
<script src="./js/init.js"></script>
Angular 2+
First install materilize and Jquery
npm install materialize-css jquery font-awesome --save
And then import Materialise CSS in angular-cli.json by simply copy paste below script and CSS paths
"styles": [
"styles.css",
"../node_modules/font-awesome/css/font-awesome.css",
"../node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/materialize-css/dist/js/materialize.js"
]
Include material icons in the <head> of index.html and you are good to go.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Add the line below to your head to load the css
<link rel="stylesheet" href="/bower_components/angular-material/angular-material.css">
The full skeleton is available at
https://github.com/angular/bower-material/blob/master/README.md
By the way, your bower install and script src both refer to https://material.angularjs.org/latest and not http://materializecss.com/, which is in the title and tags. materializecss is a separate project that provides similar components. You probably don't need both.
There is a nice yeoman generator that will do that for you if you are starting a new project: https://github.com/Swiip/generator-gulp-angular
just select it in the options after:
yo gulp-angular
For existing projects I just use the following repo:
https://github.com/angular/material#bower
which can be implemented by installing angular-material
bower install angular-material