bitstyles 0.8.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 7a483a85b0d8fb36fc6d843a31ca7b6171bfd670
+  data.tar.gz: c8ec427baa516f453b152c9f91a343092553d1d6
+SHA512:
+  metadata.gz: ea9dd48e5f8928a77069976982c36f7aae008f64b2ea9ef2f0b76eff6874bb1b1eb16a835e91f775c8e4188a318980951d3c8a66b8f44b04473df0579416efa7
+  data.tar.gz: 00fd08609acaeba3712fae4a241f64db4b76aa4f517f2d78636c692aa49a746926b0f838d8b04ef7c59775d3cdecc99c3931b4a9e13f4c6433c6a34e2eed21e9

data/.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+build
+styleguide
+backstop_data
+specificity_graph

data/.eslintrc

@@ -0,0 +1,4 @@
+{
+  "root": true,
+  "extends": "bitcrowd-base"
+}

data/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,20 @@
+### Summary
+
+Fixes # .
+
+The following changes are contained in this pull request:
+- x
+- y
+- z
+
+### Changes to objects & trumps
+
+- [ ] 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
+
+### Linting and testing
+
+- [ ] `npm run test` script has been run and visual tests pass
+- [ ] `npm run checks` script has been run without errors

data/.gitignore

@@ -0,0 +1,19 @@
+.sass-cache
+node_modules
+.npm
+npm-debug.log*
+/.bundle/
+/.yardoc
+/Gemfile.lock
+/_yardoc/
+/coverage/
+/doc/
+/pkg/
+/spec/reports/
+/tmp/
+
+styleguide/*
+bitmaps_test
+html_report
+ci_report
+specificity_graph

data/.nvmrc

@@ -0,0 +1 @@
+5.7

data/.stylelintrc

@@ -0,0 +1,166 @@
+{
+  "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",
+    ]
+  }
+}

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,49 @@
+# Contributor Code of Conduct
+
+As contributors and maintainers of this project, and in the interest of
+fostering an open and welcoming community, we pledge to respect all people who
+contribute through reporting issues, posting feature requests, updating
+documentation, submitting pull requests or patches, and other activities.
+
+We are committed to making participation in this project a harassment-free
+experience for everyone, regardless of level of experience, gender, gender
+identity and expression, sexual orientation, disability, personal appearance,
+body size, race, ethnicity, age, religion, or nationality.
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery
+* Personal attacks
+* Trolling or insulting/derogatory comments
+* Public or private harassment
+* Publishing other's private information, such as physical or electronic
+  addresses, without explicit permission
+* Other unethical or unprofessional conduct
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+By adopting this Code of Conduct, project maintainers commit themselves to
+fairly and consistently applying these principles to every aspect of managing
+this project. Project maintainers who do not follow or enforce the Code of
+Conduct may be permanently removed from the project team.
+
+This code of conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community.
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting a project maintainer at darren@bitcrowd.net. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. Maintainers are
+obligated to maintain confidentiality with regard to the reporter of an
+incident.
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 1.3.0, available at
+[http://contributor-covenant.org/version/1/3/0/][version]
+
+[homepage]: http://contributor-covenant.org
+[version]: http://contributor-covenant.org/version/1/3/0/

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in bitstyles.gemspec
+gemspec

data/LICENSE.txt

@@ -0,0 +1,7 @@
+ISC License (ISC)
+
+Copyright (c) 2016, Bitcrowd GmbH. <info@bitcrowd.net>
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

data/README.md

@@ -0,0 +1,251 @@
+# Bitstyles
+
+A developing collection of CSS styles and helpers, for use in Bitcrowd projects.
+
+## Using Bitstyles in a project
+
+Bitstyles can be added to your project via [npm](https://www.npmjs.com/) or [Bower](http://bower.io/), as each project demands.
+
+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.
+
+### Bower
+```shell
+bower install git@github.com:bitcrowd/bitstyles.git#0.7.5 --save
+```
+
+Once installed, you need to provide your sass installation with the path for bitstyles’ sass. This should be:
+
+```
+bower_components/bitstyles/scss
+```
+
+If you’re using gulp-sass, you can provide this path when `pipe`ing to sass:
+
+```javascript
+gulp.task('stylesheet', function(){
+  return gulp.src('app/css/main.scss')
+    .pipe(sass({
+      includePaths: ['bower_components/bitstyles/scss']
+    }).on('error', sass.logError));
+}
+```
+
+If you’re using Rails 4+, you can add this path to the asset pipeline in `config/initializers/assets.rb` where you see the commmented-out lines
+
+```ruby
+# Add additional assets to the asset load path
+# Rails.application.config.assets.paths << Emoji.images_path
+```
+
+Add the following:
+
+```ruby
+Rails.application.config.assets.paths << Rails.root.join("bower_components", "bitstyles", "bitstyles")
+```
+
+If you’re using a version of Rails previous to 4, you must instead add the path to the asset pipeline in `config/application.rb`:
+
+```ruby
+config.assets.paths << Rails.root.join("bower_components", "bitstyles", "bitstyles")
+```
+
+### npm
+```shell
+npm install git+ssh://github.com/bitcrowd/bitstyles.git#0.7.5 --save
+```
+
+Once installed, you need to provide your sass installation with the path for bitstyles’ sass. This should be:
+
+```
+node_modules/bitstyles/scss
+```
+
+If you’re using gulp-sass, you can provide this path when `pipe`ing to sass:
+
+```javascript
+gulp.task('stylesheet', function(){
+  return gulp.src('app/css/main.scss')
+    .pipe(sass({
+      includePaths: ['node_modules/bitstyles/scss']
+    }).on('error', sass.logError));
+}
+```
+
+If you’re using Rails 4+, you can add this path to the asset pipeline in `config/initializers/assets.rb` where you see the commmented-out lines
+
+```ruby
+# Add additional assets to the asset load path
+# Rails.application.config.assets.paths << Emoji.images_path
+```
+
+Add the following:
+
+```ruby
+Rails.application.config.assets.paths << Rails.root.join("node_modules", "bitstyles", "bitstyles")
+```
+
+If you’re using a version of Rails previous to 4, you must instead add the path to the asset pipeline in `config/application.rb`:
+
+```ruby
+config.assets.paths << Rails.root.join("node_modules", "bitstyles", "bitstyles")
+```
+
+### Rails gem
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem 'bitstyles'
+```
+
+And then execute:
+```shell
+bundle
+```
+
+Or install it yourself as:
+```shell
+gem install bitstyles
+```
+
+### 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:
+
+```scss
+@import 'bitstyles/settings/global.setup';
+@import 'bitstyles/settings/global.layout';
+@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.typography';
+
+// …
+
+@import 'bitstyles/objects/icon';
+// @import 'bitstyles/object/button';
+// @import 'bitstyles/object/button-icon';
+@import 'bitstyles/objects/absolute-center';
+```
+
+To change the css output by the library (e.g. standard margins, typographic scale, column count of the grid system…) you must override the variables used to build it. To do this declare any variables with your own values before including the bitstyles settings:
+
+```scss
+@import 'settings/icon-overrides';
+@import 'settings/grid-overrides';
+
+@import 'bitstyles/settings/global.setup';
+@import 'bitstyles/settings/global.layout';
+@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.typography';
+
+@import 'bitstyles/objects/icon';
+// @import 'bitstyles/object/button';
+// @import 'bitstyles/object/button-icon';
+@import 'bitstyles/objects/absolute-center';
+```
+
+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:
+
+```shell
+nvm use
+```
+will switch to the correct version of nodejs.
+
+Clone this repository, `cd` into the folder created, then install dependencies:
+
+```shell
+npm install
+```
+
+### Build
+To ensure your changes do not break the build, run
+
+```shell
+npm run watch
+```
+
+to recompile sass on every change.
+
+For a single one-off build, run
+
+```shell
+npm run build
+```
+
+## Testing
+### Installation
+CasperJS, PhantomJS, & BackstopJS all need to be installed globally:
+
+```shell
+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
+npm run styleguide
+```
+
+To test your changes against the known-good reference images run the tests:
+
+```shell
+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).
+
+### Before you create your PR
+
+Start up the styleguide (see the section below on testing for more information on this):
+
+```shell
+npm run styleguide
+```
+
+…then run the checks:
+
+```shell
+npm run checks
+```
+
+Once all tests pass, you’re good to go.
+
+#### New objects
+
+If you add new object scenarios to the `backstop.json`, backstop will complain if you try to run these tests without creating reference images for them.
+
+Start the styleguide server:
+
+```shell
+npm run styleguide
+```
+
+Then recreate the reference images:
+
+```shell
+npm run test:build
+```
+
+Check the new reference images match what you expect, then commit them and you’re done.

data/Rakefile

@@ -0,0 +1,2 @@
+require "bundler/gem_tasks"
+task :default => :spec

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "bitstyles"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/bitstyles.gemspec

@@ -0,0 +1,29 @@
+# coding: utf-8
+lib = File.expand_path('../lib', __FILE__)
+$LOAD_PATH.unshift(lib) unless $LOAD_PATH.include?(lib)
+require 'bitstyles/version'
+
+Gem::Specification.new do |spec|
+  spec.name          = "bitstyles"
+  spec.version       = Bitstyles::VERSION
+  spec.authors       = ["Darren Cadwallader", "Charlie Owen"]
+  spec.email         = ["info@bitcrowd.net"]
+
+  spec.summary       = %q{The CSS library of Bitcrowd GmbH.}
+  spec.homepage      = "https://github.com/bitcrowd/bitstyles"
+  spec.license       = "ISC"
+
+  if spec.respond_to?(:metadata)
+    spec.metadata['allowed_push_host'] = "https://rubygems.org"
+  else
+    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.bindir        = "exe"
+  spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
+  spec.require_paths = ["lib"]
+
+  spec.add_development_dependency "bundler", "~> 1.12"
+  spec.add_development_dependency "rake", "~> 10.0"
+end

data/bower.json

@@ -0,0 +1,31 @@
+{
+  "name": "bitstyles",
+  "description": "The Bitcrowd CSS library",
+  "main": "bitstyles.scss",
+  "authors": [
+    "Charlie Owen",
+    "Darren Cadwallader"
+  ],
+  "license": "ISC",
+  "keywords": [
+    "css",
+    "sass"
+  ],
+  "homepage": "https://github.com/bitcrowd/bitstyles",
+  "moduleType": [],
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "backstop_data",
+    "assets",
+    "styleguide",
+    "build",
+    "package.json",
+    "backstop.json",
+    "gulpfile.json",
+    "stats"
+  ]
+}

data/build/.gitignore

@@ -0,0 +1,4 @@
+# Ignore everything in this directory
+*
+# Except this file
+!.gitignore

data/lib/bitstyles/engine.rb

@@ -0,0 +1,9 @@
+module Bitstyles
+  class Engine < Rails::Engine
+
+    initializer 'bitstyles.assets.precompile' do |app|
+      app.config.assets.paths << root.join('scss').to_s
+    end
+
+  end
+end

data/lib/bitstyles/version.rb

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

data/lib/bitstyles.rb

@@ -0,0 +1,2 @@
+require "bitstyles/version"
+require "bitstyles/engine"