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 包 Google Maps Polyutil 使用教程

    Google Maps 是一个广受欢迎的地图服务，它提供了强大的地图数据展示功能，而其中的多边形绘制工具也非常实用。然而，在实际项目中我们可能需要对多边形进行处理，如求解多边形面积、判断一个点是否在多...

    3 年前
  • `@therealklanni/strip-unicode` ：Unicode 字符串转换工具使用教程

    在前端引用外部库的过程中，我们可能会遇到需要将 Unicode 字符串进行转换的情况，而 @therealklanni/strip-unicode 包就是一个帮我们进行这项工作的工具。

    3 年前
  • npm 包 aliyun-iot-server-sdk 使用教程

    介绍 Aliyun IoT Server SDK 是一款阿里云物联网平台服务端的 Node.js 库，可以用来操作和管理设备，设备影子，产品等等物联网资源。本文将详细介绍如何使用该库来进行开发。

    3 年前
  • npm 包 ember-css-modules-stylelint 使用教程

    介绍 ember-css-modules-stylelint 是一个使用 stylelint 来检查 ember-css-modules 代码的工具。它可以帮助你快速找出代码中的错误或潜在问题，提高开...

    3 年前
  • npm 包 fgd 使用教程

    介绍 npm 包 fgd 是一个 JavaScript 库，其提供了强大的数据格式转换功能，包括但不限于 JSON、XML、CSV 等。 安装 你可以通过 npm 全局安装 fgd。

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

    前言 在 React 开发中，我们经常会遇到一些渲染性能问题，比如频繁的改变组件大小、位置等导致重新渲染，这些问题可能会影响用户体验。此时可以使用 react-preserve 来优化渲染性能。

    3 年前
  • npm 包 defer-esm 使用教程

    前端开发中经常需要使用到各种常用的 JavaScript 库，而这些库都是通过 npm 包来进行管理和安装的。在使用这些库时，我们会遇到一些问题，如加载时间过长、兼容性问题等。

    3 年前
  • npm 包 serverless-lambda 使用教程

    前言 Serverless 架构在近年来逐渐成为现代 Web 开发的趋势之一，它不仅可以帮助我们在成本上大大减少，还可以让我们将更多的精力和时间投入到业务逻辑上。而 serverless-lambda...

    3 年前
  • npm 包 routemap-express-mw 使用教程

    简介 routemap-express-mw 是一个基于 Express.js 的路由映射中间件，通过使用该中间件可以轻松地将请求路由到不同的处理程序，同时方便了路由的管理和维护。

    3 年前
  • npm 包 ssr-intersection-observer 使用教程

    简介 ssr-intersection-observer 是一款可以在服务器渲染（SSR）的环境下使用的监听元素可见性的库，使用了浏览器原生的 IntersectionObserver API 和 R...

    3 年前
  • npm 包 ts-log-utils 使用教程

    介绍 ts-log-utils 是一个 TypeScript 库，它提供了一些实用的日志工具，可以方便地在应用程序中输出日志信息。本教程将详细介绍 ts-log-utils 的使用方法。

    3 年前
  • npm 包 wy-node-demo 使用教程

    随着前端技术的不断发展，越来越多的工具和库被开发出来，为开发者提供了更便捷的方式来完成开发工作。其中，npm 包作为前端开发中广泛使用的一种工具，扮演着重要的角色。

    3 年前
  • npm 包 test-mobile-ui 使用教程

    背景介绍 随着移动互联网的快速发展，越来越多的企业开始注重移动端的开发和优化。在移动端开发中，UI设计和测试是非常重要的一环。然而，手动测试往往效率低下且出错率高，因此自动化测试变得越来越普遍。

    3 年前
  • npm 包 sharecoind-rpc 使用教程

    前言 sharecoind-rpc 是一个用于与 sharecoind 进行交互的 npm 包。该包提供了一些简单易用的方法，可以使开发者更便捷地操作 sharecoind 区块链节点。

    3 年前
  • npm 包 node-weebly 使用教程

    前言 面对繁杂的前端技术体系，我们需要借助一些 npm 包来简化我们的开发过程。本文主要介绍一个名为 node-weebly 的 npm 包，以及它的使用教程。 node-weebly 是什么？ no...

    3 年前
  • npm 包 js-even 使用教程

    在前端开发中，我们经常需要处理奇偶性问题，比如在列表中加入不同的样式等。js-even 就是一个处理奇偶性的库，它可以很方便地帮你处理奇偶性情况。 1. 安装 在使用之前，我们需要通过 npm 进行安...

    3 年前
  • npm包uri-parser-helper使用教程

    前言 随着前端技术的不断发展和应用，网页的交互式体验越来越丰富，其中重要的一点是通过URL来获取和传递数据。而URI（Uniform Resource Identifier）就是统一资源标识符，是We...

    3 年前
  • npm 包 universal-normalizer 使用教程

    在前端开发中，我们经常会遇到各种数据格式的处理问题，例如日期、时间、地理坐标等不同的数据类型，它们的格式往往不太一样，这时候我们就需要进行格式的规范化。今天我们介绍一个 npm 包 - univers...

    3 年前
  • sbx-parse-api npm 包使用教程

    前言 Node.js 是一种非常流行的服务器端和命令行应用程序的运行时环境，开发者可以使用它来构建高效且可伸缩的网络应用程序。npm 是 Node.js 的包管理器，提供了一种简单的方法来安装和管理 ...

    3 年前
  • npm 包 shipr 使用教程

    在前端工程中，构建和部署过程是非常重要的一环。为了让这一过程更加轻松和自动化，有很多可靠的工具和框架可以使用。其中一个常见的工具就是 npm 包 shipr。 shipr 简介 shipr 是一个命令...

    3 年前

相关推荐

    暂无文章