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 
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
Fonts
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)
@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
gulp- 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.
Troubleshooting
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