Calcite Web is a CSS framework built with Sass. A dependency-free JavaScript library for use with interactive patterns like tabs and modals is also included.

Calcite Web is a web adaptation of Calcite, the desktop framework developed for ArcGIS Pro. The idea is to have designs be consistent, but also embrace the characteristics that make each medium unique.

Calcite Web was built for developers. It is meant to be flexible enough that you can accomplish 80% of your website with the default patterns. If you use Calcite Web as a Sass library, you'll also get a set of very helpful mixins to help you make new patterns and components that fit in with the Calcite methodology and aesthetic.

Using Calcite Web

There are three ways to use Calcite Web:

• (a) copying static files into your project
• (b) installing via a package manager
• (c) loading files from a self-hosted cdn

By default, Calcite Web expects image files to be located at ../. If your fonts are elsewhere, set the $font-path variable

Using this framework as a Sass library will give you the most power, but whatever your flavor, we have you covered.

If you are migrating from Tailcoat, checkout the migration guide.

Calcite Web is an open project, that anyone can use to make web apps. However, some of our resources are not. Using Calcite Web on any project that does not live at an Esri or ArcGIS domain will not have access to any of Esri's brand typefaces. You can load a version of the framework without typefaces by using calcite-web-no-fonts.css.

If you're looking to get up and running quickly, just download the latest release and move the zipped files to wherever you keep your assets (CSS, JavaScript, images). Be sure to use the documentation site to copy and paste patterns, components, and even a sample html boilerplate.

To install Calcite-Web as a ruby gem, reference the gem from your Gemfile:

gem "calcite-web", :git => "https://github.com/Esri/calcite-web.git", :tag => "v1.2.5"

This makes Calcite Web available as a Compass extension. To use Calcite Web, make sure you require the gem in your compass config file (usually found at config/compass.rb). An example config file might look like this:

require "calcite-web"

css_dir = "stylesheets"
sass_dir = "sass"

Then in your project's sass files, just import it:

@import "calcite-web";

That will give you everything including Sass utilities. You will also need to copy over the JavaScript and image assets to your static folder (see above).

Calcite Web has a built in library of mixins that cover everything from animation to font-size. To be sure you're building your site in the easiest way (and the most visually consistent way) read up on everything that's available on the Sass Page.

To install Calcite Web with npm, type:

npm install --save-dev Esri/calcite-web#v1.2.5

You must add the current version in order to get the dist/ folder.

Now, in your main .scss file, you can just require the framework:

@import "node_modules/calcite-web/dist/sass/calcite-web";

Calcite Web primarily uses Avenir Next, but also provides a system monospace stack. All font-weights and faces can be set either with helper classes or Sass mixins.

Licensing

Calcite Web provides Esri's fonts automatically as part of the framework. However, if you are a developer outside Esri, you may not have a license to use these fonts. To find out if you can use these fonts, please check 2.2 section C of Esri's master agreement.

Internationalization

Almost every major language is styled for you, automatically. In most latin-based languages, everything can be rendered in Avenir Next. Some languages, however, use characters that aren't included in Avenir Next. For each of these languages, Calcite Web will load a font that maintains a similar look and feel.

Non-latin character sets are pulled in only when needed, so if your application is in English, the browser will only load the files it needs for displaying English. This is accomplished by using the unicode-range property in the @font-face declaration. To learn more about internationalization and to see all of the languages that Calcite Web supports, check out the i18n example page.

Use Behind a Firewall

Fonts in Calcite Web are loaded from the Esri CDN, but if you are working on an Esri product that will be deployed behind a firewall, you can also host the files yourself, locally.

For more instructions on setting up locally-hosted fonts, view the Calcite Fonts project. Note: due to license restrictions these files can only be made available for Esri product teams.

Vertical Rhythm

Vertical rhythm is maintained in the Calcite Web Type System by the use of the $baseline variable. $baseline sets a standard and regular leading in relation to the body copy – 1.5rem. This variable is used for any measurement on the vertical axis in the page, including the leader and trailer grid helper classes and padding for components like buttons which use standard measurements like 3/$baseline and 2/$baseline.

Proportional Scales

Text sizes are defined by a modular scale. The scale is defined by two base sizes for type - body at 1rem and small at 0.95rem - and extrapolates a series of larger type sizes based on a single ratio; 1.25, or a major third interval. All type sizes are set in rems, which have more than acceptable browser support. Rems are used for type sizing and all vertical measurements, defined either by the $baseline variable or the modular scale and font size mixins. This prevents odd sizing issues with nested content, unpredictable results with scaling, and provides a solid anchor for determining sizes.

Avenir Next is a recut of the classic Avenir typeface, by Adrian Frutiger and Akira Kobayashi. It has been reworked for use on the web, and contains more weights, styles, and other improvements. Avenir Next improves on Avenir in web-specific settings.

Applies the the header face, along with a set of smart weight interactions and typographic defaults, to an element.

Avenir Next

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Several modifier classes are provided for quickly selecting different weights of Avenir Next. Weights range from light (default) to bold.

Rather than load a specific font for code blocks, Calcite Web is designed to use a system font. For users that have Consolas installed, it is the preferred face for code blocks. Designed by Microsoft's Lucas DeGroot, Consolas is a clean, readable, and simple monospace face for documenting code blocks.

Consolas

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

// Example JavaScript rendered in Consolas
function $initHighlight (classes) {
  for (var i = 0 / 2; i < classes.length; i++) {
    if (checkCondition(classes[i]) === undefined) {
      console.log('undefined');
    }
  }
}

$initHighlight(["class1", "class1", "class1"]);

Calcite Web provides a set of html class helpers for basic type composition. The goal of these helpers is to provide a set of tools that allows for typographic treatments that differ from the default style set without writing additional css.

Build in classes that allow for quick customization and composition for a wide range of use cases.

Helpers classes apply the font-size($n) mixin to an element. This allows for quick resizing of text elements up and down the modular type size scale.

Sets the font color of the element to any of the Calcite colors available.

Sets the color of links within the element, or the link itself, to available Calcite colors.

Adds the Calcite styles for large numbered lists to an ordered list. Useful for listing steps in a process.

Provides a way to clear the styles for lists. For example, we use this pattern in the footer to clear the typical list styles for a clean, left aligned appearance.

All default text elements are styled to facilitate smooth reading, simple flow, and appropriate proportions. This is a default paragraph. This is a default link. Below is a sample of default type elements.

Header One

Header Two

Header Three

Header Four

Header Five

Header Six

0. List One that is really long and will break to the next line, demonstrating that the left edges of the text are aligned.
1. List Two
2. List Three

• List Item that is really long and will break to the next line, demonstrating that the left edges of the text are aligned.
  • sub list item
  • sub list item
• List Item
• List Item

Lorem Ipsum Blockquote

Lorem ipsum paragraph with strong, bold text and emphasis, italic text.

Guildenstern

I don't believe in it anyway.

Rosencrantz

What?

Guildenstern

England.

Rosencrantz

Just a conspiracy of cartographers, then?

The Calcite Grid System includes a full, responsive, and configurable grid with columns, a container, and a 'Block Group' grid. The main grid is different from standard CSS grid systems in two key ways:

1. Column widths are defined by the viewport size rather than percentage of their containers.
2. Built-in smart defaults for responsive sizing puts less columns across the screen at smaller sizes, rather than smaller columns.

These two principles mean that a column becomes a standard unit of measurement, creating a constant and abstracted grid system that stands behind the content of a page rather than within it.

The Grid

If you are using Calcite Web as a Sass library, you can customize the grid with Sass variables. Below are the different settings you have access to and their default values:

You can override these values to create a custom, project-specific grid in your own project. For example, to use a 16 column grid instead of the default 24 columns, you would set the $default-column-count variable before importing the library:

$default-column-count: 16;
@import calcite-web;

The .grid-container class is required to contain the grid. Using the column classes without them being nested in a containing div will cause unexpected results.

The container class applies a max width to the content it contains and handles the column relationship with the viewport window, preventing collisions with scroll bars or other exciting bugs.

<div class="grid-container">
	<div class="column-24">
		<blockquote>Contain the Columns</blockquote>
	</div>
</div>

A column is a constant unit of measurement. The width of a column is dynamic, but always between a fixed range. Columns will never get too large or too small. As the viewport gets smaller the Calcite Grid System will simply put less columns on the page.

By default, large screens hold 24 columns, medium tablet-sized screens hold 12, and phone-sized screens hold 6. The grid will fold columns at these breakpoints. That means an element that is 3 columns wide will always be 3 columns wide, no matter how big or small the screen.

On large screens, 3 columns out of 24 is proportionally a small piece of screen real estate. On Phones, the Grid will leave the element at 3 columns wide -- proportionally more real estate, as 3/6 columns is more significant than 3/24.

To center a single column inside a grid container, you can use the helper class center-column.

<div class="column-17">
  <span>column-17</span>
  <div class="column-8">
    <span>column-8</span>
  </div>
  <div class="column-9 tablet-first-column">
    <span>column-9</span>
  </div>
</div>

View the full example

The width of elements can be explicitly defined for breakpoints where columns would normally fold by default. This can be done with the phone-column-n and tablet-column-n classes. For example, .column-12 would default to the full 12/12 column width at a tablet size. Adding to the same element .tablet-column-6 would prevent the default behavior, and at a tablet viewport, the element would be 6/12 columns.

<div class="column-8 tablet-column-2 phone-column-3">
  <span class="tablet-hide">column-8</span>
  <span class="tablet-only">tablet-column-2</span>
  <span class="phone-show">phone-column-3</span>
</div>

View the full example

Contrary to other flexible-width grid systems, Calcite Grid columns do not change behavior when nested. Because a column is a constant measurement relative to the size of the viewport, nested columns still span the same width as their non-nested counterparts. An element with .column-6 nested within an element with .column-12 is the same size as an un-nested .column-6. Further, clearing of the column-gutter is automatically done for you with :first-child and :last-child psuedo-selectors on all column classes.

Column-folding behavior is almost entirely automatic. The only exception is gutter clearing behaviors on deeply nested items after column folding occurs - in some situations we can not know what columns are now first or last in their rows. This will cause the column to be inset from the edge of the container. The example below solves this by introducing first-column classes, along with tablet-first-column and phone-first-column.

<div class="column-8">
  <span>column-8</span>
  <div class="column-4">
    <span>column-4</span>
  </div>
  <div class="column-4">
    <span>column-4</span>
  </div>
</div>

View the example

Because columns can now be nested without changing their behavior, we don't need rows, really. However, you still may find that a tall, narrow column with a short wide neighbor can cause float issues with subsequent columns.

With this grid you can wrap the first two columns in a 24 column grid, which will act in the same manner as a row.

View the example

Block groups are designed for quickly creating gridded content, such as a tile pattern or image gallery. Block groups are percentage based, so they can subdivide columns. Block groups have the ability to break the regular grid system, and thus should be used sparingly and with thought.

<div class="block-group block-group-3-up">
  <div class="block"><div class="panel">Block</div></div>
  <div class="block"><div class="panel">Block</div></div>
  <div class="block"><div class="panel">Block</div></div>
</div>

View the example

Block groups have responsive tablet- and phone- prefix classes. These allow the flow of content across repeating rows of content to be easily tweaked across viewport widths in scenarios where the default column resizing or responsive column classes would be too verbose or cumbersome.

<div class="block-group block-group-4-up tablet-block-group-2-up phone-block-group-1-up">
  <div class="block trailer-half">
    <div class="panel">Block</div>
  </div>
  <div class="block trailer-half">
    <div class="panel">Block</div>
  </div>
  <div class="block trailer-half">
    <div class="panel">Block</div>
  </div>
  <div class="block trailer-half">
    <div class="panel">Block</div>
  </div>
</div>

View the example

Calcite Web includes a large set of helper classes to quickly layout a page. In addition to classes directly related to the grid like column-X, pre-X and post-X there are also classes which help space things vertically (leader-X, trailer-X, padding-leader-X, padding-trailer-X) and horizontally (gutter-left-X, gutter-right-X).

Certain other CSS properties that are commonly needed are available as well such as show, hide, left, right, and sticky classes.

Almost all of the helper classes are available with responsive prefixes as well. For example, phone-leader-1 will set one line of space above the element on the mobile size only.

Pre and Post classes are used to move your columns laterally across the grid by defining how many columns they should be from their neighbors on either side.

Pre and Post classes do not responsively fold. This prevents a pre-5 from pushing content off the edge of the screen on phone sizes. Responsive tablet- and phone- classes are exposed for defining pre and post behavior on breakpoints.

Pre and post helpers are available from .pre-1 and .post-1 to .pre-24 and .post-24.

<div class="column-8 pre-2">
  <span>column-8 pre-2</span>
</div>

View the example

The leader and trailer classes are designed for quick vertical adjustments with markup. The standard leader-n and trailer-n classes add top and bottom margin to the element, as multiples of the $baseline variable, or 1.5rem.

The padding- prefix adds lines of padding instead of margin, and both classes can be used in conjunction.

Calcite Web provides a $vertical-range variable that sets the maximum value of n for the leader-n and trailer-n classes at 6.

Leader and trailer classes also have additional responsive tablet- and phone- prefix classes. These allow you to add different amounts of space above and below an element at different screen sizes.

For example, if you wanted an element to have 3 lines of margin above it on desktop, but that was too much on a phone, you could use responsive classes to specify that:

<div class="leader-3 phone-leader-1"></div>

These also apply to padding-leader and padding-trailer

These helper classes add margin or padding the the left or right of an element. For example, <div class="padding-left-3"> will receive three units of padding on its left side.

Responsive tablet- and phone- classes are exposed for defining gutter and gutter behavior on breakpoints.

The first and last classes are used for aligning grid columns when the Grid System is unable to determine which columns are first or last in their rows. This will cause the column to be inset from the edge of the container. The example below solves this by introducing first-column and last-column classes, along with tablet-first-column, phone-first-column, tablet-last-column, and phone-last-column.

These convenience classes are meant to help with quick responsive layout. Below are the classes and what breakpoints they are visible on:

Show Helpers

Essentially, the show classes will show that breakpoint and the breakpoint below it. So if you'd like something to be visible only on a phone, you would use phone-show. If you used tablet-show, the element would be visible on tablet and phone.

Hide Helpers

Hide helpers are very similar to show helpers. A responsive hide class will hide that breakpoint and the breakpoint below it. So if you wanted something to be visible on only desktop, you could use tablet-hide, hiding the element on tablet and phone. Or if you wanted something to be hidden only on a phone, phone-hide would hide it on the phone only.

Visual Hiding Helpers

Sometimes it is desirable for accessibility reasons to hide something visually but leave it accessible to screenreaders. You can use the visually-hidden class to achive this. If you want your hidden element to remain focusable by the keyboard add visually-hidden-focusable in addition to visually-hidden.

Use a class of right on html elements to float elements to the right. Use a class of left on html elements to float elements to the left.

Left and right classes also have additional responsive tablet- and phone- prefix classes. These allow you to float an element right on a large screen, but float it left when the screen is smaller.

For example, if you wanted an element to float right on desktop, but left on a phone, you could use responsive right and left classes to specify that:

<div class="right phone-left"></div>

The modifier class inline-block will add display: inline-block to an element.

JavaScript dependent helper classes that surface simple class-based hooks for common interactive layout patterns.

Some layouts call for elements to appear or disappear as the user scrolls down the page. An element with the scroll-show class will appear when it reaches a point specified by the data-top=x attribute, appearing when it comes within the given value of the top of the screen.

Elements that become position fixed as they reach a certain position in the viewport are refered to as 'sticky'. The js-sticky class takes an data-top=x attribute that defines the point from the top of the window the sticky element will stick.

For example, the following <div> will become fixed when it is 46 pixels from the top of the viewport:

<div class="js-sticky" data-top="46">
  <a href="#" class="btn btn-clear">Back to Top</a>
</div>

Calcite Web comes with two separate icon sets. One is social icons which include a particular presentational style. The other is the Calcite Web interface icon set.

Calcite Web's interface icon set is available both as an icon font and as inline SVG files.

If you're using the icon font, just add the class icon-ui-{name} to an element. If you're using inline SVG, just copy and paste the SVG code into your project.

Icons have padding built into them so they can sit alongside text, to remove this padding, use the icon-ui-flush class.

If you've added your icons as inline <svg> elements, you can add the following classes to change the fill color of the svg.

If you've included icons in your project with the icon font, a set of helper classes are available to simply change the color of an icon without affecting text within the same element.

A set of social icons are provided as part of calcite-web. Just use the icon-social-X class on an element. It is suggested you add an aria-label to help the visually impaired understand what the element with the icon represents as they won't be able to see the Facebook logo, for example:

<span class="icon-social-facebook" aria-label="Facebook"></span>

Below are the current social icons. More sizes are planned. For now only 30x30 pixel square icons are available.

An extensive set of color variables are set up inside of config. Color names are generally semantic and simple, making them very easy to remember. Color variables are references like any other Sass variable:

.element-to-style{
  color: $gray;
}

There is also a dark theme which you can import using:

@import "calcite-web-dark";

Calcite Web mostly deals with large-field layouts and a broader range of visual communication, including small interfaces and long format reading. With this in mind, Calcite Web's grayscale differs from that of Calcite Desktop.

Calcite web provides a short list of simple color variables, while supporting the complete set of official calcite colors.

Calcite web exposes a set of Sass variables for the UI palette. Each color has three values: light, regular, and dark. The complete set of calcite colors is also supported. .

Three basic colors are set for color in typography. It's not recommended to change these values, but they are provided for your reference.

$type-color: $off-black;
$link-color: $blue;
$link-hover: $light-blue;

In writing Sass it's often easier to remember $type-color is the color of type than it is to remember the specific grayscale value that is the default for type.

Components are reusable blocks that can be used across any part of a Calcite site. They can be used within patterns or on their own.

Buttons are created by adding a class of btn to either a <button> or <a> element. btn-{color} classes can be mixed with btn-{style} classes.

<a href="#" class="btn"> Button </a>
<button class="btn">  Button </button>
<button class="btn btn-red btn-arrow">  Red Button with Arrow </button>

Button Links

Sometimes, the proper semantic element is a button, but you would rather the element look more like a link. In these instances, Calcite Web provides an alternate class btn-link which styles a button element as if it were a simple anchor:

This is a button

<button class="btn-link">This is a button</button>

Button groups are ... groups of buttons. The button group allows for sets of buttons to be directly adjacent to each other without borders or margins interfering.

Labels are a way to call attention to a word. The mark element, a notification count, or an important indicator (like marking a technology as 'beta' or 'private') are all use cases for labels.

Labels should be limited to one or two words and should only be used in situations where the content in the label is quite important. Labels are sized in em units, so they will scale up with whatever element they are inside.

Dropdowns rely on the calcite-web.js JavaScript library for their functionality. See the JavaScript Documentation for more information.

Dropdowns are good for showing multiple options under a single call to action. For example, if you had a download button, and you needed the user to choose a format for the download, you could put several choices in a dropdown.

Dropdowns differ from select elements in that they don't have a default state or a 'current' state. Instead, they offer a jumping off point for a series of related actions.

Note: Be sure to give the elements inside your dropdown the role of menuitem to ensure they're accessible to screen readers.

The loader element is a placeholder while content is being retrieved or rendered. By default, the loader is set to display: none; and requires an is-active class to display.

Alerts are used to inform users of state changes, errors, or successful actions. Alerts are only visible if they have the is-active class. Without as is-active class, the alert will be set to display: none;

Calcite does not manage alert classes by default - you will have to write your own JavaScript handlers for this.

Panels are useful to draw attention or contain certain text on a page. They are simple containers, which can be used to help guide users through the visual hierarchy of your design.

Note: be sure to use the link modifier classes to style links within a panel so that they pass WCAG 2.0 accessibility color contrast. For standard light-gray panels, use link-dark-blue.

Cards are like panels, but a little more structured. They can have titles, buttons, and full bleed images. Use cards when panels are too simple.

If you don't have an image, use the .card-bar-blue (or another color) to add some graphic punch.

For list views, cards can also be used in landscape orientation. The full bleed image will crop itself to fill the available space.

Breadcrumbs are a set of links or spans inside of a <nav> element. The crumb class will take care of spacing, alignment, and icons. Normal text and link helpers can be applied to breadcrumbs to allow for a range of contexts.

Tooltips use an aria-label attribute to provide contextual help on hover. Tooltips can apply to any element.

Tables have not been styled by default. To style your tables, you must add the table class. If you'd like to style <table> elements without a class, you can set the $namespace-tables Sass variable to false. For more information on setting Sass variables see the custom build documentation.

By default, a large table will break your layout horizontally. You can solve this problem by wrapping a table in a <div> with the .overflow-auto helper class:

<div class="overflow-auto">
  <table class="table">...</table>
</div>

Tables that are too wide for the layout will be constrained and scroll horizontally. This is especially helpful for responsive designs which scale down to be smaller than the table's minimum width.

Used at the beginning of a page to allow keyboard and screen reader navigation to the primary content of the page without navigation through all the links that precede the content.

Creating a number of file sizes for bitmap assets can be very useful for reducing load times on small screens - especially phones and tablets. While this image markup is not enforced or unique to Calcite Web (there is no code in the framework that enables this), the following examples should be used as a standard when implementing responsive images.

A full range of images widths are listed below.

${title}.jpg
${title}-1920-xlg.jpg
${title}-960-lg.jpg
${title}-640-bmd.jpg
${title}-480-md.jpg
${title}-320-smd.jpg
${title}-240-sm.jpg
${title}-160-xsm.jpg

Labels for form elements should describe what the field is. Labels should not be followed by a colon. Placeholder text should describe the specifics about formatting or examples for the input text. Placeholder text is optional, and should never be used to replace a label.

Required form fields should be have the required attribute. While optional form fields should be clearly marked with "(optional)".

Try not to include too many optional fields, as it will make the form harder to comprehend and complete for the user.

Basic classes are also provided to style form fields after validation. In order to show that a field passes or fails your validation rules, you can use the input-success and input-error classes on the form field.

In the case of form errors we recommend you also use the input-error-message in order to explain to the user what went wrong. input-error-message is hidden by default, so you must add the is-active class to it for it to show.

Text inputs should be placed inside a label element. See the form validation for a more complete input-error example.

It is very common to have an input and a button attached to one another. The input-group component allows you to accomplish this with three classes.

Selects can be made full-width by using the select-full class. Styles for multiple selects are also provided.

This is a simple range slider input component to provide consistent cross-browser styles. In the future we hope to add more functionality via opt-in js classes.

In addition to inline display, we also provide support for both left- and right- aligned copy through use of Calcite helper classes. We provide a warning style for destructive actions, such as deleting items or accounts. Enabling RTL will swap the orientation of the handle within the track as well as the layout of the label and switch.

Checkboxes are aligned properly and given a focus state consistent with other form elements. Other than that they are left as is.

Much like checkboxes, radio buttons are largely left alone except for alterations in spacing and focus state.

The radio group component provides an additional style with more visual prominence than a plain select or radio.

It is structured as a typical radio input for accessibility.

Animation helper classes are used to provide character, visual richness, and tactile feedback for the user. Adding an .animate- class to any DOM node will animate that node. Using JavaScript to add .animate-fade-in to a DOM node when it enters the viewport will cause that node to fade in.

Replay Animations

A minimum buffer zone of clear space is maintained around the logo. Display of the logo should not be less than 78 x 28 pixels. This minimun size and buffer is part of the component, designed to be as simple to use as possible.

Use of the reverse logo should only be on top of dark backgrounds. Neither logo should be used on top of images, or altered in any way.

Patterns are specific UI schemes that use a collection of components and pattern-specific css to solve a common design problem. Patterns can either stand alone entirely as markup, or be dependent on JavaScript to accomplish certain behaviors.

To use a pattern, follow the structures defined in the sample code.

Top navigation is the primary, header level navigation for a web site. It contains the root level pages, user logins, and the site title. The main navigation should be hidden on screen sizes smaller than the size of the navigation. This navigation should be moved to an off-screen drawer on the left hand side. Notice the separate div elements with tablet-hide and tablet-show classes in the sample below.

Designed to be combined with the top navigation pattern on sites where a logged in portion is accessible. Once a use is logged in, it should be replaced with the user navigation pattern.

Designed to be combined with the user sign in pattern pattern on sites where a logged in portion is accessible.

The user navigation element is just a dropdown with a few special styles.

The 'Sub-Nav' provides a second level of hierarchy to a site. While the top-nav includes the top-most level of navigation, the sub-nav includes navigation for sections nested inside that. The subnav has a tabbed navigation pattern, a title, and room for a call to action.

You can also turn the sub-nav into a more graphically-driven banner by adding padding-leader and padding-trailer classes to the title, thereby increasing the vertical size of the sub-nav.

When a sub nav has more than two or three items in it, it may need to collapse down into a smaller space on smaller screen sizes. The following pattern will work within an app, with tablet-show or phone-show used as needed.

A Hero is an implementation of the Sub Nav pattern that allows for a big, splashy image and headline. A Hero can be accomplished entirely with markup, as below.

Tertiary navigation is necessary only when the information architecture of the site requires three levels of hierarchy within pages. A breadcrumb component can also be used in this pattern.

Sidebar can be used either for in-page navigation — like on this page — or for lists of articles under a given topic.

Standard footer for ArcGIS and Esri properties. The footer in Calcite Web is 'sticky' by default. This means that if the page doesn't have sufficient height, the footer will still hug the bottom of the screen. For this to work properly, you must use a div with a class of wrapper. See the basic HTML page for an example.

<footer class="footer leader-3">
  <div class="grid-container">
    <nav class="column-8">
      <h6 class="font-size-5"><strong>esri</strong></h6>
      <ul class="list-plain font-size--2">
        <li><strong>Talk With Us</strong></li>
        <li><a class="link-off-black" href="#">Contact Sales</a></li>
        <li><a class="link-off-black" href="#">Contact Support</a></li>
      </ul>
      <p class="leader-1 font-size--2"><strong>Follow Us</strong></span></p>
      <section class="footer-social-nav">
        <a class="icon-social-twitter" href="https://twitter.com/Esri/"></a>
        <a class="icon-social-facebook" href="https://www.facebook.com/esrigis/"></a>
        <a class="icon-social-youtube" href="https://www.youtube.com/esrigis/"></a>
        <a class="icon-social-github" href="http://esri.github.com/"></a>
        <a class="icon-social-linkedin" href="https://www.linkedin.com/company/5311"></a>
        <a class="icon-social-contact" href="http://www.esri.com/about-esri/contact/"></a>
      </section>
    </nav>

    <nav class="column-4 leader-1">
      <h6 class="font-size--2"><strong>Arc<span>GIS</span></strong></h6>
      <ul class="list-plain font-size--2">
        <li><a class="link-off-black" href="#">About ArcGIS</a></li>
        <li><a class="link-off-black" href="#">ArcGIS Desktop</a></li>
        <li><a class="link-off-black" href="#">ArcGIS Server</a></li>
        <li><a class="link-off-black" href="#">ArcGIS Online</a></li>
        <li><a class="link-off-black" href="#">Apps</a></li>
        <li><a class="link-off-black" href="#">How to Buy</a></li>
      </ul>
    </nav>
    <nav class="column-4 leader-1">
      <h6 class="font-size--2"><strong>Community</strong></h6>
      <ul class="list-plain font-size--2">
        <li><a class="link-off-black" href="#">Esri Community</a></li>
        <li><a class="link-off-black" href="#">Events</a></li>
        <li><a class="link-off-black" href="#">Education</a></li>
        <li><a class="link-off-black" href="#">Early Adopters</a></li>
        <li><a class="link-off-black" href="#">Developers</a></li>
      </ul>
    </nav>
    <nav class="column-4 leader-1">
      <h6 class="font-size--2"><strong>Understanding GIS</strong></h6>
      <ul class="list-plain font-size--2">
        <li><a class="link-off-black" href="#">What is GIS</a></li>
        <li><a class="link-off-black" href="#">Training</a></li>
        <li><a class="link-off-black" href="#">Events</a></li>
        <li><a class="link-off-black" href="#">Insights</a></li>
        <li><a class="link-off-black" href="#">Esri Press</a></li>
      </ul>
    </nav>
    <nav class="column-4 leader-1">
      <h6 class="font-size--2"><strong>Company</strong></h6>
      <ul class="list-plain font-size--2">
        <li><a class="link-off-black" href="#">About Esri</a></li>
        <li><a class="link-off-black" href="#">Contact Us</a></li>
        <li><a class="link-off-black" href="#">Careers</a></li>
        <li><a class="link-off-black" href="#">Worldwide Distributors</a></li>
        <li><a class="link-off-black" href="#">Partners</a></li>
        <li><a class="link-off-black" href="#">Disaster Response Program</a></li>
      </ul>
    </nav>

    <div class="column-24">
      <hr>
      <div class="column-8">
        <p>United States (English) <span class="icon-ui-globe"></span></p>
      </div>
      <div class="column-16 font-size--2">
        <a class="link-off-black margin-right-4" href="#">Privacy</a>
        <a class="link-off-black margin-right-4" href="#">Legal</a>
        <a class="link-off-black margin-right-4" href="#">Site Map</a>
        <a class="link-off-black margin-right-4" href="#">Terms and Conditions</a>
      </div>
    </div>
  </div>
</footer>

Use the pagination pattern to navigate between pages of displayed content, either in a gallery or a search result view.

Interactive patterns rely on calcite-web.js to work properly. You must add a reference to calcite-web.js. After that, you should startup all the interactive patterns on load with calcite.init().

For more on using calcite-web.js you can view the JavaScript Documentation.

Modals are meant to "take over" the screen and focus users attention on a dialog which presents the user with an opportunity to add, modify or create content. A modal should always be centered both vertically and horizontally within the browser window. When a modal is opened, the interface darkens and disables all other user interface elements in order to force a user to take an action required by their workflow. Two modals can't be open at once.

To create a link or button that opens a modal, you must add a js-modal-toggle class to the element, along with a data-modal attribute specifying the name of the modal that should open. The modal should also get a data-modal attribute with the same name.

Elements with the js-modal-toggle that are inside a modal don't need the data-modal attribute as they will just close the modal they are in.

The framework includes a quick set of styles for a tabbed interface pattern. The full tab container will expand to fit its parent.

As an added bonus, this component supports intelligently restricting the width of tabs if they get too long and numerous.

tabs-gray can be used to display code samples. Just wrap code blocks in <pre> and <code> tags inside the element with .tab-section class.

The js-accordion class provides the JavaScript binding for the accordion pattern, which handles which pane of the accordion is active via the is-active class.

Note: Accordions have recently moved to using inline svg icons. If you're still using the icon font, simply set $include-svg-icon to false and omit the accordion-icon element.

The off-canvas "drawer" pattern is used primarily for top-level mobile navigation.

Open Left Drawer

Open Right Drawer

 <body>
  <!-- Drawer -->
  <div class="drawer drawer-left js-drawer is-active" data-drawer="top-nav" tabindex="0">
    <nav class="drawer-nav" role="navigation">
      <aside class="side-nav">
        <h2 class="side-nav-title">Calcite Web</h2>
        <a href="/" class="side-nav-link">Get Started</a>
        <a href="/" class="side-nav-link">Type</a>
        <a href="/" class="side-nav-link">Grid</a>
        <a href="/" class="side-nav-link">Icons</a>
        <a href="/" class="side-nav-link">Color</a>
        <a href="/" class="side-nav-link">Components</a>
        <a href="/" class="side-nav-link">Patterns</a>
        <a href="/" class="side-nav-link">Sass</a>
        <a href="/" class="side-nav-link">JavaScript</a>
        <a href="/" class="side-nav-link">Layouts</a>
      </aside>
    </nav>
  </div>

  <!-- Main Content Wrapper -->
  <div class="wrapper">
    <!-- ...all site content goes here... -->
  </div>
 </body>

The search pattern is a a UI for site-wide searches. The most regular use of the pattern is in the Top Navigation pattern.

The filter dropdown is a component used to select any number of items from a list of any number of options. It's used to locate specific items quickly even if that item is buried in a huge pile of other things.

The primary use cases for the filter dropdown are selecting tags from a tag cloud, or a group from a list of all a user's groups.

If the relationship being established is many-to-many, use the filter dropdown component.

Calcite Web has a helpful set of mixins for composing type. We recommend you use these mixins wherever possible when writing your own components as it will keep the visual proportions and styles in line with the rest of the framework.

By default, using the Calcite Web sass files will build css for the complete framework. This build can be customized, or entirely turned off for sass-only applications.

Setting the $generate-css variable to false in your sass files will prevent any css from being generated, while exposing all the underlying sass styles of the framework. Setting specific variables like $include-alerts to false will preclude only that components css from being built.

Additionally, font imports are controlled this way. By default, Calcite Web requests Avenir Next from a cdn. You can import calcite-web-no-fonts.scss if you don't want the fonts.

// Sass Output
$include-colors:                 true    !default;
$generate-css:                   true    !default;

// Language Helpers
$include-right-to-left:          $generate-css    !default;

// Grid Output
$include-reset:                  $generate-css    !default;
$include-utils:                  $generate-css    !default;

$include-grid:                   $generate-css    !default;
  $fold-grid:                    $generate-css    !default;
  $block-grid:                   $generate-css    !default;

// Grid Utilities Output
$include-leader-trailer:         $generate-css    !default;
$include-gutter:                 $generate-css    !default;
$include-left-right:             $generate-css    !default;
$include-show-hide:              $generate-css    !default;
$include-sticky:                 $generate-css    !default;

// Type Output
$include-type:                   $generate-css    !default;
  $include-primary-family:       true             !default;
  $include-code-family:          $generate-css    !default;
  $include-i18n:                 $generate-css    !default;
  $include-type-defaults:        $generate-css    !default;
  $include-type-helpers:         $generate-css    !default;

// Icons
$include-icons:                  $generate-css    !default;
  $include-calcite-icons:        $generate-css    !default;
  $include-social-icons:         $generate-css    !default;
  $include-icon-font:            $generate-css    !default;

// Components
$include-alerts:                 $generate-css    !default;
$include-badges:                 $generate-css    !default;
$include-labels:                 $generate-css    !default;
$include-tables:                 $generate-css    !default;
$include-panel:                  $generate-css    !default;
$include-button:                 $generate-css    !default;
$include-dropdowns:              $generate-css    !default;
$include-breadcrumbs:            $generate-css    !default;
$include-tooltip:                $generate-css    !default;
$include-forms:                  $generate-css    !default;
$include-input-groups:           $generate-css    !default;
$include-loader:                 $generate-css    !default;
$include-skip-to-content:        $generate-css    !default;
$include-logo:                   $generate-css    !default;
$include-card:                   $generate-css    !default;
$include-animation:              $generate-css    !default;

// Patterns
$include-footer:                 $generate-css    !default;
$include-sticky-footer:          $generate-css    !default;
$include-pagination:             $generate-css    !default;
$include-side-nav:               $generate-css    !default;
$include-sub-nav:                $generate-css    !default;
$include-third-nav:              $generate-css    !default;
$include-top-nav:                $generate-css    !default;
$include-user-nav:               $generate-css    !default;
$include-app-switcher:           $generate-css    !default;

// Javascript
$include-tabs:                   $generate-css    !default;
$include-modal:                  $generate-css    !default;
$include-accordion:              $generate-css    !default;
$include-drawers:                $generate-css    !default;
$include-sticky:                 $generate-css    !default;
$include-filter-dropdown:        $generate-css    !default;

// custom-build.scss
$generate-css: false;
$include-type: true;
$include-grid: true;
$fold-grid:  true;
$block-grid: true;
$include-leader-trailer: true;
$include-gutter: true;
$include-left-right: true;
$include-show-hide: true;
$include-sticky: true;

@import 'calcite-web'

The above sass will import the framework, import the type styles, and build css that provides access to the type helpers and grid system. Notice that the variable declarations are before the import.

Calcite Web comes with several variables. These variables represent project-standard configurations of different aspects. For example, $baseline can be used in your Sass to set a property to the default typographic baseline of Calcite Web.

These variables can also be configured in your own project to change the library for project-specific applications.

Below are all of the variables and a brief description of what they represent.

Calcite Web comes with several variables representing the default screen sizes.

// Breakpoints
$small:  480px  !default;
$medium: 860px  !default;
$large:  1280px !default;

In static classes, these breakpoints are often expressed as phone-, tablet-, desktop-.

Controls specific aspects and behaviors across the UI.

$transition: 150ms linear;
$box-shadow: 0 0 16px 0 rgba(0,0,0,0.05) !default;
$drawer-width: 280px !default;
$easing-function: cubic-bezier(0.215, 0.440, 0.420, 0.880) !default;
$namespace-tables: true !default;

$transition is a speed and easing function used throughout the framework for motion effects.

$box-shadow ensures consistent box shadow effects for adding depths to elements.

$drawer-width controls the width of the hidden left and right drawers.

$easing-function is a default timing function used by moving elements like modals. If you'd like to change how modals move in, you can tweak this variable (or use a browser-supplied funciton like linear)

$namespace-tables scopes <table> styles to the .table class. To mimic the behavior of previous versions (where we automatically style raw table elements), set this to false.

Calcite Web has a helpful set of mixins for composing type. We recommend you use these mixins wherever possible when writing your own components as it will keep the visual proportions and styles in line with the rest of the framework.

You can set the font family and weight via the following Sass mixins:

@include avenir-light();   // font-weight: 300
@include avenir-regular(); // font-weight: 400
@include avenir-italic();  // font-style: italic
@include avenir-bold();    // font-weight: 700
@include code-face();      // font-family: $code-family

When changing between styles of Avenir Next, you can also simply set the font-weight and font-style properties in CSS and the correct font will also be rendered. The corresponding CSS property values have been noted as comments in the list above.

The Calcite Web type system uses a modular typographic scale to ensure a consistent tonal range within all text elements. This modular scale is created from the body size of the type, and a second, smaller size. These two type sizes anchor the scale, and using a precise ratio can be expanded to an entire set of sizes for all typographic needs.

The font-size($n) mixin takes an integer, positive or negative, and sets all type within the element to the size defined by traversing that number of steps up or down the typographic scale.

'0' represents the normal text size while '-1' is a type size smaller, and '1' is a type size larger. So if you'd like to have a very large pull-quote or something of that nature, you could use @include font-size(6). This means that the text you've styled will be six steps up the typographic scale from the normal body size.

The font-size($n) mixin relies on the modular-scale($n) mixin to define the scale, and apply it to typographic elements.

The text-right and text-left mixins are useful to set text alignment. These mixins will automatically reverse in right to left languages.

@include text-right();
@include text-left();

The modular-scale($n) behaves the same as the font-size($n) mixin, but returns a raw rem value rather than css styles specific to type elements. This means that the modular-scale($n) mixin can be used to define heights, widths, padding, margins, or any other property of an element so that it adheres to the modular scale defined by the typography. Setting the max width of an article to a large multiple of the text size is a way to define a comfortable reading measure related to the proportional decisions of the content.

Tracking is the space between letters in a word. The tracking($n) mixin accepts an integer, and applies letterspacing to the element as fractions of 1/1000 of an em. @include tracking(500) will apply 1/2 em letterspacing. @include tracking(166) will apply a hairline em letterspacing.

Leading is the space between lines in a text block. The leading($n) mixin accepts an integer, and sets the line height of the element to the integer times the standard baseline unit.

Word spacing is - well - the space between words. The word-spacing($n) mixin accepts an integer, and applies letterspacing to the element as fractions of 1/1000 of an em. If you're familiar with word-spacing in design programs like Adobe InDesign, the word-spacing mixin will immidiately feel fairly natural.

While you can pass any integer to the mixin, below is a list of values you can pass to the word-spacing mixin to achieve well known typographic defaults:

Calcite web has several mixins to help add space to your designs. Read on to learn how you can use mixins apply margin and padding to each side of an element.

To add space above and below content, you can use the leader and trailer mixins. These mixins utilize the $baseline unit, and will scale with your base type size and baseline.

@include leader(3);         // add three units of margin above element
@include leader-half();
@include leader-quarter();
@include trailer(2);        // add two units of margin below element
@include trailer-half();
@include trailer-quarter();

If you'd prefer this space be added using padding instead of margin, use the padding-leader mixins:

// pass the amount of space you'd like to the mixin:
@include padding-leader(2);
@include padding-trailer(6);

// for smaller amounts, use the following with no argument passed in
@include padding-leader-half();
@include padding-leader-quarter();
@include padding-trailer-half();
@include padding-trailer-quarter();

To add space on either the right or left side, use the gutter mixins:

// add space in increments of 1 $baseline
@include gutter-left($n);
@include margin-gutter-left($n);
@include gutter-right($n);
@include margin-gutter-right($n);

// common fractional gutters (call without arguments)
@include gutter-left-quarter();
@include margin-gutter-left-quarter();
@include gutter-right-quarter();
@include margin-gutter-right-quarter();
@include gutter-left-third();
@include margin-gutter-left-third();
@include gutter-right-third();
@include margin-gutter-right-third();
@include gutter-left-half();
@include margin-gutter-left-half();
@include gutter-right-half();
@include margin-gutter-right-half();

Utility mixins are used to construct complicated behaviors for components and patterns, provide baseline functionality for doc elements, and take care of browser prefixing.

Most utility mixins are borrowed from Bourbon. If mixins share a name, then they share the same code base.

Use the utility mixins inside the selector you wish to apply the styles to, passing the arguments in if required. For example, to apply a clearfix to an element with the class .my-div, the use the following Sass:

.my-div {
  @include clearfix();
}

If the mixin accepts arguments, pass them into the parenthesis:

.my-div {
  @include box-sizing(border-box);
}

Quick Reference

Animation

The animation mixin allows you to declare cross-browser animations. The mixin accepts

box:hover {
  @include animation(scale 1.0s ease-in, slide 2.0s ease);
}

Or, use individual animation mixins:

box:hover {
  @include animation-name(scale, slide);
  @include animation-duration(2s);
  @include animation-timing-function(ease);
  @include animation-iteration-count(infinite);
}

Appearance

The appearance CSS property is used to display an element using a platform-native styling based on the operating system's theme. For example, to remove browser specific styling for a ui element, use:

@include appearance(none);

Border

For adding borders that flip in right to left languages, use the border- mixins:

// set all in one argument
@include border-right(1px solid $blue);
@include border-left(none);

// set just the color
@include border-color-right($blue);
@include border-color-left($off-white);

Box-Sizing

Set the box-sizing property for all browsers (with browser prefixes):

@include box-sizing(border-box);

Valid values are content-box, border-box, and inherit.

Box-Shadow

Set the box-shadow property for all browsers (with browser prefixes):

@include box-shadow(border-box);

Calc

Shorthand for setting a property to use a calc value. Pass the property you'd like to set, then the value you'd like to use:

@include calc(width, '100px - 10%');

Clearfix

Applies the framework-standard clear for floated elements:

@include clearfix();

Keyframes

For creating animations, you can use the keyframes mixin. This mixin accepts an animation name. Then inside the mixin, write your animation as a content block:

@include keyframes(ANIMATION_NAME){
  0%   { background-color: #ffccf2; }
  100% { background-color: #ccffff; }
};

Now you can use the animation mixin as a named animation like this:

.animation-class {
  @include animation( @include animation(ANIMATION_NAME 200ms ease-in);)
}

Placeholder

Wraps the wide array of input placeholder selectors across browsers.

@include placeholder('color', $dark-blue);

Position

Set right and left properties (automatically flips in right-to-left languages).

@include position-right(4px);
@include position-left(0);

Prefixer

This is one of the most flexible mixins in the library. Use it to add browser prefixes to a property:

@include prefixer(margin-end, 5%, webkit moz spec);

In this way you can prefix any property. Adding the spec as the last argument will also output the property without a prefix.

Respond To

The respond-to mixin adds media queries for use in responsive design. The mixin accepts three arguments: maximum size, minimum size, and type (screen, print, etc). You can pass just the first out of convenience. This mixin works well with the breakpoint variables:

.my-div {
  @include respond-to($small){
    padding: 1rem;
  }
}

This will compile to the following css:

@media screen and (max-width: 480px) {
  .my-div {
    padding: 1rem;
  }
}

You can assemble more complicated media queries by using both min and max:

@include respond-to($large, $medium) { ... }

This will add styles that only appear between the $medium and $large screen sizes.

Transform

The CSS transform property lets you modify the coordinate space of the CSS visual formatting model. Using it, elements can be translated, rotated, scaled, and skewed according to the values set. transform, transform-origin, and transform-style all add the necessary browser prefixes for interacting with their respective transform properties.

@include transform(translateY(50px));
@include transform(scale(0.9) rotate(-3deg));
@include transform-origin(center top);
@include transform-style(preserve-3d);

Transition

This mixin provides a shorthand syntax and supports multiple transitions.

@include transition(all 2.0s ease-in-out);
@include transition(opacity 1.0s ease-in 0s, width 2.0s ease-in 2s);

Or you can use the individual transition properties:

@include transition-property(transform);
@include transition-duration(1.0s);
@include transition-timing-function(ease-in);
@include transition-delay(0.5s);

Transition Prefixed

To transition vendor-prefixed properties, e.g. -webkit-transform and -moz-transform, there is an additional convinience transition-prefixed() mixin:

@include transition-prefixed(transform3d(0,0,0) 200ms linear);

This will generate vendor prefixed properties and values.

Visibility

The visibility mixins change the visibility property. This is useful for removing and adding elements at certain breakpoints or with certain class names. No arguments are passed. Invisible sets visibility: hidden on the object, leaving in the in document flow, but removing it from view. hide() will completely remove the item with display:none.

@include hide();
@include invisible();
@include visible();

Calcite Web includes a small (5KB gzipped) JavaScript library. calcite-web.js is a lightweight and dependency-free library made to enable interactive behaviors for certain patterns and components.

Currently, the following components and patterns rely on calcite-web.js:

• Dropdowns
• Modals
• Tabs
• Accordions
• Drawers

The JavaScript library also includes helpers for "sticky" positioning and scroll events. You can read more about these in the interactive layout helpers section of the documentation.

Calcite Web can be imported using ES6 modules, CommonJS, AMD, or just a plain IIFE.

ES6 Module

If your bundler supports the ES6 module syntax you can import calcite as an ES6 module with named exports:

import * as calcite from 'calcite-web/es6';
calcite.init();

If your bundler uses the module field in package.json (Rollup, Webpack 2) leave off the es6:

import * as calcite from 'calcite-web';
calcite.init();

With named imports you can also just import what you need:

import {drawer} from 'calcite-web';
drawer(); // initialize only instances of the drawer pattern

This is a great way to cut down on the size of your build!

CommonJS

var calcite = require('calcite-web');
calcite.init();

AMD

require(['path/to/calcite-web.js'], function(calcite){
  // use calcite
  calcite.init();
});

IIFE

If calcite-web.js is used on a page with no module syntax, it will just attach itself to window.calcite. Here is an example which initializes Calcite from a self-hosted CDN location:

<body>
  ...
  <script src="https://<self-hosted-url>/files/calcite-web/1.2.5/js/calcite-web.min.js"></script>
  <script>
     calcite.init()
  </script>
</body>

Initializing

While all of the examples above use the main init() method, you can also initialize individual patterns. For example, initialize only instances of the tab pattern like this:

calcite.tabs();

The event bus is used to help interactive patterns communicate with each other and the rest of your application.

Along with a set of common bus events, each pattern has a set of channels that it emits on and listens for. These events can be emitted or listened for by the larger application.

You can trigger or react to events by using the on and emit methods on the bus:

// assuming calcite-web.js is available as calcite

// do something when a drawer opens
calcite.bus.on('drawer:open', function (options) {
  console.log(options.id) // => "top-nav"
})

// open a drawer (must pass data-drawer name as "id")
calcite.bus.emit('drawer:open', {id: "top-nav"})

Common Event Channels

Pattern-Specific Event Channels

Accordions

Drawers

Dropdown

Filter Dropdown

Many of the filter dropdown channels emit and listen for the following options object:

{
  parent: domNode,
  id: filterDropdownId,
  item: domNode
}

Modal

Sticky

Tabs

Tab events emit and listen for an Options Object.

{
  id: tabId // data-tab attribute
  active: domNode
}

calcite-web.js also has methods for DOM traversal and manipulation. If the needs of a project are not too complex it can be used in place of jQuery, Dojo, or other large frameworks.

The following functions allow for basic DOM manipulation and traversal. These helpers are used by JavaScript dependent patterns, and can be included in any custom JavaScript in Calcite Web projects.

Events

calcite.click()

Returns interaction event for the current browser environment. Currently only returns 'click'. Will be more useful when touch support is added.

var click = calcite.click(); // => 'click'

calcite.addEvent(domNode, event, fn)

Adds a callback function to an event on an element.

var click = calcite.click();
var node = document.querySelector('body');

function action (event) {
  console.log('hola');
};

calcite.addEvent(node, click, action); // action will now fire when body is clicked

calcite.removeEvent(domNode, event, fn)

Removes a callback function from an event on an element.

var click = calcite.click();
var node = document.querySelector('body');

function action (event) {
  console.log('hola');
};

calcite.addEvent(node, click, action); // action will now fire when body is clicked
calcite.removeEvent(node, event, action); // action has been removed from body click event

calcite.eventTarget(event)

Returns the target DOM node of an event.

var click = calcite.click();
var node = document.querySelector('body');

function action (event) {
  var target = calcite.eventTarget(event);
  console.log(target);
};

calcite.addEvent(node, click, action);

Clicking the body will now log the contents of the <body> DOM node.

calcite.preventDefault(event)

Prevents default behavior of an event.

var click = calcite.click();
var node = document.getElementsByTagName('a')[0];

function action (event) {
  calcite.preventDefault(event);
};

calcite.addEvent(node, click, action);

This will prevent the first <a> DOM node in the document from performing its default behavior (sending the user to the link in its href attribute).

calcite.stopPropagation(event)

Stops an event from bubbling up the DOM tree. This is useful if events have been bound to both a parent DOM node and a child DOM node.

var click = calcite.click();
var node = document.getElementsByTagName('a')[0];

function action (event) {
  calcite.stopPropagation(event);
};

calcite.addEvent(node, click, action);

If, for example, the <body> DOM node also has a function bound to a click event, this will prevent a user's click from triggering it.

Manipulation & Traversal

calcite.hasClass(node, class)

Checks if the node currently has the provided class. For example, given the following html:

<div class="apple" id="test"></div>

The hasClass utility can be used as follows:

var node = document.getElementById('test');
var isApple = calcite.hasClass(node, 'apple');
console.log(isApple); // true

calcite.addClass(domNode, classes)

Adds one or more classes to a given element. Multiple classes should be passed as a space-separated string, like this:

var node = document.getElementById('test');
calcite.addClass(node, 'apples bananas oranges');

calcite.removeClass(domNode, classes)

Removes one or more classes from an element. Like addClass, multiple classes should be separated with a space and passed as a single string:

var node = document.getElementById('test');
calcite.removeClass(node, 'apples bananas oranges');

calcite.toggleClass(domNode, className)

Adds the class to the element if it doesn't have the class, otherwise, remove it:

var node = document.querySelector('.test');
calcite.toggleClass(node, 'test'); // remove test class
calcite.toggleClass(node, 'test'); // add test class

calcite.closest(class, element)

Searches up the DOM tree to find the closest parent element with a given class.

var nodes = document.querySelector('.child-element');

function clickHandler (event) {
  var closestNode = calcite.closest('parent-class', event.target);
}

for (var i = 0; i < nodes.length; i++) {
  calcite.addEvent(nodes[i], calcite.click(), clickHandler);
}

calcite.nodeListToArray(domNodeList)

Turn a node list (usually returned from a query) into an array.

var nodes = document.getElementsByTagName('a');
var nodeArray = calcite.nodeListToArray(nodes);