getbase響應(yīng)式 CSS 框架
getBase 是一個輕量級的響應(yīng)式 CSS 框架，擁有自定義排版、自定義網(wǎng)格、組件化等特性，讓你可以花少量時間來覆蓋樣式，而將更多的時間花在創(chuàng)建漂亮的網(wǎng)站應(yīng)用程序上。
特性
基礎(chǔ)扎實(shí)：建立在 Normalize.css 之上，確保設(shè)置了所有基本 CSS 樣式。
多端統(tǒng)一：在所有現(xiàn)代瀏覽器的頁面表現(xiàn)是完全一致的。
模塊式編碼：有多個獨(dú)立模塊，可以自由設(shè)計并組合模塊。
自動化體驗(yàn)：包含 Parcel JS 配置，可以自動化工作流
安裝
如果您是從頭開始創(chuàng)建新項目，建議使用基礎(chǔ) starter。
git clone https://github.com/getbase/starter.git --depth=1 \ new-website && cd new-website && rm -rf .git && \ npm install && npm start
對于現(xiàn)有項目，只需使用 NPM 安裝 getbase：
npm install --save @getbase/base
安裝 getBase 后，可以選擇要導(dǎo)入的內(nèi)容并包含您自己的自定義樣式。
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 導(dǎo)入
/* 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 導(dǎo)入
/* 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 導(dǎo)入
/* 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";
評論
圖片
表情