npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

bootswatch

v5.3.3

Published

Bootswatch is a collection of themes for Bootstrap.

Downloads

141,228

Readme

Usage

There are a few different ways you can integrate Bootswatch into your project.

Via Pre-compiled Asset

Download the bootstrap.min.css file associated with a theme and replace Bootstrap's default stylesheet. You must still include Bootstrap's JavaScript file to have functional dropdowns, modals, etc.

Via CDN

You can use the themes via CDN at jsDelivr.

Via Sass Imports

If you're using Sass (SCSS) in your project, you can import the _variables.scss and _bootswatch.scss files for a given theme. This method allows you to override theme variables.

// Your variable overrides go here, e.g.:
// $h1-font-size: 3rem;

@import "~bootswatch/dist/[theme]/variables";
@import "~bootstrap/scss/bootstrap";
@import "~bootswatch/dist/[theme]/bootswatch";

Make sure to import Bootstrap's bootstrap.scss in between _variables.scss and _bootswatch.scss!

Via npm

You can install as a package with the command npm install bootswatch.

React Users (create-react-app, or similar bundler)

Modern JavaScript bundlers (webpack, parcel, rollup) support importing CSS from JS files. This can make it easier to deploy various 1st and 3rd party assets predictably. Note: There are tradeoffs to the following method, research your tooling before deploying to production.

Before continuing, ensure you've run npm install bootswatch in your local project folder. (Use either npm or yarn.)

Add the following import to your top-level index.js (or App.js) file. Add it before any other .css imports.

import "bootswatch/dist/[theme]/bootstrap.min.css";
// TODO: Note: Replace ^[theme]^ (examples: darkly, slate, cosmo, spacelab, and superhero. See https://bootswatch.com for current theme names.)

Here's an example of updated imports in App.js to use "slate" theme (using a create-react-app fresh project.)

import React from 'react';
import logo from './logo.svg';
import 'bootswatch/dist/slate/bootstrap.min.css'; // Added this :boom:
import './App.css';

function App() {
...

Via Ruby Gem

In your Ruby project, you can access the latest version of each theme by adding the following to your Gemfile and running bundle install:

gem "bootswatch", github: "thomaspark/bootswatch"

Each theme directory is then accessible via the path "#{Gem.loaded_specs["bootswatch"].load_paths.first}/[theme]".

Ruby on Rails users can add the following to an initializer (e.g. config/initializers/bootswatch.rb):

Rails.application.config.assets.paths += Gem.loaded_specs["bootswatch"].load_paths

And thus be able to import themes via Sass like so:

@import "[theme]/variables";
@import "~bootstrap/scss/bootstrap";
@import "[theme]/bootswatch";

Via API

A simple JSON API is available for integrating your platform with Bootswatch. More info can be found on the Help page.

Customization

Bootswatch is open source and you’re welcome to modify the themes.

Each theme consists of two SASS files. _variables.scss, which is included by default in Bootstrap, allows you to customize the settings. _bootswatch.scss introduces more extensive structural changes.

Check out the Help page for more details on building your own theme.

Contributing

It's through your contributions that Bootswatch will continue to improve. You can contribute in several ways:

  • Issues: Provide a detailed report of any bugs you encounter and open an issue on GitHub.

  • Documentation: If you'd like to fix a typo or beef up the docs, you can fork the project, make your changes, and submit a pull request.

  • Code: Make a fix and submit it as a pull request. When making changes, it's important to keep the CSS and SASS versions in sync. To do this, be sure to edit the SASS source files for the particular theme first, then run the tasks grunt swatch to build the CSS.

  • Donation: Donations are gratefully accepted via GitHub and PayPal.

Author

Thomas Park

Thanks

Copyright and License

Copyright 2014-2023 Thomas Park

Code released under the MIT License.