getbase / base Goto Github PK

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

JavaScript 3.34% HTML 74.17% CSS 22.49%

base's Introduction

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.

Overview
Installation
Documentation
Templates
Support
Authors
Credits
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.

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.

base's People

Contributors

Stargazers

Watchers

Forkers

juancarloscruzd nunobentes luantruong devluis sahlie1985 matsnl65 sampc jentanbernardus pntrivedy aniss theanubhav bminaise paulreed79 sanji41 willyfc scottbrimberry ikennyfallas justinseaman lickasha joaorbp joshgillies gudzonskiyyastreb marszu chandanpasunoori iulyus beride andrewcull christhomson jonimms melbournevijay jeuris hirases umarmughal steelmonk underscoredesign mentorkadriu lysyi jailecoeu kublaj patmart innovand thasophearak allaniftrue faebser goelmo fdkuiper lgzhang rolandtoth leefish dhenson02 klaudit googleask kisshore10 zyj1022 skully78 voryxander wang-qiang pionl monw3c dangerdave007 rlugojr notenociz akadem12 austinvernsonger whcarter3 ink888 modulexcite mattc0m husseiny ekryski christopherhelix rjmcguire abdihaikal yunhuo ayarse mendesgabriel menor number0 enterstudio rasgo-cc samadmoizc8 aminbenselim turbowars overcome knan71 bikalab jerry-goodboy hirlysm831 gurkansahin mmarcellobat michelleborges davideicardi szbpython pikachule innaschdk carstenvilstru caromg sumonst21 bigbighead1 dresend

base's Issues

Layout classes

Hey,

I just want to know how you guys use margins with Base. Do you simply use the grid to do this?

If not, would it be useful to implement .margin-, .padding-, and/or .width- classes?

Thanks, Enoch

Can you add a PSD grid for Photoshop?

Thanks

Desktop Grid .container-full

Seems to be wrong:

.container-full {
max-width: $desktop-container;
margin-left: auto;
margin-right: auto;
}

should be

.container-full {
margin-left: auto;
margin-right: auto;
}

right?

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.

Update HTML Template Documentation

First of all — awesome job with Base! Thank you very much!

Second, the document titled HTML Template seems out‐of‐date and inconsistent with index.html.

The document reads:

Custom Modernizr
A custom build of Modernizr is included which checks support for JS, SVG, touch support and adds appropriate classes to the html element if the features are supported or unsupported

and

jQuery (Google CDN)
The latest jQuery version is included (referenced from Google's CDN) along with a local fallback for offline development.

There is no Modernizr in the HTML template. Based on the changelog, it was removed in 2.3.0.

And only a local copy of jQuery is referenced starting 6f3b8ab#diff-eacf331f0ffc35d4b482f1d15a887d3b.

Also,

NO-JS Class
By default, the html template has a .no-js class applied to the html tag. When JavaScript is active, Modernizr will re-write this class to .js. This allows fallback styles to be added quite easily when JavaScript is disabled.

and the no-js class seem to be no longer necessary.

Grid Demo

How do we use the grid? Can you show me an html snippet example with your grid applied?

How to reset push/pull?

Let's say I have an element with "push-tablet-2" but on "hd" size I need no push. So I would need a "push-hd-0" or "push-hd-none", but I found no similar classes to reset.

Am I missing something or is there no such feature? Any chance to add?

Creating a bower package

I think bower package would be helpful, any suggestions?

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?

More of a feature request, but couldnt find anywhere better to post this. But was interested in seeing if SASS/SCSS support would come back in the new v2 you have recently released? Been enjoying the v1 framework for a short while but had been using the SASS/SCSS version.

Thank you, Carl

.mobile-container and .mobile-container-full

Thanks for the wonderful library! Are these classes for internal use or are they supposed to be documented? There only seems to be documentation for .container.

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

Typo in main page header

Pretty sure you mean "solid" in https://github.com/matthewhartman/base/blob/gh-pages/index.html#L71 😉

Remove grid on breakpoint

Here is a use case:

ensure 1 col on mobile
ensure 2 cols on tablet
don't force columns on desktop and above (let items displayed as inline-block or float)

When I apply col-12 then is any way to remove the grid on desktop breakpoint and above?

A class that would set width: auto and float: none would be handy. Perhaps something like "col-none-desktop" could do the trick?

Positioning helpers for different screen sizes

I would love to see positioning helpers like relative-tablet, absolute-desktop, fixed-hd etc in the _helpers.
I use my own implementation and they often come handy.

For clearing them, classes like static-desktop could help.

Sass version generates too large headlines

I'm unsure if I'm the only one experiencing this issue (and therefore I haven't created a pull request for it yet), but it seems the SASS version mixins 16-doubles the size of the headlines. For instance, h1 is set to size "40" in the base.scss, causing the mixin to generate a font-size of 40 rem or 640px, which seems a bit large :)

To me, it just seems the pixelsize should be the version in base.scss, and then the rem size should be divided by 16 in the mixin.

Please let me know, if this makes no sense ;)

IE grid column calculate bug fix

Hi,

I'm using Base for a while now, and it's really working for me. Thanks for that.

I found out in my latest project that when I customize the grid, Internet Explorer (even the latest version) sometimes makes a column 0.001px too wide and pushes it down.

An easy fix for that:

.col-1 {
width: 8.33333%; // Fallback if calc() is not supported
width: calc(100% / 12 * 1) -0.001px;
width: -webkit-calc(100% / 12 * 1);
width: -moz-calc(100% / 12 * 1);
}

You might want to include it in the project.

Any thoughts on sass/scss-support?

Column name

I have a few difficulties with the naming of the grid system. Indeed the naming of the grid system uses words instead of numbers. I believe it's a problem because:

When I inspect the HTML code it seems a bit complex to draw a mental picture of the column system.
When I code, it seems a bit complex to use (not being a native English doesn't help) the grid system with characters instead of numbers.

Aiming to make the readability and the usability of the grid system better, I propose to change the naming convention. Instead of "seven" it will be something like "col-7".

Thoughts?
Charly

Disappeared rows and columns gutter width

Hello again!

I open issues every week but i don't wanna disturbe, just make Base better ;)

This time i'm wondered you removed the row classes. Now it's matter of the developer the work of setting the gutter width and the column padding?

I think could be great to set a default padding and gutter with the option to add some to set it to 0, with the class for example, no-gutterwhen needed or, override it on specific sections on each site.

Plus could be easier to set a custom width on the SASS or LESS files.

Exactly the same for the internal padding on each column.

I think i can do a fork for proposing this features i'm talking about.

Thanks again!

Display helpers for print stylesheet

It would be nice to have some very basic display helper classes for print stylesheets (since there's _print.less), eg.

".no-print"
".show-print-inline"
".show-print-inline"
".show-print-inline-block"

Of course there might be better names but I guess you got the idea.

Grid containers variables are set twice in SCSS

_variables.scss: lines 76-80 (Grid Containers) are duplicates of lines 70-74 and need to be removed.

P.S. Keep up your good work, Matthew! :)

Grid System Broken in IE7

The grid system doesn't appear to work in IE 7 anymore. I checked the grid example on the base website in IE 7 and that was broken as well.

!default in sass variables

May I suggest using !default for all the variables in Base? This way, it's easy to overwrite them in your own file, without having to modify a dependency for your project. It won't alter any of the functionality but makes the lives of those importing the scss code (for example, from a bower install) much easier.

See http://sass-lang.com/documentation/file.SASS_REFERENCE.html#variable_defaults_

So:

$base-background-color:                         #fff !default;
$base-font-family:                              sans-serif !default;
$base-font-size:                                16 !default;

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.

Documentation: Blockquote Variables color incorrect

@base-blockquote-color #424242 Font color applied to blockquotes
@base-blockquote-cite-color #424242 Font color applied to the blockquote cite

They have the same #hexcode, but their color is different.
Closer inspection pointed out the base-blockquote-cite-color should be #777777

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.

Update Documentation

TODO:

~~Update GulpJS Configuration Documentation~~
~~Update Assets Documentation~~
~~Other minor tweaks and fixes to layout~~

responsive nav bar

How do you make a responsive nav bar in this framework? Thank you.

Responsive floats

As I see there's only .right and .left but there are no.right-tablet and .left-desktop and such. Is this by design or just simply missing? :)

Sass line height error

Your Sass mixin for line-height is redeclaring font-size (v1.6)

[Proposal] Tag releases

Just to take a little control over versions, you could tag your releases on GitHub.

Thanks so much.

columns behaviour

hi,

when writing markup such as this;

<div class="container">
<div class="row clear">
<div class="col col-6 tablet-col-6 mobile-col-1-2">
<span>lorem ipsum</span>
</div>
</div>
</div>

it seems to only work with the tablet-layout (=filling out 12 columns width), but not for mobile or desktop. is there some kind of new way to do this, or am I missing something?

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?

about _grid.less ?

scss ?? ( LESS version )

Gulp-notify error

I don't understand why is it happens.
Just cloned your repo and wanted to start coding, but get this error

separating css into files

Any considerations to break it down to smaller pieces? I think it will be better to separate your all in one file into smaller pieces and have a config.less|scss to @import them in for build. That way it would be easier to manage.

Document for this version?

hi,
Could you host the documents for Base 1.8? Some days ago, I still see it.
Thank you.

Update Docs to Reflect Mobile First Update

This will be in the Base 2.0 release :)

The selector ".no-margin" was not found

I was trying to use some of your modules in a project and had a small issue:

Error: ".no-style-heading" failed to @extend ".no-margin".
       The selector ".no-margin" was not found.
       Use "@extend .no-margin !optional" if the extend should be able to fail.
        on line 116 of scss/base/_global.scss

I already have another grid system and was using base in the following way.

// import stuff from base

@import "base/variables";     // Global Variables
@import "base/mixins";       // Base Mixins
@import "base/resets";       // General Resets
@import "base/helpers";
@import "base/global";       // Global Typography and Headings
@import "base/forms";        // Forms, Input Types and Buttons
@import "base/buttons";      // Custom Base Buttons

Now the problem is found in _grid.scss on line 257+258.

Update or remove the npm package?

Hello!

Today I decided to install base via npm instead of the usual download.. But I saw the npm version is very outdated - https://www.npmjs.com/package/getbase

Do you think of updating it?

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.

tablet-media query does not work as expected

The media-query declaration in base/_tablet-grid.less looks like that:

@media only screen and (min-width: @tablet-breakpoint) and (max-width: @desktop-breakpoint - 1px) { ... @import "tablet-styles"}

But that didn't work for me. The code inside the brackets was never "executed", so the tablet-specific styles were never loaded.

I removed the - 1px and everything worked.

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?

.no-padding issue

After adding 'no-padding' class to column element this is overrided by 'col' class padding settings.

base font size?

How come if I change the $default-font-size in variables to 14px, in the browser the font is actually 16px? with no other styles etc applied...

Seems like it's something to do with the 1rem font size kicking in and it ignores the 14px, is this right? I know I can change the font-size mixin and get it to take out the rem size but I just wondered why and what was best to do?

Or should I just leave it as 16 default font, and then override it afterwards in my custom styles and bring it down to 14?

Thanks!

Sascha

Which version works as described in the documentation?

Hi Matthew,

could you tell me which version I should use? I saw that in the latest one are no rules for the .mobile-*.