backpack.css

backpack.css 🎒

A lightweight and somewhat opinionated CSS foundation that is best suited to applications.

Table of contents

• Installation
• How to use
  • Importing with a bundler
  • Importing without a bundler
  • Overriding
• Motivation
• What it does
• Evolution
• Browser support
• Publishing
  • The breakdown of step 3
• Contributing
• Versioning

Installation

Run the following command using npm:

npm install backpack.css --save-dev

If you prefer Yarn, use this command instead:

yarn add backpack.css --dev

CDN version coming soon, see.

How to use

Typically you'll be wanting to import all of backpack.css styles into your project but you do have the choice to be selective. The one strict rule is that it must come before your project's CSS to ensure correct ordering of your styles and to be able to override any of backpack.css styles.

Importing with a bundler

If you're using a bundler such as webpack and wanting to import all of backpack.css then your projects entry point should look like this:

import 'backpack.css';
import '[path(s)-to-your-project-css]';

If you want to be selective then simply import the backpack.css files you need, for example:

import 'backpack.css/lib/resets.css';
import 'backpack.css/lib/content-sectioning.css';
import 'backpack.css/lib/forms.css';
import '[path(s)-to-your-project-css]';

The order at which you import each module is important, to see this order and what .css files are available refer to backpack.css index.css.

Importing without a bundler

CDN version coming soon, see. In the meantime you can link to the hosted version on UNPKG via a <link> element in your HTML Head, however, make sure it comes before your project's CSS.

Overriding

backpack.css is just CSS so you can easily override any of backpack.css styles just as you would override any CSS, as in, via the rules of the cascade and specificity.

For example, if you don't want to use system-ui as the global font-family set in main-root.css then simply redeclare it in your project CSS like so:

html {
  font-family: serif;
}

Motivation

Nowadays I'm building React applications that have highly componentised User Interfaces (UI) making use of native CSS layout mechanisms such as Flexbox and Grid. I'm no longer finding the need for heavy handed CSS frameworks that handle most of my UI concerns, especially layout. Instead I build components with a smidgen of global styles.

What I do need, however, are a bunch of smart and sensible foundational styles suited for applications that I would typically forget project to project—think Normalize.css and then some. Something that is lightweight, super easy to intergrate, and can easily be overriden or allow for modular use, thus giving birth to backpack.css 🙂.

What it does

• Removes margins, paddings, and borders from all elements except <input> so that everything is on an even playing field.
• Applies sensible form element resets and normalisations, e.g.: remove all user-agent styles from buttons.
• Makes all images responsive.
• Applies sensible interactive styles, e.g.: avoid 300ms click delay on touch devices.
• Applies foundational print styles.
• Applies the nicer border-box value to all elements.
• Removes list bullets.
• Applies sensible OpenType features, e.g.: enables lining numerals, tabular numerals, and slashed zero, for table content.

And more…

Evolution

This is the third CSS framework/library I've created. Looking at each one lets you see how UI development has evolved over the years with each iteration getting smaller and smaller.

1. Scally circa 2014
2. Shell circa 2016
3. backpack.css circa 2018

Browser support

• Chrome
• Edge
• Firefox
• Internet Explorer 11
• Safari 8+
• Opera

Not everything will work in Internet Explorer 11, e.g.: the system-ui font, however, anything that doesn't work will simply degrade gracefully.

It's recommended to have Autoprefixer setup as part of your projects build.

Publishing

Once new changes have been merged do the following:

1. Add all new changes to CHANGELOG.md making sure to follow the existing format.
2. Update the version number in index.css.
3. Run: npm version <update_type> --force where <update_type> is one of the semantic versioning release types: patch, minor, or major (see versioning).

The breakdown of step 3

1. Run the build script.
2. Add CHANGELOG.md and index.css modified in steps 1 and 2 to the version commit.
3. Change the version number in package.json.
4. Push the new version commit and tag up to the repository.
5. Clean the lib directory.
6. Publish the new version to the NPM registry.

Each step will only run if the one before it passed.

Contributing

CONTRIBUTING.MD coming soon, see.

Versioning

backpack.css is maintained under the Semantic Versioning guidelines. We'll do our best to adhere to those guidelines and strive to maintain backwards compatibility.

See the CHANGELOG.