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

  • By Base
  • Last update: Dec 18, 2022
  • Comments: 13

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.

Github

https://github.com/getbase/base

Comments(13)

  • 1

    Push/pull

    I really do like the Base framework. I think it's neat. It gets the job done pretty well for me.

    However, I just feel that it could do with push/pull classes. Most frameworks have it. Why should Base not have it?

  • 2

    small proposed fix for issue #39

    I propose to move the the selectors .no-margin and .no-padding into _helper.scss so you don't have to include _grid.scss to compile base without error.

  • 3

    Matching name

    Hello!

    Since it's not necessary to add a col class for specify the number, now it's necessary to add "col" twice.

    I means, with 1.5, a column will be defined as follow:

    <div class="col two">Content</div>
    

    and now:

    <div class="col col-2">Content</div>
    

    As you can see, you have to ad it twice.

    You can make a rule on the css for add the floating and the margin to all the columns using something similar to that. (Apply to all the class names matching this rule):

    div[class^="col-"], div[class*=" col-"] {
        margin-left: 2%;
        float: left;
    }
    
    

    Thanks.

  • 4

    text-align helpers

    I would love to see responsive text-align helpers like this:

    // Mobile: _helpers.less already contains these:
    // Text Alignments
    // .text-left { text-align: left; }
    // .text-right { text-align: right; }
    // .text-center { text-align: center; }
    // .text-justify { text-align: justify; }
    
    // Tablet overrides
    .text-center-tablet {
      text-align: center;
    }
    
    .text-right-tablet {
      text-align: right;
    }
    .text-left-tablet {
      text-align: left;
    }
    
    // Desktop overrides
    .text-center-desktop {
      text-align: center;
    }
    
    .text-right-desktop {
      text-align: right;
    }
    .text-left-desktop {
      text-align: left;
    }
    

    Mobile designs often need text to be centered but currently Base doesn't have tools to remove that on larger screens.

  • 5

    Compiled version for distribution

    Would it be possible to provide a compiled version of the CSS again? In previous versions this was located in the dist directory (and later in the css directory), but the last version I could find that contains the compiled CSS is V3.52, which was released two years ago. It would be great to have a canonical version of the latest Base CSS source as a single CSS file.

  • 6

    Arrow mixins

    I use arrows a lot and I think a mixin can come handy.

    Here is the LESS version: http://codepen.io/rolandtoth/pen/jbjbEV?editors=110

    And the SCSS: http://codepen.io/rolandtoth/pen/GpbZgG?editors=110

  • 7

    Helpers: why at the bottom?

    Just out of curiosity, why are the helpers at the bottom of the main style.less file? I know it's easy to move it up but as it is now one can't globally override anything.

  • 8

    node_modules/@getbase/base: Command failed.

    Trying to install your framework using yarn and ran into the following

    Command: cp ./node_modules/normalize.css/normalize.css ./scss/normalize.scss && cp ./node_modules/normalize.css/normalize.css ./less/normalize.less Arguments:

    cp: cannot stat './node_modules/normalize.css/normalize.css': No such file or directory

  • 9

    Unify look of form fields

    Currently I only know what's visible in the documentation. There <select> fields are smaller (less height) than <input type="text"> fields. Wouldn't it be nice to make all input fields look similar by default? I'm looking for an appropriate CSS framework for an upcoming project and I saw that Skeleton does that and it looks nicer to me.

  • 10

    Feature request: .no-select

    Sorry to bother again, but perhaps such helper could come handy, especially when creating web apps:

    .no-select {
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      cursor: default;
    }
    

    Btw, do you prefer pull request or it is better to post here?

  • 11

    mobile-first?

    The base webiste says it's mobile-first, but looking at the less files, it seems it's desktop first, with media queries for tablets and desktop- or am I wrong?

  • 12

    Update Sass to avoind slash as division errors.

    This PR updates the operators used in sass/grid.scss as described in the Sass docs.

    As of Dart Sass 2.0.0 / will no longer be usable as division. This PR updates the codebase to be compatible for when that happens.

  • 13

    Activating Open Collective

    Hi, I'm making updates for Open Collective. Either you or another core contributor signed this repository up for Open Collective. This pull request adds financial contributors from your Open Collective https://opencollective.com/base ❤️

    What it does:

    • adds a badge to show the latest number of financial contributors
    • adds a banner displaying contributors to the project on GitHub
    • adds a banner displaying all individuals contributing financially on Open Collective
    • adds a section displaying all organizations contributing financially on Open Collective, with their logo and a link to their website

    P.S: As with any pull request, feel free to comment or suggest changes.

    Thank you for your great contribution to the Open Source community. You are awesome! 🙌 And welcome to the Open Collective community! 😊

    Come chat with us in the #opensource channel on https://slack.opencollective.com - great place to ask questions and share best practices with other Open Source sustainers!