Calcite Bootstrap

screenshot of Calcite Bootstrap
bootstrap
scss

A Calcite theme and a custom build system for building Bootstrap apps.

Overview

Calcite Bootstrap is a custom theme and build system for Bootstrap. It is based on the Calcite design framework created by Esri. This project is deprecated and not recommended for future development.

Features

  • Custom theme based on the Calcite design framework
  • Integration of Calcite theme and build system with Bootstrap
  • Two main ways to use Calcite Bootstrap: copying compiled css files into your project or installing via npm and using a SASS build step
  • Does not include any javascript components itself, but provides a theme for Bootstrap components
  • Recommends loading Bootstrap javascript from BootstrapCDN if no build system is available
  • Installation via static files or npm
  • Easy to contribute to Calcite Bootstrap

Copying Compiled CSS Files

  1. Download the latest release from the documentation site.
  2. Move the zipped files to the desired location.
  3. Refer to the documentation site and the main Bootstrap for usage instructions.

Installing via NPM with SASS Build Step

  1. Install Calcite Bootstrap with npm by typing:
npm install calcite-bootstrap
  1. If using sass, add the following to your load path:
node_modules/calcite-bootstrap/dist/sass/
  1. If using gulp-sass, include this line in your gulpfile:
require('node_modules/calcite-bootstrap/gulpfile.js');
  1. If using grunt-sass, add this to your gruntfile:
require('node_modules/calcite-bootstrap/gulpfile.js');
  1. In your main .scss file, require the framework:
@import "calcite-bootstrap";

Summary

Calcite Bootstrap is a custom theme and build system for Bootstrap that is based on the Calcite design framework. It offers two ways to use it, either by copying compiled css files or by installing it via npm with a SASS build step. The project is deprecated and not recommended for future development.

bootstrap
Bootstrap

Bootstrap is the most popular CSS Framework for developing responsive and mobile-first websites.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

template
Templates & Themes

A template or theme refers to a pre-designed layout or structure that provides a basic framework for building a specific type of application or website. It typically includes good design, placeholder content and functional features, allowing developers to customize and fill in the details according to their specific needs.

gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.