NOCC Bootstrap Theme NPM package

Are you tired of outdated Bootstrap themes? Say hello to NOCC 🎉: A Modern Bootstrap 5 Theme!

An NPM Package that brings the power of NOCC directly to your NodeJS project. Get it now!.

This theme is a complete replacement for Bootstrap 5.3.3. You only need to include nocc-theme.css or nocc-theme.min.css.

Features

1. Use of the latest Bootstrap 5 library
2. Fully Responsive and Dual theme (light and dark)
3. Local development environment built-in
4. CSS and JS files minimized by default
5. Self-hosted google webfonts

Bundled dependencies

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

Installing

Copy to clipboard
npm install nocc-bootstrap-theme --save

• The css/nocc-theme.css (or the minified nocc-theme.min.css) file loads the font, icon, JavaScript, and image files.

Customize it

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

Setup

• Clone the project git clone --recursive git@github.com:carlesloriente/nocc-bootstrap-theme.git
• Init the Bootstrap submodule git submodule update --init --recursive (only needed the very first time)

Then, you can also import the source files to your manifest (e.g. index.scss).

Copy to clipboard
@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.

Demo website

The GitHub repository of the npm package includes the source files for building and running locally a sample website.

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

Install source files

• 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)

Install node modules, run the command:

Copy to clipboard
npm install

Build the distribution, run the command:

Copy to clipboard
npm run dist

The dist structure looks like this:

Copy to clipboard
nocc-bootstrap-theme/
└─ fonts/
└─ icons/
└─ images/
└─ js/
└─ css/
|  └─ nocc-theme.css
|  └─ nocc-theme.min.css
├─ scripts/
├─ src/
└─ static/

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

Copy to clipboard
npm run build-demo

The folder demo contains all the site files.

To run the bundled web server, run the command:

Copy to clipboard
npm run server-watch

The command incorporates a watcher, so you can write code and see your changes immediately in the browser.

Bugs and Issues

Have a bug or an issue with this package? Open a new issue here on GitHub!

Contributing

New contributors are always welcome! Check out CONTRIBUTING.md to get involved.

About

Carles Loriente creator and maintainer of the NOCC Bootstrap theme.

• Linkedin
• Twitter
• GitHub

Bootstrap 5 framework created by Mark Otto and Jacob Thorton.

Copyright and License

Copyright (c) 2024 Carles Loriente. Code released under the MIT license.