@getbase/base
Advanced tools
A Rock Solid, Responsive CSS Framework built to work on all devices big, small and in-between.
Lightweight and minimal code. Spend less time overriding styles and focus more time on creating beautiful website applications.
Base itself is a pretty thin CSS framework built on top of Normalize CSS. Include what you need on top of Base such as custom typography, custom grids, components and make it yours.
If you are creating a new project from scratch, it is recommended that you use the base starter.
git clone https://github.com/getbase/starter.git --depth=1 \
new-website && cd new-website && rm -rf .git && \
npm install && npm start
For existing projects, simply install base using NPM.
npm install --save @getbase/base
Once you have Base installed, you can choose what to import and include your own custom styles.
<!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>
/* 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");
/* 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";
/* 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";
The best way to see what is inside Base is to view the Styleguide.
There are a collection of free templates built with Base which are available to download on Gumroad.
package.json according to browserslist docs.Code released under the MIT Open Source license.
FAQs
A Rock Solid, Responsive CSS Framework built to work on all devices big, small and in-between.
The npm package @getbase/base receives a total of 389 weekly downloads. As such, @getbase/base popularity was classified as not popular.
We found that @getbase/base demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
TC39 met in Seattle and advanced 9 JavaScript proposals, including three to Stage 4, introducing new features and enhancements for a future ECMAScript release.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.