showcar-core

ITCSS triangle:

1. globals - used with preprocessors and contain font, colors definitions, etc.
2. mixins - globally used mixins and functions. It’s important not to output any CSS in the first 2 layers.
3. generic - reset and/or normalize styles, box-sizing definition, etc. This is the first layer which generates actual CSS.
4. atoms - class-based selectors which define undecorated design patterns, for example media object known from OOCSS
5. utilities - utilities and helper classes with ability to override anything which goes before in the triangle, eg. hide helper class

General Principles:

• All our code look like a single person has typed it
• We don't use ID's for styling
• We avoid unnecessary nesting
• We keep specificity as low as possible
• We keep scope limited to thing we’re styling
• We avoid unnecessary unsetting of styles
• Entities we write are open for extension, but closed for modification
• We prevent leaking styles outside the component
• We prevent leaking styles inside the component

Project structure

• TODO

Development

Setup

brew install node # install node if you didn't do it before
brew install yarn # we use yarn instead of npm to manage node package dependencies
yarn global add gulp # install gulp globally
yarn install

Run dev server

Run server on http://localhost:3000/

gulp dev

Run tests

gulp test-css # run css specs (galen tests)
gulp test-js # run js tests (karma)
gulp test-all # run all tests and code style checks in a project

By default all tests run localy within Electron / Google Chrome.

Cross-browser testing with SauceLabs

Setup (once):

1. Set the following environment variables by adding lines below to your ~/.bash_profile:

# we use $USER env var value to have unique sauce connect tunnel names
export SAUCE_TUNNEL_ID=$USER
export SAUCE_ACCESS_KEY=[YOUR_SAUCELABS_ACCESS_KEY]
export SAUCE_USERNAME=[YOUR_SAUCELABS_USERNAME]

1. Restart your terminal session or apply ~/.bash_profile changes in existing terminal sessions:

source ~/.bash_profile

1. Install sauce-connect

brew install Caskroom/cask/sauce-connect

Run tests:

1. Launch SauceConnect tunnel in a separate terminal:

sc -i $USER

1. Start your tests:

SAUCE_ENABLED=true gulp test-all

Testing principles

• Each UI component (atom, molecule, organism) should have a layout spec:

  • Example specs can be found in the repo (see example here).
  • Galen framework is used for UI regression testing. Full galen spec language reference can be found in Galen documentation.

• All javascript code that is used by UI components should be covered with unit tests (see example here).

• All layout specs and javascript tests are executed cross-browser on TravisCI + SauceLabs. Current browser coverage matrix is:

  

Releases

TODO: explain how and when to release new version of NPM package. Add a badge to npm repo to the top

Contribute

Bug reports and pull requests are welcome! Please take a look at our contribution guideline for details.

License

The code is available as open source under the terms of the MIT License.