bitstyles 0.8.0 → 0.9.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 7a483a85b0d8fb36fc6d843a31ca7b6171bfd670
-  data.tar.gz: c8ec427baa516f453b152c9f91a343092553d1d6
+  metadata.gz: e91b59a2ab0679409414fe97fff3ec8c5b3430ac
+  data.tar.gz: 01a24c25ae1c3716c91fcf5366641430210c3110
 SHA512:
-  metadata.gz: ea9dd48e5f8928a77069976982c36f7aae008f64b2ea9ef2f0b76eff6874bb1b1eb16a835e91f775c8e4188a318980951d3c8a66b8f44b04473df0579416efa7
-  data.tar.gz: 00fd08609acaeba3712fae4a241f64db4b76aa4f517f2d78636c692aa49a746926b0f838d8b04ef7c59775d3cdecc99c3931b4a9e13f4c6433c6a34e2eed21e9
+  metadata.gz: c7c850dd1ed6ccd389334b87e9df4d5fa8220f26ca50f40123520d90906532a3d3f664104a99fa1926bf0b64fa3f41d7bed9e4d14b762f38caa682be3237b289
+  data.tar.gz: fb53c083d94793833b9ab4d1e6667c8d5012cafe7b112d8d1f1025ab941e700c0adba5abbde126153a7ac27d6571850346df404abe880d6b67369b952ed56e8a

data/.github/PULL_REQUEST_TEMPLATE.md

@@ -1,20 +1,16 @@
-### Summary
-
-Fixes # .
+Fixes #
 
 The following changes are contained in this pull request:
 - x
 - y
 - z
 
-### Changes to objects & trumps
+Delete if not applicable:
 
 - [ ] Styleguide documentation has been updated.
-- [ ] `backstop.json` file has been updated
-- [ ] `npm run test:build` script has been sucessfully run and new/changed images committed
-- [ ] `npm run stats` script run and updated `stats/css.json` commited
+- [ ] Changed tests in any of the `backstop_tests/` test suites.
+- [ ] Changed the visual appearance of object(s), or changed the tests? `npm run test:build` script has been successfully run and new/changed images checked visually for correctness and committed.
 
-### Linting and testing
+Every time:
 
-- [ ] `npm run test` script has been run and visual tests pass
-- [ ] `npm run checks` script has been run without errors
+- [ ] `npm run checks` script has been run without errors.

data/.nvmrc

@@ -1 +1 @@
-5.7
+6.9

data/.stylelintrc

@@ -1,166 +1,3 @@
 {
-  "extends": "stylelint-config-standard",
-  "rules": {
-    "at-rule-no-vendor-prefix": true,
-    "media-feature-name-no-vendor-prefix": true,
-    "property-no-vendor-prefix": true,
-    "selector-no-vendor-prefix": true,
-    "value-no-vendor-prefix": true,
-    "max-nesting-depth": 2,
-    "declaration-no-important": true,
-    "selector-no-id": true,
-    "declaration-block-no-duplicate-properties": true,
-    "no-unknown-animations": true,
-    "selector-no-type": true,
-    "no-descending-specificity": true,
-    "declaration-block-properties-order": [
-      "position",
-      "top",
-      "right",
-      "bottom",
-      "left",
-      "z-index",
-      "display",
-      "float",
-      "width",
-      "height",
-      "max-width",
-      "max-height",
-      "min-width",
-      "min-height",
-      "padding",
-      "padding-top",
-      "padding-right",
-      "padding-bottom",
-      "padding-left",
-      "margin",
-      "margin-top",
-      "margin-right",
-      "margin-bottom",
-      "margin-left",
-      "margin-collapse",
-      "margin-top-collapse",
-      "margin-right-collapse",
-      "margin-bottom-collapse",
-      "margin-left-collapse,",
-      "overflow",
-      "overflow-x",
-      "overflow-y,",
-      "clip",
-      "clear,",
-      "font",
-      "font-family",
-      "font-size",
-      "font-smoothing",
-      "osx-font-smoothing",
-      "font-style",
-      "font-weight",
-      "hyphens",
-      "src",
-      "line-height",
-      "letter-spacing",
-      "word-spacing,",
-      "color,",
-      "text-align",
-      "text-decoration",
-      "text-indent",
-      "text-overflow",
-      "text-rendering",
-      "text-size-adjust",
-      "text-shadow",
-      "text-transform,",
-      "word-break",
-      "word-wrap",
-      "white-space",
-      "vertical-align,",
-      "list-style",
-      "list-style-type",
-      "list-style-position",
-      "list-style-image,",
-      "pointer-events",
-      "cursor,",
-      "background",
-      "background-attachment",
-      "background-color",
-      "background-image",
-      "background-position",
-      "background-repeat",
-      "background-size,",
-      "border",
-      "border-collapse",
-      "border-top",
-      "border-right",
-      "border-bottom",
-      "border-left",
-      "border-color",
-      "border-image",
-      "border-top-color",
-      "border-right-color",
-      "border-bottom-color",
-      "border-left-color",
-      "border-spacing",
-      "border-style",
-      "border-top-style",
-      "border-right-style",
-      "border-bottom-style",
-      "border-left-style",
-      "border-width",
-      "border-top-width",
-      "border-right-width",
-      "border-bottom-width",
-      "border-left-width",
-      "border-radius",
-      "border-top-right-radius",
-      "border-bottom-right-radius",
-      "border-bottom-left-radius",
-      "border-top-left-radius",
-      "border-radius-topright",
-      "border-radius-bottomright",
-      "border-radius-bottomleft",
-      "border-radius-topleft,",
-      "content",
-      "quotes",
-      "outline",
-      "outline-offset",
-      "opacity",
-      "filter",
-      "visibility",
-      "size",
-      "zoom",
-      "transform",
-      "box-align",
-      "box-flex",
-      "box-orient",
-      "box-pack",
-      "box-shadow",
-      "box-sizing",
-      "table-layout",
-      "animation",
-      "animation-delay",
-      "animation-duration",
-      "animation-iteration-count",
-      "animation-name",
-      "animation-play-state",
-      "animation-timing-function",
-      "animation-fill-mode",
-      "transition",
-      "transition-delay",
-      "transition-duration",
-      "transition-property",
-      "transition-timing-function",
-      "background-clip",
-      "backface-visibility",
-      "will-change",
-      "resize",
-      "appearance",
-      "user-select",
-      "interpolation-mode",
-      "direction",
-      "marks",
-      "page",
-      "set-link-source",
-      "unicode-bidi",
-      "speak",
-    ]
-  }
+  "extends": "stylelint-config-bitcrowd"
 }

data/.travis.yml

@@ -0,0 +1,19 @@
+cache:
+  yarn: true
+  directories:
+    - node_modules
+language: node_js
+sudo: false
+before_install:
+  - curl -o- -L https://yarnpkg.com/install.sh | bash
+  - export PATH=$HOME/.yarn/bin:$PATH
+node_js:
+  - "6.9"
+install:
+  - gem uninstall bundler
+  - gem install bundler --version '1.12'
+  - yarn
+script:
+  - npm run lint
+  - npm run build
+  - npm run styleguide:build

data/README.md

@@ -1,18 +1,32 @@
 # Bitstyles
 
-A developing collection of CSS styles and helpers, for use in Bitcrowd projects.
+[![Build Status](https://travis-ci.org/bitcrowd/bitstyles.svg?branch=master)](https://travis-ci.org/bitcrowd/bitstyles)
+[![npm version](https://badge.fury.io/js/bitstyles.svg)](https://badge.fury.io/js/bitstyles)
+[![bower version](https://badge.fury.io/bo/bitstyles.svg)](https://badge.fury.io/bo/bitstyles)
+[![Gem Version](https://badge.fury.io/rb/bitstyles.svg)](https://badge.fury.io/rb/bitstyles)
 
-## Using Bitstyles in a project
+A collection of tiny Sass CSS objects and helpers, Bitstyles is intended to be used by reasonably CSS- & HTML-aware frontend developers. This is no simple drop-in solution to skin a website, like [Bootstrap](http://getbootstrap.com) or [Foundation](http://foundation.zurb.com), rather a collection of focused object-classes, each defining just a single visual aspect. By using these simple building blocks in your HTML, it’s possible to construct complex layouts without repeating CSS.
+
+For a certain set of elements in your UI, this strategy of applying multiple atomic classes eventually becomes untenable. This is generally for one of two reasons:
+- the elements are very often-repeated, so using one class instead of many would reduce chances of inconsistency or errors e.g. buttons, cards
+- the number of object classes on an element becomes unreadable in the HTML. This often also results in the appearance of the element becoming hard to reason about just from the HTML source, negating a large advantage of this approach in the first place.
 
-Bitstyles can be added to your project via [npm](https://www.npmjs.com/) or [Bower](http://bower.io/), as each project demands.
+For components which match these criteria it may make more sense to create component classes in your project to compose several of the simpler object classes (and whatever styling you may need on top). For this reason, all the object classes are also provided as Sass mixins — `@include` them in your own Sass components as needed.
 
-The source repository is currently private, and is not registered with the Bower
-or npm registries. You will therefore need to install directly from a tagged
-Github release (not from master), and you will need read access to the repo.
+Again unlike Bootstrap and Foundation, there are no javascript widgets or plugins included in Bitstyles.
+
+See the [Bitcrowd frontend styleguide](https://github.com/bitcrowd/frontend) for more details of the technical principles on which Bitstyles is built. The TL;DR: it’s a variation of the BEMATOMICOOCSS methodology:
+- BEM naming convention
+- Atomic CSS-inspired, the object classes aim to provide most functionality needed to create whichever layout or UI you need. Trump classes create the exceptions that inevitably occur.
+
+## Using Bitstyles in a project
+
+Bitstyles can be added to your project via [npm](https://www.npmjs.com/), [Bower](https://bower.io), or [RubyGems](https://rubygems.org).
 
 ### Bower
-```shell
-bower install git@github.com:bitcrowd/bitstyles.git#0.7.5 --save
+
+```sh
+bower install bitstyles --save
 ```
 
 Once installed, you need to provide your sass installation with the path for bitstyles’ sass. This should be:
@@ -52,8 +66,9 @@ config.assets.paths << Rails.root.join("bower_components", "bitstyles", "bitstyl
 ```
 
 ### npm
-```shell
-npm install git+ssh://github.com/bitcrowd/bitstyles.git#0.7.5 --save
+
+```sh
+npm install bitstyles --save
 ```
 
 Once installed, you need to provide your sass installation with the path for bitstyles’ sass. This should be:
@@ -101,15 +116,23 @@ gem 'bitstyles'
 ```
 
 And then execute:
-```shell
+```sh
 bundle
 ```
 
 Or install it yourself as:
-```shell
+```sh
 gem install bitstyles
 ```
 
+### Install an unpublished version
+
+If you need to install a version of bitstyles that’s so far unpublished (e.g. there’s a bugfix or feature that’s not in a published package yet), you can use the following:
+
+```sh
+npm install --save git+https://github.com/bitcrowd/bitstyles.git#master
+```
+
 ### Importing the sass to your project
 
 Copy the contents of the bitstyles manifest file (`bitstyles.scss`) to your project’s own sass manifest file (e.g. `app.scss`, `main.scss`) to make use of the entire library. Most likely you’ll not need everything in there, so comment-out the lines of objects you don’t need:
@@ -153,24 +176,30 @@ To change the css output by the library (e.g. standard margins, typographic scal
 
 For the complete list of variables you can override, look through the various files in the `bitstyles/settings/` folder.
 
-## Developing Bitstyles
-Bitstyles requires `node v5.7.0`. If you have [nvm](https://github.com/creationix/nvm) installed:
+## Contributing
+
+Bitstyles requires `node v5.7.0` or higher. If you have [nvm](https://github.com/creationix/nvm) installed:
 
-```shell
+```sh
 nvm use
 ```
 will switch to the correct version of nodejs.
 
 Clone this repository, `cd` into the folder created, then install dependencies:
 
-```shell
-npm install
+```sh
+git clone https://github.com/bitcrowd/bitstyles.git
+cd bitstyles
+yarn
 ```
 
+It is recommended to use [yarn](https://yarnpkg.com/en/docs/install) instead of `npm install` to ensure version consistency across dependencies.
+
 ### Build
+
 To ensure your changes do not break the build, run
 
-```shell
+```sh
 npm run watch
 ```
 
@@ -178,58 +207,62 @@ to recompile sass on every change.
 
 For a single one-off build, run
 
-```shell
+```sh
 npm run build
 ```
 
 ## Testing
+
 ### Installation
+
 CasperJS, PhantomJS, & BackstopJS all need to be installed globally:
 
-```shell
+```sh
 npm install -g phantomjs casperjs backstopjs
 ```
 
 ### Run tests
+
 The project uses the visual regression testing system [BackstopJS](https://garris.github.io/BackstopJS/) to compare screenshots of each object before & after changes are made. For existing objects, if there is no visual difference between the reference images and the newly-generated images, your changes are good. For new objects, create new reference images (see below) and commit them to the repo.
 
 #### Existing objects
+
 If you haven’t added a new object to the `backstop.json` file, you can simply run the tests against the already-existing reference images:
 
 Start the styleguide server and leave it running:
 
-```shell
+```sh
 npm run styleguide
 ```
 
 To test your changes against the known-good reference images run the tests:
 
-```shell
+```sh
 npm run test
 ```
 
-Short results from the comparison will be displayed on the command line, more detail is available from the in-browser report:
-
-```shell
-backstop openReport
-```
-
-Then go to [http://localhost:3001](http://localhost:3001).
+Results from the comparison will be displayed in your browser in an automatically-opened window.
 
 ### Before you create your PR
 
 Start up the styleguide (see the section below on testing for more information on this):
 
-```shell
+```sh
 npm run styleguide
 ```
 
 …then run the checks:
 
-```shell
+```sh
 npm run checks
 ```
 
+If you’ve made changes to the Sass source, also update the stats:
+
+```sh
+npm run css:stats
+```
+
 Once all tests pass, you’re good to go.
 
 #### New objects
@@ -238,13 +271,13 @@ If you add new object scenarios to the `backstop.json`, backstop will complain i
 
 Start the styleguide server:
 
-```shell
+```sh
 npm run styleguide
 ```
 
 Then recreate the reference images:
 
-```shell
+```sh
 npm run test:build
 ```
 

data/bitstyles.gemspec

@@ -19,7 +19,7 @@ Gem::Specification.new do |spec|
     raise "RubyGems 2.0 or newer is required to protect against public gem pushes."
   end
 
-  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features)/}) }
+  spec.files         = `git ls-files -z`.split("\x0").reject { |f| f.match(%r{^(test|spec|features|styleguide|scripts|build)/}) }
   spec.bindir        = "exe"
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = ["lib"]

data/lib/bitstyles/version.rb

@@ -1,3 +1,3 @@
 module Bitstyles
-  VERSION = "0.8.0"
+  VERSION = "0.9.1"
 end