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.
Related
On my vue PWA the css from vue bootstrap and buefy seems to undergo Slow loading of CSS.
I've tried V cloak, but it only hides components ms. after you see a see a glimpse of raw html with no css.
I'm trying to find a way on how to get a loader to show or something that hides the first milliseconds of html blocks or initially fix how the html blocks don't show without any style/don't show at all like on the gif below.
I appreciate any solutions here.
(Can't show image/gif here due to reputation rule)
Click here for gif
The gif shows that the js is loaded before the css. This usually means that the css file is referenced too late in your index.html file. References (usually <link> elements) are loaded in the order that they're listed in html. Check your site in the inspector, and see where your css is listed
<link href="/app.js" rel="preload" as="script />
<link href="/app.css" rel="stylesheet" />
<style type="text/css"> ... </style>
// app.js should come first
This should be done automatically by vue-style-loader, which should be included in vue/cli-service. Are you using the vue cli?
Actually we have one global.css style sheet in which we are using #import url("http://fonts.net/sample.css?type=cssandid=123") for fonts.
But it's creating issues in Bundling & minification so I got following solutions:
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
and I replace #import with element
<link rel='stylesheet' type='text/css' href='http://fonts.net/sample.css?type=cssandid=123'>
even after this I'm getting CSS errors as I checked in CSS Lint(http://csslint.net/) and not getting real UI effect as with #import.
Do we have any other solutions for this?
Environment: VS2015 , MVC 5.2 , sitecore 8.1
Thanks
Hope you found the solution since you posted this question
What you can do, to avoid the #import url('yourCssUrlHere') is simply copy/paste the URL on your browser and then copy/past the CSS that is displayed.
And then simply replace the #import by the CSS you just copied.
Most of the time if the import is a font, there will be other references to .woff or .woff2 files.
Just download them and store those files somewhere on your project folder and just add their absolute link on all the url() fields.
That way, you use external fonts or stylesheets, but internally, without request them outside of your website.
Kind of a newb question. I'm working with Boostrap to create a mobile responsive portfolio. What do you do if you want to make a change to the default Bootstrap classes? Like if I wanted to take the padding off of the class="container"? The links are only connected to the minified version of css and js. So if I make a change to the regular version .css, there's nothing connecting the change. Do I have to change the .min.css version? Should I be able to repeat a class in my own personal css page?(I've tried unsuccessfully) Thanks, any advice would help.
Two methods that I know of:
1) Make edits to the .min.css file, or
2) Add '!Important' to the your personal css, like so:
.testDiv{
font-color: white !Important
}
This will overwrite any classes that have set a font-color for .testDiv
*note: using !important is not a recommended technique, but it gets the job done
You can override the classes in your own CSS file (make sure you import it into your HTML after the original CSS files from bootstrap). Like,
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="path/to/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="path/to/css/bootstrap-theme.min.css">
<!-- Custom Tweaks to theme (Add your changes to this file) -->
<link rel="stylesheet" href="path/to/css/style.css">
<!-- Latest compiled and minified JavaScript -->
<script src="path/to/js/bootstrap.min.js"></script>
However, if you are going to make lots of modifications like that, I suggest you create your own customized version
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 have a style sheet file which imports three other css files:
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
style.css contains:
#import url("../ins/style.css");
#import url("commerce/css/style.css");
#import url("../in/custom.css");
I would like to improve the loading time and reduce the number of requests, so I want to combine the three css files into one in the same order as they are imported. but problem arise that all layout is messed up. I am really wondering why this is happening since import css file is the same as inlcuding them. any ideas? thanks for taking time to read.
If commerce/css/style.css is the CSS file that holds the layout, it could be that that path is not correct for all pages. I would ensure that all paths are relative to root to ensure that they are correct across the site. This includes the original href url for your combination css file.
I'm also not so sure if putting three imports in one css is less time for loading as opposed to linking them in the html. If you want to reduce load time you need to reduce number of loads somehow such as only loading internet explorer css when the browser is internet explorer etc.
Let me know of anymore developments.
You can try SSI includes, H5BP ant build script or even borschik to combine your CSS.