Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/getbase/base

Base - A Rock Solid, Responsive CSS Framework built to work on all devices big, small and in-between.
https://github.com/getbase/base

Last synced: 24 days ago
JSON representation

Base - A Rock Solid, Responsive CSS Framework built to work on all devices big, small and in-between.

Host: GitHub
URL: https://github.com/getbase/base
Owner: getbase
Created: 2011-12-30T05:13:13.000Z (almost 13 years ago)
Default Branch: master
Last Pushed: 2023-04-18T10:44:37.000Z (over 1 year ago)
Last Synced: 2024-04-14T03:05:08.897Z (7 months ago)
Language: HTML
Homepage: http://getbase.org
Size: 20.8 MB
Stars: 1,249
Watchers: 66
Forks: 145
Open Issues: 3
Metadata Files:
- Readme: readme.md
- Changelog: changelog.md

Awesome Lists containing this project

awesome-starred-test - getbase/base - Base - A Rock Solid, Responsive CSS Framework built to work on all devices big, small and in-between. (HTML)
Awesome-CSS-Resources - base: - between. (Frameworks / Resources / B)
fucking-awesome-css-frameworks - Repo
awesome-css-frameworks - Repo

README

        # [Base](http://getbase.org)

### 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][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

* * *

## Table of contents

* [Overview](#overview)

* [Installation](#installation)

* [Documentation](#documentation)

* [Templates](#templates)

* [Support](#support)

* [Authors](#authors)

* [Credits](#credits)

* [License](#license)

* * *

## Overview

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.

* * *

## Installation

If you are creating a new project from scratch, it is recommended that you [use the base starter](https://github.com/getbase/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

  

  

  

    

    

    Your Website / App 

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

    

  

  

    


      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";

  ```

* * *

## Documentation

The best way to see what is inside Base is to view the [Styleguide](//unpkg.com/@getbase/base/index.html).

* * *

## Templates

There are a [collection of free templates built with Base](https://gumroad.com/getbase) 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](https://github.com/ai/browserslist#queries).

* * *

## Credits

* Thanks to [Nicolas Gallagher (@necolas)](https://github.com/necolas/) for (Normalize.css)[https://github.com/necolas/normalize.css/]

* * *

## Authors

#### Matthew Hartman

* [https://github.com/matthewhartman](https://github.com/matthewhartman)

* [https://twitter.com/matthewhartmans](https://twitter.com/matthewhartmans)

* * *

## License

Code released under the [MIT Open Source](https://opensource.org/licenses/MIT) license.