npm 包 @gdjiami/blocks 使用教程

简介

在前端开发中，我们经常会遇到需要编写大量的样式代码的情况。为了提高开发效率和代码可维护性，我们可以使用 CSS 框架，如 Bootstrap、Materialize 等。这些框架提供了丰富的组件和样式类，使得我们可以更快速地编写 CSS 代码。但是，当我们只需要使用其中的某些组件或样式类时，引入整个框架显然是不优雅的。这时，我们可以选择使用 CSS 模块化解决方案，如 BEM、Tailwind 等。

@gdjiami/blocks 就是一款基于 BEM 的 CSS 模块化解决方案。它提供了一些常用的 CSS 组件和样式类，支持自定义颜色、字体等配置，同时也支持按需引入，避免了引入无用代码的问题。

安装

使用 npm 进行安装：

--- ------- ---------------

或者，使用 Yarn 进行安装：

---- --- ---------------

使用

引入样式

在你的项目中，引入 @gdjiami/blocks 的样式文件：

----- ---------------- ---------------------------------------------------------

使用组件和样式类

@gdjiami/blocks 提供了一些常用的组件和样式类，以下是一些示例：

Button 按钮

------- -----------------------

Form 表单

----- -------------
  ---- -----------------
    ---- ------------------------- ---------------------------------
    ---- ------------------------- ----------- --------------------
  ------
  ---- -----------------
    ---- ------------------------- --------------------------------
    ---- ------------------------- --------------- --------------------
  ------
  ---- -----------------
    ---- -------------------------
    ---- -------------------------- ---------- -------------- ----------------
  ------
-------

Typography 排版

-- -----------------------
-- -----------------------
-- ---------------------------

自定义配置

@gdjiami/blocks 支持通过配置自定义颜色、字体等。以下是一些常用的配置示例：

颜色配置

-- -----
--------------- --------
----------------- --------
--------------- --------
-------------- --------
--------------- --------
------------ --------
------------- --------
------------ --------

-- -- --------------- ----
------- ------------------------------

-- -----
---- -
  ------------- -
    ----------------- ---------------
    ------------- ---------------
  -

  --------------- -
    ----------------- -----------------
    ------------- -----------------
  -

  ------------- -
    ----------------- ---------------
    ------------- ---------------
  -

  ------------ -
    ----------------- --------------
    ------------- --------------
  -

  ------------- -
    ----------------- ---------------
    ------------- ---------------
  -

  ---------- -
    ----------------- ------------
    ------------- ------------
  -

  ----------- -
    ----------------- -------------
    ------------- -------------
  -

  ---------- -
    ----------------- ------------
    ------------- ------------
  -
-

字体配置

-- -----
----------------- ---------- ------ -------- -----------
---------------- --------- ------- --------- ----------

-- -- --------------- ----
------- ------------------------------

-- -----
----- -
  ------------ -
    ------------ -----------------
  -

  ----------- -
    ------------ ----------------
  -
-

总结

@gdjiami/blocks 是一款基于 BEM 的 CSS 模块化解决方案，它可以提高代码可维护性，同时也支持自定义配置和按需引入。通过本文的介绍和示例，我们可以更好地理解和使用 @gdjiami/blocks。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/115154

阅读全文

猜你喜欢

  • npm 包 docker-parse-image 使用教程

    如果你是一名前端工程师，你可能会遇到处理 Docker 镜像的需求，这就需要使用到 docker-parse-image 这个 npm 包了。本文将会介绍这个包的使用方法以及一些与之相关的重要概念。

    5 年前
  • npm 包 vue-tour 使用教程

    前言 在前端应用中，引导用户快速了解页面功能是一个很重要的功能，然而开发引导页面需要耗费很多时间。vue-tour 这个 npm 包便是为了更方便的实现这个功能而存在的。

    5 年前
  • npm 包 otplib 使用教程

    简介 Node Package Manager（npm）是 Node.js 中一款非常方便的包管理工具，是前端开发者都应该熟悉和掌握的工具。在开发过程中，经常需要使用到各种依赖包，在这个背景下，一款 ...

    5 年前
  • npm 包 Authing-JS-SDK 使用教程

    Authing 是一个身份认证和授权服务提供商，提供身份认证、访问控制、身份管理等服务，并且支持多种身份认证方式。本文将介绍如何使用 Authing-JS-SDK 来进行身份认证与授权。

    5 年前
  • npm 包 @authing/sso 使用教程

    什么是 @authing/sso？ @authing/sso 是一款针对单点登录的 Node.js SDK。它被开发出来为了让 Node.js 开发人员在 Web 应用中更快、更简便地实现单点登录。

    5 年前
  • npm 包 machinepack-2fa 使用教程

    什么是 machinepack-2fa machinepack-2fa 是一款基于 Node.js 的 npm 包，用于生成和验证两步验证（2FA）令牌。该包支持时间同步令牌（TOTP）和基于哈希的一...

    5 年前
  • npm 包 2factor-cli 使用教程

    简介 2FA（Two-factor authentication）双因素认证是一种常用的身份验证方式，它要求用户使用两种不同的身份验证方式进行身份验证。npm 包 2factor-cli 提供了一种方...

    5 年前
  • npm 包 with-error 使用教程

    在前端开发过程中，经常需要处理错误信息。为了方便开发，开发者们一直在寻找方便实用的工具。而 with-error 就是一个旨在提高开发者效率的 npm 包。 本文将介绍 with-error 的基本用...

    5 年前
  • npm 包 @types/session-file-store 使用教程

    前言 随着互联网的快速发展，Web 应用的需求也越来越多，而前端框架的出现也为 Web 应用的开发带来了便利。而本文要介绍的 npm 包 @types/session-file-store，能够使得我...

    5 年前
  • npm 包 @types/nunjucks 使用教程

    在前端开发中，经常需要使用模板引擎来动态生成 HTML 页面。Nunjucks 是一个强大的 JavaScript 模板引擎，它可以帮助你快速构建动态的 Web 页面，并提供强大的模板继承功能。

    5 年前
  • npm 包 @types/node-cache 使用教程

    前言 Node.js 是一种构建高性能应用程序的开源后端技术。随着 Node.js 的迅速发展，Node.js 生态系统中的包数量急剧增加，使得开发者可以通过安装和使用这些包来提高开发效率和代码质量。

    5 年前
  • npm 包@types/knex 使用教程

    什么是npm？ npm是即 node package manager 的缩写，它是一个使用 JavaScript 编写的包管理工具，用于管理node.js包和模块的安装、升级、卸载等工作。

    5 年前
  • npm 包 @types/hasha 使用教程

    简介 @types/hasha 是一个 TypeScript 的声明文件库，它为哈希函数库 hasha 提供了类型定义。哈希函数库 hasha 是一个 JavaScript 哈希函数库，它支持多种哈希...

    5 年前
  • npm 包 @types/express-session 使用教程

    Node.js 是一个非常流行的后端技术栈，而 Express 是 Node.js 中最流行的 Web 框架之一。在使用 Express 进行开发时，经常会用到一个名为 express-session...

    5 年前
  • npm 包 @mojotech/json-type-validation 使用教程

    前言 在前端开发中，经常需要对后端返回的数据进行类型验证。为了方便开发者进行这一项任务，MojoTech 开发了一款npm包@mojotech/json-type-validation。

    5 年前
  • npm 包 @iarna/toml 使用教程

    前言 Toml 是一种支持注释的轻量级配置文件格式，它的设计旨在易于人类阅读和编写。在前端开发中，我们通常会用到 Toml 格式的配置文件，比如 Webpack、Rollup 等打包工具的配置文件。

    5 年前
  • npm 包 @types/rc-tooltip 使用教程

    简介 在前端开发中，经常会需要使用一些第三方组件库，例如 rc-tooltip。虽然这些组件库已经很成熟和稳定，但是开发时仍然需要注意类型检查和类型定义问题。这时，使用 npm 包 @types/rc...

    5 年前
  • npm 包 "@types/prop-types" 使用教程

    简介 "@types/prop-types" 是一个 npm 包，它提供了 React 应用中的 PropTypes 类型定义。 在 React 应用中，PropTypes 是用于向其他开发人员和维护...

    5 年前
  • npm 包 @types/deepmerge 使用教程

    什么是 @types/deepmerge？ 随着 TypeScript 在前端领域的流行，许多第三方库开始提供 TypeScript 类型定义。但是，并不是所有库都自带了 TypeScript 类型定...

    5 年前
  • npm 包 @types/bn.js 使用教程

    简介 在编写前端应用程序时，通过npm安装的包通常是JavaScript代码的集合，它们提供了广泛的功能和功能。但是，面向对象编程的好处是可以使用类型检查和提供代码提示来减少错误和提高开发效率。

    5 年前

相关推荐

    暂无文章