I create Webapp application using yeoman, Which includes sass.
In the index.html file I don't see link to the bootstrap css files.
I run it with grunt.
I am wondering, where are the bootstrap css files, and how does the browser recognize them?
I realize that bootstrap style has been added to the main.css file.
Related
I want to use an external .css file but It does not work. I have tried link rel="stylesheet" and #importing css in style tags but it does not work
for importing css file to your nuxt app open yout nuxt.config.js file and in css section add your css files like: css: ['~layouts/global.css'] – Ali Hosseini
Hopefully this is a newbie question.
I am working on integrating vuetify into an existing vuejs web SPA application in a few screens. The application uses purpose ui for it's css and styling. After integrating vuetify into the application we see that the site now has the style of vuetify.
How can I ensure that vuetify's styling is only restricted to the specific vuetify controls on the few screens, that those controls are used on?
Update 1:
index.js
if (Meteor.isClient)
{
import 'vuetify/dist/vuetify.min.css';
}
index.html: meteor-bundled-css line below should include the vuetify.min.css in the bundled css file but I don't see the css constructs in the bundled file, though the website is now a material ui\Vuetify website now.
<head>
<link type="text/css" href="/css/purpose.css" rel="stylesheet">
<meteor-bundled-css />
</head>
I was able to workaround this issue by removing Vuetify and adding BootstrapVue in the project, wrt to the BootstrapVue, Bootstrap css files, instead of adding the css files in the index.js file, I added the same to the client folder so it could be bundled\minified by Meteorjs itself.
has anyone used Maxmertkit ? They say in documentation that you have to include some css files, but I cant find them in the package i've downloaded. Any idea ?
Sass: Syntactically Awesome Style Sheets, are included.
Download it from github
Sass Installation
Sass Basics
Or if you don't want to do all these, you can convert your sass to css from codepen, just copy your sass in css column and click the eye (shown in image) to compile it in css.
There is new version 1.0.5: http://maxmert.com/start.
You can use CDN to include css (don't forget to change {{version}}):
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//cdn.jsdelivr.net/maxmertkit/{{version}}/css/maxmertkit.css">
<!-- Latest compiled and minified JavaScript -->
<script src="//cdn.jsdelivr.net/maxmertkit/{{version}}/js/maxmertkit.js"></script>
i'm including external font css (Google Font) on my css file using #import
styles.css
/* Feel free to use #import. r.js will merge them, when building */
#import "../vendor/bootstrap/css/bootstrap.css"; //this is included
#import url(http://fonts.googleapis.com/css?family=Chewy); //would this be included?
...
would r.js include the remote file and optimize it? r.js doesn't have a full documentation on its switches and settings or I am just missing something? or i just reconfigure my build to include the remote/cdn file?
No, as of 2.1.5 I'm getting this output:
Optimizing (standard.keepLines) CSS file: /.../style/style-all.css
/.../style/style-all.css
Cannot inline css import, skipping: https://fonts.googleapis.com/css?family=Chewy
Analysing source code on github suggests that it only supports relative paths.
I am developing a large-scale RIA application using Ext JS 4. Inside my index.html I've the following definitions:
<link rel="stylesheet" href="ext/resources/css/ext-all.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/GridFilters.css">
<link rel="stylesheet" href="ext/src/ux/grid/css/RangeMenu.css">
<link rel="stylesheet" href="resources/css/default/index.css">
<link rel="stylesheet" href="resources/css/default/profile/user.css">
<link rel="stylesheet" href="resources/css/default/profile/documents.css">
The problem
In provided code only index.css is present, but each view in my application will have its own CSS stylesheet, which will use its own sprites/images (I've added user.css and documents.css in provided code as example). That all will grow into a huge amount of not minified CSS files, which will slow down application loading time significantly.
Also, some styles of Ext JS 'ux' components are not included in ext-all.css (GridFilters.css and RangeMenu.css in provided code).
I can write down a script, which will compress all these CSS files into one file, but ...
The question
Which is the correct way for styling Ext JS 4 applications? Maybe one should create SCSS files and do all styling there, and compile each time with compass compile to create CSS files and do development?
Is there any way to include styles for 'ux' components which comes in standard Ext JS 4 distribution? Some thing like ext-all.css for 'ux components (something like ext-ux-all.css)
I hope many people are using Ext JS to create great applications and they've thought about or solved such problems for themselves. I'll be grateful for any share of knowledge regarding this topic.
I have a similar situation to yours.
What I do is to first include the ext css file:
<link rel="stylesheet" type="text/css" href="resources/css/ext-all-gray.css">
Then all my app css is generated using compass. So there are a multitude of scss files that are compiled into a single css file. You can use compass watch so your css is compiled whenever a scss file changes.
I have to say that once you get used to compass and sass/scss, it's very hard to justify plain css files - compass and sass generate better cross-browser css and the scss files are far easier to maintain and customise compared to plain css.
As for the ux css. I wouldn't worry about it too much, but you have two options:
simply import your ux css files in your main scss file (see this answer);
use one of a multitude of css unifiers/mergers/minifiers out there.
Creating your theme is the only way you can keep your code well and is a good way to deploy optimized css.
Using secnha's mixins ( now partially documented in docs) you can create multiple looks for your buttons, pannels,etc. You might have some hard time to figure out how it works, but is the only way to do things well.
You will find good resources on their docs ( guides and video). Also their scss sources are a good source.