backpack.css
Advanced tools
A lightweight and somewhat opinionated CSS foundation that is best suited to applications 🎒.
A lightweight and somewhat opinionated CSS foundation that is best suited to applications.
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
backpack.css is pretty easy to use. 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.
import 'backpack.css';
import '[path(s)-to-your-project-css]';
If you're using webpack then use the tilde (~) prefix at the start of the path, e.g.:
@import '~backpack.css';
@import '[path(s)-to-your-project-css]';
Simply link to backpack.css using a <link> element in your HTML Head, e.g.:
<head>
[…]
<link rel="stylesheet" href="https://unpkg.com/backpack.css" />
<link rel="stylesheet" href="[path-to-your-project-css]" />
</head>
backpack.css is just CSS so you can easily override any of its 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 the global system font-stack defined in main-root.css then simply override it in your project CSS like so:
html {
font-family: serif;
}
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 and utilities. 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 🙂🎒.
border-box value for the box-sizing property to all elements.<input> so that everything is on an even playing field.And more…
All of the CSS is very well documentated if you want to dig deeper.
As mentioned above, backpack.css applies sensible OpenType features. However, due to the poor support of the font-variant- properties backpack.css has to declare their equivalents via the better supported, but harder to maintain, font-feature-settings property (the font-feature-settings properties should always come first).
Here are some resources on this:
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.
Here is the Browserslist query backpack.css uses:
last 4 versions and > 0.5%,
Firefox ESR,
not ie < 11,
not op_mini all,
not dead
Which you can see here.
Browserslist is used for Autoprefixer. Autoprefixer only adds a tiny amount of vendor prefixes, the main properties being prefixed are:
font-feature-settingsfont-variant-ligaturesThis doesn't mean that backpack.css cannot be used in browsers outside of the above Browserslist query, just that compatibility is ensured with the ones within the query.
Please see our contributing guidelines.
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 change log.
And anyone else who's been so kind to share their work out in the open.
❤️ open source.
The code is available under the MIT license.
FAQs
A lightweight and somewhat opinionated CSS foundation that is best suited to applications 🎒.
The npm package backpack.css receives a total of 900 weekly downloads. As such, backpack.css popularity was classified as not popular.
We found that backpack.css demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.