richard
/
SemanSemantic-UItic-UI
mirror of https://github.com/Semantic-Org/Semantic-UI.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

Adds build docs

pull/55/head
jlukic 11 years ago
parent
41e2ae88b1
commit
1cd3ac269e
2 changed files with 95 additions and 7 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 89
      node/src/documents/project/build.html
  2. 13
      node/src/documents/project/contributing.html

89
node/src/documents/project/build.html
View File

@ -0,0 +1,89 @@
---
layout : 'default'
css : 'build'
title : 'Building Semantic'
type : 'Semantic Project'
---
<script src="/javascript/intro.js"></script>
<div class="segment">
<div class="container">
<h1 class="ui header">Contributing
<div class="ui label">Draft</div>
</h1>
</div>
</div>
<div class="main container">
<div class="peek">
<div class="ui vertical pointing secondary menu">
<a class="item">Running Locally</a>
<a class="item">Building packages</a>
</div>
</div>
<h2 class="ui dividing header">Running Semantic Locally</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) Install Dependencies</h3>
<div class="code" data-title="Installing DocPad" data-type="terminal">
npm install -g docpad
</div>
<div class="code" data-title="Installing Grunt" data-type="terminal">
npm install -g grunt-cli
</div>
<h3 class="ui header">3) 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">4) Start Your Server</h3>
<p>It's important to note that all development code exists inside of <code>/node</code> inside the project. So all commands should be run relative to that directory.</p>
<div class="code" data-title="Starting server locally" data-type="terminal">
cd node
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>
<h3 class="ui header">Fixing An Element</h3>
<p>If you are working on fixing a UI element 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/node/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">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>
<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>

13
node/src/documents/project/contributing.html
View File

@ -9,7 +9,6 @@ type : 'Semantic Project'
<div class="segment">
<div class="container">
<h1 class="ui header">Contributing
<div class="ui label">Draft</div>
</h1>
</div>
</div>
@ -31,7 +30,7 @@ type : 'Semantic Project'
<h3 class="ui header">Publicity</h3>
<script id='fbrob7c'>(function(i){var f,s=document.getElementById(i);f=document.createElement('iframe');f.src='//api.flattr.com/button/view/?uid=jlukic&button=compact&url=https%3A%2F%2Fgithub.com%2Fjlukic%2FSemantic-UI';f.title='Flattr';f.height=27;f.width=110;f.style.borderWidth=0;s.parentNode.insertBefore(f,s);})('fbrob7c');</script>
<script id='fbrob7c'>(function(i){var f,s=document.getElementById(i);f=document.createElement('iframe');f.src='//api.flattr.com/button/view/?uid=jlukic&button=compact&url=https%3A%2F%2Fgithub.com%2Fjlukic%2FSemantic-UI';f.title='Flattr';f.height=31;f.width=110;f.style.marginRight=10;f.style.borderWidth=0;s.parentNode.insertBefore(f,s);})('fbrob7c');</script>
<iframe src="http://ghbtns.com/github-btn.html?user=jlukic&repo=semantic=ui&type=watch&count=true&size=large"
allowtransparency="true" frameborder="0" scrolling="0" width="90" height="30"></iframe>
@ -46,14 +45,14 @@ type : 'Semantic Project'
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
<h2 class="ui dividing header">Ways to Contribute</h2>
<h3 class="ui header">Style Guide</h3>
<p>Contributors should read over the coding guidelines for the project. Most importantly, the guide for language, as it is one of the most important parts about Semantic UI.</p>
<a class="ui secondary button" href="/guide/styleguide.html">Language</a>
<a class="ui button" href="/guide/cssguide.html">CSS</a>
<a class="ui button" href="/guide/javascript.html">Javascript</a>
<h2 class="ui dividing header">Ways to Contribute</h2>
<h3 class="ui dividing header">Bugs & Issues</h3>
<p>Please submit any bugs you encounter when using the library to our <a href="https://github.com/jlukic/Semantic-UI/issues?state=open">Github Issues Tracker</a>.</p>
@ -68,7 +67,7 @@ type : 'Semantic Project'
<p>Semantic is looking for people to help contribute new UI components, and suggest extensions for our core library</p>
<p>If you have any suggestions for components missing from Semantic which you'd like to see in future versions please add suggestions to our public UI board. The current list of upcoming components, and there current development status can be seen on the contributor UI board.</p>
<p>If you have suggestions for components missing from Semantic which you'd like to see in future versions please add them to our public UI Component board. The current list of upcoming components, and their current development status can be seen on the contributor UI board.</p>
<h4 class="ui header">Visit UI Development Boards</h4>
<div class="ui buttons">
@ -79,7 +78,7 @@ type : 'Semantic Project'
<h2 class="ui diving header">Community Development</h2>
<p>We're looking currently for ideas on the best way to expand Semantic to include both core library and third party components. This requires creating a component specification which can be used by anyone to create ui components, and a package management system (website or command line) for distributing them.</p>
<p>We're looking currently for ideas on the best way to expand Semantic to include both core library and third party components. This requires creating a component specification which can be used by anyone to create ui components, and a package management system (website or command line) for authors to distribute them.</p>
<p>These features are very important for the healthy growth of the Semantic ecosystem, and to expand the number of components available to users.</p>
@ -91,7 +90,7 @@ type : 'Semantic Project'
<div class="ui divider"></div>
<a class="ui large right labeled teal icon button" href="/element.html">
Next: Roadmap
Next: Building Semantic
<i class="right arrow icon"></i>
</a>
</div>
Write Preview
Loading…
Cancel
Save