foot-locker-ui v0.12.0

FOOT LOCKER UI

This is a CSS Framework developed by FOOT LOCKER EUROPE.com GmbH. It provides the styles of common UI contents across all our internal applications.

Built on top of inuitcss.

Installation

Usually you want to install a UI package under devDependencies in package.json running $ npm install foot-locker-ui

After the package has been installed, simply import the styles in one of your scss files.

For SCSS version: @import "node_modules/foot-locker-ui/scss/main";

For minified CSS version: @import "node_modules/foot-locker-ui/css/foot-locker-ui.min";

Fonts & Font Faces

Foot Locker UI comes along with the following fonts:

• Roboto
• Roboto Condensed
• Google Material Design Icons

To be able to use them, copy the whole fonts folder to your domain space, so that your application has access to them:

http://localhost:4200/assets/fonts

EmberJS

Copy the whole fonts folder inside the assets folder of your Ember application:

ember-cli-build.js

const EmberApp = require('ember-cli/lib/broccoli/ember-app');
const pickFiles = require('broccoli-static-compiler');

module.exports = function (defaults) {
  ...

  const fonts = pickFiles('node_modules/foot-locker-ui/fonts', {
    srcDir: '/',
    destDir: '/assets/fonts',
  });

  return app.toTree([fonts]);
};

Once you started/restarted the Ember server, these changes will take effect.

Developing

Run $ gulp sass:watch to start watching changes. It will automatically fire the sass:lint and sass:minify gulp tasks, every time changes are being made.

Testing

Code styles and functionality of the SASS files are being tested by gulp JS. Execute tests by running $ yarn run test