I am learning bootstrap. As I can see, it is pretty straight forward to use it. I tried to use the framework without including any reference to the JavaScript files and it is working just fine (at basic level).
So my question is - can I just ignore the JavaScript files and use only the css-based grid system, or the css depends on JavaScript in some way and I just don't face it now.
Thank you!
As long as you don't need anything from this page you can skip loading the javascript asset.
YES, If you do not need any javascript related component (modal,tab etc.) ,
Also please remember you could customize entire framework with link below:
http://getbootstrap.com/customize/
Just check what you want and download.
Related
I have a wordpress site which works good but has a long average loading time. According to google insights and other benchmarks, my main problem is the JS and CSS code from different plugins installed (like, 40 or so..) but mainly the JS.
Is it possible to combine all the JS into a single file without breaking the entire site and/or plugins? (I need all of them.) Is it also possible to do the same with CSS?
Yes, this is possible, you should use another plugin for that task.
There are several that you can use and it's a matter of personal preference but here are a couple that popped from a quick search.
Merge-Minify-Refresh
"JS & CSS Script Optimizer" is another option.
And probably most popular one.
W3 Total Cache
Yes , You can do it by below plugin.
https://wordpress.org/plugins/w3-total-cache/
I am looking for a reasonable way to structure my Javascript code for regular websites that get more and more dependent on Javascript.
Large Javascript applications use - put your framework here, Angular, React, Backbone. Small websites suffice with just a list of $().slider(), $().popup() in a script style.
What I currently do is using the module pattern for different parts - slider, popup - and initialize these in my jQuery(document).ready(function($) { ... }); function. For example:
jQuery(document).ready(function($) {
HomeSlider.init();
ImageGallery.init();
});
Libraries are loaded via Bower and automatically prepended by Gulp. Any other suggestions for that are welcome as well.
Once more libraries are added, more REST/AJAX-calls are made and pushState is used more often my Javascript starts to become a mess and keep track of what happens when/where.
I am looking for suggestions to structure this Javascript for 'regular and modern' websites without committing to a big framework and 'overengineering' my code. This might be in form of code examples, 'light' frameworks or any literature.
Thanks a lot for reading and maybe even answering my question!
The answer to my own question would now be: Use VueJS.
We have a legacy application based on EXT-JS.
We like to add new module into the existing application, using AngularJS and bootsrap.
My problem is that bootstrap’s CSS are conflicting with CSS of the legacy code.
The new module, which written using bootstrap and AngularJS, wrapped around by legacy code, so I need to import exists CSS and new CSS on the same page.
I thought of 2 possible solutions:
Having a prefix to bootstrap’s css file and apply it only to inner part of the page content (AngularJS, new module). The problem is that popup, and angular-bootstrap 3rd party component still interrupted by legacy CSS.
Having my whole inner page (AngularJS module) in separate IFrame, embedded into page that contains the legacy CSS.
It seems like using IFrame solves my problem, but I aware that using IFrame is discouraged, and I am looking for optimal solution for my problem.
Do you think that IFrame is a good practice in this scenario?
Do you have other proven solution?
Planning to use iframes just to get around the css conflicts - not a very good idea. Though iframes can come handy in some cases mostly its usage has been abused just to get around some issues easily.
Do you think that IFrame is a good practice in this scenario?
No. The only issue here is the conflicting css styles between bs and extjs. And planning to use Iframe to get around this is really a bad choice. As you are using angularjs I feel using iframe may restrict its usage to some extent. For instance,embedding it in iframe I think the navigation back and forward buttons wont work as expected, in case your are planning to use angularjs routing. And when using Iframe it will be very hard to debug front end issues.
Do you have other proven solution?
Well I do not have a proven solution but you already have mentioned an idea which may work easily. Bootstrap can be customized to any extent you want to using less variables.
For instance for your issue just namespace the bootstrap styles using less.
.bs {
#import "less/bootstrap.less";
}
And don't get into the mindset using less/sass to compile css is complex. Once you get used to it, this will make this will make FE developement much easier than before.
I recently read the discussion https://stackoverflow.com/questions/62617/whats-the-best-way-to-separate-php-code-and-html
I am facing a similar dilemma.
Currently working on a WordPress website which has a LOT of sliders, animated dropdowns, forms and other components. Each of component is used multiple times throughout the website, so I've created a PHP file for each of these components and I use include to insert them wherever they are required.
Now the file I am including contains HTML & JS {for initializing control}
And finally when I looked at the generated html page in browser, it was chaotic! HTML & JS mixed everywhere!
I wanted to know if its better to include everything in one big JS file and include it on top of every page or its more efficient to have small JS blocks in the section?
In my opinion, if the HTML/JS is valid, there's nothing wrong with it being a bit messy - the end user will never see it anyway. As for what's best from a design point of view, it really depends on the situation.
Personally, I think it's alright to have a big JS file that's included in every page, but some people prefer to output the code in small blocks where it's needed. Ultimately, it really depends on what the program is and what works best for you.
If the JS code is targeted to just a particular section or page i think it is better to include it in page itself instead of a separate file but if it is meant to be used in multiple places then use a separate file as it will also be easier to maintain it that way.
I think my question would be better laid if I write here the scenario of our current set up and the things I want to achieve. We have a Drupal 6 site and freemarker files that are using the same theme as Drupal. Now I have to optimize the loading and reduce the file dependencies of the freemarker files to CSS and JS. I was told to use the minified/optimized JS and CSS of Drupal and delivered it via CDN. But using those minified and CSS alters the design of the freemarker pages. I'm still not sure the solution for this. Thanks for your help in advanced.
Validate all of your CSS and look for parsing errors or warnings and correct them. This should prevent layout issues when minifying/optimizing it. I've had this same issues with CSS in the themes of Drupal we created. After fixing parsing errors, I could aggregate just fine.
I may be stating the obvious here, but if you're using the same CSS on two sites and the visual results aren't the same, the markup must be different. So either your markup needs to be changed on one of the sites, or the CSS needs to be made more general to work with both types of markup.