<p>Fork the Semantic repo into a directory on your local machine and navigate into that directory</p>
<p>Alternatively, you can <a href="https://github.com/Semantic-Org/Semantic-UI/archive/master.zip">download the entire repository as a zip</a> instead of using Git</p>
<p>Running update inside the local directory will grab all packages in <code>package.json</code> in the root of the project.</p>
<p>NPM (Node Package Manager) keeps track of all the dependencies required for the project.</p>
<p>Running <code>npm update</code> inside the local directory will grab all development dependencies from <code>package.json</code> and store them in the root of the project.</p>
<p>Now that you've installed all the dependencies, starting your server should be a simple command</p>
<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>
<p>Docpad should now run the documentation on a local server accessible at <code>http://localhost:9778</code></p>
<p>A static version of the documentation will be generated every time you make a change to a document. This will also be available in the <code>docs/</code> folder.
<p>Installing Karma will allow you to run the unit tests on Javascript to ensure all tests are passed when changes are made to javascript code. This will also occur automatically when you create a pull request</p>
<h2 class="ui dividing header">Using Grunt</h2>
<h3 class="ui header">Watch Changes in Source</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/semantic-org/Semantic-UI/blob/master/Gruntfile.js">commented gruntfile</a></p>
<p>To see exactly what this grunt tasks is doing view our <a href="https://github.com/semantic-org/Semantic-UI/blob/master/Gruntfile.js">commented gruntfile</a></p>
<p>The watch task is the default grunt task for Semantic, so you can start it quite simply.</p>
<p>The watch task is the default grunt task for Semantic, so you can start it quite simply. This will copy files automatically from the <code>src</code> directory, compiling LESS files, whenever any changes are made.</p>
<h3 class="ui header">Run Unit Tests</h3>
<p>Tests will automatically run with <code>grunt watch</code> if you have started karma</p>
<p>For convenience there is also a separate grunt command for building minified, packaged, and compressed versions of the library.</p>
<p>There is also a separate grunt command for building minified, packaged, and compressed versions of the library. This might be useful when creating custom builds of Semantic.</p>
jlukic
10 years ago