Nickelback Plays Music

    @getbase/base

    5.2.0 • Public • Published

    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 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.

    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.

    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:

    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Your Website / App </title>
      <!-- Base Core -->
      <link rel="stylesheet" href="https://unpkg.com/@getbase/base/core.css">
      <!-- Base Common -->
      <link rel="stylesheet" href="https://unpkg.com/@getbase/base/code.css">
      <link rel="stylesheet" href="https://unpkg.com/@getbase/base/forms.css">
      <link rel="stylesheet" href="https://unpkg.com/@getbase/base/tables.css">
      <link rel="stylesheet" href="https://unpkg.com/@getbase/base/typography.css">
      <link rel="stylesheet" href="https://unpkg.com/@getbase/base/headings.css">
      <!-- Add Your Website / App Stylesheet -->
      <!-- ... -->
      <!-- Add Additional Modules -->
      <link rel="stylesheet" href="https://unpkg.com/@getbase/base/containers.css">
      <link rel="stylesheet" href="https://unpkg.com/@getbase/base/grid.css">
      <link rel="stylesheet" href="https://unpkg.com/@getbase/base/horizontal-spacers.css">
      <link rel="stylesheet" href="https://unpkg.com/@getbase/base/vertical-spacers.css">
      <link rel="stylesheet" href="https://unpkg.com/@getbase/base/spacers.css">
      <link rel="stylesheet" href="https://unpkg.com/@getbase/base/display-helpers.css">
      <link rel="stylesheet" href="https://unpkg.com/@getbase/base/flex-helpers.css">
      <link rel="stylesheet" href="https://unpkg.com/@getbase/base/position-helpers.css">
      <link rel="stylesheet" href="https://unpkg.com/@getbase/base/typography-helpers.css">
    </head>
    <body>
      <p>
        Base!
      </p>
    </body>
    </html>

    CSS Import:

    /* 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:

    /* 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:

    /* 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.


    Templates

    There are a collection of free 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.

    Install

    npm i @getbase/base

    Homepage

    getbase.org/

    DownloadsWeekly Downloads

    339

    Version

    5.2.0

    License

    MIT

    Unpacked Size

    304 kB

    Total Files

    58

    Last publish

    Collaborators

    • matthewhartman