You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
101 lines
3.7 KiB
101 lines
3.7 KiB
---
|
|
layout : 'default'
|
|
css : 'guide'
|
|
|
|
title : 'Set-up'
|
|
description : 'A guide to developing locally'
|
|
type : 'Semantic Project'
|
|
---
|
|
<script src="/javascript/intro.js"></script>
|
|
|
|
<%- @partial('header') %>
|
|
<div class="main container">
|
|
<div class="peek">
|
|
<div class="ui vertical pointing secondary menu">
|
|
<a class="active item">Installing Dependencies</a>
|
|
<a class="item">Fixing Bugs</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">Installing Dependencies</h2>
|
|
|
|
<p>It may be useful to run the development docs locally when working on a forked version of semantic, as the docs themselves help in testing out changes to ui components.</p>
|
|
|
|
<h3 class="ui header">1. Install Node</h3>
|
|
<p>Semantic docs are written in DocPad which requires NodeJS. </p>
|
|
|
|
<div class="ui warning message">Make sure npm does not require sudo to operate, this might cause permissions issues.</div>
|
|
|
|
<ul class="ui list">
|
|
<li><a href="https://github.com/joyent/node/wiki/Installing-Node.js-via-package-manager">Node JS via Package Manager</a></li>
|
|
<li><a href="https://gist.github.com/isaacs/579814">Installing Node JS without sudo</a></li>
|
|
</ul>
|
|
|
|
<h3 class="ui header">2. Fork Semantic</h3>
|
|
|
|
<iframe src="http://ghbtns.com/github-btn.html?user=jlukic&repo=semantic=ui&type=fork&count=true&size=large"
|
|
allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>
|
|
|
|
<h3 class="ui header">3. Install Dependencies</h3>
|
|
<p>Running update inside the local directory will grab all packages in <code>package.json</code> in the root of the project.</p>
|
|
|
|
<div class="code" data-title="Installing dependencies" data-type="terminal">
|
|
npm update
|
|
</div>
|
|
|
|
|
|
<h3 class="ui header">4. Start Your Server</h3>
|
|
|
|
<div class="code" data-title="Starting server locally" data-type="terminal">
|
|
docpad run
|
|
</div>
|
|
|
|
<p>Docpad should now run an instance of semantic-ui.com locally you can access at <code>http://localhost:9778</code></p>
|
|
|
|
<h2 class="ui dividing header">Fixing Bugs</h2>
|
|
|
|
<h3 class="ui header">Watch Script</h3>
|
|
|
|
<p>If you are working on fixing a UI component that is part of Semantic, your best bet is to work actively on the file in <code>/src/{type}/{elementname}/</code> while running a watch script from grunt. This will rebuild the docs after you make changes, so you can see if you have corrected the issue you are fixing.</p>
|
|
|
|
<p>To see exactly what this is doing you can check out our <a href="https://github.com/jlukic/Semantic-UI/blob/master/Gruntfile.js">commented gruntfile</a></p>
|
|
|
|
<div class="code" data-title="Watching Changes" data-type="terminal">
|
|
grunt
|
|
</div>
|
|
|
|
<p>The watch task is the default grunt task for Semantic, so you can start it quite simply.</p>
|
|
|
|
<h3 class="ui header">Running Tests</h3>
|
|
<p>Tests will automatically run with <code>grunt watch</code> if you have started karma</p>
|
|
|
|
<div class="code" data-title="Execute tests while developing" data-type="terminal">
|
|
karma start
|
|
grunt watch
|
|
</div>
|
|
|
|
<p>You can also run the test suite manually</p>
|
|
<div class="code" data-title="Execute tests while developing" data-type="terminal">
|
|
npm test
|
|
// or
|
|
grunt build
|
|
// or
|
|
karma run
|
|
</div>
|
|
|
|
<h3 class="ui header">Packaging Elements</h3>
|
|
<p>For convenience there is also a separate grunt command for building minified, packaged, and compressed versions of the library.</p>
|
|
|
|
<div class="code" data-title="Building Release Files" data-type="terminal">
|
|
grunt build
|
|
</div>
|
|
|
|
|
|
<h3 class="ui header"></h3>
|
|
|
|
<div class="ui divider"></div>
|
|
<a class="ui large right labeled teal icon button" href="/introduction.html">
|
|
Next: Library Introduction
|
|
<i class="right arrow icon"></i>
|
|
</a>
|
|
</div>
|