Skip to content

Commit b11ee31

Browse files
chris-pearcechris-pearce
committed
pushing to v1
1 parent 03083ae commit b11ee31

15 files changed

Lines changed: 368 additions & 130 deletions

‎README.md‎

Lines changed: 162 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,164 @@
1-
# backpack.css 🎒
1+
# backpack.css 🎒 <!-- omit in toc -->
22

3-
A lightweight and somewhat opinionated CSS foundation that is best suited to applications.
3+
A lightweight and somewhat opinionated CSS foundation that is best suited to
4+
applications.
45

5-
⚠️ Under development, version 1.0.0 coming soon.
6+
## Table of contents <!-- omit in toc -->
7+
8+
- [Installation](#installation)
9+
- [How to use](#how-to-use)
10+
- [Importing with a bundler](#importing-with-a-bundler)
11+
- [Importing without a bundler](#importing-without-a-bundler)
12+
- [Overriding](#overriding)
13+
- [Motivation](#motivation)
14+
- [What it does](#what-it-does)
15+
- [Evolution](#evolution)
16+
- [Browser support](#browser-support)
17+
18+
## Installation
19+
20+
Run the following command using [npm](https://www.npmjs.com/):
21+
22+
```bash
23+
npm install backpack.css --save-dev
24+
```
25+
26+
If you prefer [Yarn](https://yarnpkg.com/en/), use this command instead:
27+
28+
```bash
29+
yarn add backpack.css --dev
30+
```
31+
32+
Or you can link to a minified version hosted on [CDNJS](https://cdnjs.com/about)
33+
but make sure it comes before any of your project's CSS:
34+
35+
```html
36+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/backpack.css/[version]/backpack.min.css" />
37+
<link rel="stylesheet" href="[path-to-your-project-css]" />
38+
```
39+
40+
## How to use
41+
42+
Typically you'll be wanting to import all of backpack.css styles into your
43+
project but you do have the choice to be selective.
44+
45+
The one strict rule backpack.css does have is that it must come before your
46+
project's CSS to ensure correct ordering of your styles and if you need to
47+
override any of backpack.css styles.
48+
49+
### Importing with a bundler
50+
51+
If you're using a bundler such as [webpack](https://webpack.js.org/) and wanting
52+
to import all of backpack.css then your app's entry point should look like this:
53+
54+
```js
55+
import 'backpack.css';
56+
import '[path-to-your-project-css]';
57+
```
58+
59+
If you want to be selective on what to import then simply `import` the
60+
backpack.css files you need, for example:
61+
62+
```js
63+
import 'backpack.css/resets.css';
64+
import 'backpack.css/content-sectioning.css';
65+
import 'backpack.css/forms.css';
66+
import '[path-to-your-project-css]';
67+
```
68+
69+
The order at which you import each module is important, to see this order and
70+
what `.css` files are available refer to backpack.css `index.css`.
71+
72+
### Importing without a bundler
73+
74+
Simply include a `<link>` element that references the
75+
[CDNJS](https://cdnjs.com/about) version of backpack.css, for example:
76+
77+
```html
78+
<html>
79+
<head>
80+
[…]
81+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/backpack.css/[version]/backpack.min.css" />
82+
<link rel="stylesheet" href="[path-to-your-project-css]" />
83+
</head>
84+
<body>
85+
[…]
86+
</body>
87+
<html>
88+
```
89+
90+
For better performance and versioning it's recommended to use the CDNJS version,
91+
however, you don't have to, you can
92+
[download](https://github.com/chris-pearce/backpack.css/archive/master.zip)
93+
backpack.css from Github.
94+
95+
### Overriding
96+
97+
backpack.css is just CSS so you can easily override any of backpack.css styles just as
98+
you would override any CSS, as in, via the rules of the cascade and specificity.
99+
100+
For example, if you didn't want to use `system-ui` as the global `font-family`
101+
set in `main-root.css` then simply redeclare it in your project's CSS like so:
102+
103+
```css
104+
html {
105+
font-family: serif;
106+
}
107+
```
108+
109+
As already mentioned above if you aren't needing entire modules
110+
111+
## Motivation
112+
113+
Nowadays I'm building [React](https://reactjs.org/) applications that have
114+
highly componentised User Interfaces (UI) making use of native CSS layout
115+
mechanisms such as
116+
[Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and
117+
[Grid](https://css-tricks.com/snippets/css/complete-guide-grid/). I'm no longer
118+
finding the need for heavy handed CSS frameworks that handle most of my UI
119+
concerns, especially layout. Instead I build components with a smidgen of global
120+
styles.
121+
122+
What I do need, however, are a bunch of smart and sensible foundational styles
123+
suited for applications that I would typically forget project to project—think
124+
[Normalize.css](http://necolas.github.io/normalize.css/) and then some.
125+
Something that is lightweight, super easy to intergrate, and can easily be
126+
overriden or allow for modular use, thus giving birth to backpack.css 🙂.
127+
128+
## What it does
129+
130+
_Coming soon…_
131+
132+
## Evolution
133+
134+
This is the third CSS framework/library I've created. Looking at each one really
135+
lets you see how UI development has evolved over the years with each iteration
136+
getting smaller and smaller.
137+
138+
1. [Scally](https://github.com/chris-pearce/scally) _circa 2014_
139+
2. [Shell](https://github.com/campaignmonitor/shell) _circa 2016_
140+
3. [backpack.css](https://github.com/chris-pearce/backpack.css) _circa 2018_
141+
142+
## Browser support
143+
144+
_Coming soon…_
145+
146+
<!-- ## What it does
147+
148+
- Applies sensible OpenType features to select elements. For example, table
149+
cells (`<td>`) have enabled:
150+
- _lining numerals_
151+
- _tabular numerals_
152+
- _slashed zero_
153+
- Resets all margins
154+
- each `.css` file is completely standalone -->
155+
156+
<!-- ## What it doesn't do
157+
158+
where's my utils, just create a component!
159+
160+
## TODO
161+
162+
* Explain headings
163+
* Sensible defaults, fixing bugs, improving a11y/UX, helping responsive,
164+
* https://hackernoon.com/the-coolest-react-ui-frameworks-for-your-new-react-app-ad699fffd651 -->

‎package.json‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,21 @@
22
"name": "backpack.css",
33
"main": "backpack.css",
44
"version": "0.0.0",
5-
"description":
6-
"A lightweight and somewhat opinionated CSS foundation that is best suited to applications 🎒.",
5+
"description": "A lightweight and somewhat opinionated CSS foundation that is best suited to applications 🎒.",
76
"scripts": {
8-
"bundle":
9-
"postcss src/index.css -u postcss-import --no-map -o dist/backpack.css",
7+
"bundle": "postcss src/index.css -u postcss-import --no-map -o dist/backpack.css",
108
"build": "npm run bundle",
119
"prebuild": "rimraf dist/"
1210
},
1311
"repository": "[email protected]:chris-pearce/backpack.css.git",
1412
"author": "Chris Pearce <[email protected]>",
1513
"license": "MIT",
1614
"dependencies": {
17-
"normalize.css": "^8.0.0"
15+
"normalize.css": "^8.0.0",
16+
"postcss-import": "^11.1.0"
1817
},
1918
"devDependencies": {
2019
"postcss-cli": "^5.0.0",
21-
"postcss-import": "^11.1.0",
2220
"rimraf": "^2.6.2"
2321
}
2422
}

‎src/content-sectioning.css‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,8 @@
1-
/**
2-
* Content sectioning
3-
* ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
4-
*/
5-
61
/**
72
* We scope our heading styles to classes instead of the `<hx>` element selector
83
* so our styles are not tied to their semantics, i.e., if you want a `<h4>` to
94
* look like a `<h2>` you can easily do this. All of the heading elements are
10-
* reset to have the same styles as the base copy.
11-
* See: https://medium.com/fed-or-dead/handling-headings-in-a-ui-component-library-2587de93c890
5+
* reset to have the same styles as the base copy. See: https://medium.com/fed-or-dead/handling-headings-in-a-ui-component-library-2587de93c890
126
*/
137

148
h1,

‎src/forms.css‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,3 @@
1-
/**
2-
* Forms
3-
* ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
4-
*/
5-
61
/*
72
* Override normalize.css's opinionated styles, `line-height` is set to
83
* 'normal' as that's what most user-agents use.
@@ -22,9 +17,9 @@ textarea {
2217
* 2. Remove rounded corners that iOS applies to all `<input>` buttons.
2318
*/
2419

25-
[type="submit"],
26-
[type="button"],
27-
[type="reset"],
20+
[type='submit'],
21+
[type='button'],
22+
[type='reset'],
2823
button {
2924
background: transparent; /* 1 */
3025
border: 0; /* 1 */
@@ -41,18 +36,18 @@ button {
4136
inputs.
4237
*/
4338

44-
[type="date"],
45-
[type="datetime-local"],
46-
[type="email"],
47-
[type="month"],
48-
[type="number"],
49-
[type="password"],
50-
[type="search"],
51-
[type="tel"],
52-
[type="text"],
53-
[type="time"],
54-
[type="url"],
55-
[type="week"] {
39+
[type='date'],
40+
[type='datetime-local'],
41+
[type='email'],
42+
[type='month'],
43+
[type='number'],
44+
[type='password'],
45+
[type='search'],
46+
[type='tel'],
47+
[type='text'],
48+
[type='time'],
49+
[type='url'],
50+
[type='week'] {
5651
background-clip: padding-box; /* 1 */
5752
padding: 0; /* 2 */
5853
}
@@ -107,6 +102,6 @@ body:not(:-moz-handler-blocked) fieldset {
107102
* See: https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile.
108103
*/
109104

110-
[role="button"] {
105+
[role='button'] {
111106
cursor: pointer;
112107
}

‎src/image-and-multimedia.css‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
1-
/**
2-
* Image and multimedia
3-
* ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
4-
*/
5-
61
/**
72
* Make all images responsive.
83
*
9-
* 1. Override the height to auto, otherwise images will be stretched when
4+
* 1. Override the height to 'auto', otherwise images will be stretched when
105
* setting a width and height attribute on the `<img>` element.
116
* 2. Set a maximum relative to the parent.
127
*/

‎src/index.css‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66

77
/**
88
* Contents
9-
* ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
109
*
1110
* 1. normalize.css ‡
1211
* 2. Resets
@@ -18,21 +17,20 @@
1817
* 8. Table content †
1918
* 9. Typography
2019
* 10. Interactive
21-
* 11. Utilities
20+
* 11. Print
2221
*
2322
* ‡ Comes from 'node_modules'.
24-
* † These section names come from MDN's HTML elements reference document.
25-
* See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element.
23+
* † Section names come from MDN's HTML elements reference document. See:
24+
* https://developer.mozilla.org/en-US/docs/Web/HTML/Element.
2625
*/
2726

28-
@import "normalize.css";
29-
@import "resets.css";
30-
@import "main-root.css";
31-
@import "forms.css";
32-
@import "content-sectioning.css";
33-
@import "text-content.css";
34-
@import "image-and-multimedia.css";
35-
@import "table-content.css";
36-
@import "typography.css";
37-
@import "interactive.css";
38-
@import "utilities.css";
27+
@import 'normalize.css';
28+
@import 'resets.css';
29+
@import 'main-root.css';
30+
@import 'forms.css';
31+
@import 'content-sectioning.css';
32+
@import 'text-content.css';
33+
@import 'image-and-multimedia.css';
34+
@import 'table-content.css';
35+
@import 'typography.css';
36+
@import 'interactive.css';

‎src/inline-text-semantics.css‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/*
2+
* Nicer underlines for text links.
3+
*/
4+
5+
a {
6+
text-decoration-skip: ink;
7+
}
8+
9+
/*
10+
* It's more common for `<em>`s to not to be italic.
11+
*/
12+
13+
em {
14+
font-style: normal;
15+
}
16+
17+
/*
18+
* Override normalize.css's '80%'' font size to be '100%'' as it's rare that we
19+
* want a `<small>` element's font size to be 'small'.
20+
*/
21+
22+
small {
23+
font-size: 100%;
24+
}

‎src/interactive.css‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
1-
/**
2-
* Interactive
3-
* ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
4-
*/
5-
61
/**
72
* Indicates that a label will shift focus to its associated control.
83
*/
94

10-
label {
5+
label[for] {
116
cursor: pointer;
127
}
138

@@ -19,7 +14,7 @@ label {
1914
* i.e., we always want this rule to take precedence.
2015
*/
2116

22-
[tabindex="-1"]:focus {
17+
[tabindex='-1']:focus {
2318
outline: none !important;
2419
}
2520

@@ -42,6 +37,6 @@ label,
4237
select,
4338
summary,
4439
textarea,
45-
[tabindex]:not([tabindex="-1"]) {
40+
[tabindex]:not([tabindex='-1']) {
4641
touch-action: manipulation;
4742
}

‎src/main-root.css‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,6 @@
11
/**
2-
* Main root
3-
* ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
4-
*
52
* 1. Set the font family of the entire document to use the new 'system-ui'
6-
* `font-family` value, cssnext will provide a fallback for non-supporting
7-
* user-agents. See: http://cssnext.io/features/#system-ui-font-family.
3+
* `font-family` value.
84
* 2. Set the font size of the entire document using the default user-agent size
95
* which is typically 16px.
106
* 3. Increase the line height from normalize.css's small '1.15' value. The

0 commit comments

Comments
 (0)