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.

Overview
Installation
Documentation
Demo
Modules and Components
Templates
Support
Authors
Credits
License

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://unpkg.com/@getbase/base/index.css");

SCSS Import:

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

LESS Import:

/* Import Base */
@import "~@getbase/base/less/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.

Helpers (Applies to SCSS/LESS)

Helper Class	Purpose	Example	Outcome
`.sr`	Apply a class of `.sr` for screen reader copy	`<div class="sr">Content only visible to screen readers but hidden from the user</div>`	Hide element visually, but have it still available for screenreaders

SCSS

Variables

Variable	Purpose	Default
`$breakpoint-m`	Breakpoint value for medium devices (tablet)	`768px`
`$breakpoint-l`	Breakpoint value for large devices (desktop)	`980px`
`$breakpoint-x`	Breakpoint value for extra large devices (HD)	`1200px`

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 animate(time)`	Applies animation speed	`@include animate(2s)`	Animation will run for 2 seconds

LESS

Variables

Variable	Purpose	Default
`@breakpoint-m`	Breakpoint value for medium devices (tablet)	`768px`
`@breakpoint-l`	Breakpoint value for large devices (desktop)	`980px`
`@breakpoint-x`	Breakpoint value for extra large devices (HD)	`1200px`

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%
`.animate(time)`	Applies animation speed	`.animate(2s)`	Animation will run for 2 seconds

Demo

View page example with just Base stylesheet applied.

Modules and Components

Animations

Base Animations is a very thin layer which includes animations for fading in content.

Buttons

Base buttons is a very thin layer which includes styles for decorating buttons and links.

Containers

Base Containers is a very thin layer which contains styles for containers for all breakpoints.

Forms

Base Forms contains styles for inputs, textarea, radios, checkboxes and other form elements.

Grid

Base Grid contains styles for flex grids with rows and columns for your layout for all breakpoints.

Layout Helpers

Base Layout Helpers contains styles for resetting margins, resetting paddings, resetting floats, setting position types and flex helpers for all breakpoints.

Layout Spacers

Base Layout Spacers contains styles for adding spaced rows (.pad-top-5, .pad-bottom-20, etc) and spaced layout (.pad-5, .pad-20, etc) for all breakpoints.