getbase 响应式 CSS 框架开源项目

我要开发同款
匿名用户2021年11月09日
174阅读

技术信息

开源地址
https://gitee.com/mirrors/getbase
授权协议
MIT

作品详情

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

特性

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

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

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

自动化体验:包含 ParcelJS配置,可以自动化工作流

安装

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

gitcloehttps://github.com/getbase/starter.git--depth=1\ew-website&&cdew-website&&rm-rf.git&&\pmistall&&pmstart

对于现有项目,只需使用NPM安装getbase:

pmistall--save@getbase/base

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

HTML/CSS <!DOCTYPEhtml><html><head><metacharset="UTF-8"><metaame="viewport"cotet="width=device-width,iitial-scale=1.0"><title>YourWebsite/App</title><!--BaseCore--><likrel="stylesheet"href="https://upkg.com/@getbase/base/core.css"><!--BaseCommo--><likrel="stylesheet"href="https://upkg.com/@getbase/base/code.css"><likrel="stylesheet"href="https://upkg.com/@getbase/base/forms.css"><likrel="stylesheet"href="https://upkg.com/@getbase/base/tables.css"><likrel="stylesheet"href="https://upkg.com/@getbase/base/typography.css"><likrel="stylesheet"href="https://upkg.com/@getbase/base/headigs.css"><!--AddYourWebsite/AppStylesheet--><!--...--><!--AddAdditioalModules--><likrel="stylesheet"href="https://upkg.com/@getbase/base/cotaiers.css"><likrel="stylesheet"href="https://upkg.com/@getbase/base/grid.css"><likrel="stylesheet"href="https://upkg.com/@getbase/base/horizotal-spacers.css"><likrel="stylesheet"href="https://upkg.com/@getbase/base/vertical-spacers.css"><likrel="stylesheet"href="https://upkg.com/@getbase/base/spacers.css"><likrel="stylesheet"href="https://upkg.com/@getbase/base/display-helpers.css"><likrel="stylesheet"href="https://upkg.com/@getbase/base/flex-helpers.css"><likrel="stylesheet"href="https://upkg.com/@getbase/base/positio-helpers.css"><likrel="stylesheet"href="https://upkg.com/@getbase/base/typography-helpers.css"></head><body><p>Base!</p></body></html>CSS导入/*ImportBase*/@importurl("https://upkg.com/@getbase/base/core.css");/*ImportBaseCommo*/@importurl("https://upkg.com/@getbase/base/code.css");@importurl("https://upkg.com/@getbase/base/forms.css");@importurl("https://upkg.com/@getbase/base/tables.css");@importurl("https://upkg.com/@getbase/base/typography.css");@importurl("https://upkg.com/@getbase/base/headigs.css");/*AddYourWebsite/AppStyles*//*...*//*AddAdditioalModules*/@importurl("https://upkg.com/@getbase/base/cotaiers.css");@importurl("https://upkg.com/@getbase/base/grid.css");@importurl("https://upkg.com/@getbase/base/horizotal-spacers.css");@importurl("https://upkg.com/@getbase/base/vertical-spacers.css");@importurl("https://upkg.com/@getbase/base/spacers.css");@importurl("https://upkg.com/@getbase/base/display-helpers.css");@importurl("https://upkg.com/@getbase/base/flex-helpers.css");@importurl("https://upkg.com/@getbase/base/positio-helpers.css");@importurl("https://upkg.com/@getbase/base/typography-helpers.css");SCSS导入/*ImportBase*/@import"~@getbase/base/scss/_mixis";@import"~@getbase/base/scss/core";/*ImportBaseCommo*/@import"~@getbase/base/scss/code";@import"~@getbase/base/scss/forms";@import"~@getbase/base/scss/tables";@import"~@getbase/base/scss/typography";@import"~@getbase/base/scss/headigs";/*AddYourWebsite/AppStyles*/@import"mai";//AddAdditioalModules@import"~@getbase/base/scss/cotaiers";@import"~@getbase/base/scss/grid";@import"~@getbase/base/scss/horizotal-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/positio-helpers";LESS导入/*ImportBase*/@import"~@getbase/base/less/_mixis";@import"~@getbase/base/less/core";/*ImportBaseCommo*/@import"~@getbase/base/less/code";@import"~@getbase/base/less/forms";@import"~@getbase/base/less/tables";@import"~@getbase/base/less/typography";@import"~@getbase/base/less/headigs";/*AddYourWebsite/AppStyles*/@import"mai";//AddAdditioalModules@import"~@getbase/base/less/cotaiers";@import"~@getbase/base/less/grid";@import"~@getbase/base/less/horizotal-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/positio-helpers";

功能介绍

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

声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态

评论