Get Started

We have a few options for you to start designing and building with SAP Hybris Techné fast.

Install with Bower

Compiled and minified CSS, Source LESS, JavaScript, and fonts, but no documentation.


The recommended way to integrate Techné into your project is by installing all resources with bower. Bower is a package manager for the web, which makes it easy for you to keep track of your project dependencies. If you have bower already installed simply run bower install hyTechne

This will provide you source files ansd precompiled resources at the same time, fitting for each skill level. If not, bower requires you first to install nodejs which includes the node package modules (NPM) package manager. After successful installation run:

npm install -g bower and run bower install hyTechne afterwards, to get Techné.

We’re on GitHub GitHub

Bundle including Default files and all the source files (LESS/JS) not yet compiled.


Download Pre-Bundled Zip

Precompiled and minified version of Techné ready to grab and use.


NPM Install

Techne is also avialable as a NPM package. You can install with the following command in terminal or command prompt:

npm install techne

Starter Pages

In order to make your UI design and development work even faster and have better consistency across Builder UI Modules we’ve introduced some generic page layout starters you can use and customize as needed. Preview examples of the Starter Pages.


Design Resources

Axure Libraries and Masters

Download our Axure RP library and hit the ground running... The library offers page layouts and specifications

Color Swatches

Download the full set of application color swatches - primary colors as well as secondary colors



Download Dosis and Open Sans font families from the link below or find it included in our GitHub project.

Contribute back to Techné

So you wrote a new component or fixed a bug in Techné? You want to contribute? That’s actually super easy. Just pull our repository from github, make your changes in a feature-branch, push it to origin and create a pull-request to our develop brach.


How to build Techné Documentation locally

Techné is using Gulp as build system.

Installing Gulp

Gulp requires you first to install nodejs which includes the node package modules (NPM) package manager. Then you can simply run npm install --global gulp
(Note the —global, otherwise you would not be able to run gulp systemwide)

IMPORTANT: The variable @bower-path is not defined per default. It is required that you define this variable in your own stylesheet and point to your bower_components folder. (No trailing slash).

Example:@bower-path: '../../bower_components';

Available Commands

Default task that builds all resources (js/less/..) and starts a local server with running watch-task
gulp dist
Create a prebuilt bundle including zip file for distribution
gulp build
Build all resources including documentation
gulp watch
Listen for file changes in src folder for compilation
gulp styleguide
Build docs
gulp connect
start server
gulp setpath
Generate _resource-paths.less file based on settings in config.json to handle file paths correctly.


Should you encounter problems with installing dependencies or running Grunt commands, first delete the /node_modules/ directory generated by npm. Then, rerun npm install.

Still having problems or have questions about Techné? Ask Hybris Experts