Skip to content

Latest commit

 

History

History
175 lines (116 loc) · 5.32 KB

readme.md

File metadata and controls

175 lines (116 loc) · 5.32 KB
Raw

Base

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.

Travis Build Status David Dependencies Status

Table of contents

Overview

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.

Installation

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

CSS Import:

import url("https://cdn.rawgit.com/getbase/base/master/css/index.css");

SCSS Import:

/* Import Base */
@import "node_modules/@getbase/base/scss/index";
/* Your Other Styles */
@import "main"

LESS Import:

/* Import Base */
@import "node_modules/@getbase/base/scss/index";
/* Your Other Styles */
@import "main"

Documentation

Base includes the latest version of Normalize.css by default and includes a few Mixins to get you started.

SCSS

Variables

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

Mixins

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

LESS

Variables

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

Mixins

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

Demo

View page example with just Base stylesheet applied.

Modules and Components

Templates

There are a collection of premium templates built with Base which are available to download on Gumroad.

Support

  • IE10+ and all other modern browsers.
  • Please specify browsers you need to support in package.json according to browserslist docs.

Credits

Authors

Matthew Hartman

License

Code released under the MIT Open Source license.