Skip to Content
2015.11.25

Calcite Web

See Live Project

A frame­work that ad­dresses com­mon de­sign prob­lems and in­ter­ac­tive el­e­ments for Esri, cre­at­ing a united vi­sual lan­guage and user ex­pe­ri­ence.

Calite Web Homepage

Design System, Development Framework

Esri is a large, in­ter­na­tional tech­nol­ogy com­pany with de­vel­op­ment teams all over the world — from Portland to Glasgow to Zurich to Beijing. Esri’s de­sign team how­ever, is based in the Redlands, California mother-ship. This meant that a lot of the de­sign tools cre­ated for Esri’s web pres­ence were un­evenly dis­trib­uted across the huge num­ber of teams who needed to de­velop web prop­er­ties.

At Esri PDX R&D we had as­sem­bled a strong team of de­signer/​de­vel­op­ers. We sat down to cre­ate a de­sign sys­tem that we could dis­trib­ute to all of Esri’s de­vel­op­ment teams, with the goal of cre­at­ing a uni­fied user ex­pe­ri­ence for all our cus­tomers, and keep­ing all of our prop­er­ties aligned and in sync as we moved for­ward.

Calcite Web Examples

Goals

Building a de­sign li­brary and CSS frame­work can be a com­pli­cated af­fair, made more com­pli­cated by the large au­di­ence of de­vel­op­ers we had to make the pro­ject work for.

Adoption: We had to make the frame­work in­cred­i­bly at­trac­tive to Esri de­vel­op­ers, and in­cred­i­ble easy for them to use. Our main goal was uni­fi­ca­tion, so any bar­ri­ers to adop­tion needed to be re­moved.

Composabillity: To this end, we needed us­ing the frame­work to be as sim­ple is in­clud­ing a CSS file and copy-past­ing code sam­ples.

Modularity: Many of the pro­jects at Esri have rigid, pre­ex­ist­ing code bases and tech­nolo­gies that we needed to in­te­grate smoothly with — we needed to pro­vide a sys­tem that works in what­ever tech stack it finds it­self in.

No Opinions: We wanted the frame­work to pro­vide a full set of in­ter­ac­tive pat­terns — re­quir­ing JavaScript — but also work in any JavaScript frame­work en­vi­ron­ment.

Robust: Certain as­pects of the frame­work — like the grid sys­tem had ma­jor func­tional re­quire­ments. The grid it­self needed to be col­umn based, fully re­spon­sive by de­fault, and work down to IE 8.

Flexible: Developers needed to have ac­cess to a wide range of pat­terns, en­sur­ing that com­mon struc­tures did­n’t get in­de­pen­dently in­vented in dif­fer­ent pro­jects. Designers needed to have the free­dom to cre­ate on-off pages that stood out with­out feel­ing con­stricted.

Calcite Web Patterns

Using Sass

Sass — through the Node Sass pro­ject al­lowed us to meet many of our goals. A ma­jor the­o­ret­i­cal un­der­pin­ning to the frame­work’s .SCSS in­volved mak­ing the speci­ficity graph as flat as pos­si­ble, and de­cou­pling style code from se­lec­tors. This al­lows the de­sign code to be reused and adapted ba­si­cally any­where in any given pro­ject.

@mixin tab-contents() {
  @include box-sizing(border-box);
  border: 1px solid $lighter-gray;
  margin-top: -1px;
}
@if $include-tabs == true {
 .tab-section { @include tab-section(); }
}

The CSS de­vel­op­ment prin­ci­ples are out­lined in an ex­cel­lent ar­ti­cle (and Esri User Conference pre­sen­ta­tion) by Paul Pederson.

JavaScript, or Not

All of our in­ter­ac­tive pat­terns re­quire a .js- pre­fix hook to bind JS events too. This lets pro­jects us­ing Angular or React to write their own com­po­nent code for the in­ter­ac­tions while still get­ting all the canon­i­cal de­sign code for a pat­tern.

Calcite Web Patterns

The JS por­tion of the frame­work uses Publication / Subscription event bus to con­nect user in­tent and com­po­nent be­hav­ior. This al­lows for pro­gram­matic con­trol of the UI, and lets a pat­tern com­mu­ni­cate to the rest of the ap­pli­ca­tion. The JavaScript li­brary is writ­ten as a set of ES6 mod­ules, and is com­piled to an ES5 UMD mod­ule, at­tach­ing it­self to the window on load.

Calcite Web Grayscale

The Brand

Color and Typography do most of the heavy lift­ing when com­mu­ni­cated brand iden­tity on the Web. We de­vel­oped a gray scale, and se­lected a lim­ited set of col­ors from the im­mense set of Esri’s color pal­lete to ex­pose as sim­ple color classes and vari­ables. We up­dated the ty­pog­ra­phy to Avenir NExt by Adrian Frutiger and Akira Kobayashi to give Esri’s clas­sic Avenir print style a boost that it needed for screen dis­play.

Calcite Web Type

Conclusion

The frame­work as been very suc­cess­ful so far — be­ing in­te­grated into new de­signs for esri.com, new sec­tions of ArcGIS Online, and a num­ber of re­lated ArcGIS prop­er­ties.