Lightweight and minimal code. Spend less time overriding styles and focus more time on creating beautiful website applications.

Welcome to Base!

Whether you’re building a new web application from scratch or creating a mobile-first, responsive website, Base is very easy to learn and use.

Getting started

Before diving into Base, please make sure you have the following tools and basic knowledge:

  • Good understanding of HTML and CSS
  • A good code editor such as Sublime Text Editor
  • Latest installation of Node and NPM
  • A calm and open mind 🙂

Installation

If you are creating a new project from scratch, it is highly recommended you download the base starter template.

Or you can clone the starter-template directly:

git clone https://github.com/matthewhartman/base-starter.git yourwebsite && cd yourwebsite && rm -rf .git npm install && npm start

Alternatively, if you have an existing project, simply install base using NPM:

npm install --save getbase

Once you have Base installed, you can include it into your website with one of the following methods:

Reference the CSS file directly into your website:
<link rel="stylesheet" href="node_modules/getbase/css/styles.css"/>
Import via SCSS file:
@import "node_modules/getbase/scss/base";

// Your website styles

@import "node_modules/getbase/scss/base/_helpers";
Import via LESS file:
@import "node_modules/getbase/less/base";

// Your website styles

@import "node_modules/getbase/scss/less/_helpers";

Grid

A mobile-first, 12 column grid built for all devices big and small. The syntax is simple and it works on all major browsers including Chrome, Safari, Firefox and Internet Explorer 8+.

Overview

Base includes a flexible, 12-column grid that scales and supports nesting so you can get started right away.


Creating a grid
  1. Create a new element with the class .clear applied to ensure the grid columns are grouped and cleared correctly.
  2. Columns can be created by adding new elements within .clear and applying appropriate column classes (.col-1 – .col-12).

Base is mobile-first, so code for small screens first, and larger devices will inherit those styles.


By default, Base caters for 4 viewports:
  • Mobile devices (breakpoint set at max 719px width)
  • Tablet devices (breakpoint set at max 980px width)
  • Desktop devices (breakpoint set at max 1140px width)
  • HD devices

Containers

There are 2 types of containers:

  • .container – has a set width, is center aligned and applies a 15px gutter padding (left and right)
  • .container-full – sets width to auto, is center aligned and applies a 15px gutter padding (left and right)

Animations

Check out the cool animations to give your website that pop!

Categories: Tools - CSS

0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *