npm 包 @genesisui/styles 使用教程

在前端开发中，样式表是非常重要的一部分。为了方便开发者进行样式的管理和使用，社区中出现了很多优秀的 CSS 框架和工具库。其中，@genesisui/styles 是一款基于 Sass 和 CSS3 的模块化样式框架，可以为你的项目提供丰富的 CSS 样式和组件。

本篇文章将为大家介绍如何使用 @genesisui/styles 框架，包括安装、使用、样式分类以及样式类名命名规范。

安装

使用 @genesisui/styles 需要先安装 Node.js 和 npm 包管理器。在命令行终端中执行以下命令安装 @genesisui/styles：

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

安装完成后，在项目中的 package.json 文件中可以看到如下内容：

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

使用

接下来，我们需要在项目中引入 @genesisui/styles 样式，可以使用 Sass、Less 或者直接使用 CSS。

Sass

在 Sass 中我们可以使用 @import 导入 @genesisui/styles 样式：

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

Less

在 Less 中我们可以使用 @import 导入 @genesisui/styles 样式：

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

CSS

如果直接使用 CSS，我们可以在 HTML 中使用 link 标签引入：

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

引入样式后，可以在 HTML 中使用 @genesisui/styles 样式：

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

样式分类

@genesisui/styles 样式分类如下：

  • Utilities（工具类）
  • Base（基础）
  • Components（组件）
  • Templates（模板）

Utilities

Utilities 是一些独立的、被频繁使用的样式类，可以用来快速解决一些缺陷或兼顾兼容性等问题。它们是非常小的，一般只包含一个属性。

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

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

Base

Base 样式包含一些通用的 reset 样式和基础、全局的样式，可以在整个网站中使用。这些样式将会覆盖掉浏览器默认的样式。

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

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

Components

Components 包含了一些常用的网页组件的样式，比如：导航、表格、表单、按钮等。组件一般是由多个基础样式组成的，所以在使用组件之前需要先从 Base 或者 Utilities 中使用必要的样式。

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

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

Templates

Templates 包含绝大部分页面的样式，其中一些包含了各种不同的排列组合，用来实现特定的页面布局。

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

样式类名命名规范

@genesisui/styles 的样式类名遵循 BEM 命名规范，即 Block（块）、Element（元素）、Modifier（修饰符）。样式名不使用缩写和特殊字符，全部用小写并用连字符分隔。

  • Block：独立的、有意义的 UI 组件。
  • Element：组成 Block 的一部分，没有独立的意义，不能单独使用。
  • Modifier：修改 Block 或 Element 的状态或者外观，使用时加在 Block 或 Element 的后面。

举例

---- -------------------
  ---- -----------------------------------
  ---- ----------------------------
    --- -----------------------
      --- ---------------------
        -- -------- ------------------- ------------------------- -----
      -----
      --- ---------------------
        -- -------- ------------------------- -----
      -----
      --- ---------------------
        -- -------- ------------------------- -----
      -----
    -----
  ------
------
  • Block：gui-navbar
  • Element：gui-navbar-brand、gui-navbar-collapse、gui-navbar-nav、gui-nav-item、gui-nav-link
  • Modifier：gui-nav-link-active

以上是 @genesisui/styles 的使用教程和样式分类，希望对大家在前端开发中提供帮助，让我们的开发更加高效、优雅。

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

阅读全文

猜你喜欢

  • npm 包 serverless-apig-s3 使用教程

    在前端开发中，往往需要使用云服务来存储和托管静态资源，而 AWS S3 和 API Gateway 具有良好的稳定性和扩展性。对于需要通过 API 网关操作 S3 的应用程序，serverless-a...

    3 年前
  • npm 包 cast-function 使用教程

    cast-function 是一个非常实用的 npm 包，可以用来将 JavaScript 对象或字符串转换为指定类型的数据。在前端开发中，我们经常需要处理数据转换的需求，使用 cast-functi...

    3 年前
  • npm 包 feathers-findone 使用教程

    简介 Feathers-findone 是基于 Feathers 客户端库的一个 npm 包，旨在提供一种简单易用的方法，快速查找单个文档并返回结果。它可以用于 Node.js 环境和浏览器环境，并支...

    3 年前
  • npm包stryker-webpack使用教程

    在前端开发中，测试是必不可少的一个环节。最近，我使用了一个非常有用的npm包——stryker-webpack，它可以帮助我们对我们的webpack应用程序进行自动化测试，并且可以在每个提交和合并请求...

    3 年前
  • npm 包 jest-fable-preprocessor 使用教程

    前言 在前端开发中，测试是非常必要的一环，而 Jest 是一个非常流行的前端测试框架。最近，我们使用了 Fable 来进行前端项目的编写，然而 Fable 编写的代码不是特别容易进行测试，因为它们需要...

    3 年前
  • npm 包 logagent-gps 使用教程

    介绍 logagent-gps 是 Node.js 的一个 npm 包，可用于获取 GPS 位置信息并将其记录为日志。它对于前端开发人员来说是一个非常有用的工具，因为很多时候我们需要获取用户位置信息。

    3 年前
  • npm 包 partial-response-express 使用教程

    前言 在与现代化的前端应用程序打交道时，部分选择仍然是一个重要的概念。部分选择可以被理解为只返回所需的数据，而不是返回完整的响应。这在前端优化中非常有用，因为许多时候我们只需要相关的部分数据来更新用户...

    3 年前
  • npm 包 hyper-markdown-pdf 使用教程

    前言 在日常前端开发中，我们经常需要将 markdown 格式的文档转换为 PDF 格式，以供分享或存档等目的。本文将介绍一种使用 npm 包 hyper-markdown-pdf 进行 markdo...

    3 年前
  • npm 包 spinner-control 使用教程

    在前端开发中，经常需要使用一些加载中动画，以便提示用户正在等待数据加载。其中一个非常流行的选择是使用 spinner 动画。 如果你正在寻找一个好用的 spinner 控件，那么 spinner-co...

    3 年前
  • npm 包 Periodically 使用教程

    前言 在 WEB 开发中，许多时候需要在页面中定时刷新数据来展示最新信息，要实现这一点，一般可以使用 JavaScript 的定时器函数 setInterval 或 setTimeout。

    3 年前
  • npm包react-cms-graphql-utils使用教程

    介绍 react-cms-graphql-utils是一款基于 GraphQL 的工具库，专门用于开发 CMS 系统。它提供了许多方便的函数和组件，可以帮助开发者将GraphQL请求与React组件无...

    3 年前
  • npm 包 vue-object-fit 使用教程

    简介 在前端开发中，图片的展示是一个常见的需求。然而，不同尺寸的图片可能需要不同的展示方式，比如居中、填充或拉伸等等。vue-object-fit 是一个 npm 包，它提供了一种方便的方式来解决这个...

    3 年前
  • npm 包 react-intl-ioa 使用教程

    在前端开发中，国际化是一个非常重要且必要的部分。而 react-intl-ioa 是一个基于 React 框架的国际化解决方案，可以为应用程序提供完整的国际化支持。

    3 年前
  • npm 包 braingames-ignat 使用教程

    简介 braingames-ignat 是一个基于 Node.js 的开发工具包，旨在帮助开发者快速实现简单的脑力游戏。该工具包配备了丰富的功能和易用的接口，可以轻松地实现数学、逻辑、语音等多种类型的...

    3 年前
  • npm 包 markup-kit 使用教程

    在前端开发中，我们常常需要处理 HTML、CSS 和 JavaScript 的代码，以构建网页和用户交互界面。为了提高开发效率和代码可维护性，我们可以使用现有的工具和库，比如 npm 包 markup...

    3 年前
  • npm 包 fetch-mock-es5 使用教程

    在前端开发中，我们常常需要对 API 进行请求，以获取数据或者更新数据。为了模拟 API，我们会使用一些 mock 工具。本文将提供如何使用 npm 包 fetch-mock-es5 来模拟 API ...

    3 年前
  • npm 包 loopback-ds-usuario-mixin 使用教程

    在开发使用 loopback 框架的过程中，我们可能会使用到许多的 npm 包来快速实现功能，其中一个常用的包就是 loopback-ds-usuario-mixin。

    3 年前
  • npm 包 @instituto-soma/somasig-angular2-lib 使用教程

    简介 本文介绍了前端开发中的一个 npm 包 @instituto-soma/somasig-angular2-lib。该库提供了一组 Angular 2 的组件和服务，可以实现从前端生成和签名数字证...

    3 年前
  • npm 包 multer-s3-imager 使用教程

    在现代 web 开发中，上传图片和文件已经成为很常见的场景。最近我发现了一个 npm 包 multer-s3-imager，它可以将上传的文件直接保存到 AWS S3，而且还可以在保存之前对图片进行压...

    3 年前
  • npm 包 @freshfruitdigital/sequelize-classes 使用教程

    介绍 @freshfruitdigital/sequelize-classes 是一个用于 Sequelize 模型类自动生成的 npm 包。其目的是可以轻松地将数据库模型转换为模型类，可以极大地简化...

    3 年前

相关推荐

    暂无文章