NooJS extends Bootstrap by making it CSS-only, no single line of javascript required, but all user interaction and animations still work as intended. Bootstrap is the world’s most popular framework for building responsive, mobile-first sites.
✓ SCRIPTS DISABLED, BUT NOSCRIPT TAG IS ALSO DISABLED -> UNSUPPORTED, PLEASE ENABLE NOSCRIPT TAG.
✗ SCRIPTS ENABLED
Looking to quickly add Bootstrap to your project, but don't want to use javascript? Then this is for you: We've replaced the interactive javascript code with CSS 'hacks', supported by all modern browsers. If you are instead looking for a tested, production ready version please consider using the original Bootstrap with javascript.
Javascript is used extensively in web frontends. You can make an 'interactive' and fancy website without using Javascript, with this project I want to show you how.
Many SaaS require Javascript, but could be build without it. With Javascript disabled, it is not possible to build trackers to record every keystroke & touch. NooJS is for privacy preserving SaaS applications of tomorrow!
Copy-paste the stylesheet <link> into your <head> before all other
stylesheets to load our CSS.
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">Copy-paste this stylesheet <link> into your <head> after bootstrap.min.css. It replaces most functionality of the javascript code.
<link href="bootstrap.noojs.min.css" rel="stylesheet" crossorigin="anonymous">Many of our components require the use of JavaScript to function. Specifically, they require our own JavaScript plugins and Popper
Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you’re at all unsure about the general page structure, keep reading for an example page template.
Be sure to have your pages set up with the latest design and development standards. That means using an HTML5 doctype and including a viewport meta tag for proper responsive behaviors. Put it all together and your pages should look like this:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- NooJS.Bootstrap CSS for interactions -->
<link href="bootstrap.noojs.min.css" rel="stylesheet">
<title>My website runs without client side JS code!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- No JS imports required, happy coding! -->
</body>
</html>
For next steps, visit the Layout docs or our official examples to start laying out your site’s content and components.
If you want more information on how Bootstrap can be used to create a responsive website. Please see their extensive documentation. This website is mainly to demonstrate how Bootstrap can work without any javascript code, you can view the reworked components with examples in the left menu. Let’s dive in.
Upside: less javascript means less complexity.
Upside: not using javascript to for dom positioning results in fast page rendering.
Downside: not suitable for pages with a long list, table, deep tree, since all dom elements are required to be there upon page load. Javascript can be used to implement lazy loading.
Downside: modal or offcanvas content needs to be defined for every possible click. Workaround of placing iframe a with lazy load comes with strong disclamer: it is not possible to have overlays (such as another modal) from within the iframe.