This project is deprecated and is not recommended for future development.
Calcite Web
Calcite Web is a web design framework that implements the Esri Brand Guidelines and Calcite design framework for browser-based properties and products. Calcite Web is written in Sass, and is compatible with both the standard Sass ruby gem and the Libsass compiler. The project also includes a dependency-free JavaScript library for use with interactive patterns.
Getting Started
We recommend installing Calcite Web with a package manager. Calcite Web works as both a ruby gem or NPM module. Check out the documentation for installation instructions.
Once you've installed Calcite Web, it can be helpful to read the quickstart guide to get an idea of how you use it.
Browser Support
![]() IE / Edge |
![]() Firefox |
![]() Chrome |
![]() Safari |
---|---|---|---|
IE10, IE11, Edge | last 2 versions | last 2 versions | last 2 versions |
Contributing
We welcome all contributions: issues, pull requests, idea, questions, documentation improvements, etc. Just make sure you read the contribution guidelines.
Licensing
Copyright 2016 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
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.
Accordions
@nikolaswise @paulcpederson @asangma @chrisferenci @driskull @CassidyB @stieman
Accordion +/- versus v/^
There's a considerable concern with our pattern using +/- for accordions.
In complex dialogues where you can add, create, delete, zoom, or unzoom... the +/- icons can serve as confusing.
Suggest using the icons below for accordions to limit this confusion:
Text is too thin all over
@nikolaswise I ban you from using
font-weight: 300;
on Calcite Web :smile:This makes fonts appear way to thin overall but particularly on headers and elements with smaller text sizes.
I bet this is also unreadable on older/crappier monitors (try the PC on the front desk) but it also still looks to thin on my retina display and thunderbolt.
Can we bump this up to
font-weight: 400;
with alight
option for headers?Standard copyright and links in footer?
The line with "Copyright ..." differs between http://esri.github.io/calcite-web/ vs https://developers.arcgis.com/en/ vs the "patterns" site in regards to css, links and text
Which one should we use?
Calcite Color Palette : Make the Authoritative Resource
Having discovered discrepancies in how colors and grids are displayed in Adobe files versus actual CSS, it should be decided which colors and grids are the true colors and grids, and any files related to the matter should be updated (swatches, photoshop guides, css files).
Provide events for javascript patterns
For example, when using the filter-dropdown component, there is currently no way to know when it has changed. So you basically have to reimplement the pattern again in whatever framework you're using.
One way to fix this is by returning an event bus from
calcite.init
. For example:In this way we could enable people plugging this JavaScript into their applications to listen to events and do whatever they need to.
This also opens up the idea of allowing developers to also emit these events so that you can programmatically open modals, etc via JavaScript like:
Which would find the modal with an id of
modal1
and open it. We could also use this internally to decouple all of our logic withincalcite-web.js
. Each pattern would internally just emit events and update the page.Interested in how this would help/hinder @patrickarlt 's work on web components, or how it would fit into other frameworks like Angular, Ember, React, etc.
First and Secondary Nav Structures
We need to combine and refine all the current navigation patterns into one well-designed set of hierarchical navigation patterns.
I've started collecting images of different navs across Esri and will be posting them to this thread. We need to accomplish the following requirements:
After we get Middleman and sass set up in the repo, let's stub out some solutions along with their naming conventions and go from there.
/cc @jhough10 @nikolaswise also, @karstenthorson you might have some input into what styles we should settle on going forward.
Icons
Create a set of icons to distribute with the framework for common interface elements.
These are the projected icon needs:
Social Media
Actions
Locations
Labels
Things
How to deal with black not being black
Very often, I’m working with designs that use black (
#000000
), which is darker than the darkest black in Calcite (#323232
).What strategy do you recommend we mortal developers follow to handle this?
Has anyone paved a cowpath for this actual-black, true-black, dark-black, no-really-this-time-its-black color?
May be related to the 11 step grayscale developed in https://github.com/Esri/calcite-web/issues/32
Button Hovers and Color
@nikolaswise @paulcpederson @CassidyB
I now understand how Calcite-Web works, and am excited to start using this in my designs. I just have a few suggestions for enhancing the system.
Esri Brand Blue Buttons
Suggest change from #196fa6 to Esri Blue 200 (#007ac2)
Hover Buttons Dark Instead of Light
Historically on esri.com and other esri branded sites we hover buttons darker. There are some edge cases, but I think this may help improve our system here.
CSS problems with rtl language pages (Arabic)
In Arabic (a right to left language), the table of contents and body are stacked top and bottom instead of the table of contents being on the right and the body on the left. It looks like a left margin has been left on the pre-1 class div (column-17) when those should have been switched to a right margin for the rtl languages.
Also, it looks like the figcaption elements have a right border in Arabic that I don't think should be there.
App Switcher
Hey Nik,
Here's a quick sketch of the app switcher in a med-fi wireframe we are considering navigation for esri.com.
It's not revolutionary, but hopefully this gives you an idea of placement for desktop.
We are still questioning the use on tablet or mobile as we don't see too many use cases that would support the effort.
Talk soon,
Matt
Bump json5 and rollup-plugin-babel-minify
Bumps json5 to 2.2.2 and updates ancestor dependency rollup-plugin-babel-minify. These dependencies need to be updated together.
Updates
json5
from 0.5.1 to 2.2.2Release notes
Sourced from json5's releases.
... (truncated)
Changelog
Sourced from json5's changelog.
... (truncated)
Commits
14f8cb1
2.2.210cc7ca
docs: update CHANGELOG for v2.2.27774c10
fix: add proto to objects and arraysedde30a
Readme: slight tweak to intro97286f8
Improve example in readmed720b4f
Improve readme (e.g. explain JSON5 better!) (#291)910ce25
docs: fix spelling of Aseem2aab4dd
test: require tap as t in cli tests6d42686
test: remove mocha syntax from tests4798b9d
docs: update installation and usage for modulesUpdates
rollup-plugin-babel-minify
from 4.0.0 to 10.0.0Changelog
Sourced from rollup-plugin-babel-minify's changelog.
... (truncated)
Commits
ae3c889
10.0.05992ea7
docs(changelog): add missing link to v10 diffe578a4a
Merge pull request #200 from Comandeer/t/v1094cfe8a
chore(docs): regenerate docs56cb227
docs(readme): add note about deprecation775fb4d
chore(license): bump year8d18fa6
docs(changelog): add entry for v10.0.0206b32b
test(cli): relax requirements for source maps in CLI tests4ee3017
chore(package): update dependenciesc0fbfb6
chore(package): bump supported Node versionDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump decode-uri-component from 0.2.0 to 0.2.2
Bumps decode-uri-component from 0.2.0 to 0.2.2.
Release notes
Sourced from decode-uri-component's releases.
Commits
a0eea46
0.2.2980e0bf
Prevent overwriting previously decoded tokens3c8a373
0.2.176abc93
Switch to GitHub workflows746ca5d
Fix issue where decode throws - fixes #6486d7e2
Update license (#1)a650457
Tidelift tasks66e1c28
Meta tweaksDependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump engine.io and browser-sync
Bumps engine.io and browser-sync. These dependencies needed to be updated together. Updates
engine.io
from 3.2.0 to 6.2.1Release notes
Sourced from engine.io's releases.
... (truncated)
Changelog
Sourced from engine.io's changelog.
... (truncated)
Commits
24b847b
chore(release): 6.2.1425e833
fix: catch errors when destroying invalid upgrades (#658)99adb00
chore(deps): bump xmlhttprequest-ssl and engine.io-client in /examples/latenc...d196f6a
chore(deps): bump minimatch from 3.0.4 to 3.1.2 (#660)7c1270f
chore(deps): bump nanoid from 3.1.25 to 3.3.1 (#659)535a01d
ci: add Node.js 18 in the test matrix1b71a6f
docs: remove "Vanilla JS" highlight from README (#656)917d1d2
refactor: replace deprecatedString.prototype.substr()
(#646)020801a
chore: add changelog for version 3.6.0ed1d6f9
test: make test script work on Windows (#643)Updates
browser-sync
from 2.24.7 to 2.27.10Release notes
Sourced from browser-sync's releases.
... (truncated)
Commits
f6965a6
v2.27.10e6c7bed
Updated portscanner to 2.2.0 (#1960)6a587ec
fix readme's91258ae
Merge branch 'browser-sync-1946-esbuild'f48d6b4
👋 app veyor30c24dc
Merge pull request #19479d24de5
drop webpack from UI7a00341
build client with esbuildc30868a
v2.27.99b5fcdc
fix(cli): Where's the command help? fixes #1929 (#1945)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump socket.io-parser and browser-sync
Bumps socket.io-parser and browser-sync. These dependencies needed to be updated together. Updates
socket.io-parser
from 3.1.3 to 4.2.1Release notes
Sourced from socket.io-parser's releases.
... (truncated)
Changelog
Sourced from socket.io-parser's changelog.
... (truncated)
Commits
5a2ccff
chore(release): 4.2.1b5d0cb7
fix: check the format of the index of each attachmentc7514b5
chore(release): 4.2.0931f152
chore: add Node.js 16 in the test matrix6c9cb27
chore: bump@socket
.io/component-emitter to version 3.1.0b08bc1a
feat: allow the usage of custom replacer and reviver (#112)aed252c
chore(release): 4.1.289209fa
chore: bump cached-path-relative from 1.0.2 to 1.1.0 (#113)0a3b556
chore: bump path-parse from 1.0.6 to 1.0.7 (#108)7f6b262
fix: allow objects with a null prototype in binary packets (#114)Updates
browser-sync
from 2.24.7 to 2.27.10Release notes
Sourced from browser-sync's releases.
... (truncated)
Commits
f6965a6
v2.27.10e6c7bed
Updated portscanner to 2.2.0 (#1960)6a587ec
fix readme's91258ae
Merge branch 'browser-sync-1946-esbuild'f48d6b4
👋 app veyor30c24dc
Merge pull request #19479d24de5
drop webpack from UI7a00341
build client with esbuildc30868a
v2.27.99b5fcdc
fix(cli): Where's the command help? fixes #1929 (#1945)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump thenify from 3.3.0 to 3.3.1
Bumps thenify from 3.3.0 to 3.3.1.
Changelog
Sourced from thenify's changelog.
Commits
1d054b4
Release 3.3.10d94a24
fix: remove eval (#30)Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.
Bump follow-redirects from 1.5.8 to 1.14.8
Bumps follow-redirects from 1.5.8 to 1.14.8.
Commits
3d81dc3
Release version 1.14.8 of the npm package.62e546a
Drop confidential headers across schemes.2ede36d
Release version 1.14.7 of the npm package.8b347cb
Drop Cookie header across domains.6f5029a
Release version 1.14.6 of the npm package.af706be
Ignore null headers.d01ab7a
Release version 1.14.5 of the npm package.40052ea
Make compatible with Node 17.86f7572
Fix: clear internal timer on request abort to avoid leakage2e1eaf0
Keep Authorization header on subdomain redirects.Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting
@dependabot rebase
.Dependabot commands and options
You can trigger Dependabot actions by commenting on this PR:
@dependabot rebase
will rebase this PR@dependabot recreate
will recreate this PR, overwriting any edits that have been made to it@dependabot merge
will merge this PR after your CI passes on it@dependabot squash and merge
will squash and merge this PR after your CI passes on it@dependabot cancel merge
will cancel a previously requested merge and block automerging@dependabot reopen
will reopen this PR if it is closed@dependabot close
will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually@dependabot ignore this major version
will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this minor version
will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)@dependabot ignore this dependency
will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)@dependabot use these labels
will set the current labels as the default for future PRs for this repo and language@dependabot use these reviewers
will set the current reviewers as the default for future PRs for this repo and language@dependabot use these assignees
will set the current assignees as the default for future PRs for this repo and language@dependabot use this milestone
will set the current milestone as the default for future PRs for this repo and languageYou can disable automated security fix PRs for this repo from the Security Alerts page.