A Rock Solid, Responsive CSS Framework built to work on all devices big, small and in-between.
npm install @getbase/baseLightweight and minimal code. Spend less time overriding styles and focus more time on creating beautiful website applications.
[![Travis Build Status][travis-img]][travis] [![David Dependencies Status][david-img]][david]
[travis-img]: https://img.shields.io/travis/getbase/base.svg?branch=master
[david-img]: https://img.shields.io/david/dev/getbase/base.svg?branch=master&label=dependencies
[travis]: https://travis-ci.org/getbase/base
[david]: https://david-dm.org/getbase/base?type=dev
*
* Overview
* Installation
* Documentation
* Templates
* Support
* Authors
* Credits
* License
*
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.
``bash`
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.
`bash`
npm install --save @getbase/base
Once you have Base installed, you can choose what to import and include your own custom styles.
#### HTML/CSS References:
`html`
Base!
#### CSS Import:
`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:
`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:
`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";
`
*
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.
*
* IE10+ and all other modern browsers.
* Please specify browsers you need to support in package.json` according to browserslist docs.
*
* Thanks to Nicolas Gallagher (@necolas) for (Normalize.css)[https://github.com/necolas/normalize.css/]
*
#### Matthew Hartman
* https://github.com/matthewhartman
* https://twitter.com/matthewhartmans
*
Code released under the MIT Open Source license.