Calcite Bootstrap is a custom theme and a custom build system for Bootstrap. The theme is based on Calcite - a geo-centric design framework created by Esri. Calcite Bootstrap was built for developers who have experience working with Bootstrap and would like to integrate the Calcite theme and build system to their web pages and apps.
For more info about this framework, go to the documentation site
There are two main ways to use Calcite Boostrap:
- 1, Copying compiled css files into your project; or
- 2, Installing via a npm and using a SASS build step in your project.
Calcite Bootstrap does not include any javascript components itself - it simply provides a theme for Bootstrap components. If you elect to use any Bootstrap components that require javascript, you will need to include the Bootstrap javascript in your application.
For applications without a build system, we recommend loading the Bootstrap javascript from the BootstrapCDN.
If you have a build step, and installed calcite-bootstrap via npm, then bootstrap-sass was also installed, and you can include the scripts you need from node_modules/bootstrap-sass/assets/javascripts/...
This is probably the easiest way. If you're looking to get up and running quickly, just download the latest release and move the zipped files to wherever you keep you assets. Be sure to use the documentation site and the main Bootstrap to copy and paste patterns, components, and even a sample html boilerplate.
To install Calcite Bootstrap with npm, type:
npm install --save-dev calcite-bootstrap
If you're using sass, be sure to add node_modules/calcite-bootstrap/dist/sass/ to your load path. If you're using gulp-sass you will add something like this:
gulp.task('sass', function () {
return gulp.src('./sass/**/*.scss')
.pipe(sass({
includePaths: [
'./node_modules/bootstrap-sass/assets/stylesheets',
'./node_modules/calcite-bootstrap/dist/sass/'
]
}).on('error', sass.logError))
.pipe(gulp.dest('./css'));
});
If you are using grunt-sass, you should add it like this:
'sass': {
options: {
includePaths: [
'./node_modules/bootstrap-sass/assets/stylesheets',
'./node_modules/calcite-bootstrap/dist/sass/'
]
},
target: {
files: {
'path/to.css': 'path/to.scss'
}
}
}
Then in your main .scss file, you can just require the framework: @import "calcite-bootstrap";.
Installing Calcite Bootstrap was designed to be fairly painless. If you have any problems, be sure to submit an issue and use the label install issues.
Calcite-Boostrap has these main dependencies:
- node.js
- gulp
- Open Terminal (or your favorite command line tool. For OSX, I recommend iTerm) and check to see if you have Git installed just by entering
$ git. You should see a list of commands for git if it is. If Git is not installed, OSX will automatically prompt you to install the XCode Command Line Developers Tools. Follow the prompts to complete the install. - Visit nodejs.org to install Node. Check the install by entering
$ node -vin Terminal - Install Grunt by entering
$ npm install -g gulpin Terminal.
If you run into errors during the installs, Mac Users my want to try using sudo. For example:
$ sudo npm install -g gulp
All the code for Calcite Bootstrap lives on GitHub. We use the fork and pull model to manage contribution.
- Fork the repository so you have your own copy (
$ your-username/calcite-bootstrap) - Clone the repo locally with
$ git clone https://github.com/your-username/calcite-bootstrap - Move into the clone repo:
$ cd calcite-bootstrap
- Install npm modules:
$ npm install
Again, if you run into errors during, Mac Users my want to try using sudo.
When the installs complete run $ gulp serve to start the application. Open a new browser and navigate to http://localhost:9000.
You should also add Esri/calcite-bootstrap as a remote at this point. We generally call this remote branch 'upstream':
$ git remote add upstream https://github.com/Esri/calcite-bootstrap
Check your configuration: $ git remote -v
The results should look like:
origin https://github.com/your-username/calcite-bootstrap.git (fetch)
origin https://github.com/your-username/calcite-bootstrap.git (push)
upstream https://github.com/Esri/calcite-bootstrap.git (fetch)
upstream https://github.com/Esri/calcite-bootstrap.git (push)
To prepare a release, you need an NPM account (npmjs.org), and need to be running on a mac or linux.
Most of the process is automated, but we have left two manual steps to ensure that the actual publishing to NPM is not done accidentally.
- increment the version number in
package.jsonThis will usually mean bumping the PATCH number (major.minor.patch). This version number will be used in the TAG that the next step will create @ github. - run
sh bin/release.shThis will create a branch, build the css, and pushes a release. NOTE: You can only push to the same version once. Re-release on the same version, you must manually destroy the release @ github. - Got to the release @ github https://github.com/Esri/calcite-bootstrap/releases and copy the url to the tar.gz source code file.
- run
npm publish <url to tar.gz file>- this will push the update to npm.
Copyright © 2015-2018 Esri
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.
A copy of the license is available in the repository's LICENSE file.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent