CODEWITHSUNDEEP
cssbootstrap-4
tmptplayer
tmptplayer

Reputation: 509

Reusable Modules in Web Development

Just looking for some big picture development/design advice. I'm looking to design a website using Bootstrap 4 as a CSS codebase to help with site design. Is there an easy framework where things that I create can be applied in a modular sense? So if I change the NavBar in a central location, I don't need to look at each page in the site? What should I look into learning in order to code in this manner, rather than copying and pasting my HTML to every page that I create.

Thanks!

Upvotes: 2

Views: 125

Answers (1)

Gerard
Gerard

Reputation: 15786

If you are unfamiliar with backend coding, or you do not have access to it, you may want to consider Javascript.

In your source code, you would move everything between <nav> and </nav> to a separate source (let's call it navigation.html). Using Javascript you can load navigation.html whenever a page is loaded.

In the (near) future, an HTML import may become available.

window.onload = () => {
  nav = document.getElementsByTagName("nav")[0]; // First nav element in the document
  fetch('navigation.html')    // Modern browsers only
    .then(function(html) {    // Receive navigation.html content
      nav.append(html);       // Insert content of navigation.html into <nav></nav>
    });
}

Upvotes: 1

Related Questions