getbase响应式 CSS 框架-技术圈

getBase 是一个轻量级的响应式 CSS 框架，拥有自定义排版、自定义网格、组件化等特性，让你可以花少量时间来覆盖样式，而将更多的时间花在创建漂亮的网站应用程序上。

特性

基础扎实：建立在 Normalize.css 之上，确保设置了所有基本 CSS 样式。

多端统一：在所有现代浏览器的页面表现是完全一致的。

模块式编码：有多个独立模块，可以自由设计并组合模块。

自动化体验：包含 Parcel JS 配置，可以自动化工作流

安装

如果您是从头开始创建新项目，建议使用基础 starter。



git clone https://github.com/getbase/starter.git --depth=1 \ new-website &&  cd new-website && rm -rf .git && \ npm install && npm start

对于现有项目，只需使用 NPM 安装 getbase：



npm install --save @getbase/base

安装 getBase 后，可以选择要导入的内容并包含您自己的自定义样式。

HTML/CSS



<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Your Website / App </title>

  <!-- Base Core -->

  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/core.css">

  <!-- Base Common -->

  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/code.css">

  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/forms.css">

  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/tables.css">

  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/typography.css">

  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/headings.css">

  <!-- Add Your Website / App Stylesheet -->

  <!-- ... -->

  <!-- Add Additional Modules -->

  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/containers.css">

  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/grid.css">

  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/horizontal-spacers.css">

  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/vertical-spacers.css">

  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/spacers.css">

  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/display-helpers.css">

  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/flex-helpers.css">

  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/position-helpers.css">

  <link rel="stylesheet" href="https://unpkg.com/@getbase/base/typography-helpers.css">

</head>

<body>

  <p>

    Base!

  </p>

</body>

</html>

CSS 导入



/* Import Base */

@import url("https://unpkg.com/@getbase/base/core.css");



/* Import Base Common */

@import url("https://unpkg.com/@getbase/base/code.css");

@import url("https://unpkg.com/@getbase/base/forms.css");

@import url("https://unpkg.com/@getbase/base/tables.css");

@import url("https://unpkg.com/@getbase/base/typography.css");

@import url("https://unpkg.com/@getbase/base/headings.css");



/* Add Your Website / App Styles */

/* ... */



/* Add Additional Modules */

@import url("https://unpkg.com/@getbase/base/containers.css");

@import url("https://unpkg.com/@getbase/base/grid.css");

@import url("https://unpkg.com/@getbase/base/horizontal-spacers.css");

@import url("https://unpkg.com/@getbase/base/vertical-spacers.css");

@import url("https://unpkg.com/@getbase/base/spacers.css");

@import url("https://unpkg.com/@getbase/base/display-helpers.css");

@import url("https://unpkg.com/@getbase/base/flex-helpers.css");

@import url("https://unpkg.com/@getbase/base/position-helpers.css");

@import url("https://unpkg.com/@getbase/base/typography-helpers.css");

SCSS 导入



/* Import Base */

@import "~@getbase/base/scss/_mixins";

@import "~@getbase/base/scss/core";



/* Import Base Common */

@import "~@getbase/base/scss/code";

@import "~@getbase/base/scss/forms";

@import "~@getbase/base/scss/tables";

@import "~@getbase/base/scss/typography";

@import "~@getbase/base/scss/headings";



/* Add Your Website / App Styles */

@import "main";



// Add Additional Modules

@import "~@getbase/base/scss/containers";

@import "~@getbase/base/scss/grid";

@import "~@getbase/base/scss/horizontal-spacers";

@import "~@getbase/base/scss/vertical-spacers";

@import "~@getbase/base/scss/spacers";

@import "~@getbase/base/scss/typography-helpers";

@import "~@getbase/base/scss/display-helpers";

@import "~@getbase/base/scss/flex-helpers";

@import "~@getbase/base/scss/position-helpers";

LESS 导入



/* Import Base */

@import "~@getbase/base/less/_mixins";

@import "~@getbase/base/less/core";



/* Import Base Common */

@import "~@getbase/base/less/code";

@import "~@getbase/base/less/forms";

@import "~@getbase/base/less/tables";

@import "~@getbase/base/less/typography";

@import "~@getbase/base/less/headings";



/* Add Your Website / App Styles */

@import "main";



// Add Additional Modules

@import "~@getbase/base/less/containers";

@import "~@getbase/base/less/grid";

@import "~@getbase/base/less/horizontal-spacers";

@import "~@getbase/base/less/vertical-spacers";

@import "~@getbase/base/less/spacers";

@import "~@getbase/base/less/typography-helpers";

@import "~@getbase/base/less/display-helpers";

@import "~@getbase/base/less/flex-helpers";

@import "~@getbase/base/less/position-helpers";