You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
A lightweight and somewhat opinionated CSS foundation that is best suited to
4
-
applications.
3
+
A lightweight and somewhat opinionated CSS foundation that is best suited to applications.
5
4
6
5
## Table of contents <!-- omit in toc -->
7
6
@@ -14,6 +13,10 @@ applications.
14
13
-[What it does](#what-it-does)
15
14
-[Evolution](#evolution)
16
15
-[Browser support](#browser-support)
16
+
-[Publishing](#publishing)
17
+
-[The breakdown of step 3](#the-breakdown-of-step-3)
18
+
-[Contributing](#contributing)
19
+
-[Versioning](#versioning)
17
20
18
21
## Installation
19
22
@@ -29,51 +32,41 @@ If you prefer [Yarn](https://yarnpkg.com/en/), use this command instead:
29
32
yarn add backpack.css --dev
30
33
```
31
34
32
-
CDN version coming soon, see: https://github.com/chris-pearce/backpack.css/issues/15.
35
+
CDN version coming soon, [see](https://github.com/chris-pearce/backpack.css/issues/15).
33
36
34
37
## How to use
35
38
36
-
Typically you'll be wanting to import all of backpack.css styles into your
37
-
project but you do have the choice to be selective.
38
-
39
-
The one strict rule backpack.css does have is that it must come before your
40
-
project's CSS to ensure correct ordering of your styles and to be able to
41
-
override any of backpack.css styles.
39
+
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.
42
40
43
41
### Importing with a bundler
44
42
45
-
If you're using a bundler such as [webpack](https://webpack.js.org/) and wanting
46
-
to import all of backpack.css then your app's entry point should look like this:
43
+
If you're using a bundler such as [webpack](https://webpack.js.org/) and wanting to import all of backpack.css then your projects entry point should look like this:
47
44
48
45
```js
49
46
import'backpack.css';
50
-
import'[path-to-your-project-css]';
47
+
import'[path(s)-to-your-project-css]';
51
48
```
52
49
53
50
If you want to be selective then simply `import` the backpack.css files you need, for example:
54
51
55
52
```js
56
-
import'backpack.css/resets.css';
57
-
import'backpack.css/content-sectioning.css';
58
-
import'backpack.css/forms.css';
59
-
import'[path-to-your-project-css]';
53
+
import'backpack.css/lib/resets.css';
54
+
import'backpack.css/lib/content-sectioning.css';
55
+
import'backpack.css/lib/forms.css';
56
+
import'[path(s)-to-your-project-css]';
60
57
```
61
58
62
-
The order at which you import each module is important, to see this order and
63
-
what `.css` files are available refer to backpack.css [`index.css`](src/index.css).
59
+
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`](src/index.css).
CDN version coming soon, [see](https://github.com/chris-pearce/backpack.css/issues/15). In the meantime you can link to the hosted version on [UNPKG](https://unpkg.com) via a `<link>` element in your HTML Head, however, make sure it comes before your project's CSS.
69
64
70
65
### Overriding
71
66
72
-
backpack.css is just CSS so you can easily override any of backpack.css styles
73
-
just as you would override any CSS, as in, via the rules of the cascade and
74
-
specificity.
67
+
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.
75
68
76
-
For example, if you didn'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:
69
+
For example, if you don't want to use `system-ui` as the global `font-family` set in [`main-root.css`](src/main-root.css) then simply redeclare it in your project CSS like so:
77
70
78
71
```css
79
72
html {
@@ -83,33 +76,69 @@ html {
83
76
84
77
## Motivation
85
78
86
-
Nowadays I'm building [React](https://reactjs.org/) applications that have
87
-
highly componentised User Interfaces (UI) making use of native CSS layout
88
-
mechanisms such as [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and
89
-
[Grid](https://css-tricks.com/snippets/css/complete-guide-grid/). I'm no longer finding the need for heavy handed CSS frameworks that handle most of my UI
90
-
concerns, especially layout. Instead I build components with a smidgen of global
91
-
styles.
79
+
Nowadays I'm building [React](https://reactjs.org/) applications that have highly componentised User Interfaces (UI) making use of native CSS layout mechanisms such as [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) and [Grid](https://css-tricks.com/snippets/css/complete-guide-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.
92
80
93
-
What I do need, however, are a bunch of smart and sensible foundational styles
94
-
suited for applications that I would typically forget project to project—think
95
-
[Normalize.css](http://necolas.github.io/normalize.css/) and then some.
96
-
Something that is lightweight, super easy to intergrate, and can easily be
97
-
overriden or allow for modular use, thus giving birth to backpack.css 🙂.
81
+
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](http://necolas.github.io/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 🙂.
98
82
99
83
## What it does
100
84
101
-
_Coming soon…_
85
+
- Removes margins, paddings, and borders from all elements except `<input>` so that everything is on an even playing field.
86
+
- Applies sensible form element resets and normalisations, e.g.: _remove all user-agent styles from buttons_.
- Applies the nicer `border-box` value to all elements.
91
+
- Removes list bullets.
92
+
- Applies sensible OpenType features, e.g.: _enables lining numerals, tabular numerals, and slashed zero, for table content_.
93
+
94
+
_And more…_
102
95
103
96
## Evolution
104
97
105
-
This is the third CSS framework/library I've created. Looking at each one
106
-
lets you see how UI development has evolved over the years with each iteration
107
-
getting smaller and smaller.
98
+
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.
Not everything will work in Internet Explorer 11, e.g.: the [`system-ui`](https://caniuse.com/#feat=font-family-system-uiZ) font, however, anything that doesn't work will simply degrade gracefully.
114
+
115
+
It's recommended to have [Autoprefixer](https://github.com/postcss/autoprefixer) setup as part of your projects build.
116
+
117
+
## Publishing
118
+
119
+
Once new changes have been merged do the following:
120
+
121
+
1. Add all new changes to [`CHANGELOG.md`](CHANGELOG.md) making sure to follow the existing format.
122
+
2. Update the version number in [`index.css`](src/index.css).
123
+
3. Run: `npm version <update_type>` where `<update_type>` is one of the semantic versioning release types: **patch**, **minor**, or **major** (see [versioning](#versioning)).
124
+
125
+
## The breakdown of step 3
126
+
127
+
1. Run the `build` script.
128
+
2. Add `CHANGELOG.md` and `index.css` modified in **steps 1** and **2** to the version commit.
129
+
3. Change the version number in [`package.json`](package.json).
130
+
4. Push the new version commit and tag up to the repository.
131
+
5. Clean the `lib` directory.
132
+
6. Publish the new version to the NPM registry.
133
+
134
+
_Each step will only run if the one before it passed._
backpack.css is maintained under the [Semantic Versioning guidelines](http://semver.org/). We'll do our best to adhere to those guidelines and strive to maintain backwards compatibility.
0 commit comments