I have this Joomla! site and I have set up a yoo theme template but my site is very slow because the template has 30 external CSS files and approximately 20 script files.
I have managed to combine all JavaScript files into one with component ScriptMerge, but for CSS, the component doesn't work as it should because it messes up my site when I combine all of the CSS files into one.
I have also tried other components like jch optimizer and jbetolo but without success!
Does anyone know a component or a plugin that can do this job for me? Or something else maybe, I also tried some script for combining in .htaccess, but also without success.
I know that this Q is posted way way back but since I once had this kind of problem, I thought I can share a link to these two task manager I frequently use when creating templates for Joomla, namely:
Grunt
Gulp
A simple grunt task can combine your CSS in an instant (see below example)
...
cssmin: {
target: {
files: {
'css/output.css': [
'style1.css',
'style2.css'
]
}
}
}
...
Cheers!
You can use #import url'file' to include each css file into one then just include the one file in your main page.
e.g. in my site
#import url("nav.css");
#import url("popup.css");
#import url("latestPosts.css");
#import url("home.css");
This code is placed at the top of common.css and then common.css is just included into index.php
Might want to take a look here:
http://www.w3.org/TR/CSS21/cascade.html#at-import
Maybe Factor CSS can help you out? Run your combined file through it and see if that makes a difference. But don't disregard the disclaimer, which states that it might not work well when the stylesheet depends on the order of the rules. Such is the nature of Cascading StyleSheets.
A quote on stylesheets from About.com
A stylesheet is intended to cascade through a series of styles, like a
river over a waterfall. The water in the river hits all the rocks in
the waterfall, but only the ones at the bottom affect exactly where
the water will flow.
When you say it messes up your site when you combine the stylesheets. Have a think about the order in which the files are added. An automated stylesheet combining script can never know how you want the end result to look, all it can do is take what you have and combine it based on a pre-defined set of instructions, not based on how good it will look in the end. So make sure the input is right and the files are combined in the right order.
Here's an interesting link on the cascading order and inheritance in stylesheets, which might be of help.
This is a common problem with template driven CMS's that allow for the loading of various extensions.
The Joomla! extensions directory has an entire section for enhancing "Site Performance" there are a range of popular extensions for combining CSS and Javascript files.
RokBooster is fairly popular.
If you like getting into coding ...here's a solution.
You can bundle your css files into one, dynamically, by creating a php file with something like that:
<?php
# File combcss.php
readfile("stylesheet1.css");
readfile("stylesheet2.css");
?>
Then you may call your stylesheet like that :
<link rel="stylesheet" type="text/css" href="/combcss.php" />
Related
I am wondering why I cant set variables within twitter bootstrap using LESS. I am using ruby on rails which has a bootstrap_and_overrides.css.less file. it has the following statement
// Your custom LESS stylesheets goes here
//
// Since bootstrap was imported above you have access to its mixins which
// you may use and inherit here
//
// If you'd like to override bootstrap's own variables, you can do so here as well
// See http://twitter.github.com/bootstrap/less.html for their names and documentation
//
// Example:
// #linkColor: #ff0000;
So my understanding is that i can set my variables within here. So i set
#black: #333;
and then tried using it in my application.css calling #black file but it does not work? i.e. doesn’t render #333.
Am i understanding this incorrectly?, do all my variables and css styling go within the bootstrap and override file?
Any advice appreciated
Follow the instructions at http://lesscss.org/#usage to make sure your updated less is used, if you are using it client side.
OR
Compile your updated less into CSS and then copy over the updated CSS.
Here's a list of tools that can do the compile. http://bootstrap.lesscss.ru/less.html#compiling
For suggestions on how to organize your bootstrap modifications see the SO question Twitter Bootstrap Customization Best Practices
As an aside, I wouldn't recommend changing #black. Changing it would alter many, many things, including some you might not expect.
If I understood you correctly, you are modifying your bootstrap_and_overrides.css.less file, but the one being used is the application.css file.
If that was the case, of course it's is just natural not to reflect the changes you've made. You must compile your .less file first to .css. to reflect that changes to your .css file.
For a try, use LESS via the client-side and setup your environment like so:
For instance, in your index.html file, put
<link rel="stylesheet/less" type="text/css" href="application.less" />
in the document head. and below it add
<script src="less.js" type="text/javascript"></script>
Download the less.js file from here. and put it inside your root directory, or you may of course customize the location and make the necessary path in the href attrib.
After doing the above, you're ready to modify your application.less file (not the application.css). You may copy you're existing custom styles from the application.css file.
application.less is where you should put your variables.
You may rename your bootstrap_and_overrides.css.less file into application.less and make sure it is the one linked to in the header tag.
For more info about LESS CSS checkout the wiki.
Im just trying to confirm if I understood #import correctly,
Basically what It can do for you probably at least one of the things is to give your css some structure by separating the different layouts in separate categories.
Right now each of my css files look insane, I have about 10 of them for one site and alot of them are using up space for the same code and only some new stuff have been added.
I am guessing that I can use #import to only add style where it is needed?
Yes, it works pretty much like include or require functions in PHP.
You can separate your style in multiple files and include some of them where it's needed.
Unlike PHP, CSS use HTTP requests to import files, which means your site will be slow if you separate your CSS to many files (try to keep it up to 3, but only 1 is ideal).
I suggest you to separate files only during the development period which would allow you to manage your files easier, but put everything into 1 file before launching your site.
If I have a CSS file that is included into the page like
<link rel="stylesheet" type="text/css" href="all.css">
And then that file has...
#import "shCore.scss";
#import "shThemeDjango.scss";
Does this do 1 HTTP request or 3?
Is there a benefit of importing multiple files vs linking to all of them in the main file?
(I know the ideal solution is to combine all and minify)
I would recommend not using #import. This stops the browser from downloading files in parallel as it has to parse the first css file. Then go retrieve the import css files and import them.
google on #import
As you mentioned combining and minifying your css is the best option. Using a tool like minify allows you to keep your stylesheets separate and clean but serve them combined and minified.
This would still mean three HTTP-request, and there it most likely make the load process even slower, as Jros mention.
Instead I suggest that you minify all your CSS into one file, to make as few HTTP-requests as possible, and to decrease the amount of data that needs to be transferred.
Here's an example of a CSS minifying tool you can use, if you don't want to do it server-side.
I think, given the context of the question, there has been some misleading advice. Sure, "vanilla" CSS #import will make a HTTP request. But the OP seems to be using a pre-processor.
Pre-processors, such as; SASS or LESS, work by compiling down your code, often into a singular css file. Meaning an #import has already been handled and included for you. You just reference the end-point stylesheet.
So no. Knock yourself out, when using a pre-processor. It's a great way to organise your code.
Let's say I have css1.css and css2.css.
Just for the sake of keeping files organized and small on my file system / Source control I would like to split them up however in my content, I still want to use all the definitions in both files.
Rather than link reference both in my content page, can css1.css just make css2.css available.
Clearly you can include them all on your page with several nodes, but your best bet is probably a release process script/ant task/automated build process which can concatenate or merge the files based on some manifest or even simply the order of the file names.
You can do other things like compress the css at the same time - automatically optimising files for deployment!
Assuming both stylesheets are in the same directory, put this code at the top of css1.css.
#import url("css2.css");
You can use #import like this in css1.css:
#import url("css2.css");
p { color : #f00; }
I have seen that a lot; the import url("css2.css") feature so it is definitely a way to achieve your objective.
I'd been reading up on themes in my ASP.NET book and thought that it could be a very handy solution, then I met some problems.
The theme picks up every single CSS file in the folder
If you want to use reset styles (where ordering is important) the order of imported stylesheets is not guaranteed
Your master page would not explicitly indicate what style is being used, only the rendered page can tell you that unless you dig into your web.config
Styling web controls using the theme file is... well... stupid? You can simply do this in your stylesheet. Granular control should be at the HTML level, should it not?
How do you specify print stylesheets without having all styles in a single stylesheet?
I'm wondering as to whether they're actually worth using at all. Is there any benefit? Are there any major sites using them?
EDIT
Just to clarify slolife's last point. If I had two stylesheets, one called print.css and one called main.css and I used ASP.NET themes, how would it know that print.css was a print stylesheet? In regular HTML you use the media type in the tag itself (i.e. <link rel= ...>) but the themes wouldn't know this, so it would just get included as a regular stylesheet.
I like using themes, but as Raj pointed out in his answer, URL rewriting can cause problems. My search for some solutions to that is what led me to your question. But I'll add my opinions in anyway.
I'll address some of your bullets from above as to why I think themes are good:
- The theme picks up every single CSS file in the folder
I guess you are looking to apply only certain stylesheet files to certain pages. Yes, themes takes the shotgun approach here, so that's a problem. But you don't have to put all stylesheets in the the theme folder. Put your specialized ones outside of it and they won't be included automatically. But I think it is nice feature to have the common/site wide ones included automagically.
- If you want to use reset styles (where ordering is important) the order of imported stylesheets is not guaranteed
I think you can guarantee the order by the way you name the files, so they are numerically and alphabetically ordered. Maybe not an elegant solution, but not horrible.
Personally, I have a build step that combines and compresses all of the *.css files in my theme folder into one single style.css file, and since I control that build step and the order that the files are combined, that doesn't affect me.
- Your master page would not explicitly indicate what style is being used, only the rendered page can tell you that unless you dig into your web.config
You can change the theme via code and in the <%#Page directive
- Styling web controls using the theme file is... well... stupid? You can simply do this in your stylesheet. Granular control should be at the HTML level, should it not?
I agree that applying style attributes to controls via the theme doesn't seem to be a best practice. But I love the fact that I can define image skins in the theme's skin files and don't have to cut and paste Width,Height,AlternativeText,Align attributes for common images that I use lots of places throughout the site. And if I ever change one of those images, I can fix the attributes in one place, rather than all over. I also can created skinned controls with a certain list of css classes applied, which seems handy to me.
- How do you specify print stylesheets without having all styles in a single stylesheet?
I have a Print.css file that starts with #media print and that defines print styles for my site. Why do you need to put them in one stylesheet?
IMHO, asp.net themes are absolutely USELESS
try implementing url rewriting with an app which uses themes and see them break straight away
basically, you can achieve the same thing writing few lines of code in asp.net and multiple css folders. i am yet to come across any developer / company who has been using themes
when asp.net 2.0 was launched, there was a big hype around themes but my personal opinion is its simply not worth it :-)
Use themes to change control attributes ONLY.
They were bad designed for working with css.