Skip to content

Commit 9e08cef

Browse files
chris-pearcechris-pearce
committed
working on README and minor update to main-root.css
1 parent b11ee31 commit 9e08cef

3 files changed

Lines changed: 271 additions & 570 deletions

File tree

‎README.md‎

Lines changed: 13 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,15 @@ If you prefer [Yarn](https://yarnpkg.com/en/), use this command instead:
2929
yarn add backpack.css --dev
3030
```
3131

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-
```
32+
CDN version coming soon, see: https://github.com/chris-pearce/backpack.css/issues/15.
3933

4034
## How to use
4135

4236
Typically you'll be wanting to import all of backpack.css styles into your
4337
project but you do have the choice to be selective.
4438

4539
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
40+
project's CSS to ensure correct ordering of your styles and to be able to
4741
override any of backpack.css styles.
4842

4943
### Importing with a bundler
@@ -56,8 +50,7 @@ import 'backpack.css';
5650
import '[path-to-your-project-css]';
5751
```
5852

59-
If you want to be selective on what to import then simply `import` the
60-
backpack.css files you need, for example:
53+
If you want to be selective then simply `import` the backpack.css files you need, for example:
6154

6255
```js
6356
import 'backpack.css/resets.css';
@@ -67,55 +60,33 @@ import '[path-to-your-project-css]';
6760
```
6861

6962
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`.
63+
what `.css` files are available refer to backpack.css [`index.css`](src/index.css).
7164

7265
### Importing without a bundler
7366

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.
67+
CDN version coming soon, see:
68+
https://github.com/chris-pearce/backpack.css/issues/15.
9469

9570
### Overriding
9671

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.
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.
9975

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:
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:
10277

10378
```css
10479
html {
10580
font-family: serif;
10681
}
10782
```
10883

109-
As already mentioned above if you aren't needing entire modules
110-
11184
## Motivation
11285

11386
Nowadays I'm building [React](https://reactjs.org/) applications that have
11487
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
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
11990
concerns, especially layout. Instead I build components with a smidgen of global
12091
styles.
12192

@@ -131,7 +102,7 @@ _Coming soon…_
131102

132103
## Evolution
133104

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

@@ -142,23 +113,3 @@ getting smaller and smaller.
142113
## Browser support
143114

144115
_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 -->

‎src/main-root.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/**
2-
* 1. Set the font family of the entire document to use the new 'system-ui'
2+
* 1. Set the font family of the entire document to use the 'system-ui'
33
* `font-family` value.
44
* 2. Set the font size of the entire document using the default user-agent size
55
* which is typically 16px.
@@ -8,7 +8,7 @@
88
*/
99

1010
html {
11-
font-family: system-ui; /* 1 */
11+
font-family: system-ui, sans-serif; /* 1 */
1212
font-size: 1rem; /* 2 */
1313
line-height: 1.5; /* 3 */
1414
}

0 commit comments

Comments
 (0)