-
Notifications
You must be signed in to change notification settings - Fork 4
Getting Started
Jonas Gossens edited this page May 23, 2019
·
5 revisions
Before you start using our API, we recommend you to start with some preparations. The following will help you to set up your index.html in a proper way and allow you an easy start.
- Include the .css file at the end of your head tag. This allows you to use the styles that are used in our Tapps and provides you with a uniform design on all devices.
- Include the .js file at the end of your body tag. This script is required for some style ( e.g. accordion ) and offers some useful functions in addition.
- Include the Meta-Tags at the start of your head tag. The viewport meta-tag is responsible for the sizing of your Tapp. It automatically resizes it to your viewport size and guarantees a perfect integration into your app/website.
<!DOCTYPE html>
<html>
<head>
<!--Add Meta-Tags for scaling etc.-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1, maximum-scale=1"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="utf-8">
<title>Tapp</title>
<!--Load the chayns styles-->
<link rel="stylesheet" href="https://api.chayns.net/css/v4.2/">
</head>
<body>
<div class="tapp">
<div class="tapp__intro">
</div>
<div class="tapp__content">
</div>
</div>
<!--Load the js chayns API-->
<script src="https://api.chayns-static.space/js/v4.0/chayns.min.js"></script>
</body>
</html>If you are looking for a uniform design similar to our usual tapps, you can use the class structure set up in the code snippet. See more at our wiki entry about container classes.
<!-- To get started, load the chayns API styles and JavaScript from the CDN -->
<!-- css styles -->
<script src="https://api.chayns-static.space/css/v4/compatibility/compatibility.min.js" version="4.2"></script>
<!-- js api -->
<script src="https://api.chayns-static.space/js/v4.0/chayns.min.js"></script>