a.k.a. "P2PUstrap"
We use this framework to make sure all our web properties follow the same consistent brand. You can use it too if you want a website that looks like ours!
The theme is based on Bootstrap 5 and includes CSS and JavaScript. You can use just the CSS, but then some Bootstrap components may not work (like menu dropdowns or modals).
TODO CDN isn't being updated atm, need to migrate to github actions. You can copy the files in dist/ of this repo to your site. Include the CSS <head> and the JavaScript at the end of <body> and add material icons and fontawesome somehow. See demo/index.html for details. It might not be 100% working right now.
In your <head> tag:
<link rel="stylesheet" href="https://d3gh4aef1l5qvi.cloudfront.net/discourse.css">
At the end of your <body> tag:
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://d3gh4aef1l5qvi.cloudfront.net/base.js"></script>
As you can see, you'll need to include Bootstrap and its dependencies, jQuery and popper.js.
NPM:
npm install p2pu-theme
Don't forget to install the peer dependencies: jQuery, bootstrap and popper.js.
TODO Update these instructions for using it with Webpack 5. The TLDR is in a js file, include both the css file and the js, file, make sure you have your loaders set up to do what it needs to, basically the instructions for using bootstrap 5 with webpack. You still need bootstrap, popper, material icons and fontawesome. I hope to shorten that list soon.
If you're using the p2pu-theme package, you can extend the library to suit your own needs.
The CSS is built from sass. You'll find the partials in p2pu-theme/src/scss. The first place to start is the _variables.scss file, where you can change the variables that are used throughout bootstrap and the p2pu-theme. You can then create your own partials and add them to the end of base.scss or create your own base file and import only the partials you want.
Run npm run build to compile the CSS files, which will be output to the dist folder.
Add your JavaScript files to the js folder and import them in the index.js file.
Run npm run build to compile the package, which will be output to the dist folder.