PageSourceSearch

https://chocolatechip-ui.github.io/v5/install.html

html chocolatechip-ui.github.io collected 2026-10-03 08:47:37 UTC 29,075 bytes, 284 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en">
3<head>
4	<meta charset="UTF-8">
5	<title>ChocolateChip-UI - Install</title>
6  <link rel="apple-touch-icon" sizes="76x76" href="images/apple-touch-icon.png">
7  <link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32">
8  <link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16">
9  <link rel="manifest" href="images/manifest.json">
10  <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#333333">
11  <link rel="shortcut icon" href="images/favicon.ico">
12  <meta name="apple-mobile-web-app-title" content="ChocolateChip-UI">
13  <meta name="apple-mobile-web-app-capable" content="yes">
14  <meta name="mobile-web-app-capable" content="yes">
15  <meta name="msapplication-tap-highlight" content="no">
16	<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,600,300' rel='stylesheet' type='text/css'>
17	<link rel="stylesheet" href="css/styles.css">
18	<link rel="stylesheet" href="css/styles-install.css">
19  <link rel="stylesheet" href="./prettify/obsidian.css">
20  
20<script type='text/javascript' src='./prettify/prettify.js'></script>
20
21  
21<script type='text/javascript' src='./prettify/lang-css.js'></script>
21
22</head>
23<body>
24	<article>
25		<nav>
26			<div>
27				<h1>
28          <a title='ChocolateChip-UI' href="../index.html"><span>ChocolateChip-UI</span>
29            <svg width="275px" height="40px" viewBox="0 0 275 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
30              <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
31                <g id="ChocolateChip-Title2">
32                  <g id="Page-1">
33                    <g id="Logo2">
34                      <ellipse id="Oval" fill="#FFFFFF" cx="21.1482971" cy="19.9753366" rx="21.1071582" ry="19.9364793"></ellipse>
35                      <ellipse id="Oval" fill="#333333" cx="21.2609338" cy="19.7971974" rx="3.72110348" ry="3.51471771"></ellipse>
36                      <path d="M32.9492436,25.9738802 C32.553916,27.2768221 29.372685,32.3289523 21.6069843,32.6205746 C14.0371622,32.9048199 7.81439043,26.9505492 7.81439043,19.794928 C7.81439043,12.6393067 13.9675403,6.64397789 21.5407989,6.82983546 C25.4818907,6.92653701 28.6558024,11.0128739 32.6500032,13.2573705 C34.536668,14.3175891 31.8277058,15.9543074 30.3324857,15.4507763 C27.8411812,14.6117827 25.3699154,10.2552799 21.5265621,9.6657966 C15.8021226,8.78781044 11.0187394,14.1130572 11.0187394,19.5908177 C11.0187394,25.0685781 15.7273683,29.4657596 21.5265621,29.5158387 C25.3581332,29.5488875 28.761708,26.8877395 30.0290055,24.6679874 C30.5193939,23.8091392 33.4077664,24.4626968 32.9492436,25.9738802 L32.9492436,25.9738802 L32.9492436,25.9738802 L32.9492436,25.9738802 Z" id="Shape" stroke="#333333" stroke-width="5" fill="#333333"></path>
37                    </g>
38                    <path d="M61.8605125,31.1541761 L57.0867787,31.1541761 L57.0867787,21.5005551 C57.0867787,19.115473 56.147693,17.9229498 54.2694932,17.9229498 C52.9338847,17.9229498 51.9687132,18.3516668 51.3739499,19.2091138 C50.7791865,20.0665606 50.4818095,21.4561951 50.4818095,23.3780587 L50.4818095,31.1541761 L45.7080757,31.1541761 L45.7080757,8.15106099 L50.4818095,8.15106099 L50.4818095,12.8374283 C50.4818095,13.2020896 50.4452893,14.0595236 50.3722484,15.409756 L50.2626872,16.7402704 L50.5131128,16.7402704 C51.5774259,15.1239337 53.2677801,14.3157776 55.5842264,14.3157776 C57.6398118,14.3157776 59.1997378,14.8381224 60.2640509,15.8828278 C61.3283641,16.9275332 61.8605125,18.4255789 61.8605125,20.3770097 L61.8605125,31.1541761 L61.8605125,31.1541761 Z M69.042504,22.8606365 C69.042504,24.4966846 69.3268382,25.7335578 69.8955157,26.5712933 C70.4641927,27.4090287 71.3902355,27.8278901 72.6736719,27.8278901 C73.9466739,27.8278901 74.8622828,27.4114926 75.4205254,26.578685 C75.978768,25.7458774 76.2578851,24.5065403 76.2578851,22.8606365 C76.2578851,21.2245884 75.9761595,19.9975708 75.4126995,19.1795467 C74.8492399,18.3615227 73.9258051,17.9525168 72.6423687,17.9525168 C71.3693667,17.9525168 70.4511498,18.3590588 69.8876897,19.172155 C69.3242297,19.9852512 69.042504,21.2147327 69.042504,22.8606365 L69.042504,22.8606365 L69.042504,22.8606365 Z M81.1411802,22.8606365 C81.1411802,25.5512457 80.3899117,27.6554085 78.8873515,29.173188 C77.3847918,30.6909675 75.2927173,31.4498459 72.6110659,31.4498459 C70.9311206,31.4498459 69.4494515,31.1024373 68.1660151,30.4076097 C66.8825787,29.712782 65.8965388,28.7149062 65.2078652,27.4139523 C64.5191921,26.1129984 64.1748609,24.5952417 64.1748609,22.8606365 C64.1748609,20.1601716 64.9209124,18.0609366 66.4130377,16.5628685 C67.905163,15.0648004 70.0024544,14.3157776 72.7049752,14.3157776 C74.3849205,14.3157776 75.8665891,14.6607223 77.1500255,15.3506221 C78.4334619,16.0405218 79.4195023,17.031006 80.1081754,18.3221042 C80.7968485,19.6132023 81.1411802,21.1260313 81.1411802,22.8606365 L81.1411802,22.8606365 L81.1411802,22.8606365 Z M90.6552578,31.4498459 C85.2084785,31.4498459 82.4851298,28.626227 82.4851298,22.9789044 C82.4851298,20.1700267 83.2259643,18.0239778 84.7076552,16.5406932 C86.1893461,15.0574087 88.3127233,14.3157776 91.0778506,14.3157776 C93.1021327,14.3157776 94.9176985,14.690289 96.5246024,15.439323 L95.1159599,18.9282273 C94.3646798,18.6424117 93.665583,18.4083421 93.0186471,
3818.2260114 C92.3717117,18.0436808 91.724786,17.9525168 91.0778506,17.9525168 C88.5944531,17.9525168 87.352773,19.618107 87.352773,22.9493374 C87.352773,26.1820108 88.5944531,27.7983232 91.0778506,27.7983232 C91.9960814,27.7983232 92.8464762,27.6825203 93.6290591,27.4509111 C94.4116424,27.2193019 95.1942141,26.8571099 95.976797,26.3643243 L95.976797,30.222816 C95.2046486,30.6860344 94.4246853,31.0063402 93.636885,31.183743 C92.8490847,31.3611458 91.8552188,31.4498459 90.6552578,31.4498459 L90.6552578,31.4498459 L90.6552578,31.4498459 Z M102.297951,22.8606365 C102.297951,24.4966846 102.582286,25.7335578 103.150963,26.5712933 C103.71964,27.4090287 104.645683,27.8278901 105.929119,27.8278901 C107.202121,27.8278901 108.11773,27.4114926 108.675973,26.578685 C109.234215,25.7458774 109.513333,24.5065403 109.513333,22.8606365 C109.513333,21.2245884 109.231607,19.9975708 108.668147,19.1795467 C108.104687,18.3615227 107.181252,17.9525168 105.897816,17.9525168 C104.624814,17.9525168 103.706597,18.3590588 103.143137,19.172155 C102.579677,19.9852512 102.297951,21.2147327 102.297951,22.8606365 L102.297951,22.8606365 L102.297951,22.8606365 Z M114.396628,22.8606365 C114.396628,25.5512457 113.645359,27.6554085 112.142799,29.173188 C110.640239,30.6909675 108.548165,31.4498459 105.866513,31.4498459 C104.186567,31.4498459 102.704899,31.1024373 101.421463,30.4076097 C100.138026,29.712782 99.1519857,28.7149062 98.4633126,27.4139523 C97.7746395,26.1129984 97.4303078,24.5952417 97.4303078,22.8606365 C97.4303078,20.1601716 98.1763593,18.0609366 99.6684846,16.5628685 C101.16061,15.0648004 103.257902,14.3157776 105.960423,14.3157776 C107.640368,14.3157776 109.122036,14.6607223 110.405473,15.3506221 C111.688909,16.0405218 112.67495,17.031006 113.363623,18.3221042 C114.052296,19.6132023 114.396628,21.1260313 114.396628,22.8606365 L114.396628,22.8606365 L114.396628,22.8606365 Z M121.578619,31.1541761 L116.804885,31.1541761 L116.804885,8.15106099 L121.578619,8.15106099 L121.578619,31.1541761 L121.578619,31.1541761 Z M136.16381,31.1541761 L135.240367,28.9070851 L135.115154,28.9070851 C134.311702,29.8630891 133.484785,30.5258758 132.634378,30.8954649 C131.78397,31.2650541 130.675328,31.4498459 129.308416,31.4498459 C127.62847,31.4498459 126.305925,30.99649 125.340739,30.0897646 C124.375553,29.1830391 123.892967,27.8919603 123.892967,26.2164894 C123.892967,24.4621728 124.542501,23.1686301 125.841589,22.3358225 C127.140677,21.5030149 129.099715,21.0422673 131.71876,20.9535659 L134.755168,20.8648649 L134.755168,20.1404738 C134.755168,18.4650029 133.847385,17.62728 132.031792,17.62728 C130.633576,17.62728 128.990176,18.0264303 127.101542,18.8247429 L125.520732,15.7793434 C127.534579,14.7839165 129.767517,14.2862106 132.219611,14.2862106 C134.56736,14.2862106 136.367275,14.7691332 137.619408,15.7349929 C138.871541,16.7008526 139.497598,18.1693315 139.497598,20.1404738 L139.497598,31.1541761 L136.16381,31.1541761 L136.16381,31.1541761 Z M134.755168,23.4963267 L132.908281,23.5554607 C131.5205,23.5948835 130.487505,23.831417 129.809266,24.2650683 C129.131028,24.6987196 128.791913,25.3590424 128.791913,26.2460564 C128.791913,27.5174431 129.564051,28.153127 131.108348,28.153127 C132.214399,28.153127 133.098705,27.8525323 133.761292,27.2513339 C134.423879,26.6501355 134.755168,25.8518349 134.755168,24.856408 L134.755168,23.4963267 L134.755168,23.4963267 Z M150.248151,27.8574571 C151.082907,27.8574571 152.084598,27.6849848 153.253256,27.3400349 L153.253256,30.6958878 C152.063729,31.198529 150.602929,31.4498459 148.870812,31.4498459 C146.961309,31.4498459 145.57094,30.9940261 144.699664,30.0823728 C143.828388,29.1707195 143.392756,27.8032601 143.392756,25.9799535 L143.392756,18.0116508 L141.107625,18.0116508 L141.107625,16.1045802 L143.737091,14.5966639 L145.114431,11.1077596 L148.16649,11.1077596 L148.16649,14.6262309 L153.065437,14.6262309 L153.065437,18.0116508 L148.16649,18.0116508 L148.16649,25.9799535 C148.16649,26.6205747 148.356916,27.0936418 148.737773,27.3991688 C149.118631,27.7046959 149.622085,27.8574571 150.248151,27.8574571 L150.248151,27.8574571 L150.248151,27.8574571 Z M162.501256,17.5237955 C161.489115,17.5237955 160.69611,17.8268541 160.122215,18.4329803 C159.548321,19.0391066 159.219641,19.8990045 159.136166,21.0126999 L165.835044,21.0126999 C165.814176,19.8990045 165.506364,19.0391066 164.911601,18.4329803 C164.316838,17.8268541 163.513397,17.5237955 162.501256,17.5237955 L162.501256,17.5237955 L162.501256,17.5237955 Z M163.174275,31.4498459 C160.356975,31.4498459 158.155341,30.7156064 156.569305,29.2471055 C154.98327,27.7786045 154.190264,25.6990806 154.190264,23.0084714 C154.190264,20.2390166 154.923273,18.0978954 156.389312,16.5850437 C157.855352,15.072192 159.882211,14.3157776 162.469953,14.3157776 C164.942916,14.3157776 166.868042,14.9810281 168.245389,16.3115491 C169.622735,17.6420701 170.311398,19.4801327 170.311398,21.825792 L170.311398,24.013749 L159.026604,24.013749 C159.078776,25.2949914 159.480497,26.2953311 160.231776,27.014798 C160.983056,27.734265 162.036919,28.093993 163.393397,28.093993 C164.447275,28.093993 165.44375,27.9905096 166.38285,27.7835397 C167.32195,27.5765697 168.302772,27.2464083 169.325348,26.7930457 L169.325348,30.28195 C168.490592,30.6761784 167.598461,30.9693814 166.648927,31.1615678 C165.699392,31.3537542 
38164.541187,31.4498459 163.174275,31.4498459 L163.174275,31.4498459 L163.174275,31.4498459 Z M182.752322,13.0443971 C180.926295,13.0443971 179.512449,13.6924004 178.510742,14.9884265 C177.509036,16.2844525 177.00819,18.0904845 177.00819,20.4065767 C177.00819,25.2260195 178.922882,27.6357047 182.752322,27.6357047 C184.359227,27.6357047 186.305221,27.2562656 188.590364,26.4973758 L188.590364,30.341084 C186.712164,31.0802623 184.614873,31.4498459 182.298426,31.4498459 C178.969839,31.4498459 176.423873,30.4963202 174.660452,28.58924 C172.897032,26.6821599 172.015334,23.9447772 172.015334,20.3770097 C172.015334,18.1299075 172.448357,16.1612587 173.314416,14.4710042 C174.180475,12.7807497 175.424763,11.4847432 177.047319,10.5829456 C178.669875,9.68114797 180.571524,9.23025595 182.752322,9.23025595 C184.974859,9.23025595 187.207796,9.73781746 189.451201,10.7529558 L187.886042,14.478396 C187.030418,14.0940232 186.169589,13.7589341 185.303531,13.4731184 C184.437472,13.1873028 183.587078,13.0443971 182.752322,13.0443971 L182.752322,13.0443971 L182.752322,13.0443971 Z M207.698864,31.1541761 L202.92513,31.1541761 L202.92513,21.5005551 C202.92513,19.115473 201.986045,17.9229498 200.107845,17.9229498 C198.772236,17.9229498 197.807064,18.3516668 197.212301,19.2091138 C196.617538,20.0665606 196.320161,21.4561951 196.320161,23.3780587 L196.320161,31.1541761 L191.546427,31.1541761 L191.546427,8.15106099 L196.320161,8.15106099 L196.320161,12.8374283 C196.320161,13.2020896 196.283641,14.0595236 196.2106,15.409756 L196.101039,16.7402704 L196.351464,16.7402704 C197.415777,15.1239337 199.106132,14.3157776 201.422578,14.3157776 C203.478163,14.3157776 205.038089,14.8381224 206.102402,15.8828278 C207.166715,16.9275332 207.698864,18.4255789 207.698864,20.3770097 L207.698864,31.1541761 L207.698864,31.1541761 Z M210.87405,10.3538014 C210.87405,8.88530046 211.740095,8.15106099 213.472213,8.15106099 C215.20433,8.15106099 216.070376,8.88530046 216.070376,10.3538014 C216.070376,11.0535569 215.853865,11.5980768 215.420835,11.9873774 C214.987806,12.376678 214.338271,12.5713254 213.472213,12.5713254 C211.740095,12.5713254 210.87405,11.8321581 210.87405,10.3538014 L210.87405,10.3538014 L210.87405,10.3538014 Z M215.851254,31.1541761 L211.07752,31.1541761 L211.07752,14.6262309 L215.851254,14.6262309 L215.851254,31.1541761 L215.851254,31.1541761 Z M228.933893,31.4498459 C226.878308,31.4498459 225.266211,30.7451732 224.097553,29.3358064 L223.847127,29.3358064 C224.014079,30.715606 224.097553,31.5139066 224.097553,31.7307323 L224.097553,38.4276546 L219.323819,38.4276546 L219.323819,14.6262309 L223.205413,14.6262309 L223.878431,16.7698374 L224.097553,16.7698374 C225.214038,15.1337893 226.867873,14.3157776 229.059106,14.3157776 C231.125126,14.3157776 232.74244,15.0697281 233.911098,16.577652 C235.079755,18.0855758 235.664075,20.179883 235.664075,22.8606365 C235.664075,24.6248088 235.390175,26.1573489 234.842367,27.4583028 C234.294558,28.7592567 233.514596,29.7497408 232.502455,30.4297849 C231.490314,31.109829 230.300805,31.4498459 228.933893,31.4498459 L228.933893,31.4498459 L228.933893,31.4498459 Z M227.52525,17.9229498 C226.346158,17.9229498 225.48533,18.2654307 224.942739,18.9504026 C224.400147,19.6353745 224.118422,20.7663004 224.097553,22.3432143 L224.097553,22.8310695 C224.097553,24.6050975 224.37667,25.8764652 224.934913,26.6452107 C225.493155,27.4139562 226.377461,27.7983232 227.587857,27.7983232 C229.726918,27.7983232 230.796432,26.1327329 230.796432,22.8015025 C230.796432,21.1753102 230.532966,19.9556842 230.006027,19.142588 C229.479087,18.3294918 228.65217,17.9229498 227.52525,17.9229498 L227.52525,17.9229498 L227.52525,17.9229498 Z M236.522826,24.8859751 L236.522826,21.1901018 L244.927728,21.1901018 L244.927728,24.8859751 L236.522826,24.8859751 L236.522826,24.8859751 Z M265.851811,9.54070933 L265.851811,23.5258937 C265.851811,25.1225189 265.473568,26.5220089 264.717071,27.7244057 C263.960574,28.9268025 262.867583,29.8482977 261.438064,30.4889189 C260.008546,31.1295401 258.318191,31.4498459 256.36695,31.4498459 C253.424437,31.4498459 251.139329,30.7377815 249.511555,29.3136312 C247.883782,27.8894809 247.069908,25.9405433 247.069908,23.4667597 L247.069908,9.54070933 L251.906248,9.54070933 L251.906248,22.7719356 C251.906248,24.4375508 252.261014,25.
386596406 252.970556,26.4382418 C253.680098,27.216843 254.853955,27.6061377 256.492163,27.6061377 C258.078198,27.6061377 259.228578,27.2143791 259.943338,26.4308501 C260.658097,25.647321 261.015472,24.4178395 261.015472,22.7423685 L261.015472,9.54070933 L265.851811,9.54070933 L265.851811,9.54070933 Z M269.919137,31.1541761 L269.919137,9.54070933 L274.771129,9.54070933 L274.771129,31.1541761 L269.919137,31.1541761 L269.919137,31.1541761 Z" id="hocolateChip-UI" fill="#FFFFFF"></path>
39                  </g>
40                </g>
41              </g>
42            </svg>
43          </a>
44        </h1>
45				<menu>
46					<a href="quickstart.html">Quick Start</a>
47					<a href="features.html">Features</a>
48					<a href="docs/components/components-intro.html">Docs</a>
49					<a class='selected' href="install.html">Install</a>
50				</menu>
51			</div>
52		</nav>
53		<header>
54			<div>
55				<h2>Install</h2>
56				<h3>Chui Creates Your Projects</h3>
57			</div>
58		</header>
59		
60		<section>
61			<div>
62
63        <h2>Source Code</h2>
64        <p>ChocolateChip-UI is available on Gitub. You can check out the <a target='_blank' href="https://github.com/chocolatechip-ui/chocolatechipui">source code</a> there. Although you can download the source code, it isn't practical for creating a new project. For that we use a special command line tool that helps you create new projects, etc. It's available on NPM. How to install the command line tool and get started are explained below.</p>
65
66
67        <a name="NPM"></a>
68				<h2>NPM</h2>
69
70<p>ChocolateChip-UI has an NPM module called <code>chui</code> that you can install and use to make new ChocolateChip-UI apps quickly.</p>
71
72<h3>Install NPM Module</h3>
73
74<p>To install the NPM module, you use the following command. Depending on how you have NPM setup on your machine, you may need to use the <code>sudo</code> command before it.</p>
75
76<pre class="prettyprint linenums"><code>npm i -g chui
77</code></pre>
78
79<a name="all_chui_examples"></a>
80<p><a target="_blank" href="https://www.npmjs.com/package/chui" class="mainLink">Chui on NPM</a></p>
81
82<h3>Keeping Chui Up-To-Date</h3>
83<p>We make lots of small updates to ChocolateChip-UI all the time, things like typos, code cleanup and minor improvement to examples, etc. The best way to make sure you are up-to-date is to update. Simple, right? It's a good idea to update your <code>chui</code> command line tool at least once a month. To update it, run the following in the terminal:</p>
84<pre class="prettyprint linenums"><code>npm update -g chui</code></pre>
85
86<p>If you're on a Mac or Linux, you'll need to use <code>sudo</code> with that, which will ask you for your password:</p>
87<pre class="prettyprint linenums"><code>sudo npm update -g chui</code></pre>
88
89<h2>Get All the ChocolateChip-UI Examples</h2>
90
91<p>Once the command line tool is installed, you can get all the examples of layouts and widgets that ChocolateChip-UI offers with a simple command:</p>
92
93<pre class="prettyprint linenums"><code>chui -e
94</code></pre>
95
96<p>By default all of these are using the iOS theme. To see the Android theme, open the html file and change <code>chui-ios.min.css</code> to <code>chui-android.min.css</code>.</p>
97
98<h2>Get the ChocolateChip-UI Reference Apps</h2>
99
100<p>You can output all the ChocolateChip-UI reference apps to your desktop.</p>
101
102<pre class="prettyprint linenums"><code>chui -r
103</code></pre>
104
105<p>This will output a folder call <code>Chui Referene Apps</code> to your desktop. Inside you'll find these four apps:</p>
106
107<ul>
108  <li>Fragranž</li>
109  <li>SFCoffee</li>
110  <li>TodoMVC</li>
111  <li>Vino</li>
112</ul>
113
114<p>To run these, you'll first need to open the terminal and <code>cd</code> to the app you want to run. First install its dependencies with <code>npm i</code>. When that is done, run <code>npm run build</code>. This will compile the code. After that you can double click the <code>index.html</code> file to launch it in the browser. Or you could run <code>http-server</code> in the folder to run a server instance. Or use any other means of running a server instance in the folder.</p>
115
116
117<h2>Starting a New Project</h2>
118
119<p>You can also use this command line tool to create a new project. Below are the various parameters you can use to customize what kind of project ChocolateChip-UI makes for you.</p>
120
121<h4>Parameters</h4>
122<ul>
123  <li>
124  <strong>n</strong> The name for your app. This is required. This will create a folder with this name, and, depending on the type of app, may al
124so update app info to display it.</li>
125  <li>
126  <strong>p</strong> The path where you want your project to be. If none is provided, it will be output to your desktop in a folder with your project's name.</li>
127  <li>
128  <strong>o</strong> The operating system you wish to target. If none is provided it defaults to iOS. The expected values are: "ios" or "android".</li>
129  <li>
130  <strong>t</strong> The type of project you wish to create. There are four choices: "basic", "navigation", "slideout" and "tabbar". If no type is provide it will default to basic. Once you're more familiar with how things work in ChocolateChip-UI, you'll probably prefer to make all your new projects basic and go from there.</li>
131</ul>
132
133<p>When using names or paths that have spaces, you will need to quote those to get the correct result.</p>
134
135<h3>Usage</h3>
136
137<pre class="prettyprint linenums"><code>// Create a simple Android app in 
138// the folder Fruits in ~/Documents/Dev:
139chui -n Fruits -p ~/Documents/Dev/ -o android
140
141// or create iOS tabbar interface in Fruits on the desktop:
142chui -n Fruits -o ios -t tabbar
143
144// or create a slide out menu for Android in 
145// Fruits on the desktop:
146chui -n Fruits -o android -t slideout
147</code></pre>
148
149
150<p>This will create the following directory structure:</p>
151
152<pre class="prettyprint linenums"><code>
153+ css
154  - app.css
155  - chui-android.css
156  - chui-android.css.map
157  - chui-ios.css
158  - chui-ios.css.map
159+ data
160+ dev
161  + components
162  + data
163  + src
164    + utils
165    + widgets
166  - app.js
167+ images
168+ js
169  - chui.min.js
170  - chui.min.js.map
171- .bablerc.js
172- .editorconfig
173- gulpfile.js
174- index.html
175- package.json
176</code></pre>
177
178<h3>Changing Your Project's Theme</h3>
179<a name="es6"></a>
180<p>To change the theme that you set when you created your project, open the index.html file and change the line for <code>chui-(OS_THEME).min.css</code> to whichever theme you want. For example, if you set up your app to target iOS and now want to target Android, change the link href from <code>chui-ios.min.css</code> to <code>chui-android.min.css</code>. When you make a new project, we include all three themes so you can easily switch to a different theme. If you have made custom styles in your app's app.css file, and you change the theme, you may need to also update the app.css styles to override the new theme. Please see <a target='_blank' href="./docs/themes/themes-use.html">documentation for themes</a> for more information about overriding the themes.</p>
181
182<h2>Rollup, Babel &amp; Browsersync</h2>
183
184<p>When you create a project, it automatically adds support for Rollup, Babel and Browsersync. This allows you to write your app's code using ES6 that gets transpiled to ES5. You can organize your project code using ES6 modules.  You can also use comprehensions, classes and arrow functions, const, let and other ES6 features supported by Babel in your code. The probject includes to "dot" files - <code>.babelrc</code> for Babel and <code>.editorconfig.js</code>. This file sets up defaults for your editor and controls line endings, indent size, whether to use tabs or spaces, etc. You can edit it to suit your preferences. You can learn more about <a href='http://editorconfig.org' target='_blank'>EditorConfig</a> at their site.</p>
185
186
187<p>After creating your app, <code>cd</code> to the folder and run:</p>
188
189<pre class="prettyprint linenums">npm i
190</pre>
191
192<h3>Building and Running Your App</h3>
193
194<p>Once you've created a project and run <code>npm i</code>, you can build it and run it. There are two commands using <code>gulp</code>:</p>
195
196<pre class="prettyprint linenums">// Build and serve the app:
197gulp</pre>
198
199<p>This will build the code, launch a watchers for <code>index.html</code>, <code>dev/app.js</code> and <code>css</code>, and launch the app in the default browser.</p>
200
201<p>If your app is already built and you want to run in in the browser, you can just execute the following in your project's folder:</p>
202<pre class="prettyprint linenums">// If the app is already built,
203// you can serve it with:
204gulp serve</pre>
205
206
207<h2>App.js, The Core of Your App</h2>
208
209<p>The <code>dev</code> folder holds a file called <code>app.js</code>. This is the development version of your app's JavaScript. Because this project also has Babel, when you run a build, this file gets transpiled to ES5.</p>
210
211<p>When you edit code in <code>app.js</code> or other files in the dev folder, you can run <code>gulp</code> to compile and reload the new version in the browser. Your <code>index.html</code> already references it from the <code>js</code> folder. When you run the server script, it first runs the build script and then starts up a server instance and opens your default browser. You can change which browser it opens by editing the browserSynch browser property in the <code>gulpfile</code>. It uses your default browser. If you are on Windows and have either IE or Microsoft Edge as your default browser, you will need to change that to Chrome. Simply change the "serve" task in your <code>gulpfile</code> to:</p>
212
213<pre class="prettyprint linenums"><code>// Static Server &amp; watching files:
214gulp.task('serve', ['build'], function () {
215  browserSync({
216    server: './',
217    port: 4040,
218    browser: ['google chrome'],
219    server: {
220      open: false
221    }
222  }).reload;
223});
224</code></pre>
225
226<p>If you're on a Mac and want to see your iOS theme load in Safari, change the value to <code>safari.app</code>. The file extension is required to launch Safari.</p>
227
228
229<h3>Troubleshooting</h3>
230<p>If for some reason the path for where you want your project isn't working, check that you are using the correct path delimiters for your platform (Mac, Windows or Linux). Also check to see if a name in the path has a space. If it has any spaces, enclose the  whole path in quotes, single or double. The terminal can be picky about spaces.</p>
231
232<h3>Build Speed</h3>
233<p>Because we are using both Rollup, Babel and Uglify, there can be some delay in how quickly your saved changes are compiled. This is mostly due to the need to parse all dependencies before bundling them together into one output file. We think the convenience of a custom output file based on the features you actually use in your app outweighs the time to complete a build.</p>
234
235<h3>Troubleshooting Babel, etc.</h3>
236<p>If you are having trouble installing the Babel module, this is probably due to <code>node-gyp</code>. Please read the <a target='_blank' href="https://github.com/nodejs/node-gyp">installation requirements in the documentation</a> for this module dependency.</p>
237
238<h2>Platform Support</h2>
239
240<h3>Android</h3>
241<p>ChocolateChip-UI supports Android Jellybean (4.1) to the Nougat (7.0).</p>
242<p>The preferred browser for developing for Android is Google Chrome. You can use it on Mac, Windows or Linux. The Chui command line tool can convert your web app into an Android Studio project ready to build and run in the emulator on on a tethered Android device. Android Studio is available for Mac, Windows and Linux.</p>
243
244<p>For device testing you can either load your web app in the Android device's browser from a server, or you can side load your Android apk on a tethered Android device.</p>
245
246<h3>iOS</h3>
247<p>ChocolateChip-UI supports iOS 8 to 10.</p>
248<p>If you are want to target iOS, it is best to have a Mac. Use Safari to test in. The Chui command line tool can convert your web app into a hybrid app ready to open and run in Xcode. Currently Xcode is only available on the Mac. Since Swift is now open source, it may be possible to create binaries without Xcode an on platforms other than the Mac in the future, though there are no know projects at the moment.</p>
249
250<p>For device testing you can either load your web app in the iOS device's browser from a server, or you can side load your iOS app on a tethered iPhone, iPod or iPad.</p>
251
252
253<h2>Development Platforms</h2>
254
255<h3>Windows</h3>
256<p>If you're on a Windows machine, you should use Chrome to test for Android and iOS. If you want to use ChocolateChip-UI's command line tool to create an iOS app on Windows, you will not be able to build and compile it. For iOS ChocolateChip-UI creates and Xcode project, which only runs on a Mac. However, there are other hybrid app solutions for Windows that you can look into that will build the iOS app online, such as Cordova/Phonegap. Support for Android on Windows merely requires that you download and install Android Studio and the Android SDK.</p>
257
258<h3>Mac</h3>
259<p>If you're on a Mac, you can use Chrome or Safari to test for Android and iOS. If you want to supp
259ort Android on your Mac, you'll need to download the Android Studio for Mac and the Android SDK. This will let you open your hybrid app and compile it for loading on a tethered Android device. For iOS you need to have Xcode installed. You can download it from the App store.</p>
260
261<h3>Linux</h3>
262<p>If you're on a Linux computer, you can use Chrome to test for Android and iOS. You can install Android Studio and Android SDK to open and build your apk for side loading on a tethered Android device. There is currently no way to open and build hybrid apps for iOS on Linux other than using an online build tool like Cordova/Phonegap.</p>
263
264			</div>
265
266		</section>
267
268	</article>
269	
270<script>
271  prettyPrint();
272</script>
272
273	
273<script>
vendor: 355 bytes, lines 273-279
273
274    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
275    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
276    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
277    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
278
279    ga('create', '
279UA-70245106-2
vendor: 41 bytes, lines 279-281
279', 'auto');
280    ga('send', 'pageview');
281
282</script>
282
283</body>
284</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.