@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 very thin layer which includes Normalize.css and a few mixins to get you started.
You can then include what you need on top of Base such as typography, grids, individual components, etc and make it yours.
If you are creating a new project from scratch, it is highly recommended that you use base starter.
git clone https://github.com/getbase/starter.git \
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 build on top of it by including your own custom styles or add the ready made modules
import url("https://cdn.rawgit.com/getbase/base/master/css/index.css");
/* Import Base */
@import "node_modules/@getbase/base/scss/index";
/* Your Other Styles */
@import "main"
/* Import Base */
@import "node_modules/@getbase/base/scss/index";
/* Your Other Styles */
@import "main"
Base includes the latest version of Normalize.css by default and includes a few Mixins to get you started.
| Variable | Purpose | Default |
|---|---|---|
$breakpoint-m | Breakpoint value for medium devices (tablet) | 740px |
$breakpoint-l | Breakpoint value for large devices (desktop) | 960px |
$breakpoint-x | Breakpoint value for extra large devices (HD) | 1120px |
| Mixin | Purpose | Example | Outcome |
|---|---|---|---|
@include breakpoint(x) | Apply a breakpoint for a particular device. Accepts values m, l and xl (m: medium, l: large, xl: extra large) | .box { @include breakpoint(m) { ... } } | Applies styles to .box for medium devices and up |
@include background-alpha(hex, percentage) | Applies a background color with opacity | @include background-alpha(#000, 50%) | Applies a background color of black with opacity set to 50% |
@include animation(time) | Applies animation speed | @include animation(2s) | Animation will run for 2 seconds |
| Variable | Purpose | Default |
|---|---|---|
@breakpoint-m | Breakpoint value for medium devices (tablet) | 740px |
@breakpoint-l | Breakpoint value for large devices (desktop) | 960px |
@breakpoint-x | Breakpoint value for extra large devices (HD) | 1120px |
| Mixin | Purpose | Example | Outcome |
|---|---|---|---|
.background-alpha(hex, percentage) | Applies a background color with opacity | .background-alpha(#000, 50%) | Applies a background color of black with opacity set to 50% |
.animation(time) | Applies animation speed | .animation(2s) | Animation will run for 2 seconds |
View page example with just Base stylesheet applied.
There are a collection of premium 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
Newly introduced telemetry in devenv 1.4 sparked a backlash over privacy concerns, leading to the removal of its AI-powered feature after strong community pushback.
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.