CINXE.COM

<!DOCTYPE html> <html lang="en-gb" dir="ltr"> <head> <meta charset="utf-8"> <meta name="twitter:image" content="https://developer.joomla.org/images/news/joomla-ui-frameworks.jpg"> <meta name="twitter:description" content="Joomla and the User Interface Frameworks"> <meta name="twitter:title" content="Be smart, load but don’t unload!"> <meta name="author" content="Joomla Marketing Team"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="blue"> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:site" content="@joomla"> <meta name="referrer" content="unsafe-url"> <meta property="og:image" content="https://developer.joomla.org/images/news/joomla-ui-frameworks.jpg"> <meta property="og:image:width" content="869"> <meta property="og:image:height" content="400"> <meta property="og:image:type" content="image/jpeg"> <meta property="og:description" content="Joomla and the User Interface Frameworks"> <meta property="og:title" content="Be smart, load but don’t unload!"> <meta property="og:type" content="article"> <meta property="og:url" content="https://developer.joomla.org/news/716-be-smart-load-but-dont-unload-ui-frameworks.html"> <meta property="og:site_name" content="Joomla! Developer Network™"> <meta name="description" content="Joomla and the User Interface Frameworks"> <meta name="generator" content="Joomla! - Open Source Content Management"> <title>Be smart, load but don’t unload!</title> <link href="/templates/joomla/images/apple-touch-icon-180x180.png" rel="apple-touch-icon" sizes="180x180"> <link href="/templates/joomla/images/apple-touch-icon-152x152.png" rel="apple-touch-icon" sizes="152x152"> <link href="/templates/joomla/images/apple-touch-icon-144x144.png" rel="apple-touch-icon" sizes="144x144"> <link href="/templates/joomla/images/apple-touch-icon-120x120.png" rel="apple-touch-icon" sizes="120x120"> <link href="/templates/joomla/images/apple-touch-icon-114x114.png" rel="apple-touch-icon" sizes="114x114"> <link href="/templates/joomla/images/apple-touch-icon-76x76.png" rel="apple-touch-icon" sizes="76x76"> <link href="/templates/joomla/images/apple-touch-icon-72x72.png" rel="apple-touch-icon" sizes="72x72"> <link href="/templates/joomla/images/apple-touch-icon-57x57.png" rel="apple-touch-icon" sizes="57x57"> <link href="/templates/joomla/images/apple-touch-icon.png" rel="apple-touch-icon"> <link href="https://developer.joomla.org/search.opensearch" rel="search" title="OpenSearch Joomla! Developer Network™" type="application/opensearchdescription+xml"> <link href="/templates/joomla/favicon.ico" rel="icon" type="image/vnd.microsoft.icon"> <link href="/media/system/css/joomla-fontawesome.min.css?dde9c780ad8e78890daeddcd06b19d2b" rel="stylesheet" /> <link href="https://cdn.joomla.org/template/css/template_4.0.9.min.css?dde9c780ad8e78890daeddcd06b19d2b" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet" crossorigin="anonymous" /> <link href="/media/vendor/awesomplete/css/awesomplete.css?1.1.5" rel="stylesheet" /> <link href="/media/vendor/joomla-custom-elements/css/joomla-alert.min.css?0.2.0" rel="stylesheet" /> <link href="/media/templates/site/joomla/css/custom.css?dde9c780ad8e78890daeddcd06b19d2b" rel="stylesheet" /> <link href="/media/joomlarrssb/css/rrssb.css?dde9c780ad8e78890daeddcd06b19d2b" rel="stylesheet" /> <link href="/media/joomlarrssb/css/joomla.css?dde9c780ad8e78890daeddcd06b19d2b" rel="stylesheet" /> <script src="/media/templates/site/joomla/js/blockadblock.js?3.2.1" defer></script> <script src="/media/templates/site/joomla/js/js.cookie.js?2.1.4" defer></script> <script src="/media/vendor/jquery/js/jquery.min.js?3.7.1"></script> <script src="/media/legacy/js/jquery-noconflict.min.js?647005fc12b79b3ca2bb30c059899d5994e3e34d"></script> <script src="/media/vendor/skipto/js/skipto.min.js?4.1.7" defer></script> <script src="/media/templates/site/joomla/js/template.js?dde9c780ad8e78890daeddcd06b19d2b" defer></script> <script src="/media/mod_menu/js/menu-es5.min.js?dde9c780ad8e78890daeddcd06b19d2b" nomodule defer></script> <script type="application/json" class="joomla-script-options new">{"skipto-settings":{"settings":{"skipTo":{"enableActions":false,"enableHeadingLevelShortcuts":false,"accesskey":"9","displayOption":"popup","buttonLabel":"Keyboard Navigation","buttonTooltipAccesskey":"Access key is $key","landmarkGroupLabel":"Landmarks","headingGroupLabel":"Page Outline","mofnGroupLabel":" ($m of $n)","headingLevelLabel":"Heading level","mainLabel":"Main","searchLabel":"Search","navLabel":"Navigation","regionLabel":"Region","asideLabel":"Aside","footerLabel":"Footer","headerLabel":"Header","formLabel":"Form","msgNoLandmarksFound":"No landmarks to skip to","msgNoHeadingsFound":"No headings to skip to","headings":"h1, h2, h3","landmarks":"main, nav, search, aside, header, footer, form","attachElement":".navigation"}}},"joomla.jtext":{"MOD_FINDER_SEARCH_VALUE":"Search …","JLIB_JS_AJAX_ERROR_OTHER":"An error has occurred while fetching the JSON data: HTTP %s status code.","JLIB_JS_AJAX_ERROR_PARSE":"A parse error has occurred while processing the following JSON data:<br><code style=\"color:inherit;white-space:pre-wrap;padding:0;margin:0;border:0;background:inherit;\">%s<\/code>","ERROR":"Error","MESSAGE":"Message","NOTICE":"Notice","WARNING":"Warning","JCLOSE":"Close","JOK":"OK","JOPEN":"Open"},"finder-search":{"url":"\/component\/finder\/?task=suggestions.suggest&format=json&tmpl=component&Itemid=435"},"system.paths":{"root":"","rootFull":"https:\/\/developer.joomla.org\/","base":"","baseFull":"https:\/\/developer.joomla.org\/"},"csrf.token":"0addd7c5d4630f340e22e5573ac11fbc"}</script> <script src="/media/system/js/core.min.js?37ffe4186289eba9c5df81bea44080aff77b9684"></script> <script src="/media/vendor/bootstrap/js/bootstrap-es5.min.js?5.3.2" nomodule defer></script> <script src="/media/com_finder/js/finder-es5.min.js?e6d3d1f535e33b5641e406eb08d15093e7038cc2" nomodule defer></script> <script src="/media/system/js/messages-es5.min.js?c29829fd2432533d05b15b771f86c6637708bd9d" nomodule defer></script> <script src="/media/vendor/bootstrap/js/collapse.min.js?5.3.2" type="module"></script> <script src="/media/vendor/bootstrap/js/dropdown.min.js?5.3.2" type="module"></script> <script src="/media/vendor/awesomplete/js/awesomplete.min.js?1.1.5" defer></script> <script src="/media/com_finder/js/finder.min.js?a2c3894d062787a266d59d457ffba5481b639f64" type="module"></script> <script src="/media/system/js/messages.min.js?7f7aa28ac8e8d42145850e8b45b3bc82ff9a6411" type="module"></script> <script src="/media/joomlarrssb/js/rrssb.min.js?dde9c780ad8e78890daeddcd06b19d2b"></script> <script type="application/ld+json">{"@context":"https:\/\/schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https:\/\/developer.joomla.org\/","name":"Home"}},{"@type":"ListItem","position":2,"item":{"@id":"https:\/\/developer.joomla.org\/news.html","name":"News"}},{"@type":"ListItem","position":3,"item":{"name":"Be smart, load but don’t unload!"}}]}</script> <script> var _prum = [['id', '59300ad15992c776ad970068'], ['mark', 'firstbyte', (new Date()).getTime()]]; (function() { var s = document.getElementsByTagName('script')[0] , p = document.createElement('script'); p.async = 'async'; p.src = 'https://rum-static.pingdom.net/prum.min.js'; s.parentNode.insertBefore(p, s); })(); </script> </head> <body class="site com_content view-article layout-blog task-display itemid-465">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WJ36D4" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','GTM-WJ36D4');</script>   <nav class="navigation" role="navigation" aria-label="Cross Site Menu"> <div id="mega-menu" class="navbar navbar-expand-md py-md-1"> <div class="container-xxl"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#primaryMenu" aria-controls="primaryMenu" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse" id="primaryMenu"> <ul id="nav-joomla" class="navbar-nav"> <li class="dropdown"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> <span dir="ltr"><span aria-hidden="true" class="fab fa-joomla"></span> Joomla!<sup>®</sup></span> <span class="caret"></span> </button> <ul class="dropdown-menu"> <li class="dropdown-item nav-header"><span>About us</span></li> <li> <a class="dropdown-item" href="https://www.joomla.org"> <span aria-hidden="true" class="icon-joomla"></span> Joomla Home </a> </li> <li><a class="dropdown-item" href="https://www.joomla.org/about-joomla.html">What is Joomla?</a></li> <li><a class="dropdown-item" href="https://www.joomla.org/core-features.html">Benefits & Features</a></li> <li><a class="dropdown-item" href="https://www.joomla.org/about-joomla/the-project.html">Project & Leadership</a></li> <li><a class="dropdown-item" href="https://tm.joomla.org">Trademark & Licensing</a></li> <li><a class="dropdown-item" href="https://joomlafoundation.org">The Joomla Foundation</a></li> <li class="dropdown-divider"></li> <li class="dropdown-item nav-header"><span>Support us</span></li> <li><a class="dropdown-item" href="https://www.joomla.org/contribute-to-joomla.html">Contribute</a></li> <li><a class="dropdown-item" href="https://www.joomla.org/sponsor.html">Sponsor</a></li> <li><a class="dropdown-item" href="https://www.joomla.org/about-joomla/partners.html">Partner</a></li> <li><a class="dropdown-item" href="https://shop.joomla.org">Shop</a></li> </ul> </li> <li class="dropdown"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Download & Extend <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://downloads.joomla.org">Downloads</a></li> <li><a class="dropdown-item" href="https://extensions.joomla.org">Extensions</a></li> <li><a class="dropdown-item" href="https://community.joomla.org/translations.html">Languages</a></li> <li><a class="dropdown-item" href="https://launch.joomla.org">Get a free site</a></li> <li><a class="dropdown-item" href="https://domains.joomla.org">Get a domain</a></li> </ul> </li> <li class="dropdown"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Discover & Learn <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://docs.joomla.org">Documentation</a></li> <li><a class="dropdown-item" href="https://community.joomla.org/joomla-training.html">Training</a></li> <li><a class="dropdown-item" href="https://certification.joomla.org">Certification</a></li> <li><a class="dropdown-item" href="https://showcase.joomla.org">Site Showcase</a></li> <li><a class="dropdown-item" href="https://www.joomla.org/announcements.html">Announcements</a></li> <li><a class="dropdown-item" href="https://community.joomla.org/blogs.html">Blogs</a></li> <li><a class="dropdown-item" href="https://magazine.joomla.org">Magazine</a></li> </ul> </li> <li class="dropdown"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Community & Support <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://community.joomla.org">Community Portal</a></li> <li><a class="dropdown-item" href="https://community.joomla.org/events.html">Events</a></li> <li><a class="dropdown-item" href="https://community.joomla.org/user-groups.html">User Groups</a></li> <li><a class="dropdown-item" href="https://forum.joomla.org">Forum</a></li> <li><a class="dropdown-item" href="https://community.joomla.org/service-providers-directory.html">Service Providers Directory</a></li> <li><a class="dropdown-item" href="https://volunteers.joomla.org">Volunteers Portal</a></li> <li><a class="dropdown-item" href="https://extensions.joomla.org/vulnerable-extensions/vulnerable/">Vulnerable Extensions List</a></li> </ul> </li> <li class="dropdown"> <button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false"> Developer Resources <span class="caret"></span> </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="https://developer.joomla.org">Developer Network</a></li> <li><a class="dropdown-item" href="https://developer.joomla.org/security.html">Security Centre</a></li> <li><a class="dropdown-item" href="https://issues.joomla.org">Issue Tracker</a></li> <li><a class="dropdown-item" href="https://github.com/joomla">GitHub</a></li> <li><a class="dropdown-item" href="https://api.joomla.org">API Documentation</a></li> <li><a class="dropdown-item" href="https://framework.joomla.org"><span dir="ltr">Joomla!</span> Framework</a></li> </ul> </li> </ul> <div id="nav-search" class="navbar-search float-md-end"> <form class="mod-finder js-finder-searchform form-search" action="/search.html" method="get" role="search"> <label for="mod-finder-searchword84" class="visually-hidden finder">Search</label><input type="text" name="q" id="mod-finder-searchword84" class="js-finder-search-query form-control" value="" placeholder="Search …"> </form> </div> </div> </div> </div> </nav>  <header class="header"> <div class="container-md"> <div class="row"> <div class="col-md-7"> <h1 class="page-title"> <a href="/"> <img height="50px;" src="https://cdn.joomla.org/images/joomla-colours-logo.svg" alt="Joomla!" class="site-logo me-2 mb-1"> Developer Network™ </a> </h1> </div> <div class="col-md-5"> <div class="btn-toolbar pt-md-1 row"> <div class="btn-group col-6"> <a href="https://downloads.joomla.org/" class="btn btn-lg btn-warning">Download</a> </div> <div class="btn-group col-6"> <a href="https://launch.joomla.org" class="btn btn-lg btn-primary">Launch<span aria-hidden="true" class="icon-rocket"></span></a> </div> </div> </div> </div> </div> </header> <nav class="subnav-wrapper" aria-label="Primary Menu"> <div class="subnav"> <div class="container-md"> <ul class="mod-menu mod-list nav nav-pills"> <li class="nav-item item-435 default"><a href="/" class="nav-link">Home</a></li><li class="nav-item item-465 current active"><a href="/news.html" class="nav-link" aria-current="page">News</a></li><li class="nav-item item-743"><a href="/roadmap.html" class="nav-link">Project Roadmap</a></li><li class="nav-item item-479 parent"><a href="/cms.html" class="nav-link">CMS</a></li><li class="nav-item item-478 parent"><a href="/framework.html" class="nav-link">Framework</a></li><li class="nav-item item-480 parent"><a href="/tracker.html" class="nav-link">Tracker</a></li><li class="nav-item item-482 parent"><a href="/about.html" class="nav-link">About</a></li><li class="nav-item item-516"><a href="/security.html" class="nav-link">Security</a></li></ul> </div> </div> </nav>  <div class="body"> <div class="container"> <div class="row"> <main id="content" class="col-md-9">  <div id="system-message-container" aria-live="polite"></div> <div class="com-content-article item-page" itemscope itemtype="https://schema.org/Article"> <meta itemprop="inLanguage" content="en-GB"> <div class="page-header"> <h1> News </h1> </div> <div class="page-header"> <h2 itemprop="headline"> Be smart, load but don’t unload! </h2> </div> <dl class="article-info text-muted"> <dt class="article-info-term"> Details </dt> <dd class="published"> <span class="icon-calendar icon-fw" aria-hidden="true"></span> <time datetime="2017-12-27T14:00:00+00:00" itemprop="datePublished"> Published: 27 December 2017 </time> </dd> </dl> <figure class="none item-image"> <img src="/images/news/joomla-ui-frameworks.jpg" itemprop="image" alt="Joomla and UI Frameworks"> </figure> <div itemprop="articleBody" class="com-content-article__body"> <div class="share-container"> <ul class="rrssb-buttons clearfix"> <li class="rrssb-facebook"> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fjoom.la%2FjDJ" class="popup"> <span class="rrssb-icon"> <svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" width="29" height="29" viewBox="0 0 29 29"> <path d="M26.4 0H2.6C1.714 0 0 1.715 0 2.6v23.8c0 .884 1.715 2.6 2.6 2.6h12.393V17.988h-3.996v-3.98h3.997v-3.062c0-3.746 2.835-5.97 6.177-5.97 1.6 0 2.444.173 2.845.226v3.792H21.18c-1.817 0-2.156.9-2.156 2.168v2.847h5.045l-.66 3.978h-4.386V29H26.4c.884 0 2.6-1.716 2.6-2.6V2.6c0-.885-1.716-2.6-2.6-2.6z" class="cls-2" fill-rule="evenodd" /> </svg> </span> <span class="rrssb-text">facebook</span> </a> </li> <li class="rrssb-twitter"> <a href="https://twitter.com/intent/tweet?text=Be+smart%2C+load+but+don%E2%80%99t+unload%21%3A+https%3A%2F%2Fjoom.la%2FjDJ" class="popup"> <span class="rrssb-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"> <path d="M24.253 8.756C24.69 17.08 18.297 24.182 9.97 24.62c-3.122.162-6.22-.646-8.86-2.32 2.702.18 5.375-.648 7.507-2.32-2.072-.248-3.818-1.662-4.49-3.64.802.13 1.62.077 2.4-.154-2.482-.466-4.312-2.586-4.412-5.11.688.276 1.426.408 2.168.387-2.135-1.65-2.73-4.62-1.394-6.965C5.574 7.816 9.54 9.84 13.802 10.07c-.842-2.738.694-5.64 3.434-6.48 2.018-.624 4.212.043 5.546 1.682 1.186-.213 2.318-.662 3.33-1.317-.386 1.256-1.248 2.312-2.4 2.942 1.048-.106 2.07-.394 3.02-.85-.458 1.182-1.343 2.15-2.48 2.71z" /> </svg> </span> <span class="rrssb-text">twitter</span> </a> </li> <li class="rrssb-linkedin"> <a href="http://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fjoom.la%2FjDJ&title=Be+smart%2C+load+but+don%E2%80%99t+unload%21&summary=With+every+new+major+version+release+of+our+popula..." class="popup"> <span class="rrssb-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"> <path d="M25.424 15.887v8.447h-4.896v-7.882c0-1.98-.71-3.33-2.48-3.33-1.354 0-2.158.91-2.514 1.802-.13.315-.162.753-.162 1.194v8.216h-4.9s.067-13.35 0-14.73h4.9v2.087c-.01.017-.023.033-.033.05h.032v-.05c.65-1.002 1.812-2.435 4.414-2.435 3.222 0 5.638 2.106 5.638 6.632zM5.348 2.5c-1.676 0-2.772 1.093-2.772 2.54 0 1.42 1.066 2.538 2.717 2.546h.032c1.71 0 2.77-1.132 2.77-2.546C8.056 3.593 7.02 2.5 5.344 2.5h.005zm-2.48 21.834h4.896V9.604H2.867v14.73z" /> </svg> </span> <span class="rrssb-text">linkedin</span> </a> </li> <li class="rrssb-pinterest"> <a href="https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fjoom.la%2FjDJ&media=https%3A%2F%2Fdeveloper.joomla.org%2Fimages%2Fnews%2Fjoomla-ui-frameworks.jpg&description=Be+smart%2C+load+but+don%E2%80%99t+unload%21"> <span class="rrssb-icon"> <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 28 28"> <path d="M14.02 1.57c-7.06 0-12.784 5.723-12.784 12.785S6.96 27.14 14.02 27.14c7.062 0 12.786-5.725 12.786-12.785 0-7.06-5.724-12.785-12.785-12.785zm1.24 17.085c-1.16-.09-1.648-.666-2.558-1.22-.5 2.627-1.113 5.146-2.925 6.46-.56-3.972.822-6.952 1.462-10.117-1.094-1.84.13-5.545 2.437-4.632 2.837 1.123-2.458 6.842 1.1 7.557 3.71.744 5.226-6.44 2.924-8.775-3.324-3.374-9.677-.077-8.896 4.754.19 1.178 1.408 1.538.49 3.168-2.13-.472-2.764-2.15-2.683-4.388.132-3.662 3.292-6.227 6.46-6.582 4.008-.448 7.772 1.474 8.29 5.24.58 4.254-1.815 8.864-6.1 8.532v.003z" /> </svg> </span> <span class="rrssb-text">pinterest</span> </a> </li> </ul> </div> <p>With every new major version release of our popular CMS, we have some points of attention to bring to our developers and users. With the upcoming Joomla 4 launch, this is no different. You can <strong>load any UI framework</strong> you want in your extension, template, plugin, ... But you may <strong>not unload</strong> any media of the package (Bootstrap, jQuery, MooTools, Chosen, or whatever libraries are being introduced into 4.0), otherwise things will break.</p> <p>Joomla's UI layer is <b>not</b> coupled to a single framework, the Joomla application does <b>not</b> arbitrarily load any media. <b>But </b>some extensions explicitly load media or libraries, and when you arbitrarily unload any of those used media or libraries, you’re asking for problems with the result that functionality will break.</p> <h2>What about the Joomla 4 templates?</h2> <p>The current backend template (not to be confused with the one previewed in the <a href="https://magazine.joomla.org/item/3289-episode-iv-a-new-user-interface-for-the-joomla-backend">magazine</a> which is still work in progress) is a Bootstrap 4 based template and requires all Bootstrap dependencies.<br />The frontend template shipping with 4.0 is a Bootstrap 4 based template with some customizations and as such the template requires all Bootstrap dependencies.<br /><br />To be crystal clear here, these are <strong>TEMPLATE LEVEL DEPENDENCIES</strong>. This does not mean that Joomla 4 requires these technologies, only that the default templates (and inherently what most extension layouts will probably be designed against) are built this way. The use of the override systems will enable the <b>use of any frontend framework</b>.</p> <h2>The facts</h2> <p>Let’s state the facts :</p> <ul> <li>As of <a href="https://github.com/joomla/joomla-cms/releases/tag/4.0.0-alpha2" target="_blank" rel="noopener noreferrer">Alpha 2</a>, the Joomla 4 backend template (Atum) is a Bootstrap 4 based template. (Note that at this point we cannot confirm any other dependencies, as soon as we have more information on this we will communicate this.)</li> <li>The Joomla 4 frontend template (Cassiopeia) is a Bootstrap 4 based template</li> <li>The default templates (to include the default extension layouts, as those are essentially designed against the default templates) are the <strong>ONLY</strong> part of Joomla coupled to a specific framework as it relates to UI elements; the use of system overrides will allow template builders to use any framework of their preference.</li> <li>Joomla 4 will ship with Bootstrap 4 and jQuery 3, but they will <b>not</b> be required elements when using core functionality (some overrides may be necessary, especially for UI components, but the JavaScript API is explicitly being rewritten to not be dependent on jQuery)</li> </ul> <p> </p> <h2>Most important</h2> <p>You can load any UI framework you want, but keep in mind, do not unload any media or libraries. Thank you!</p> </div> <nav class="pagenavigation" aria-label="Page Navigation"> <span class="pagination ms-0"> <a class="btn btn-sm btn-secondary previous" href="/news/717-joomla-4-compatibility-layer-in-3-8.html" rel="prev"> <span class="visually-hidden"> Previous article: Joomla 4 compatibility layer in 3.8 </span> <span class="icon-chevron-left" aria-hidden="true"></span> <span aria-hidden="true">Prev</span> </a> <a class="btn btn-sm btn-secondary next" href="/news/712-joomla-3-8-routing-system-interview-of-hannes-papenberg.html" rel="next"> <span class="visually-hidden"> Next article: Joomla! 3.8 Routing System: Interview of Hannes Papenberg </span> <span aria-hidden="true">Next</span> <span class="icon-chevron-right" aria-hidden="true"></span> </a> </span> </nav> </div> <nav class="mod-breadcrumbs__wrapper" aria-label="Breadcrumbs"> <ol class="mod-breadcrumbs breadcrumb px-3 py-2"> <li class="mod-breadcrumbs__here float-start"> You are here:   </li> <li class="mod-breadcrumbs__item breadcrumb-item"><a href="/" class="pathway"><span>Home</span></a></li><li class="mod-breadcrumbs__item breadcrumb-item"><a href="/news.html" class="pathway"><span>News</span></a></li><li class="mod-breadcrumbs__item breadcrumb-item active"><span>Be smart, load but don’t unload!</span></li> </ol> </nav>  </main> <aside class="col-md-3 sidebar-right">  <div class="moduletable "> <div id="mod-custom119" class="mod-custom custom"> <h3>Joomla! CMS</h3> <ul class="nav menu flex-column nav-tabs"> <li class="nav-item"><a class="nav-link" href="https://downloads.joomla.org/latest">Current Release <span class="float-end float-md-none float-lg-end"><img src="/images/joomla-logo.png" alt="Joomla! CMS 3" /> 4<strong>.x</strong></span></a></li> <li class="nav-item"><a class="nav-link" href="https://issues.joomla.org">View known Issues</a></li> <li class="nav-item"><a class="nav-link" href="https://github.com/joomla/joomla-cms#build-status" target="_blank" rel="noopener noreferrer">Development Status</a></li> <li class="nav-item"><a class="nav-link" href="/nightly-builds.html">Download Nightly builds</a></li> </ul> <h3>Joomla! Framework</h3> <ul class="nav menu flex-column nav-tabs"> <li class="nav-item"><a class="nav-link" href="https://framework.joomla.org">Current Release <span class="float-end float-md-none float-lg-end"><img src="/images/joomla-framework.png" alt="Joomla! Framework Logo" /> 2<strong>.x</strong></span></a></li> <li class="nav-item"><a class="nav-link" href="https://framework.joomla.org/status">Development Status</a></li> </ul></div> </div> <div class="moduletable "> <h3 >Resources</h3> <ul class="mod-menu mod-list nav flex-column nav-tabs"> <li class="nav-item item-474"><a href="/development-strategy.html" class="nav-link">Development Strategy</a></li><li class="nav-item item-565"><a href="/security-centre.html" class="nav-link">Security Announcements</a></li><li class="nav-item item-736"><a href="/security/contact-the-team.html" class="nav-link">Report Security Issues</a></li><li class="nav-item item-685"><a href="/about/stats.html" class="nav-link">Usage Statistics</a></li><li class="nav-item item-687"><a href="/about/stats/api.html" class="nav-link">Statistics API Documentation</a></li><li class="nav-item item-466"><a href="https://api.joomla.org" class="nav-link">Joomla! API Documentation</a></li><li class="nav-item item-467"><a href="/coding-standards.html" class="nav-link">Coding Standards Manual</a></li><li class="nav-item item-662"><a href="/joomlacode-archive.html" class="nav-link">JoomlaCode Archive</a></li></ul> </div> <div class="moduletable "> <h3 >Mailing Lists</h3> <ul class="mod-menu mod-list nav flex-column nav-tabs"> <li class="nav-item item-748"><a href="https://community.joomla.org/joomla-developer-network-newsletter.html" class="nav-link">Developer Network Newsletter</a></li><li class="nav-item item-469"><a href="https://groups.google.com/group/joomla-dev-general" class="nav-link"> General Extensions Mailing</a></li><li class="nav-item item-470"><a href="https://groups.google.com/group/joomla-dev-cms" class="nav-link">CMS Mailing</a></li><li class="nav-item item-471"><a href="https://groups.google.com/group/joomla-dev-framework" class="nav-link">Framework Mailing</a></li><li class="nav-item item-514"><a href="https://groups.google.com/group/joomla-docs" class="nav-link">Documentation Mailing</a></li></ul> </div>  </aside> </div> </div> </div>  <footer class="footer text-center"> <div class="container"> <hr /> <div class="social"> <ul class="soc"> <li><a href="https://twitter.com/joomla" target="_blank" rel="noopener" title="Joomla! on Twitter"><span aria-hidden="true" class="fab fa-twitter"></span><span class="visually-hidden">Joomla! on Twitter</span></a></li> <li><a href="https://www.facebook.com/joomla" target="_blank" rel="noopener" title="Joomla! on Facebook"><span aria-hidden="true" class="fab fa-facebook"></span><span class="visually-hidden">Joomla! on Facebook</span></a></li> <li><a href="https://www.youtube.com/user/joomla" target="_blank" rel="noopener" title="Joomla! on YouTube"><span aria-hidden="true" class="fab fa-youtube"></span><span class="visually-hidden">Joomla! on YouTube</span></a></li> <li><a href="https://www.linkedin.com/company/joomla" target="_blank" rel="noopener" title="Joomla! on LinkedIn"><span aria-hidden="true" class="fab fa-linkedin"></span><span class="visually-hidden">Joomla! on LinkedIn</span></a></li> <li><a href="https://www.pinterest.com/joomla" target="_blank" rel="noopener" title="Joomla! on Pinterest"><span aria-hidden="true" class="fab fa-pinterest"></span><span class="visually-hidden">Joomla! on Pinterest</span></a></li> <li><a href="https://www.instagram.com/joomlaofficial/" target="_blank" rel="noopener" title="Joomla! on Instagram"><span aria-hidden="true" class="fab fa-instagram"></span><span class="visually-hidden">Joomla! on Instagram</span></a></li> <li><a href="https://github.com/joomla" target="_blank" rel="noopener" title="Joomla! on GitHub"><span aria-hidden="true" class="fab fa-github"></span><span class="visually-hidden">Joomla! on GitHub</span></a></li> </ul> </div> <div class="footer-menu"> <nav class="navbar navbar-expand"> <div class="container-fluid"> <ul class="navbar-nav mx-auto flex-wrap"> <li class="nav-item"><a class="nav-link" href="https://www.joomla.org"><span>Home</span></a></li> <li class="nav-item"><a class="nav-link" href="https://www.joomla.org/about-joomla.html"><span>About</span></a></li> <li class="nav-item"><a class="nav-link" href="https://community.joomla.org"><span>Community</span></a></li> <li class="nav-item"><a class="nav-link" href="https://forum.joomla.org"><span>Forum</span></a></li> <li class="nav-item"><a class="nav-link" href="https://extensions.joomla.org"><span>Extensions</span></a></li> <li class="nav-item"><a class="nav-link" href="https://community.joomla.org/service-providers-directory.html"><span>Services</span></a></li> <li class="nav-item"><a class="nav-link" href="https://docs.joomla.org"><span>Docs</span></a></li> <li class="nav-item"><a class="nav-link" href="https://developer.joomla.org"><span>Developer</span></a></li> <li class="nav-item"><a class="nav-link" href="https://community.joomla.org/the-joomla-shop.html"><span>Shop</span></a></li> </ul> </div> </nav> <nav class="navbar navbar-expand"> <div class="container-fluid"> <ul class="navbar-nav mx-auto flex-wrap"> <li class="nav-item"><a class="nav-link" href="https://www.joomla.org/accessibility-statement.html">Accessibility Statement</a></li> <li class="nav-item"><a class="nav-link" href="https://www.joomla.org/privacy-policy.html">Privacy Policy</a></li> <li class="nav-item"><a class="nav-link" href="https://www.joomla.org/cookie-policy.html">Cookie Policy</a></li> <li class="nav-item"><a class="nav-link" href="https://community.joomla.org/sponsorship-campaigns.html">Sponsor Joomla! with $5</a></li> <li class="nav-item"><a class="nav-link" href="https://joomla.crowdin.com" target="_blank" rel="noopener">Help Translate</a></li> <li class="nav-item"><a class="nav-link" href="https://github.com/joomla/joomla-websites/issues/new?title=[jdev]%20&body=Please%20describe%20the%20problem%20or%20your%20issue">Report an Issue</a></li> <li class="nav-item"><a class="nav-link" href="/component/content/article/716-be-smart-load-but-dont-unload-ui-frameworks.html?layout=blog&Itemid=&catid=8">Log in</a></li> </ul> </div> </nav> <p class="copyright">© 2005 - 2024 <a href="https://opensourcematters.org">Open Source Matters, Inc.</a> All Rights Reserved.</p> <div class="hosting"> <div class="hosting-image"><a href="https://www.rochen.com/joomla-hosting" rel="noopener" target="_blank"><img class="rochen" src="https://cdn.joomla.org/rochen/rochen_footer_logo_white.svg" alt="Rochen" /></a></div> <div class="hosting-text"><a href="https://www.rochen.com/joomla-hosting" rel="noopener" target="_blank"><span dir="ltr">Joomla!</span> Hosting by Rochen</a></div> </div> </div> <div id="adblock-msg" class="alert alert-danger d-none"> <button class="btn-close" data-bs-dismiss="alert" href="#"><span class="visually-hidden">Close</span></button> <span class="fa fa-triangle-exclamation"></span> We have detected that you are using an ad blocker. The Joomla! Project relies on revenue from these advertisements so please consider disabling the ad blocker for this domain. </div> </div> </footer> </body> </html>