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";
评论