CSS & JS from Bootstrap, external or internal?

[rica-carv]

Today, due to a internet blackout, i come up with this question, mainly because i tried to continue my development on my localhost, but it was nearly impossible todo so, mainly because of all the bootstrap external linked CSS & JS files where not available for the themes, and all display was a caos (menus missing, misplaced content, missing buttons, you name it...)....!

So i ask, if i may so, is it possible to have a "failsafe" for all the CSS & JS files externally linked on the theme?

For instance, have a copy of that files locally on e107, and only link them if the external files are unavailable? And for instance, have those e107 files permanently updated to the ones outside e107, by automatically update them whenever is internet available?

Reference: http://www.e107help.org/2338/css-%26-js-from-bootstrap-external-or-internal?show=2343#c2343

[LaocheXe]

Check out my Defiantzstrap theme that is on e107.org. It has the css and js files (but they may be out dated)

If you google Bootstrap 3 css and js files you can find them on github

[CaMer0n]

Yes, we need this. Cache external URLs locally, in case of failure.

[LaocheXe]

U can also download the bootstrap source code at getbootstrap.com

[rica-carv]

@CaMer0n @LaocheXe Guess once more had some language issues... I wasn't mentioning cache locally or have the files present on a defined theme. I was thinking on a more general solution, like this, for use on all bootstrap related themes, since now e107 has bootstrap inside it...

[mcpeace-maw]

Generally on themes are used custom styled bootstrap variations, if e107 load generic styled bootstrap and a theme a custom style bootstrap, loading time is affected. I think it is not big problem to put a few lines of code in theme.php and load bootstrap from CDN. Online sources exist for loading speed. If you want fallback make one for other online source not for local files, but it is not needed, CDN is up all the time. And if you use local the theme for testing, it is more easier to simple connect your machine to internet.

[rica-carv]

@mcpeace-maw And if you can't simply conect to the internet, as i've stated on my previous posts? Not everybody has internet everywhere, you know? If i want to still develop something in e107 without internet, i got stuck, since the themes relying on bootstrap online CSS an JS files are heavilly cripled!!! Just try to work with e107 with your browser offline, and you'll see what i mean.... I'm just proposing this as a fallback when no internet is available or when CDN is not available... For one reason it's called fallback... And the bootstrap's CSS an JS files aren't that bigger.... Of course, primary loading location would be online, but if they're not available, they should be loaded locally, from e107 core, just to keep bootstrap themes rendering right.... I've already also mentioned that a theme developer has to rely on the bootsrap being loaded directly inside e107, as it is now... Creating a fallback from the theme is not the way to go, since right now, all bootstrap .css and .js on any bootstrap theme is directly loaded and managed by e107 core....

[mcpeace-maw]

Well in general the themes are used on internet so they have the source (CDN) available to load, in a few cases maybe are use on intranet and then I think is not so hard for the user to add internal source. I think is not justified to change a product just for some particular cases of use offline, but developers may have another opinion, that is just mine.

[willem010]

i would suggesy.. options.. where to get bootstrap.. fallback optional etc. for sites using own cdn not using external files is preferred. on sites not using a cdn this could be different.
leave some options for the admin.

[mcpeace-maw]

"And the bootstrap's CSS an JS files aren't that bigger...." Bootstrap "dist" folder have 1.08Mb., even all min files have 500Kb and if you load your custom bootstrap css too, will be 700Kb, so... bootstrap is big "boots(T)rap being loaded directly inside e107, as it is now..." In fact the theme specific files are loaded by the theme using the "file manager", e107 just give the tool (file manager) to load. Bootstrap files are not loaded automatically by e107, an e107 theme can works without bootstrap, bootstrap files are loaded only if the theme have the links to load. Also you can use internal or external files, all is the same. You want local fallback for external files? With just a few jquery lines you can do it in your theme. Or make a custom e107 header file in your theme and add external links and local fallback there if you don't want them in theme.php, but the link must be in a file in the theme folder. "Creating a fallback from the theme is not the way to go" Wrong again, we talking about theme specific files so they must be loaded by the theme.

[rica-carv]

Bootstrap "dist" folder have 1.08Mb., even all min files have 500Kb and if you load your custom bootstrap css too, will be 700Kb, so... bootstrap is big

bootstrap.min.css = 118kb bootstrap.min.js = 36,1kb font-awesome.min.css = 26,8kb

These are the only three files directly called by the core bootstrap3 theme.php file...

In fact the theme specific files are loaded by the theme using the "file manager", e107 just give the tool (file manager) to load. Bootstrap files are not loaded automatically by e107, an e107 theme can works without bootstrap, bootstrap files are loaded only if the theme have the links to load. Also you can use internal or external files, all is the same. You want local fallback for external files? With just a few jquery lines you can do it in your theme. Or make a custom e107 header file in your theme and add external links and local fallback there if you don't want them in theme.php, but the link must be in a file in the theme folder.

Wrong again, we talking about theme specific files so they must be loaded by the theme.

So, a theme developer has to prevent these issues, even when on the theme itself the bootstrap css and js are called via e107 core (e107::js & e107::css calls).... Implementing custom jquery code inside the theme to deal with this will make these calls redundants & uselless....

[mcpeace-maw]

Bootstrap means also map files and fonts (his fonts), however it is as if I talk alone.

[Jimmi08]

@rica-carv just add in your theme something like bellow. Code is from version 1, just replace it by new calling. If you are not on net, just change constant value.

define('DEV_LOCAL_VERSION', FALSE);
if (defined('DEV_LOCAL_VERSION') AND DEV_LOCAL_VERSION == true) {
  $header_css[] = THEME_ABS.'css/bootstrap.min.css';
  $header_css[] = THEME_ABS.'css/font-awesome.min.css';
  $footer_js[]  = THEME_ABS.'js/vendor/bootstrap.js'; 
}
else {
$header_css[] = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css";
$header_css[] = "https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"; 
$footer_js[] = 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js'; 
 }

I stopped to use this long ago... too much other scripts use CDN version, it's not just about boostrap.
Only admin theme is depend on bootstrap. Your own theme not, but use bootstrap is easier.

[rica-carv]

Forget it, "too much ado about nothing".... I'll just create a module to deal with this mine issue....

[CaMer0n]

An automatic fallback IS needed (other CMS have this mechanism also).

[rica-carv]

@CaMer0n Well, in that case, if i'm allowed another sugestion regarding this issue, why not let e107 core load the bootstrap css & js files, instead of doing that on the theme template itself? In this case, i think it would be easier to implement the fallback, since core would deal with it directly, instead of as it is now, every time a call to e107::css or e107::js has to be checked to see if it's a bootstrap file included or not on the call.... Currently, e107 already knows if a theme is a bootstrap one or not at load time (because of the define BOOTSTRAP on the theme itself), so make the e107 core automatically load the bootstrap needed css & js files is simple....

[Jimmi08]

@rica-carv each theme can use different version of bootstrap, not just 2 or 3 or 4, but 3.1. .. 3.5 .

[rica-carv]

@Jimmi08 You can use the same define BOOTSTRAP to do that, for instance: define("BOOTSTRAP", 2); -> Use Bootstrap v2 define("BOOTSTRAP", 3); -> Use Bootstrap v3 define("BOOTSTRAP", 3.1); -> Use Bootstrap v3.1 define("BOOTSTRAP", 4); -> Use Bootstrap v4 and so on....

[Jimmi08]

@rica-carv you can't use it this way

[rica-carv]

@Jimmi08 I know that right now you can't use it this way, i was talking to use that define BOOTSTRAP in the future failsafe enhancement. Of course that IF (& similar ones that use the BOOTSTRAP definiton across e107 code) will have to be revised, if my suggestion is taken in account....

[Jimmi08]

@Moc this can be closed? You can set in Library manager if to use CDN or local source from /web/

Theme authors should use this prefs too (no idea what is it, maybe value is in someplace saved already) and support this. Generally, it is solved in the core.

[Moc]

Not sure, I think @CaMer0n suggest an "automatic" fallback, but I am not entirely sure what this would entail. Keeping it open for now.