bitstyles 0.8.0 → 0.9.1

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bitstyles",
-  "version": "0.8.0",
+  "version": "0.9.1",
   "description": "The Bitcrowd CSS library",
   "main": "bitstyles.scss",
   "scripts": {
@@ -10,25 +10,30 @@
     "lint:js": "eslint .",
     "lint": "npm run lint:scss && npm run lint:js",
 
-    "test:build": "npm run test:build:base && npm run test:build:objects && npm run test:build:layout && npm run test:build:components && npm run test:build:trumps",
+    "test:build": "npm run test:build:base; npm run test:build:objects; npm run test:build:layout; npm run test:build:components; npm run test:build:trumps",
     "test:build:base": "backstop reference --configPath=test/backstop_tests/base.json",
     "test:build:objects": "backstop reference --configPath=test/backstop_tests/objects.json",
     "test:build:layout": "backstop reference --configPath=test/backstop_tests/layout.json",
     "test:build:components": "backstop reference --configPath=test/backstop_tests/components.json",
     "test:build:trumps": "backstop reference --configPath=test/backstop_tests/trumps.json",
 
-    "test": "npm run test:base && npm run test:layout && npm run test:objects && npm run test:components && npm run test:trumps",
+    "test": "npm run test:base; npm run test:layout; npm run test:objects; npm run test:components; npm run test:trumps",
     "test:base": "backstop test --configPath=test/backstop_tests/base.json",
     "test:objects": "backstop test --configPath=test/backstop_tests/objects.json",
     "test:layout": "backstop test --configPath=test/backstop_tests/layout.json",
     "test:components": "backstop test --configPath=test/backstop_tests/components.json",
     "test:trumps": "backstop test --configPath=test/backstop_tests/trumps.json",
 
-    "checks": "npm run lint && npm run test",
+    "checks": "npm run lint && npm run css:stats && npm run test",
+
     "prestyleguide": "npm run build && cat build/bitstyles.css styleguide/assets/stylesheets/styleguide-extras.css > build/bitstyles_styleguide.css",
-    "styleguide": "scripts/styleguide.sh",
+    "styleguide": "scripts/styleguide-server",
+    "prestyleguide:build": "npm run build && cat build/bitstyles.css styleguide/assets/stylesheets/styleguide-extras.css > build/bitstyles_styleguide.css",
+    "styleguide:build": "scripts/styleguide-build",
+
     "watch": "npm run build && npm run build -- --watch --recursive",
     "clean": "rimraf build/*",
+
     "precss:stats": "npm run build",
     "css:stats": "parker build/bitstyles.css --format=json > test/css-stats.json",
     "precss:graph": "npm run build",
@@ -60,24 +65,23 @@
   },
   "homepage": "https://github.com/bitcrowd/bitstyles#readme",
   "devDependencies": {
-    "autoprefixer": "^6.5.0",
-    "cssnano": "^3.7.7",
-    "eslint": "^3.7.1",
-    "eslint-config-bitcrowd": "0.0.3",
+    "autoprefixer": "^6.6.1",
+    "cssnano": "^3.10.0",
+    "eslint": "^3.13.1",
     "eslint-config-bitcrowd-base": "^8.0.0",
-    "eslint-plugin-import": "^1.16.0",
-    "node-sass": "^3.10.1",
+    "eslint-plugin-import": "^2.2.0",
+    "node-sass": "^4.3.0",
     "parker": "1.0.0-alpha.0",
-    "postcss": "^5.2.4",
+    "postcss": "^5.2.10",
     "postcss-bem-linter": "^2.6.0",
     "postcss-cli": "^2.6.0",
-    "postcss-reporter": "^1.4.1",
-    "postcss-scss": "^0.3.1",
+    "postcss-reporter": "^3.0.0",
+    "postcss-scss": "^0.4.0",
     "rimraf": "^2.5.4",
-    "sc5-styleguide": "^1.2.0",
+    "sc5-styleguide": "^1.5.0",
     "specificity-graph": "^0.1.7",
-    "stylelint": "^7.4.2",
-    "stylelint-config-standard": "^13.0.2"
+    "stylelint": "^7.7.1",
+    "stylelint-config-bitcrowd": "^1.1.0"
   },
   "files": [
     "scss"

data/scss/bitstyles.scss

@@ -1,6 +1,9 @@
 /* stylelint-disable max-empty-lines */
 // SETTINGS
-// Global settings & settings for each object below (if needed).
+// **Global settings**.
+//
+// These are just the variables required at a global level. Settings for each layout,
+// object, and component class are imported within those respective Sass files.
 //
 // * No CSS output *
 
@@ -12,7 +15,7 @@
 @import 'bitstyles/settings/global.breakpoints';
 @import 'bitstyles/settings/global.animation';
 @import 'bitstyles/settings/global.color-base';
-@import 'bitstyles/settings/global.color-theme';
+@import 'bitstyles/settings/global.color-palette';
 @import 'bitstyles/settings/global.typography';
 //
 // ******** Add global settings for your own project here ********
@@ -21,68 +24,52 @@
 
 // Tools: Functions & Mixins
 //
-// Mixins and functions. Includes mixins we later use to build objects e.g. at different breakpoints,
+// **Mixins and functions**.
+//
+// Includes mixins we later use to build objects e.g. at different breakpoints,
 // and some we use only in the background as utilities.
-// * No CSS output *
 //
-// Styleguide 2.0
-@import 'bitstyles/tools/zindex';
-@import 'bitstyles/tools/absolute-cover';
-@import 'bitstyles/tools/fixed-ratio';
-@import 'bitstyles/tools/media-query';
-@import 'bitstyles/tools/absolute-center';
-@import 'bitstyles/tools/vertical-center';
-@import 'bitstyles/tools/break-long-words';
-@import 'bitstyles/tools/truncate-with-ellipsis';
-@import 'bitstyles/tools/clearfix';
-@import 'bitstyles/tools/hidden';
-@import 'bitstyles/tools/visuallyhidden';
-@import 'bitstyles/tools/list-reset';
-@import 'bitstyles/tools/font-face';
-@import 'bitstyles/tools/width';
-@import 'bitstyles/tools/typography';
-@import 'bitstyles/tools/typography-conversions';
-@import 'bitstyles/tools/block';
-@import 'bitstyles/tools/flex';
-@import 'bitstyles/tools/media';
+// **No CSS output**
+//
+// Styleguide 1.0
+@import 'bitstyles/tools/all';
 //
 // ******** Add project-specific tools here ********
 //
 
 
 // ******** GENERIC
-// Low-specificity, far-reaching rulesets (e.g. resets, normalise.css, box-sizing).
-@import 'bitstyles/generic/box-sizing';
-@import 'bitstyles/generic/normalize';
+// These are the low-specificity, far-reaching rulesets (e.g. resets, normalise.css, box-sizing).
+@import 'bitstyles/generic/all';
 
 // Base
 //
-// Unclassed elements. (Directly selects elements e.g. `<a>`, `<blockquote>`, `<address>`).
+// Here we’re styling unclassed html elements directly  e.g. `<a>`, `<blockquote>`
+// `<address>`.
 //
 // sg-wrapper:
 // <div class="object-section">
 //   <sg-wrapper-content/>
 // </div>
 //
-// Styleguide 4.0
-@import 'bitstyles/base/typography';
-@import 'bitstyles/base/link';
-@import 'bitstyles/base/images';
-@import 'bitstyles/base/forms';    // FOR TESTING ONLY - Empty of styles
-@import 'bitstyles/base/media';    // FOR TESTING ONLY - Empty of styles
-@import 'bitstyles/base/hr';       // FOR TESTING ONLY - Empty of styles
-@import 'bitstyles/base/figure';   // FOR TESTING ONLY - Empty of styles
+// Styleguide 2.0
+@import 'bitstyles/base/all';
 
 // Layout
 //
-// Classes that enable the high-level layout of a page.
+// **Create the high-level layout of a page**.
+//
+// Classes that take care of common layouts e.g. centred page content with some
+// padding at the sides so content doesn’t hit viewport edges, HTML grid system.
+//
+// Layout classes should be selectively imported.
 //
 // sg-wrapper:
 // <div class="object-section">
 //   <sg-wrapper-content/>
 // </div>
 //
-// Styleguide 5.0
+// Styleguide 3.0
 @import 'bitstyles/layout/content';
 @import 'bitstyles/layout/grid';
 @import 'bitstyles/layout/width';
@@ -90,15 +77,23 @@
 
 // Objects
 //
-// Objects, abstractions, and design patterns (e.g. .media, .icon, .button). Cosmetic-free.
-// These are intended to be reused throughout the site, composed together as needed e.g. <div class="button expander-toggle"></div>
+// **Objects, abstractions, and design patterns**
+// (e.g. .o-media, .o-icon, .o-button).
+//
+// Relatively cosmetic-free (colours can be specified by overriding relevant variables),
+// the object classes are layout patterns intended to be reused throughout the site
+// and composed together as needed.
+//
+// e.g. `<button class="o-button o-truncate-with-ellipsis"></button>` to create
+// a clickable button with interactive states, a large click area, and button-y
+// appearance, that also truncates its text when it’s too long for the button width.
 //
 // sg-wrapper:
 // <div class="object-section">
 //   <sg-wrapper-content/>
 // </div>
 //
-// Styleguide 1.0
+// Styleguide 4.0
 @import 'bitstyles/objects/icon';
 @import 'bitstyles/objects/button';
 @import 'bitstyles/objects/button--icon';
@@ -113,6 +108,7 @@
 @import 'bitstyles/objects/visuallyhidden';
 @import 'bitstyles/objects/flex';
 @import 'bitstyles/objects/bordered-header';
+@import 'bitstyles/objects/list-inline';
 @import 'bitstyles/objects/list-reset';
 @import 'bitstyles/objects/typography';
 @import 'bitstyles/objects/media';
@@ -120,6 +116,8 @@
 @import 'bitstyles/objects/input';
 @import 'bitstyles/objects/label';
 @import 'bitstyles/objects/link';
+@import 'bitstyles/objects/overflow';
+@import 'bitstyles/objects/object-cover';
 //
 // ******** Add project-specific low-level objects here ********
 //
@@ -127,14 +125,19 @@
 
 // Components
 //
-// Chunks of UI e.g. the structure for a page type, a single block of UI composed of smaller objects.
+// **Chunks of UI and structure for a reusable page element**
+//
+// Normally containing smaller objects e.g. a header or sidebar element.
+//
+// These are quite project-specific so bitstyles only includes a few very
+// generally-used components such as modals.
 //
 // sg-wrapper:
 // <div class="object-section">
 //   <sg-wrapper-content/>
 // </div>
 //
-// Styleguide 6.0
+// Styleguide 5.0
 @import 'bitstyles/components/modal';
 @import 'bitstyles/components/expander';
 //
@@ -144,14 +147,19 @@
 
 // Trumps
 //
-// High-specificity overrides and helper classes (e.g. .hidden {}). `!important` exists here.
+// **High-specificity overrides and helper classes**
+// These can be used to create exceptions to an object or component’s standard styles
+// e.g. `.t-margin--left` to add margin to an element that would otherwise have
+// margin set to zero.
+//
+// `!important` sometimes exists here, and that’s ok as no styles should follow this section.
 //
 // sg-wrapper:
 // <div class="object-section">
 //   <sg-wrapper-content/>
 // </div>
 //
-// Styleguide 3.0
+// Styleguide 6.0
 @import 'bitstyles/trumps/text-weight';
 @import 'bitstyles/trumps/text-align';
 @import 'bitstyles/trumps/text-style';

data/scss/bitstyles/base/_all.scss

@@ -0,0 +1,7 @@
+@import 'typography';
+@import 'link';
+@import 'images';
+@import 'forms';
+@import 'media';    // FOR TESTING ONLY - Empty of styles
+@import 'hr';       // FOR TESTING ONLY - Empty of styles
+@import 'figure';   // FOR TESTING ONLY - Empty of styles

data/scss/bitstyles/base/_figure.scss

@@ -6,4 +6,4 @@
 //   <figcaption>An image at 16:9 aspect ratio</figcaption>
 // </figure>
 //
-// Styleguide 4.13
+// Styleguide 2.1

data/scss/bitstyles/base/_forms.scss

@@ -1,48 +1,53 @@
+/* stylelint-disable selector-no-type */
 // Forms
 //
-// Styleguide 4.16
+// Styleguide 2.2
 
 // fieldset
 //
 // markup:
 // <fieldset><legend>Fieldset</legend></fieldset>
 //
-// Styleguide 4.16.1
+// Styleguide 2.2.1
 
 // input - text
 //
 // markup:
 // <input type="text" placeholder="Jelly cake marshmallow">
 //
-// Styleguide 4.16.2
+// Styleguide 2.2.2
 
 // input - email
 //
 // markup:
 // <input type="email" placeholder="jellycake@marshmallow.com">
 //
-// Styleguide 4.16.3
+// Styleguide 2.2.3
 
 // input - number
 //
 // markup:
 // <input type="number" placeholder="123456789">
 //
-// Styleguide 4.16.4
+// Styleguide 2.2.4
 
 // input - range
 //
 // markup:
 // <input type="range" min="0" max="10" step="1">
 //
-// Styleguide 4.16.5
+// Styleguide 2.2.5
 
 // textarea
 //
 // markup:
 // <textarea>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</textarea>
 //
-// Styleguide 4.16.6
+// Styleguide 2.2.6
+
+textarea {
+  resize: vertical;
+}
 
 // select
 //
@@ -53,130 +58,130 @@
 //   <option value="value3">Value 3</option>
 // </select>
 //
-// Styleguide 4.16.7
+// Styleguide 2.2.7
 
 // label
 //
 // markup:
 // <label>Jelly cake marshmallow. Pie cotton candy chupa chups marzipan liquorice cheesecake wafer.</label>
 //
-// Styleguide 4.16.8
+// Styleguide 2.2.8
 
 // input - radio
 //
 // markup:
 // <input type="radio">
 //
-// Styleguide 4.16.9
+// Styleguide 2.2.9
 
 // input - checkbox
 //
 // markup:
 // <input type="checkbox">
 //
-// Styleguide 4.16.10
+// Styleguide 2.2.10
 
 // input - button
 //
 // markup:
 // <input type="button" value="Button">
 //
-// Styleguide 4.16.11
+// Styleguide 2.2.11
 
 // input - color
 //
 // markup:
 // <input type="color">
 //
-// Styleguide 4.16.12
+// Styleguide 2.2.12
 
 // input - date
 //
 // markup:
 // <input type="date">
 //
-// Styleguide 4.16.13
+// Styleguide 2.2.13
 
 // input - datetime-local
 //
 // markup:
 // <input type="datetime-local">
 //
-// Styleguide 4.16.14
+// Styleguide 2.2.14
 
 // input - file
 //
 // markup:
 // <input type="file">
 //
-// Styleguide 4.16.15
+// Styleguide 2.2.15
 
 // input - image
 //
 // markup:
 // <input type="image" src="assets/images/placeholder_button.png" alt="Image">
 //
-// Styleguide 4.16.16
+// Styleguide 2.2.16
 
 // input - month
 //
 // markup:
 // <input type="month">
 //
-// Styleguide 4.16.17
+// Styleguide 2.2.17
 
 // input - password
 //
 // markup:
 // <input type="password" value="Password">
 //
-// Styleguide 4.16.18
+// Styleguide 2.2.18
 
 // input - reset
 //
 // markup:
 // <input type="reset">
 //
-// Styleguide 4.16.19
+// Styleguide 2.2.19
 
 // input - search
 //
 // markup:
 // <input type="search">
 //
-// Styleguide 4.16.20
+// Styleguide 2.2.20
 
 // input - submit
 //
 // markup:
 // <input type="submit" value="Submit">
 //
-// Styleguide 4.16.21
+// Styleguide 2.2.21
 
 // input - tel
 //
 // markup:
 // <input type="tel">
 //
-// Styleguide 4.16.22
+// Styleguide 2.2.22
 
 // input - time
 //
 // markup:
 // <input type="time">
 //
-// Styleguide 4.16.23
+// Styleguide 2.2.23
 
 // input - url
 //
 // markup:
 // <input type="url">
 //
-// Styleguide 4.16.24
+// Styleguide 2.2.24
 
 // input - week
 //
 // markup:
 // <input type="week">
 //
-// Styleguide 4.16.25
+// Styleguide 2.2.25