12-column-grid 中文文档教程

发布于 4年前 浏览 23 项目主页 更新于 3年前

12-column-grid

GitHub 文件大小(字节)npmjsDeliver 每月点击量GitHub 问题GitHubGitHub package.json 版本 依赖项 GitHub last commit

  • Creates 12 column responsive grid layout
  • Customizable
  • Light weight
  • Zero production dependency
  • Class names are same as that of bootstrap
  • SCSS Source code
  • Uses display:grid

Contents

  • Using
  • Adding To Project
    • CDN
    • Installing locally
  • Using Classes
    • col classes
    • d-**-none classes
    • Aligning grid
  • Examples
    • Responsive list of cards
    • Responsive horizontal navigation links
  • Customizing grids
  • Reporting Issues
  • Contributing
  • Getting Started
  • Scripts
  • Tasks

Using

Adding To Project

CDN

<link rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/12-column-grid/dist/grid.min.css">

另一个 CDN

<link rel="stylesheet"
      type="text/css"
      href="https://unpkg.com/12-column-grid/dist/grid.min.css">

Installing locally

npm i 12-column-grid

yarn add 12-column-grid

使用来自 node_modules 的网格 -

  • 如果您的项目正在使用 SCSS,请从 node_modules/12-column-grid/src/grid.scssgrid.scss代码>。

  • 没有 CSS 预处理器或其他 CSS 预处理器的项目可以使用 node_modules/12-column-grid/dist/grid.min.css 中的压缩 grid.min.css 文件>。

  • 对于未缩小的文件,使用 node_modules/12-column-grid/dist/grid.css 中的 grid.css

  • Angular 项目可以使用 angular.json 文件导入库。 在 angular.json 中找到 assets 数组并将路径放入 node_modules/12-column-grid/src/grid.scss

    {
        "projects": {
            "<Project Name>": {
                "architect": {
                    "build": {
                        "options": {
                            "assets": [
                                "./node_modules/12-column-grid/src/grid.scss"
                            ],
                        },
                    },
                },
            },
        },
    }
    

Using Classes✨

这个库中的所有类名都与 bootstrap 相同。

网格项的容器应该有一个 CSS 类 rowgrid

网格的宽度分为 12 列。

屏幕大小分为

Screen typecodescreen width
????️ extra large screenxlmore than 1200px
????️ large screenlgmore than 992px
medium screenmdmore than 768px
small screensmmore than 576px
extra small screenxsless than 576px

col classes

使用以下类进行响应式网格布局

  • col-xl-1, col-xl-2, ... col-xl-12

  • col-lg-1, col-lg-2, ... col-lg-12

  • col-md-1, col-md-2, ... col-md-12

  • col- sm-1, col-sm-2, ... col-sm-12

  • col-xs-1, col-xs-2, ... col-xs-12

混合不同屏幕尺寸的类以获得响应式布局

对于非响应式网格,使用类 col-1、col-2、col-3、... col-12

d-**-none classes

使用以下类隐藏屏幕尺寸的元素。

d-xl-none, d-lg-none, d-md-none, d-sm-none, d-xs-none

Aligning grid

对齐类可以对齐网格或项目。 当应用于网格项时,它会对齐网格项。 当应用于网格时,它会对齐网格本身。

为了对齐使用类

  • align-top - align at the top
  • align-bottom - align to the bottom
  • align-right - align to the right
  • align-left - align to the left
  • align-h-center - align the grid horizontally center
  • align-v-center - align the grid vertically center
  • align-h-stretch - stretchs the grid horizontally
  • align-v-center - stretchs the grid vertically

Examples

Responsive list of cards

<div class="row">
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <img src="https://www.imageurl.com/image">
        <h4>image description</h4>
    </div>
</div>
<head>
    <style>
    nav>ul {
        list-style: none;
    }
    </style>
</head>
<body>
<nav>
    <ul class="row">
        <li class="col-md-3 col-sm-12">
            <a href="#">Link 1</a>
        </li>
        <li class="col-md-3 col-sm-12">
            <a href="#">Link 2</a>
        </li>
        <li class="col-md-3 col-sm-12">
            <a href="#">Link 3</a>
        </li>
        <li class="col-md-3 col-sm-12">
            <a href="#">Link 4</a>
        </li>
    </ul>
</nav>
</body>

Customizing grids ????

要自定义库,您需要在应用程序中使用 SCSS。 以下内容可以自定义 -

  • 断点

    $breakPoints :(
        xl: 1600px,
        lg: 1200px,
        md: 1080px,
        sm: 480px,
        xs: 0
    );
    

    如果更改了 $breakPoints 的键,那么它将反映在生成的类名中。 例如,如果键 lg 更改为 large,则类 col-lg-1, col-lg-2, ... col-lg- 12 将更改 col-large-1, col-large-2, ... col-large-12

  • 网格中的列数

    $gridColumns: 10;
    
  • 网格行

    $gridRowGap: 30px;
    
  • 之间的间隙 网格列之间的间隙

    $gridColumnGap: 10px;
    
  • 所有列分类前的前缀 .col

    $columnPrefix: '.my-company';
    

> 在声明自定义变量后使用 @import

Reporting Issues ????

这个库的问题可以在 Github 上报告。

github.com/KumarSidharth/12-column-grid/issues ????

Contributing ????????‍♂️

我正在寻找这个项目的贡献者和维护者。 ????????

Getting Started ????‍????

  1. 在本地机器上克隆项目。

    git clone https://github.com/KumarSidharth/12-column-grid.git

  2. 确保你有 Node.js 安装在你的机器上。

  3. 进入项目文件夹。

    cd 12-column-grid

  4. code>安装 dev-dependencies

    使用npm install --only=dev</

这个项目应该有 0 production dependency

Scripts ????

  1. 在开发过程中,您可以使用

    npm run watch

    查看文件 此脚本将在每次保存到 SCSS 文件后重建 CSS 文件。

  2. 在提出拉取请求之前,您应该运行脚本

    npm run build

    此脚本将为生产构建 CSS 文件。

Tasks ????

Task name
⬜️Add Table of contents in readme
⬜️Add Stackblitz link for Usage in Angular
⬜️Add codepen / jsFiddle links
Add customizable variables
Add usage docs
⬜️Add images for result of examples
Add to CDN
Minify the output file
⬜️Add classes for row-span
Hide element on a specific device
⬜️Show element on a specific device
align grid and grid item
⬜️Grid gap based on media queries

12-column-grid

GitHub file size in bytesnpmjsDeliver hits per monthGitHub issuesGitHubGitHub package.json version Dependencies GitHub last commit

  • Creates 12 column responsive grid layout
  • Customizable
  • Light weight
  • Zero production dependency
  • Class names are same as that of bootstrap
  • SCSS Source code
  • Uses display:grid

Contents

  • Using
  • Adding To Project
    • CDN
    • Installing locally
  • Using Classes
    • col classes
    • d-**-none classes
    • Aligning grid
  • Examples
    • Responsive list of cards
    • Responsive horizontal navigation links
  • Customizing grids
  • Reporting Issues
  • Contributing
  • Getting Started
  • Scripts
  • Tasks

Using

Adding To Project

CDN

<link rel="stylesheet"
      type="text/css"
      href="https://cdn.jsdelivr.net/npm/12-column-grid/dist/grid.min.css">

Another CDN

<link rel="stylesheet"
      type="text/css"
      href="https://unpkg.com/12-column-grid/dist/grid.min.css">

Installing locally

npm i 12-column-grid

or

yarn add 12-column-grid

To use grids from node_modules -

  • If your project is using SCSS, import grid.scss from node_modules/12-column-grid/src/grid.scss.

  • Projects without CSS pre-processors or other CSS pre-processors can use minified grid.min.css file from node_modules/12-column-grid/dist/grid.min.css.

  • For unminified file, use grid.css from node_modules/12-column-grid/dist/grid.css

  • Angular projects can import the library using angular.json file. Find the assets array in angular.json and put the path to node_modules/12-column-grid/src/grid.scss

    {
        "projects": {
            "<Project Name>": {
                "architect": {
                    "build": {
                        "options": {
                            "assets": [
                                "./node_modules/12-column-grid/src/grid.scss"
                            ],
                        },
                    },
                },
            },
        },
    }
    

Using Classes✨

All the class names in this library are same as bootstrap.

The container of the grid items should have a CSS class row or grid.

The width of the grid is divided into 12 columns.

The screen sizes are divided as

Screen typecodescreen width
????️ extra large screenxlmore than 1200px
????️ large screenlgmore than 992px
???? medium screenmdmore than 768px
???? small screensmmore than 576px
???? extra small screenxsless than 576px

col classes

Use the following classes for responsive grid layout

  • col-xl-1, col-xl-2, ... col-xl-12

  • col-lg-1, col-lg-2, ... col-lg-12

  • col-md-1, col-md-2, ... col-md-12

  • col-sm-1, col-sm-2, ... col-sm-12

  • col-xs-1, col-xs-2, ... col-xs-12

Mix classes of different screen sizes to get responsive layout

For non-responsive grids use the classes col-1, col-2, col-3, ... col-12.

d-**-none classes

Use the following classes to hide the element for a screen size.

d-xl-none, d-lg-none, d-md-none, d-sm-none, d-xs-none

Aligning grid

Alignment classes can align the grid or the item. When applied to grid item, it aligns the grid item. When applied to the grid, it aligns the grid itself.

For aligning use the classes

  • align-top - align at the top
  • align-bottom - align to the bottom
  • align-right - align to the right
  • align-left - align to the left
  • align-h-center - align the grid horizontally center
  • align-v-center - align the grid vertically center
  • align-h-stretch - stretchs the grid horizontally
  • align-v-center - stretchs the grid vertically

Examples

Responsive list of cards

<div class="row">
    <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6 col-xs-12">
        <img src="https://www.imageurl.com/image">
        <h4>image description</h4>
    </div>
</div>
<head>
    <style>
    nav>ul {
        list-style: none;
    }
    </style>
</head>
<body>
<nav>
    <ul class="row">
        <li class="col-md-3 col-sm-12">
            <a href="#">Link 1</a>
        </li>
        <li class="col-md-3 col-sm-12">
            <a href="#">Link 2</a>
        </li>
        <li class="col-md-3 col-sm-12">
            <a href="#">Link 3</a>
        </li>
        <li class="col-md-3 col-sm-12">
            <a href="#">Link 4</a>
        </li>
    </ul>
</nav>
</body>

Customizing grids ????

To customise the library, you need to use SCSS in your application. The following things can be customized -

  • Break points

    $breakPoints :(
        xl: 1600px,
        lg: 1200px,
        md: 1080px,
        sm: 480px,
        xs: 0
    );
    

    If the keys of $breakPoints are changed then it will reflect in the class names generated. For example, if the key lg is changed to large then the classes col-lg-1, col-lg-2, ... col-lg-12 will change col-large-1, col-large-2, ... col-large-12.

  • Number of columns in the grid

    $gridColumns: 10;
    
  • Gap between the grid rows

    $gridRowGap: 30px;
    
  • Gap between the grid columns

    $gridColumnGap: 10px;
    
  • Prefix .col before all column clases

    $columnPrefix: '.my-company';
    

Use @import after declaring variables for customizing.

Reporting Issues ????

Issues for this library can be reported on Github.

github.com/KumarSidharth/12-column-grid/issues ????

Contributing ????????‍♂️

I am looking out for contributers and maintainers for this project. ????????

Getting Started ????‍????

  1. Clone the project in your local machine.

    git clone https://github.com/KumarSidharth/12-column-grid.git

  2. Make sure you have Node.js installed on your machine.

  3. Go inside the project folder.

    cd 12-column-grid

  4. Install dev-dependencies using

    npm install --only=dev

This project is meant to have 0 production dependency.

Scripts ????

  1. During the development process you can watch the files using

    npm run watch

    This script will rebuild the CSS files after every save in SCSS files.

  2. Before raising the pull request you should run the script

    npm run build

    This script will build the CSS files for production.

Tasks ????

Task name
⬜️Add Table of contents in readme
⬜️Add Stackblitz link for Usage in Angular
⬜️Add codepen / jsFiddle links
Add customizable variables
Add usage docs
⬜️Add images for result of examples
Add to CDN
Minify the output file
⬜️Add classes for row-span
Hide element on a specific device
⬜️Show element on a specific device
align grid and grid item
⬜️Grid gap based on media queries
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文