Nocc-bootstrap-theme NPM

Introduction

Are you tired of outdated Bootstrap themes?

Say hello to NOCC 🎉: A Modern Bootstrap 5 Theme!

It comes in two powerful options:

🌟 Nocc Bootstrap Theme: An NPM Package that brings the power of NOCC directly to your NodeJS project. Get it now!.
🌐 Full Site Bundle for Jekyll: A complete static website showcasing NOCC's seamless integration. Featuring a beautifully designed homepage, dynamic tag cloud, image gallery, and more. Explore on GitHub.

ⓘ NOCC is a complete replacement for Bootstrap 5.3.3

Features

Use of the latest Bootstrap 5 library
Fully Responsive and Dual Color (light and dark)
CSS and JS files are minimized by default
Self-hosted Google web fonts
Demo site built-in

What's included

You'll find all the required directories and files within the download, logically grouping common assets and providing compiled and minified variations.

Bundled dependencies

Bootstrap 5.3.3
jQuery 3.7.1
Clipboard.js 2.0.11
jCloud 2.0.3
Roboto Sans-serif, Lora Serif, and Oxygen Mono font families
A few Bootstrap 5 icons

Quick Start

Select your favourite package manager and follow the instructions below.

Install with npm:

  npm install nocc-bootstrap-theme --save

Install with yarn:

  yarn add nocc-bootstrap-theme

Install with Composer:

  composer require nocc-bootstrap-theme

The package folder structure looks like this:

  nocc-bootstrap-theme/
  ├─ css/
  ├─ fonts/
  ├─ icons/
  ├─ images/
  ├─ js/
  └─ src/

The css/nocc-theme.css (or the minified nocc-theme.min.css) file loads the fonts and icons. Remember to include JavaScript files and images in your project.

You can also import the source SCSS files to your manifest (e.g. index.scss).

  @import "nocc-bootstrap-theme/src/styles/main.scss";

If you need documentation or help with Bootstrap or its components in general, please head over to Bootstrap documentation.

Customize it

You can change or use this theme in your own Sass code; please download the source code from the GitHub repository and change it.

Installing from source

Install node v20.10.0 or higher
Clone project git clone --recursive git@github.com:carlesloriente/nocc-bootstrap-theme.git
Go into the project folder cd nocc-bootstrap-theme
Init the Bootstrap submodule git submodule update --init --recursive (only needed the very first time)

The folder structure looks like this:

  nocc-bootstrap-theme/
  ├─ bootstrap/
  ├─ scripts/
  ├─ src/
  |  ├─ fonts/
  |  ├─ icons/
  |  ├─ images/
  |  ├─ js/
  |  └─ styles/
  └─ static/
    ├─ gallery/
    └─ posts/

Install node modules, run the command:

  npm install

Build the distribution, run the command:

  npm run compile

Demo website

The source includes resources for building and running locally a sample website.

If you want to see the theme in action, complete the following steps.

Now, let's build the demo site, run the command:

  npm run compile-demo

The folder demo contains all the generated site files.

To run the bundled web server, run the command:

  npm run server-watch

Additionally, an option builds the files on the fly when there's a change and runs the web server incorporating a watcher, so you can write code and see your changes immediately in the browser. Run the command: