Esri Calcite Web框架指南

凤瑶熠Paulette

于 2024-08-27 09:54:49 发布

阅读量741

点赞数 17

本文链接：https://blog.csdn.net/gitblog_00368/article/details/141594210

版权

Esri Calcite Web框架指南

calcite-webAuthoritative 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. 项目地址:https://gitcode.com/gh_mirrors/ca/calcite-web

项目介绍

Esri Calcite Web 是一个响应式的HTML、CSS和JS框架，专为Esri品牌设计，遵循其品牌指南和Calcite设计体系。此框架的版本为1.2.5，大小压缩后仅25KB，最后更新日期为2023年10月13日。虽然该项目已被废弃并不推荐用于未来开发，但对那些寻求基于Esri视觉风格构建网站的开发者来说，它仍然具有参考价值。Calcite Web利用Sass编写，兼容标准的Ruby gem及Libsass编译器。

项目快速启动

要迅速启用Calcite Web到你的项目中，我们推荐通过包管理器安装。以下是使用NPM进行安装的示例：

npm install @esri/calcite-web

安装完成后，你可以通过以下方式在你的HTML文件中引入Calcite Web样式和脚本：

<link rel="stylesheet" href="node_modules/@esri/calcite-web/dist/themes/calcite.css">
<script src="node_modules/@esri/calcite-web/dist/calcite.js"></script>

确保在文档 <body> 标签内按需使用Calcite Web组件或类名来开始构建界面。

应用案例和最佳实践

在设计和实施Calcite Web时，考虑以下几个最佳实践：

一致性：在整个应用中保持组件的统一使用，以增强用户体验的一致性。
可访问性：利用Calcite Web内置的无障碍特性，确保你的网页符合WCAG标准。
性能优化：利用GZIP压缩减少CSS和JavaScript文件的加载时间，并按需加载组件。

示例代码片段

创建一个基本的按钮：

<button class="calcite-btn">点击我</button>

典型生态项目

尽管Calcite Web已不建议用于新项目，但在Esri生态系统中，可能有其他相关项目或更新的设计系统（如Calcite Design System）继续得到支持和发展。对于那些寻找与Esri产品更现代且持续维护解决方案的开发者，应探索Calcite Design System或其他官方推荐的前端资源。

请注意，考虑到Calcite Web已进入废弃状态，实际应用中应当评估替代方案，以保证长期的技术支持和兼容性。

凤瑶熠Paulette

关注

17
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
Esri Calcite Web框架指南

Esri Calcite Web框架指南 calcite-webAuthoritative front-end development resources for Calcite design initiative. Includes extendable base components and styles, as well as a modular and efficient framewo...
复制链接

扫一扫