bootswatch README

The project's README from github.com/thomaspark/bootswatch. As one markdown file: README.md.

Bootswatch

A collection of open source themes for Bootstrap
View Bootswatch themes »

Report bug · Request feature · Blog

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:

Author

Thomas Park

Thanks

Copyright 2014-2023 Thomas Park

Code released under the MIT License.

bootswatch (thomaspark/bootswatch)

Searching Database…

14.7K ·GitHub
Bootswatch
这是什么？Bootswatch 是一套面向 Bootstrap 的免费开源主题，可以把 Bootstrap 默认的外观换成现成的样式，例如 Slate、Flatly 或 Cyborg。
这是一个库，还是只是一组样式表？它是一组现成的 CSS/Sass 主题文件，直接放进 Bootstrap 项目里即可使用，并不是带有自己 API 的 JavaScript 库或框架。
我该怎样把主题加到项目里？可以下载某个主题编译好的 bootstrap.min.css 并替换进去，也可以通过 jsDelivr CDN 引入，或者在 Sass 构建中导入 variables.scss 和 bootswatch.scss，还可以用 'npm install bootswatch' 安装 npm 包。
这些主题要正常使用，我是否还需要安装 Bootstrap 本身？需要。Bootswatch 主题只提供样式，下拉菜单、模态框等功能仍然需要 Bootstrap 自身的 JavaScript（以及 CSS 结构）才能运行。
它也能用在 Ruby on Rails 上吗？可以。有一个 Ruby gem，把它加入 Gemfile 即可；Rails 用户还可以通过 initializer 进行配置，用 Sass 导入主题。
我能不用自带的主题，自己做一个定制主题吗？可以。Bootswatch 是开源的，你可以通过修改 variables.scss 调整基础设置，或修改 bootswatch.scss 进行更深层的结构调整，来改造或做出自己的主题，具体说明见 Help 页面。
有没有可以把 Bootswatch 接入其他平台的 API？有。提供了一个简单的 JSON API，可用于把你的平台与 Bootswatch 的主题数据对接，更多详情见 Help 页面。
在用 create-react-app 搭建的 React 应用中，我该怎么使用它？运行 'npm install bootswatch' 之后，在 index.js 或 App.js 的最顶部、其他 CSS 导入语句之前，导入所需主题的 CSS。
What are similar projects?mdb-ui-kit, bootstrap, bootstrap-sass, coreui-free-bootstrap-admin-template, css, simplefolio, _s, gentelella
Which topics is it in?rails, cdn, css-framework, bootstrap, scss, sass, mit-license, npm-package, ruby, theme, json, css
Creator
thomaspark
Size
91.6 MB
Stars
14.7K
Updated
CommitApr 16
Age
14y
Commits · 90 Days