Skip to content
/ techne Public
forked from SAP-archive/techne

Design Guidelines, Components and Patterns Library for modern, mobile-first, user-centric Experience Design

License

Notifications You must be signed in to change notification settings

joseegm/techne

 
 

Repository files navigation

IMPORTANT

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

CDN

Latest minified file is Available via CDN below

https://techne.yaas.io/libs/techne/2.0.0-alpha-6/techne.min.css

NPM

Install the library.

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

Usage

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:

/dist/components/

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.

gulp

Troubleshooting

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

Contributing

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.

About

Design Guidelines, Components and Patterns Library for modern, mobile-first, user-centric Experience Design

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Languages

  • HTML 52.0%
  • CSS 37.0%
  • JavaScript 8.8%
  • Ruby 2.2%