I have an application with only one aspx page (Default.aspx).
This page loads .ascx controls as needed.
All these controls are using the same JS and CSS file.
Now I want to apply Bootstrap on some of them. But I am scared that bootstrap will break some CSS and JS.
So I am thinking about wrapping each control in an Iframe (because what I know is:
Iframe blocks inheritance of CSS and JS).
Is my solution ok ?
Or Is there a way to know which CSS and JS is needed by each control?
thanks
My advice is that even if you're breaking your application markup into controls (ascx files), you should apply a consistent theme and serve just one bundle of CSS and one bundle of JS. This will help performance of your site as well as be easier to maintain. Also, it'll be easier to keep a consistent look and feel for your users.
So if you're going to use Bootstrap, use it everywhere. Write your JS functions such that they aren't dependent on a given markup, and so on.
Related
My first attempt at a PWA is here:
https://flowster.app/calculators/freight-class-calculator/
And I'm trying to get 100% in Lighthouse for all the categories :)
I read the "Learn More" page but couldn't understand how to deliver Bootstrap CSS inline, for example.
Any suggestions?
What this means
“Eliminate render-blocking resources” means that all resources (CSS/JS) which are required for the first view (top fold) should be part of the html itself (inline or script or style block); all the other CSS/JS (which is used somewhere below) can go to their other separate files;
This way, the browser will be able to paint/render the first view quickly and then go on to load the other CSS/JS files;
How to go about it
I went through this myself and realized that within the bootstrap.css i was hardly using 15% of the classes... you may also get the hint of unused css classes within lighthouse also. So this is where you can selectively include only relevant classes in your HTML;
JS will be trickier. Going on, to make this first view functional, you can insert vanilla Javascript (inside the HTML) for the navigation, carousel etc. which is better/faster than bootstrap.js;
hope it helps... Good luck
You should only load the CSS and JS in the head that are actually required to load the current 'view' (I deliberately did NOT say 'page'). This does NOT mean that you should inline them. You can perfectly load them from a CSS or JS file. You should load the rest of the CSS and JS in the footer (CSS or JS files are fine here too).
In the case of a single page application (SPA) that is also a progressive web app (PWA), this is only your opening/splash screen... easy enough. It should be very easy to get a 100% score on that. But, when you are talking about a website in which it is unclear what the 'first page' is... it becomes an almost impossible task. A clever CSS in JS or inline solution could do the trick, but would be quite difficult to build.
There is however a much easier solution for websites. I wrote how to get a 100% Google Lighthouse score, which focusses on websites only. TLDR: just omit the frameworks. It might not be a solution for every case, but for those situations where it is possible, it is definitely the way to go.
Hi i would like to use bootstrap themes inside some websites that i am developing, however after looking at the documentation and searching online i have found it somewhat troubling that there is no explicit how to guide start to finish with using bootstrap themes, like found here. Furthermore i would like to download multiple themes into my project directory, extract them into the appropriate folders e.g. (css,img,js,ect...) and utilize them inside of my html files like so:
<div class="customized-bootstrap-item">myItem</div>
I am having a bit of trouble trying to do this because it seems there is no universality among the themes(e.g. each one may vary in how they work) and i don't want to hack together some dirty code if there is a proper way of doing it. So my question is , is there a proper way of adding themes into your existing project purely for aesthetics and customizing them by exchanging the appearance between one them and other themes, and if so how?
Can you guys point me towards some tutorials? I need to know more about how linking these js and css files will affect other aspects of the themes, and how the html tags can be used properly in a uniform way across many themes, as i won't settle likely on just one theme.
edit:
After trying some of the suggestions i managed to figure out at least some of the problems i was having by including the css style of the specific theme that i want to use as a stylesheet link in the head section of the html page that i want to apply it to, which seems pretty straight forward anyway. However i'm still a little bit perplexed on how to get all of those cool elements that i see in the themes, especially the dashboard themes into my custom html page. A good example of a theme that i am looking at is found here. If you guys could give me a bit of insight on how to get those elements on the page (i.e. dashboards, panels, UI elements etc...) that would be great. I may be mistaken but i don't think they are normal bootstrap classes, although i'm fairly new to bootstrap so i'm not 100% sure on that.
The definitions for all of these classes are located in a .css file, likely called 'bootstrap.css'. In the html page where you want to use bootstrap, add
<link rel="stylesheet" type="text/css" href="[PATH_TO_CSS_FOLDER_CONTAINING_BOOTSTRAP]/bootstrap.css" />inside your . This will import all of bootstrap's css. If you need to use other themes, simply add that .css file into whatever folder has your css, then link to it in an html page.
This is a great resource you can use to generate a theme http://www.lavishbootstrap.com/ then linking this to your existing site is quite easy: you simply include the <link rel="stylesheet" type="text/css" href="[PATH_TO_CSS_FOLDER_CONTAINING_BOOTSTRAP]/bootstrap.css" /> line in your code.
If you have downloaded from lavish it will include lavish-bootstrap.css. Don't forget to include jquery.js and bootstrap.js or the dropdowns etc. will not be functional.
The only reasons I see on the internet to not to use inline-css is because of the separation of html and css & management, but if this is not a problem in my case I don't care I will use.
Another pro I can say is this: imagine you want to load a widget made by another user, you will only need to load 1 file, the javascript and not the css.
But it might have other problems?
thanks
If you read your question again, you have answered it yourself. There is a reason for the "separation" of html and CSS. Because at some point in time, you will eventually want to change the look of what you have coded up. These are the times when having a separate CSS file would be very helpful so you are only ever making changes in one place and not throughout your application.
EDIT
Another usefulness of having the CSS separate is the caching. Most of the modern browsers cache the CSS files. This means there are less round-trips to the server and quicker response times. I'm not sure if same is the case for JavaScript, because JavaScript files would be cached, but the client browser will have to execute the code every time it loads.
I think this is a good question that is worth exploring. I don't think there is a performance or standards-based argument for not using inline CSS - it works perfectly well - the only (though considerable) argument for separated CSS is for maintainability / readability. And so if you are generating CSS from JavaScript, generating it inline is just as sound as any other way.
In fact, DOM APIs in general expose much simpler methods for assigning styles directly to elements ( https://developer.mozilla.org/en/DOM/element.style ) than for creating new stylesheets. Therefore almost all JavaScript libraries, like jQuery, when they have to manipulate styles they do it by adding inline styles to an element.
Having said that, I have never before seen a situation where the mark-up and styling for a whole page was generated with JavaScript. I would expect this to be rather inefficient. I can see that if you have a web application where all content is pulled in through Ajax (a perfectly good solution) then you might write a fair bit of the mark-up with JavaScript, but still it would be better/more efficient to load most of the surrounding mark-up for your content in the initial page load, and then use JavaScript to swap out content within existing elements.
In any case, I would recommend that you keep most of your CSS in an external stylesheet with relevant classes already defined, so that all your JavaScript does is create elements with the correct class. This would have a performance advantage and would also mean that all your style information was located in one place, and is separate from your JavaScript, which would make your code easier to maintain.
It's OK to use inline css. (in this specifice case)
Frequently, I just want to drop a bit of jQuery on an individual page. Given my early understanding of Sitefinity, I think...
I can't easily put JS in the <head>.
I could put JS in a Generic Content control, but then my JS is sitting inline in the <body>. Maybe I need to relax, but I don't usually like to put much JS in the <body>.
It feels like this kind of scenario is an afterthought. Is JS a 2nd-class citizen in Sitefinity?
JavaScript does not live in the head. Yahoo even says it is better for performance
I agree with epascarello you really shouldn't be putting your javascript in the head anyway.
And just in case you didn't know about this the jQuery framework is part of Sitefinity. The article also shows you how you can include external libraries in sitefinity from anywhere withing your project whether it be master page or user control.
Why not have the jQuery code in a separate .js file and use unobtrusive JavaScript? With jQuery you can separate behavior and markup so nicely that you should never have to include JavaScript in your head or body ever again.
Just use the standard onLoad function in jQuery and put all of your initialization code in there.
Try it, I think that you will like it! If you like using CSS for separation of presentation and markup, then jQuery can do the same thing with behavior and markup.
This is an old question, but one way you can do it now is:
Add a Javascript block (under Scripts & Styles), and then paste the URL to the jquery code:
http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js
Then add another Javascript block with your jquery, like:
$(document).ready(function() {
alert("hello");
});
Or you can also paste the URL to your js file.
I am developing a component for Joomla website. This website has a sophisticated template with fancy css and scripts (namely some K2 components are named) In this component I am using colorbox to display modal picture gallery but what happens is
as soon as this component is called CSS properties and functions of javascript of template fails resulting in some weared page displays.
As I have not written these CSS and javascripts it will be quite cumbersome for me to prevent conflicts among CSS and scripts.
So what is my question is
Is there any way to prevent conflict between these scripts without diving much into the actual scripts.
Please guide me through this.
Thanx in advance
K2 is a content component for Joomla. It's not unusual for framework plug-ins or add-ons to have conflict(s) with one another. Unfortunately, you might have to search into Joomla or K2 forum for answers. Either that, you can try disabling other plug-ins one by one till the conflict disappears (hopefully).
One of the main conflicts in JavaScript is between MooTools (required for some Joomla functionaly) and other JavaScript libraries. Most common is the $ global variable which is commonly used as a DOM selector.
In MooTools, it only selects by ID, while in other libraries like JQuery, it uses CSS selectors.
So if you have a Joomla extension that loads another JavaScript library like JQuery, you'll run into problems. For JQuery, there is a specific solution.
http://docs.jquery.com/Using_jQuery_with_Other_Libraries
For other libraries however, you'll need to dive into the JS, or use an extension that offers the same functionality but uses MooTools.
As for CSS, the only way around this is to edit the CSS files. Good extensions should use some sort of namespacing for their CSS. For example, prefix all CSS classes with the component name. Or wrap all HTML in a wrapper element named after the component, or module etc.
If this doesn't exist, you'll have to add it yourself.
Probably the easiest is to edit the extensions HTML and add:
<div id="extension-name">
<!-- extension HTML here -->
</div>
around the extension.
Then edit the extensions CSS and add
#extension-name
before all CSS selectors.
For example, if you have:
.left-column {
float: left;
}
change it to:
#extension-name .left-column {
float: left;
}
You can even automate this process with a regex search and replace.