CORED Design Theory

  • GOOD DESIGN MAKES A PRODUCT USEFUL (DIETER RAMS)
  • Simplexity: Try to use as little different visual elements as possible
  • First impression, The all over look and feel, should be stunning!
  • Every interaction area should have a visual hover effect.
  • if possible combine multiple visual elements to enhance legibility. E.g. combine color with pattern with icon with text.
  • Every Page should have a clear visual hirachy
  • Value the User, value the Community, value the customer! Think about how People can feel better when they use our UI
  • We are on the edge of new tec. People dont know what they want or can do. The software should answer Questions pro active and anticipate their challenges. Give hints.
  • Never stop asking the right questions
  • Never stop tracking user interaction
  • Never stop improving

Installation

Currently the package has three dependencies, which are installed automatically. You still have to include the jquery js file, before the mobfish-sass js file.

  1. @ibm/type
  2. bootstrap-sass-grid
  3. jquery
To install this package open a terminal and go to your project root. 
npm install mobfish-sass --save

Fonts

The following webfonts must be copied to the root directory of your project. 

node_modules/mobfis-sass/fonts
You can do it manually or add a copy script in your Gruntfile.js like this: 
copy: {
    main: {
        files: [
            // includes files within path and its sub-directories
            {expand: true, cwd: 'node_modules/mobfish-sass/fonts/', src: ['**'], dest: 'fonts/'},
            {expand: true, src: ['node_modules/mobfish-sass/js/mobfish.min.js'], dest: 'js/',flatten: true, filter: 'isFile'}
        ]
    }
}

//grunt.loadNpmTasks('grunt-contrib-copy');

Styles

You can either include the compiled css files, or import the SASS components.

At first you have to include the styles of the dependencies:

"../node_modules/@ibm/type/scss/ibm-type",
"../node_modules/bootstrap-sass-grid/sass/bootstrap-sass-grid",

Then you have to include the mobfish-sass files.

"../node_modules/mobfish-sass/sass/_Variables";
"../node_modules/mobfish-sass/sass/style"

As you can see, the variable file is not included by default. So you have the possibility to overwrite some variables with your own ones.

SASS

If you are using sass, make sure to import the dependencies first!

@import "../node_modules/@ibm/type/scss/ibm-type",
"../node_modules/bootstrap-sass-grid/sass/bootstrap-sass-grid",
"../node_modules/mobfish-sass/sass/_Variables";
"../node_modules/mobfish-sass/sass/style";