I'm troubled regarding using fabric typography in a react application.
I want to build an app that looks like fabric.
How to get typography rules ?
Especially, I want <h1>,<h2> tags to looks fabric headers.
I tries to import the css from my global layout component, but headers are still raw.
import 'office-ui-fabric-react/dist/css/fabric.min.css';
I also tried to reference the CDN css file using
<link
rel="stylesheet"
href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css"
/>
But still without success.
[Edit]Please note that within components styles are applied. For example, a h1 tag within a Dialog component will show as expected.
[/Edit]
You can only use the typography defined in https://developer.microsoft.com/en-us/fabric#/styles/typography, make sure you place the correct class names for the header you want. And make sure you wrap the html with ms-Fabric. If you are using react, <Fabric> does that for you too.
For example:
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">
<body class="ms-Fabric">
<h1 class="ms-font-xl">Hello World</h1>
<h1 class="ms-font-su">Hello World</h1>
</body>
There are two ways to include the Fabric Core.
Via CDN, Example CDNs are https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css or https://unpkg.com/office-ui-fabric-react#6.119.0/dist/css/fabric.min.css (use a prod ready cdn)
Via NPM, Once you yarn add office-ui-fabric-react or npm install office-ui-fabric-react in your index.css or index.sass just import it. Webpack will make sure it packs everything correctly.
css:
#import '../node_modules/office-ui-fabric-react/dist/css/fabric.css';
sass:
#import '../node_modules/office-ui-fabric-react/dist/sass/Fabric';
Note: This will bring all fabric styles (which is the only way), later on, the Fabric team stated they will create components instead of doing this.
That's all
Related
So I created a web app using visual studio .net core 3.1. I see that boostrap came with it by default. So what I did was copy and paste the accordion example from bootstrap and was expecting it to work by default but it is not rendering. I double checked and see that jquery is referenced before boost strap. I checked the css and JS file and it is loaded, and there is no error in the console. Is there something else I need to do?
Update:
This is where I got the sample code, it is the very first example: Bootsrap example
You can open bootstrap.js in your project,you will find the version of bootstrap is v4.3.1,and you are referencing the official document of bootstrap v5.0,so you need to add the css and js of v5.0.
You can try to add the css and js of v5.0 to your _layout.cshtml.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
I experience problem with Vuetify.js v2.2. When I use container, row or col classes. These styles works fine on 'dev'.
Once I build npm run build the project, these styles are not applied anymore.
I could use workaround noted here https://github.com/vuetifyjs/vuetify/issues/8013#issue-472862385, but as mentioned https://github.com/vuetifyjs/vuetify/issues/7978 this should not be the case anymore.
Anybody experienced the same and found official solution?
Examples below:
Live https://www.exchangehours.com/
Local Dev (sorry, no public domain)
The problem was in my lack of knowledge of VuetifyJs and te Vue itself.
# What I used
<div class="container"> </div>
# What needs to be used
<v-container> </v-container>
I did not check it directly, but my bet is that tree shaking logic of VuetifyJs is the cause. Where on dev you have loaded all vue css & js but after build just needed css & js is added to chunk.js / chunk.css files.
Therefore if you do not use Vue components to create container or other grid elements, styles are not included to chunk.
So all works perfectly fine if you follow docs completely.
I have pulled in bulma in my project through :
$ npm install bulma
After that, how can I refer to it in my pages. I really don't know how to work with npm, so please can you guide me. Do I have to refer to it in my js by saying:
import bulma from 'bulma' or require it, I don't know where my files are. That means I don't know where are they located.
You can find the final css build at projectName/node_modules/bulma/css/bulma.css.
Chances are you're using a file loader with webpack and similar. If, for example in a Vue project, you have that, then you can use import syntax:
import 'bulma/css/bulma.css'
within your js. This works because having import [xyz from] 'xyz' will look at projectName/node_modules/xyz, and in the case of a css file, it's as simple as that!
If you do not have that installed, you need to find a way to send it over to the client. Just copy projectName/node_modules/bulma/css/bulma.css into a file, maybe bulma.css, in either an assets or public or whatever you use, then fetch it like you'd fetch any css file within the html: <link rel="stylesheet" href="/bulma.css">
#import "../node_modules/bulma/css/bulma.css";
If you have a main.css file for your project or something similar to that, you can add the above line inside your main.css file. This will import the default bulma.css file located inside your project's path node_modules/bulma/css/ after you have installed bulma via npm.
NOTE: you must include your main.css file( or something similar) inside your index.html as a static import if you chose to go this way.
For that you need to have something like:
<link rel="stylesheet" href="/css/main.css">
I prefer this since bulma is a CSS framework, I think it's best to keep the stylesheets linked with each other.
It's CSS only.
Bulma is a CSS framework.
So you can add it just in your index.html like a normal css link:
<link rel="stylesheet" type="text/css" href="your/bulma/path/bulma.css />
Edit: You have installed bulma through the nodejs environment with the package manager npm so you must have a directory called node_modules and inside the bulma directory.
That is really unevident. If you want to get bulma work with fontawesome5 via npm, minimum working deps (for now) are:
npm i -S bulma #fortawesome/fontawesome #fortawesome/fontawesome-free-solid
then needed to be initialized like this:
import fontawesome from '#fortawesome/fontawesome'
import solid from '#fortawesome/fontawesome-free-solid'
import 'bulma/css/bulma.css'
fontawesome.library.add(solid)
More details can be found here: https://fontawesome.com/how-to-use/use-with-node-js
I had the same issue in Vue and in the end I solved it thanks to this link. For Bulma you just need to run:
$ npm install bulma
After npm install, your files should be located under node_modules folder.
For Bulma, check that you have a folder bulma under node_modules, then you can import bulma css framework in your main.js file as follows: import "./../node_modules/bulma/css/bulma.css";
Note: even if on the link I provided they suggest the full path to bulma this is not a good practice as #Omkar pointed out, so I ended up importing bulma as follows: import "bulma/css/bulma.css";
Alternative Answer: CSS Preprocessing
I'm posting a somewhat indirect way to answer the question. I came here looking to see how I could use rendered SASS in my main app.js (in my case, for use in a pug.js template).
The answer is: use a CSS pre-processor. In this minimal example, I'll use node-sass.
0. Install:
npm install node-sass
npm install bulma
1. Create an inherited style
mystyles.scss:
#charset "utf-8";
#import "node_modules/bulma/bulma.sass"; // <--- Check and make sure this file is here after installing Bulma
This will inherit styles from the Bulma installation, but override those styles with what you place here.
2. Build the CSS
app.js:
const nsass = require("node-sass");
const rendered_style = nsass.renderSync({ // <---- This call is synchronous!
file: "./mystyles.scss",
});
Here, node-sass is processing the .scss file into a Result object that has CSS buffer. Note that node-sass has an asynchronous call (sass.render()) as well, if needed.
3. Use the CSS
The buffer containing the CSS is now available at rendered_style.css
console.write(rendered_style.css)
--Notes--
The benefit of the SASS approach is that it unlocks Customization, which is what makes Bulma powerful!
Keep in mind that if app.js is your entry point, the CSS will be rendered every time you run the server. If your styles aren't changing frequently, it may be best to write it out to a file. You can see more on this approach in the Bulma Documenation I adapted this from.
declaring this in the index.html file worked for me.
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.0/css/bulma.min.css">
In React, we have to declare this in the same html file where the root of the app is present.
I have included a bootswatch theme in my website.
<!-- Bootstrap CSS served from a CDN -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet" integrity="sha384-zF4BRsG/fLiTGfR9QL82DrilZxrwgY/+du4p/c7J72zZj+FLYq4zY00RylP9ZjiT" crossorigin="anonymous">
<!-- Scripts -->
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
The problem is that bootstrap.min.css file loads twice. I can see it twice in resources when I open developer console on any browser. It is the same file because I can see that it is loaded by the same html line. Because of this, when I want to close a collapse or a menu, it just closes and opens again fast. I have no idea why it loads twice. How can I fix this?
I can think about two reason for your issue---
No.1
You have a plugin that uses bootstrap and it is loading the additional cdn.
No.2
You are adding some include file in your page which have the bootstrap cdn inside it. Hence your main page loads two bootstrap cdn.
Suggestion
Try removing bootstrap cdns from the bootswatch theme. As I am assuming that your website has already bootstrap cdn included in it.
I know it's a old thread, but I was searching for the same and also found the answer.
Remove integrity attribute from the url and it downloads only once.
This new attribute integrity attribute which I think is what makes the browser to call the cdn the first time to check that the file is not manipulated and then the second call happens to load the file.
Somehow it is flawed and should not download twice.
I'm trying to make a simple page with bootstrap and glypicons in jsf 2.2. I've included webjar's bootstrap dependency (and opening the jar I can see the fonts file are present).
When deploying the app to wildfly, bootstrap css works correctly, but icons shown are horrible (like a default font or something). Looking at the network tab in the browser, I only see 404 errors:
http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.woff 404
http://localhost:8080/proto/javax.faces.resource/bootstrap/3.1.1/fonts/glyphicons-halflings-regular.ttf 404
I tried including the other dependency (bootstrap-glypicons) and I only get the 404 errors twice. What am I missing?
This is how I'm including boostrap, which works correctly for css:
<h:outputStylesheet library="webjars" name="bootstrap/3.1.1/css/bootstrap.min.css" />
And this is how I'm using the css classes:
<button><span class="glyphicon glyphicon-minus"></span></button>
You should use <link> tag instead of <h:outputStylesheet>
eg.
<link rel="stylesheet" type="text/css" media="all" href="webjars/bootstrap/3.1.1/css/bootstrap.min.css"/>
--- UPDATE
This happen because ResourceHandler in JSF add library value (webjars) to the end of URI as a parameter:
faces/javax.faces.resource/bootstrap/3.1.1/css/bootstrap.min.css?ln=webjars
in bootstrap.min.css CSS there are such references to files:
url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'),
so if you want to use <h:outputStylesheet> you can write own ResourceHander or you can edit bootstrap.min.css and fix paths to glyphicons-halflings-regular.* files
In my opinion is better to use standard html tag <link> instead of <h:outputStylesheet> because JSF component tree will be smaller and it act on performance. Inside bootstrap.min.css there is no EL so there is no need to use <h:outputStylesheet>
Small update: webjars has JSF specific versions of several CSS libraries, in case of the bootstrap CSS the following will work just fine:
<h:outputStylesheet library="webjars" name="bootstrap/3.3.5/css/bootstrap-jsf.css" />
Note the -jsf suffix.