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.
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
- Thanks to Nicolas Gallagher (@necolas) for (Normalize.css)[https://github.com/necolas/normalize.css/]
Authors
Matthew Hartman
License
Code released under the MIT Open Source license.
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?
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.
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:
and now:
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):
Thanks.
text-align helpers
I would love to see responsive text-align helpers like this:
Mobile designs often need text to be centered but currently Base doesn't have tools to remove that on larger screens.
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 thecss
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.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
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.
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:
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.Feature request: .no-select
Sorry to bother again, but perhaps such helper could come handy, especially when creating web apps:
Btw, do you prefer pull request or it is better to post here?
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?
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.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:
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!