Merge pull request #19 from chris-pearce/v1

Version 1 🕺

Author: chris-pearce

.editorconfig

@@ -0,0 +1,10 @@
+[*]
+charset = utf-8
+end_of_line = lf
+indent_style = space
+indent_size = 2
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,10 @@
+# Folders and files
+node_modules/
+lib/
+npm-debug.log
+yarn-error.log
+
+# Dot files
+.cache
+.DS_Store
+.vscode

.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 80,
+  "proseWrap": "never",
+  "singleQuote": true,
+  "trailingComma": "es5"
+}

CHANGELOG.md

@@ -0,0 +1 @@
+# Changes to backpack.css 🎒

LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright © Chris Pearce
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -1,5 +1,144 @@
-# backpack.css 🎒
+# backpack.css 🎒 <!-- omit in toc -->
 
 A lightweight and somewhat opinionated CSS foundation that is best suited to applications.
 
-⚠️ Under development, version 1.0.0 coming soon.
+## Table of contents <!-- omit in toc -->
+
+- [Installation](#installation)
+- [How to use](#how-to-use)
+  - [Importing with a bundler](#importing-with-a-bundler)
+  - [Importing without a bundler](#importing-without-a-bundler)
+  - [Overriding](#overriding)
+- [Motivation](#motivation)
+- [What it does](#what-it-does)
+- [Evolution](#evolution)
+- [Browser support](#browser-support)
+- [Publishing](#publishing)
+  - [The breakdown of step 3](#the-breakdown-of-step-3)
+- [Contributing](#contributing)
+- [Versioning](#versioning)
+
+## Installation
+
+Run the following command using [npm](https://www.npmjs.com/):
+
+```bash
+npm install backpack.css --save-dev
+```
+
+If you prefer [Yarn](https://yarnpkg.com/en/), use this command instead:
+
+```bash
+yarn add backpack.css --dev
+```
+
+CDN version coming soon, [see](https://github.com/chris-pearce/backpack.css/issues/15).
+
+## 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](https://webpack.js.org/) and wanting to import all of backpack.css then your projects entry point should look like this:
+
+```js
+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:
+
+```js
+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`](src/index.css).
+
+### Importing without a bundler
+
+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.
+
+### 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`](src/main-root.css) then simply redeclare it in your project CSS like so:
+
+```css
+html {
+  font-family: serif;
+}
+```
+
+## Motivation
+
+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.
+
+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 🙂.
+
+## 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](https://github.com/chris-pearce/scally) _circa 2014_
+2.  [Shell](https://github.com/campaignmonitor/shell) _circa 2016_
+3.  [backpack.css](https://github.com/chris-pearce/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`](https://caniuse.com/#feat=font-family-system-uiZ) font, however, anything that doesn't work will simply degrade gracefully.
+
+It's recommended to have [Autoprefixer](https://github.com/postcss/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`](CHANGELOG.md) making sure to follow the existing format.
+2. Update the version number in [`index.css`](src/index.css).
+3. Run: `npm version <update_type>` where `<update_type>` is one of the semantic versioning release types: **patch**, **minor**, or **major** (see [versioning](#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`](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](https://github.com/chris-pearce/backpack.css/issues/10)._
+
+## Versioning
+
+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.
+
+See the [CHANGELOG](CHANGELOG.md).

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "backpack.css",
+  "main": "lib/backpack.css",
+  "version": "0.0.0",
+  "description": "A lightweight and somewhat opinionated CSS foundation that is best suited to applications 🎒.",
+  "keywords": [
+    "css",
+    "css-library",
+    "css-foundation",
+    "css-reset",
+    "css-normalise"
+  ],
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "bundle": "postcss src/index.css -u postcss-import --no-map -o lib/backpack.css",
+    "clean": "rimraf lib",
+    "copy": "cp -r src/* lib && rm lib/index.css",
+    "build": "yarn bundle && yarn copy",
+    "prebuild": "yarn clean",
+    "version": "npm run build && git add .",
+    "postversion": "git push && git push --tags && yarn clean && npm publish"
+  },
+  "repository": "[email protected]:chris-pearce/backpack.css.git",
+  "author": "Chris Pearce <[email protected]>",
+  "license": "MIT",
+  "devDependencies": {
+    "normalize.css": "^8.0.0",
+    "postcss-cli": "^6.0.0",
+    "postcss-import": "^12.0.0",
+    "prettier": "^1.14.3",
+    "rimraf": "^2.6.2"
+  }
+}

src/content-sectioning.css

@@ -0,0 +1,18 @@
+/**
+ * We scope our heading styles to classes instead of the `<hx>` element selector
+ * so our styles are not tied to their semantics, i.e., if you want a `<h4>` to
+ * look like a `<h2>` you can easily do this. All of the heading elements are
+ * 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
+ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: normal;
+  line-height: inherit;
+}

src/forms.css

@@ -0,0 +1,105 @@
+/*
+ * Override normalize.css's opinionated styles, `line-height` is set to 'normal'
+ * as that's what most user-agents use. See:
+ * https://github.com/necolas/normalize.css/issues/694.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  line-height: normal;
+}
+
+/*
+ * 1. Remove noticeable visual user-agent styles so we have a clean slate.
+ * 2. Remove rounded corners that iOS applies to all `<input>` buttons.
+ */
+
+[type='submit'],
+[type='button'],
+[type='reset'],
+button {
+  background: transparent; /* 1 */
+  border: 0; /* 1 */
+  border-radius: 0; /* 2 */
+  margin: 0; /* 1 */
+  padding: 0; /* 1 */
+}
+
+/*
+ * 1. Remove top inner shadow that iOS applies to all textual inputs. ✌︎ Credit
+ *    https://davidwalsh.name/input-shadows-ipad
+ * 2. Remove padding (mostly 1px) that most user-agents apply to all textual
+ *    inputs.
+ */
+
+[type='date'],
+[type='datetime-local'],
+[type='email'],
+[type='month'],
+[type='number'],
+[type='password'],
+[type='search'],
+[type='tel'],
+[type='text'],
+[type='time'],
+[type='url'],
+[type='week'] {
+  background-clip: padding-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/*
+ * Disable horizontal resizing.
+ */
+
+textarea {
+  resize: vertical;
+}
+
+/**
+ * Override a `<fieldset>`s default `min-width: min-content;` with the more
+ * standard `min-width: 0;` so it renders as a block element would.
+ *
+ * ✌︎ Credit https://thatemil.com/blog/2015/01/03/reset-your-fieldset.
+ */
+
+fieldset {
+  min-width: 0;
+}
+
+body:not(:-moz-handler-blocked) fieldset {
+  display: table-cell;
+}
+
+/**
+ * Remove the clear field button (an "X" icon) and the reveal password button
+ * (an "eye" icon) that is generated by IE 10+ for textual inputs. See:
+ * http://stackoverflow.com/a/21869433/1116204.
+ */
+
+::-ms-clear,
+::-ms-reveal {
+  display: none;
+}
+
+/**
+ * Un-style the caret for `<select>` lists in IE 10+.
+ */
+
+::-ms-expand {
+  background-color: transparent;
+  border: 0;
+}
+
+/**
+ * Fixes a bug in Safari Mobile 7.0+ where click events aren't fired on elements
+ * that aren't typißcally interactive. See:
+ * https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile.
+ */
+
+[role='button'] {
+  cursor: pointer;
+}

src/image-and-multimedia.css

@@ -0,0 +1,12 @@
+/**
+ * Make all images responsive.
+ *
+ * 1. Override the height to 'auto', otherwise images will be stretched when
+ *    setting a width and height attribute on the `<img>` element.
+ * 2. Set a maximum relative to the parent.
+ */
+
+img {
+  height: auto; /* 1 */
+  max-width: 100%; /* 2 */
+}