Fleshing out the source files and setting up the general infrastructure

Author: chris-pearce

.editorconfig

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

.gitignore

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

.prettierrc

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

CHANGELOG.md

@@ -0,0 +1,3 @@
+# Changes to backpack.css 🎒
+
+## 1.0.0 (?? ??, 2018)

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2018-present, cssbackpack
+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

README.md

@@ -1,5 +1,5 @@
-# backpack 🎒
+# backpack.css 🎒
 
-A lightweight and somewhat opinionated CSS foundation that is best suited for applications.
+A lightweight and somewhat opinionated CSS foundation that is best suited to applications.
 
 ⚠️ Under development, version 1.0.0 coming soon.

index.css

@@ -1,11 +1,24 @@
 {
-  "name": "cssbackpack",
+  "name": "backpack.css",
+  "main": "backpack.css",
   "version": "0.0.0",
-  "description": "A lightweight and somewhat opinionated CSS foundation that is best suited for applications.",
-  "repository": "[email protected]:chris-pearce/backpack.git",
+  "description":
+    "A lightweight and somewhat opinionated CSS foundation that is best suited to applications 🎒.",
+  "scripts": {
+    "bundle":
+      "postcss src/index.css -u postcss-import --no-map -o dist/backpack.css",
+    "build": "npm run bundle",
+    "prebuild": "rimraf dist/"
+  },
+  "repository": "[email protected]:chris-pearce/backpack.css.git",
   "author": "Chris Pearce <[email protected]>",
   "license": "MIT",
   "dependencies": {
-    "normalize.css": "^7.0.0"
+    "normalize.css": "^8.0.0"
+  },
+  "devDependencies": {
+    "postcss-cli": "^5.0.0",
+    "postcss-import": "^11.1.0",
+    "rimraf": "^2.6.2"
   }
 }

package.json

@@ -0,0 +1,23 @@
+/**
+ * Content sectioning
+ * ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
+ */
+
+/**
+ * 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/content-sectioning.css

@@ -0,0 +1,112 @@
+/**
+ * Forms
+ * ⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺⎺
+ */
+
+/*
+ * 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 typically interactive.
+ * See: https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile.
+ */
+
+[role="button"] {
+  cursor: pointer;
+}