Hybris Techne style guide

Hybris, techne, SAP, [y], components, css, html, patterns, ui, ux
bower install hyTechne



This is an in-development, experimental version of SAP Hybris Techne. It should NOT be used for production. Refer to the Techne website for details about the current version.

If you are interested in testing beta releases, please contact the Techne team.

Build Status

Getting started


Latest minified file is Available via CDN below



Install the library.

npm install techne@2.0.0-alpha-7 --save


Include the full library.

<link href="node_modules/techne/dist/techne.min.css" rel="stylesheet" />

Stand alone components

The components can be used without loading the whole library. Take a look at the Available Techne Components and the individual files at:


For example, to use only the cards

<link href="node_modules/techne/components/card.min.css" rel="stylesheet" />

The project

Techne 2.0 is a design system and pattern library package. This project packages the library for npm and generates the documentation as a static website.

We rely on several core technologies.

  • Node (minimum v6.4)
  • Gulp
  • Sass
  • Nunjucks
  • Ruby
  • Bundle
  • Jekyll

Install Gulp

In addition to Node, you must have Gulp installed globally:

npm install -g gulp

Install Gems

The following gems needs to be installed for the documentation site generation

gem install ruby bundle jekyll

Install Bundle dependencies

bundle install

Install dev dependencies

npm install

Serve it locally

The documentation website is served from the docs/_site directory which is generated by Jekyll. To generate and lunch the documentation site, simply execute the gulp command in terminal at the root of project directory.



Please refer to the Troubleshooting guide if you are having issues with the setup.


Details of where and how to start developing the new component can be found in test/README.MD file. New branches should include the type (feature, bug, or hotfix) and the issue number or release number.

git checkout -b feature/000
git checkout -b bug/000
git checkout -b hotfix/000

Create a pull request against branch v2.0 and assign it for review.

When accepted, the reviewer will merge and delete the branch.