esri / calcite-web Goto Github PK

Authoritative front-end development resources for Calcite design initiative. Includes extendable base components and styles, as well as a modular and efficient framework for ArcGIS properties.

Home Page: http://esri.github.io/calcite-web/

License: Apache License 2.0

Ruby 0.26% JavaScript 21.71% SCSS 78.02%

css sass web-development html styleguide javascript calcite-web web framework

calcite-web's Introduction

Calcite Web is deprecated and is not recommended for future development.

Please visit the Calcite Design System GitHub respository.

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

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.

calcite-web's People

Contributors

Stargazers

Watchers

Forkers

nikolaswise vtrans-rail jfarmer91 paulcpederson alaframboise rmyersapco patrickarlt sanjibpanda jnorthcott22 jgravois jhough10 billbeaver digideskio hhkaos maccesar21 jonathantneal dbox oknoway amann715 araedavis justinhough wju sympletech sahilkathiri enterstudios acerrillo vijayendranj rick-sanchez-c-137 carloxiang justinzhanggis liuzumou acasasitexico jrowlingson mitc7862 kjonesux capeoples arjavbadjatiya jimmieego ddred11 pcsswamin cuulee miketschudi clintonlunn jmdye deepspatial skitterm schontz gavinr bensjones xiubo777 jsavella jgrew andyprasetya gouravmakhija18 devenpitaliya ybq880812131 isabella232 gaybro8777

calcite-web's Issues

Consider Tooltips like Primer

https://github.com/primer/primer/blob/master/scss/_tooltips.scss

They are pretty fresh.

API reference page double displays parameter selection div; breadcrumbs jump around

If I scroll down on the API reference page, this block shows up twice in the DOM:

<section class="column-6 js-sticky scroll-show tablet-hide is-sticky" 
         data-top="46" style="top: 46px;">
      <a href="#" class="btn btn-grouped btn-clear">↑</a>
      <a href="#" class="btn btn-grouped btn-clear">param</a>
      <a href="#" class="btn btn-grouped btn-clear">↓</a>
      <a href="#" class="btn btn-grouped btn-transparent">Top</a>
</section>

I also noticed that depending on the page width, the breadcrumbs, <header class="third-nav js-sticky" data-top='0'>, are jumping above or below the sub-nav header. At small sizes, they appear below, at larger sizes above, then larger still below again.

[1.0] Responsify

Responsify the following components -

Integration with Patterns site

Schemed on the following IA with @jhough10 and @paulcpederson

npm install missing /dist

Not too familiar npm's package.json handling, so I might be missing something, but the following steps did not include /dist:

$ npm -v
2.7.5
$ npm cache clean
$ npm install --save-dev Esri/calcite-web
[email protected] node_modules/calcite-web
$ ls -1 ./node_modules/calcite-web/
CHANGELOG.md
README.md
package.json

Specifying the version as a workaround.

Condensing and Simplifying Selectors and Patterns

Tailcoat currently has some problems with namespace collisions on certain modifier selectors. We've been thinking about solving this with two decisions:

a) Flatter and clearer class names for patterns
b) Proper namespacing and as little nesting as possible for class names.

Some examples with our current patterns:

<div class="navigation-bar">
  <div class="container">
    <header>
      <h1>Section Title</h1>
      <a class="btn secondary right leader-half" href="#"> Call to Action </a>
    </header>
    <nav class="navigation-bar-nav">
      <ul>
        <li class="current"> <a href="#"> Page 1 </a> </li>
        <li> <a href="#"> Page 2 </a> </li>
        <li> <a href="#"> Page 3 </a> </li>
      </ul>
    </nav>
  </div>
</div>

<!-- Becomes -->

<div class="seconary-nav">
  <div class="container">
    <header>
      <h1 class="secondary-nav-title">Section Title</h1>
      <a href="#" class="btn btn-orange leader-half right">Call to Action</a>
    </header>
    <nav class="secondary-nav-list">
      <a href="#" class="secondary-nav-link is-active">Active</a>
      <a href="#" class="secondary-nav-link">Not Active</a>
    </nav>
  </div>
</div>

<!-- // -->

<div class="search-bar">
  <div class="container">
    <div class="search-inputs">
      <input class="left" type="search" placeholder="Search Your Applications">
      <a class="search-btn btn transparent"><span class="icon-search"></span></a>
    </div>
  </div>
</div>

<!-- Becomes -->

<div class="search-bar js-search">
  <div class="container">
    <div class="search-bar-inputs">
      <input class="search-bar-input left" type="search" placeholder="Search Your Applications">
      <a class="btn btn-transparent search-bar-btn ">
        <span class="icon-search"></span>
      </a>
    </div>
  </div>
</div>

<!-- // -->

<div class="search-filters">
  <div class="container">
    <div class="click-dropdown checkmarks">
      <a href="#" class="click-dropdown-link">Time</a>
      <nav class="click-dropdown-menu">
        <a href="#" class="click-dropdown-item selected">Last 7 days</a>
        <a href="#" class="click-dropdown-item">Last month</a>
        <a href="#" class="click-dropdown-item">Last year</a>
        <a href="#" class="click-dropdown-item">Anytime</a>
      </nav>
    </div>
  </div>
</div>

<!-- Becomes -->

<div class="search-filters">
  <div class="container">
    <div class="click-dropdown">
      <a href="#" class="click-dropdown-link">Time</a>
      <nav class="click-dropdown-menu">
        <a href="#" class="click-dropdown-item is-selected">Last 7 days</a>
        <a href="#" class="click-dropdown-item">Last month</a>
        <a href="#" class="click-dropdown-item">Last year</a>
        <a href="#" class="click-dropdown-item">Anytime</a>
      </nav>
    </div>
  </div>
</div


<!-- // -->

<aside>
  <nav class="sidebar-navigation">
    <header>
      <h4>Map Viewer</h4>
    </header>
    <ul>
      <li><a class="icon-right-arrow" href="#">Link 1</a></li>
      <li><a class="icon-right-arrow" href="#">Link 2</a></li>
      <li><a class="icon-right-arrow" href="#">Link 3</a></li>
    </ul>
  </nav>
</aside>

<!-- Becomes -->

<nav class="vertical-nav">
  <h4 class="vertical-nav-title">Map Viewer</h4>
  <a class="vertical-nav-link is-active icon-right-arrow" href="#">Link 1</a>
  <a class="vertical-nav-link icon-right-arrow" href="#">Link 2</a>
  <a class="vertical-nav-link icon-right-arrow" href="#">Link 3</a>
  </ul>
</nav>

<!-- // -->
<div class="loader">
  <span class="side side-left"><span class="fill"></span></span>
  <span class="side side-right"><span class="fill"></span></span>
  <p class="loading-word">Loading...</p>
</div>

<!-- Becomes -->

<div class="loader">
  <span class="loader-side loader-left"><span class="loader-section"></span></span>
  <span class="loader-side loader-right"><span class="loader-section"></span></span>
</div>

<!-- Becomes -->

<div class="loader is-active"></div>

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:

Top-level or 'site' nav
Second-level or 'sub' nav
Breadcrumbs
(Optional) Third-level nav

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.

Text is too thin all over

@nikolaswise I ban you from using font-weight: 300; on Calcite Web 😄

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 a light option for headers?

Reminder to set font-weight to 400 globally.

This probally means we can drop the 300 weight from the font stack and save some bytes.

//cc @nikolaswise @paulcpederson

No hover states or active states for third nav

@nikolaswise @paulcpederson I just noticed that the third nav pattern has no active states. I'm wondering if this is something we can adapt the "blue bar" pattern from. https://github.com/Esri/patterns-site/issues/18

Need effective display and interaction for platform/device toggle/switcher

We deliver doc for Product A that is available in multiple flavors. The flavors of a product are generally based on platform or device. We generate doc that is specific for each flavor. We currently host that doc in a generic single product 'site' that the user can set/toggle to the flavor of the product they are using.

We'd like the new framework to address our needs for the flavor toggle or switcher while improving on the existing display.

Examples

https://developers.arcgis.com/os-x/objective-c/guide/arcgis-runtime-sdk-for-os-x.htm - toggle for Swift & Objective C

http://server.arcgis.com/en/server/latest/get-started/windows/what-is-arcgis-for-server-.htm - toggle for Windows & Linux

http://server.arcgis.com/en/web-adaptor/latest/install/iis/welcome-to-the-arcgis-web-adaptor-installation-guide.htm - toggle for web server (IIS, Java Win, Java Linux)

In some cases, the number of flavors has reached the limits of the horizontal design pattern we implemented for this element.

http://doc.arcgis.com/en/explorer/ipad/use-maps/guided-tour-user.htm - toggle for device

Existing use cases/patterns

When migrating to Tailcoat, we implemented the toggle display to accommodate 3 use cases for the flavor toggle:

current - This is the flavor of content you are currently viewing.
available - This content is available in xx diff flavor. Click to switch to it.
disabled - The product is available in xx diff flavor; however this specific content is not available in that flavor. This text only only, not clickable.

Here's an example that displays the toggle for current and disabled states - http://server.arcgis.com/en/web-adaptor/latest/install/iis/installing-multiple-arcgis-web-adaptors-server-.htm

And an example that displays the toggle for current and available states - http://server.arcgis.com/en/web-adaptor/latest/install/iis/installing-the-arcgis-web-adaptor-server-.htm

[1.0] Loader Component

We need a loading component that displays while different content gets loaded into the page. The current Tailcoat loader is pure css, which definitely has its advantages.

Typo? Or am I just reading this wrong?

On the page: http://esri.github.io/calcite-web/type/

There is text that reads:
While there is no official Esri brand typeface for long for applications, Calcite Web employs Frutiger for this purpose.

Should this read?:
While there is no official Esri brand typeface for applications, Calcite Web employs Frutiger for this purpose.

I removed the "for long" words.

Alternative to #fff background color, using #F7F8F8

A concept we started with ArcGIS Pro (about 3 yrs ago), was to not use solid white as the background color of the entire application. One of the main goals with this approach was to reduce eye-fatigue caused by solid white when a person is staring at a computer screen.

We introduced within ArcGIS Pro a 3% gray as the background color (more specifically #F7F8F8 / R=248 G=248 B=248 fromhttps://esri.box.com/CalciteColorPalette).

I’ve noticed other companies beginning to do similar things, such as Twitter, by using a background color for the entire web page, it then allows a designer to use a solid white background color to draw emphasis to specific areas of the interface.

Here is a quick proof of concept:

I started to experiment with this, in this example the background color for the is #F7F8F8 and the sections have a solid white background, while minimizing the need for lines/borders: http://clidev.esri.com/team/FrankG/devtopia/calcite-dojo-theme/widgets.html

Bump colors dependency to 1.0.0

1.0.0 of patterns-color is being released. This should be a stable release. We need to bump our dependency and make sure everything still works.

Icons

Create a set of icons to distribute with the framework for common interface elements.

These are the projected icon needs:

Social Media

GitHub
Fork
Google+
Facebook
LinkedIn
Twitter
Stack-Overflow

Actions

Delete
Search
Share
Sign-out
Upload
Download
Edit

Locations

Support
Dashboard
Settings
Marketplace
Applications
Layers
Maps
Usage
User Profile
Documentation

Labels

Experimental
Legacy
Updated
Warning
Help
Announcement

Things

Navigation
Link-external
Link
Tag
Comment
Auth
Browser
Checkmark
Group (of users)
Key
Mail
Mobile
Phone
Pin
Right-arrow
Left-arrow

Body bold too bold?

Fix Avenir Next for Calcite Web site and Patterns sites

Paul is on it!

Top Nav Markup

<!-- Top Nav Pattern -->
<header class="top-nav">
  <div class="container">
    <a href="#" class="top-nav-title">Arc<strong>GIS</stong> for Developers</a>
    <nav class="top-nav-list">
      <a class="top-nav-link" href="/page-1">Plans</a>
      <a class="top-nav-link is-active" href="/page-2">Features</a>
      <a class="top-nav-link" href="/page-3">Documentation</a>
      <a class="top-nav-link" href="/page-4">Support</a>
    </nav>
    <!-- Site Search Pattern Plugs in Here -->
    <!-- Sign in / User Components Plug in Here -->
  </div>
</header>

Use Kepler for secondary face

The branding team thought it would be a good move to use the official brand secondary face as it would make it fit in with all other print, event, and presentation branding.

I've picked a set of three fonts which don't actually weigh that much:

http://www.fonts.com/font/adobe/kepler/regular/web-font
http://www.fonts.com/font/adobe/kepler/italic/web-font
http://www.fonts.com/font/adobe/kepler/semibold/web-font

In total weighs 104kb.

Initialize individual Calcite JavaScript elements

When integrating into frameworks like Ember and Angular it would be useful to have to be able to initialize Calcite JS components on a 1 by 1 basis after an Angular/Ember view updates them. I had to do this at some point with the Search results page and @jeffjax and his team have resorted to hacks like

    App.ProjectAssignmentsView = Ember.View.extend({
        didInsertElement: function() {
            calcite.init();
        }
    });

To get this working.

It would be much better to

    App.ProjectAssignmentsView = Ember.View.extend({
        didInsertElement: function() {
            calcite.dropdown(someDropdownElementInThisView); // could use ID or the root level dom element
        }
    });

Make key nav elements available no matter where you are in the topic

On the doc side we've had multiple requests for some or all of the following elements to be accessible quickly (one click?) from wherever you are within a topic. For example, if you've scrolled way down on a long topic.

Overall TOC
Breadcrumb
In page TOC
Toggle/switcher for flavor (platform/device)
Feedback

Some aspects of this are covered by the sticky breadcrumb but not all.

Fonts.com serving from CDN

Whitelist and make sure it works.

Need to implement nested lists

(http://arcgis.github.io/calcite-web/ is down so not easy for me to determine whether this already covered so logging issue just in case)

For the documentation, we often have nested lists. This is true for bother ordered and unordered lists. For example,

And

It'd be nice to get this into the CSS framework.

[1.0] Layouts Page

Layouts are full example page layouts that consume calcite-web. Layouts we'd like to show are:

Sample Homepage
Mapping Application
Logged In Application
Image Gallery

Side Nav Colors

From @fgarofalo10

.container class conflicts with JS API

The JS API (3.x) uses .container class inside the map for a few things. This conflicts with Calcite Web setting max-width on .container which makes a full screen map impossible.

I think this attribute selector will solve this, but I want to investigate before submitting a PR.

[id$=_root].container, [id$=_container].container {
max-width: 100%;
}

JS API 4.0 namespaces everything so we won't have this problem there.

Search

Tailcoat implemented a basic search pattern like this: http://arcgis.github.io/tailcoat/patterns/#section-4.3

Need to do an Esri-wide audit of search patterns and standardize this as a pattern.

[1.0] Kitchen Sink Page

#56

Every imaginable piece of the framework on one page, including type styles.

Formalize Search Pattern

We need to do a larger audit of search patterns across Esri and then standardize it as a pattern.

Bump Acetate

should use the latest and greatest acetate

[colors] Calcite Web Grayscale vs Calcite Desktop Grayscale

A brief bit of documentation for the current grayscale we're using for Calcite web:

Background

In the Tailcoat Framework, we've been using a set of neutral gray tones developed by Patrick. This is a 11 step grayscale from white to black. Overall, it's been highly successful, with some small issues:

Spectrum crunch across the darkest four tones.
Quick jump from dark-gray to darker-gray

Though it's also had some really strong points:

Semantic naming system
Small set of colors, with broad range.

Sets of Grayscales

In working out the grayscale for Calcite Web, we wanted to incorporate the strengths of the Tailcoat Grayscale, remove the problems, and take our cues from the existing Calcite Desktop grayscale.

Goals

We felt that the Calcite Desktop grayscale and the Calcite Web grayscale are addressing fundamentally different goals; Calcite Desktop needs work for complicated interfaces and sit smoothly with mostly map-based layouts. Calcite Web has mostly deals with large-field layouts and a broader range of visual communication, including small interfaces and long format reading, with map-based layouts being in the minority by a huge margin.

With this in mind we identified some problems with the Calcite Desktop grayscale:

Too many options
Non-semantic (asemic) naming
Long variable names, too bulky for daily use.
Stepped color ramping, flattening out across dark grays and light grays.
Pinkish and greenish hues in the light-gray spectrum

Results

We stuck with the original naming schema of the Tailcoat grayscale, but completely reworked it with an eye for all of above problems that we had with the previous palettes.

Short, semantic color names
Smooth color ramping
Remove un-used dark colors to open up midtones.
Keep all colors at 0° hue, 0 sat.
Provide a minimal set of tones to choose from, ensuring consistency.

$white:                 hsl(0, 0, 100);
$off-white:             hsl(0, 0, 98);
$lightest-gray:         hsl(0, 0, 95);
$lighter-gray:          hsl(0, 0, 90);
$light-gray:            hsl(0, 0, 84);
$gray:                  hsl(0, 0, 78);
$dark-gray:             hsl(0, 0, 64);
$darker-gray:           hsl(0, 0, 49);
$darkest-gray:          hsl(0, 0, 34);
$off-black:             hsl(0, 0, 25);
$black:                 hsl(0, 0, 19);

Web Components for Calcite Web JavaScript patterns

This would be another way to work around #134. By encapsulating all the JavaScript inside Web Components it should make managing Calcite components with Ember/Angular/Anything a breeze. For example.

<calcite-dropdown>
  <calcite-dropdown-option value="data" label="Pick Me!">
</calcite-dropdown>

could be integrated into Angular/Ember like so...

<calcite-dropdown>
  <calcite-dropdown-option value="{{option.value}}" label="{{option.label}}" ng-repeat="option in options">
</calcite-dropdown>

Document simple calcite.js usage

Should top nav show selected state?

I've heard confusion around this from a number of folks when working with Developers and other ArcGIS sites & I'm wondering if others have heard this & whether its something we have/should consider?

In Calcite Web & in Developers (Tailcoat), clicking a top nav item takes you to the page but doesn't show that nav-item in a selected state.

Developers follows this model too with its top nav items. However, interestingly, when you sign in those items do show a selected state.

Here I've selected the Documentation top-nav but no selection state is shown:

Whereas here I've selected the Downloads from my signed in menu & selection is shown.

I realize that the mapping between these 2 is not exact AND that not showing selection gives us the possibility of having pages that don't fit under any of the top-nav categories we've decided on. However, I also think that the selected state more clearly shows users where they are AND where they are not. Is it possible to show a selected state for the majority case where the pages do fit nicely under our top-nav categories? Then if some pages do not fit under one of those categories, that's when we would leave the top-nav in an unselected state.

[1.0] Write Javascript

56

Write the JS for the following components:

Issue during NPM install

Hey guys.

While trying to get Esri Calcit setup locally I ran into an error with the repo for "press". Feel free to let me know if I missed something, but literally only ran "$ npm install" and it came hit me with the error.

[1.0] Browser Test Calcite Web

56

Give everything a pass in:

Windows

Mac

Firefox
Chrome
Safari

Open to public once ready?

Moved from #125 (comment)

I think there's a lot of value in opening up style guides like this (and patterns) to the public (meaning exposing the site, open sourcing the repo, and publishing it in package managers like npm when appropriate).

Reasons:

It gives the project more exposure
shows we're taking these things seriously
puts more eyes on our work to get valuable feedback
contributes to the open source community
makes our company more open with very low risk subject matter
gives a strong example to the community and industry at large

Some examples of other companies and projects doing this:

Would be pretty cool to have patterns & calcite live at esri.com/styleguide or styleguide.arcgis.com or something like that.

With that said, something like this shouldn't be opened up and published until it's ready 😉

IE9 Bugs 😟😦😧😩😫

Aw mannnn

ie9

Loader does not animate
.gif fallback on ie 9.
Sticky does not work
el.dataset not supported. Use getAttr()
Show Hide probably does not work
el.dataset not supported. Use getAttr()
Dropdown does not work
stopPropagation() not stopping. Clicks bubble up to body and fire closeAll. Further clicks on toggle keep binding and binding. This seems to actually happen in Chrome too. Deeper weirdness than first meets the eye.
modal works, but is uncentered.
Fallback to translate 2d for ie9
Carousel does not work
Needs a fallback to 2d transform. For some reason el.style.width is not actually being set. No errors tho.
Drawers fire, do not behave as expected. Do not slide in.
Error due to translate3d. Fallback for transform2d.

[1.0] Condense and re-work documentation for Text Modifier classes

56

warn that this is under active development

There needs to be something at the top of the README explaining this project's state of development and when it's appropriate to use it. If not, Esri employees will see this and start using it in production and we will run into the same issues we did with arcgis-for-developers-css and tailcoat.

Be bolder with bold

I don't see a visual difference between bold and normal text. Normal text is font-weight: 300 and bold is font-weight: 400. Can we maybe increase the difference? Or does the Avenir font only support 400 and 700...?

Example (Chrome on Windows 7) - where "Since:" is (supposedly) bold:

Maybe related to #151...

[1.0] Scroll/Sticky Classes

Discussion about implementation about possible scroll classes.

How to show and hide elements at specific scroll points
How to make an element stick at a certain position

Accessibility built in!

Read this article & wondered if the Esri Patterns & Calcite Web framework are being built in such a way that the patterns work with the different input/output devices? Or is this something that needs to be handled at the individual developer level when they build a site?