jlukic
9 years ago
6 changed files with 324 additions and 12 deletions
@ -0,0 +1,289 @@ |
|||
--- |
|||
layout : 'default' |
|||
css : 'started' |
|||
standalone : true |
|||
|
|||
title : 'Getting Started' |
|||
description : 'Getting started with Semantic UI' |
|||
type : 'Introduction' |
|||
--- |
|||
<script src="/javascript/new.js"></script> |
|||
|
|||
<%- @partial('header') %> |
|||
|
|||
<div class="main ui intro container"> |
|||
|
|||
<h2 class="ui dividing header">Installing</h2> |
|||
|
|||
<div class="ui four item pointing menu"> |
|||
<a data-tab="npm" class="active item">NPM</a> |
|||
<a data-tab="meteor" class="item">Atmosphere</a> |
|||
<a data-tab="npm" class="item">Bower</a> |
|||
<a data-tab="git" class="item">Git</a> |
|||
</div> |
|||
|
|||
<div class="ui active tab" data-tab="npm"> |
|||
|
|||
<div class="no example"> |
|||
<div class="ui accordion"> |
|||
<div class="title"> |
|||
<h4 class="ui header">Install NodeJS</h4> |
|||
<p>To use our build tools you will need Node</p> |
|||
<i class="dropdown icon"></i> |
|||
</div> |
|||
<div class="content"> |
|||
|
|||
<div class="ui top attached tabular menu"> |
|||
<a data-tab="mac" class="active item">Mac</a> |
|||
<a data-tab="linux" class="item">Linux</a> |
|||
<a data-tab="win" class="item">Windows</a> |
|||
</div> |
|||
<div class="ui bottom attached active padded tab segment" data-tab="mac"> |
|||
<h4>Option 1: Homebrew</h4> |
|||
<p>After installing <a href="http://brew.sh/" target="_blank">homebrew</a></p> |
|||
<div class="ignored code" data-type="bash"> |
|||
brew install node |
|||
</div> |
|||
<h4>Option 2: Git</h4> |
|||
<div class="ignored code" data-type="bash"> |
|||
git clone git://github.com/ry/node.git |
|||
cd node |
|||
./configure |
|||
make |
|||
sudo make install |
|||
</div> |
|||
</div> |
|||
<div class="ui tab" data-tab="linux"> |
|||
<p>This is a popular install method that will avoid requiring sudo.</p> |
|||
<div class="ignored code" data-type="bash" data-title="Install without sudo"> |
|||
mkdir ~/local |
|||
echo 'export PATH=$HOME/local/bin:$PATH' >> ~/.bashrc |
|||
. ~/.bashrc |
|||
git clone git://github.com/joyent/node.git |
|||
cd node |
|||
./configure --prefix=~/local |
|||
make install |
|||
git clone git://github.com/isaacs/npm.git |
|||
cd npm |
|||
make install |
|||
</div> |
|||
</div> |
|||
<div class="ui tab" data-tab="win"> |
|||
<p>Download the <a href="http://nodejs.org/download/">NodeJS executable</a>.</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="no example"> |
|||
<h4>Add Semantic UI to Your Project</h4> |
|||
<p>Semantic UI is released as a package on NPM.</p> |
|||
<div class="ignored code" data-type="bash"> |
|||
# navigate to your project directory |
|||
npm install semantic-ui --save |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="no example"> |
|||
<h4>Run Setup</h4> |
|||
<p>Hey this is the fun part</p> |
|||
<img src="/images/setup/install.gif" class="ui image"> |
|||
</div> |
|||
|
|||
|
|||
<div class="no example"> |
|||
<h4>Include Semantic UI in Your Project</h4> |
|||
<div class="ignored code" data-type="html"> |
|||
<link rel="stylesheet" type="text/css" href="/semantic/dist/semantic.min.css"> |
|||
<script src="semantic/dist/semantic.min.js"></script> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Build Tools</h2> |
|||
|
|||
<div class="no example"> |
|||
<h4>Using Build Tools</h4> |
|||
<div class="ignored code" data-type="bash"> |
|||
cd semantic/ # or your install directory |
|||
gulp |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="no example"> |
|||
<h4>Available Commands</h4> |
|||
<table class="ui definition table"> |
|||
<thead> |
|||
<th>Command</th> |
|||
<th>Description</th> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<td>install</td> |
|||
<td>Asks install questions will automatically run if not setup.</td> |
|||
</tr> |
|||
<tr> |
|||
<td>watch (default)</td> |
|||
<td>Watches for changes in source files, and builds file on change</td> |
|||
</tr> |
|||
<tr> |
|||
<td>build</td> |
|||
<td>Build all files</td> |
|||
</tr> |
|||
<tr> |
|||
<td>clean</td> |
|||
<td>Cleans <code>dist/</code> folder</td> |
|||
</tr> |
|||
<tr> |
|||
<td>version</td> |
|||
<td>Outputs current version</td> |
|||
</tr> |
|||
<tr> |
|||
<td>build-javascript</td> |
|||
<td>Build js files</td> |
|||
</tr> |
|||
<tr> |
|||
<td>build-css</td> |
|||
<td>Build css files</td> |
|||
</tr> |
|||
<tr> |
|||
<td>build-assets</td> |
|||
<td>Build assets files</td> |
|||
</tr> |
|||
<tr> |
|||
<td>serve-docs</td> |
|||
<td>Serves files to local docs instance</td> |
|||
</tr> |
|||
<tr> |
|||
<td>build-docs</td> |
|||
<td>Builds files to docs folder</td> |
|||
</tr> |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="no example"> |
|||
<h4>Configuring Paths</h4> |
|||
<p>Build tool settings are stored in a special file called <code>semantic.json</code> It can be included in any folder that is in a parent folder of the semantic install folder. </p> |
|||
<p>If you used the npm or meteor, a semantic.json file is automatically generated for you in the root of your project. If you used a different install, you can run <code>gulp install</code> or manually rename <code>semantic.json.example</code>.</p> |
|||
<div class="ignored code"> |
|||
{ |
|||
// base path added to all other paths specified in "paths" |
|||
"base": "", |
|||
|
|||
"paths": { |
|||
|
|||
"source": { |
|||
|
|||
// source theme.config |
|||
"config" : "src/theme.config", |
|||
|
|||
// source definition folder |
|||
"definitions" : "src/definitions/", |
|||
|
|||
// source site theme |
|||
"site" : "src/site/", |
|||
|
|||
// source themes folder |
|||
"themes" : "src/themes/" |
|||
}, |
|||
|
|||
"output": { |
|||
// packaged source (both compressed/uncompressed) |
|||
"packaged" : "dist/", |
|||
|
|||
// uncompressed source |
|||
"uncompressed" : "dist/components/", |
|||
|
|||
// compressed source |
|||
"compressed" : "dist/components/", |
|||
|
|||
// output directory for theme assets |
|||
"themes" : "dist/themes/" |
|||
}, |
|||
|
|||
// directory for gulp clean task |
|||
"clean" : "dist/" |
|||
}, |
|||
|
|||
// when set to an integer permission, will set dist files with this file permission |
|||
"permission" : false, |
|||
|
|||
// whether gulp watch/build should run RTLCSS |
|||
"rtl": false |
|||
|
|||
// will only include components with these names |
|||
components: [ |
|||
'reset', |
|||
'site', |
|||
'button', |
|||
'container', |
|||
'divider', |
|||
'flag', |
|||
'header', |
|||
'icon', |
|||
'image', |
|||
'input', |
|||
'label', |
|||
'list', |
|||
'loader', |
|||
'rail', |
|||
'reveal', |
|||
'segment', |
|||
'step', |
|||
'breadcrumb', |
|||
'form', |
|||
'grid', |
|||
'menu', |
|||
'message', |
|||
'table', |
|||
'ad', |
|||
'card', |
|||
'comment', |
|||
'feed', |
|||
'item', |
|||
'statistic', |
|||
'accordion', |
|||
'checkbox', |
|||
'dimmer', |
|||
'dropdown', |
|||
'embed', |
|||
'modal', |
|||
'nag', |
|||
'popup', |
|||
'progress', |
|||
'rating', |
|||
'search', |
|||
'shape', |
|||
'sidebar', |
|||
'sticky', |
|||
'tab', |
|||
'transition', |
|||
'api', |
|||
'form', |
|||
'state', |
|||
'visibility' |
|||
], |
|||
|
|||
// whether to include special project maintainer tasks |
|||
admin: false |
|||
} |
|||
|
|||
</div> |
|||
</div> |
|||
|
|||
<h2 class="ui dividing header">Recipes</h2> |
|||
|
|||
<div class="no example"> |
|||
<h4>Import Gulp Tasks</h4> |
|||
<p>You don't have to use our gulp pipeline, just import the task into your own</p> |
|||
<div class="ignored code"> |
|||
var |
|||
watch = require('semantic/tasks/watch'), |
|||
build = require('semantic/tasks/build') |
|||
; |
|||
gulp.task('watch ui', 'Watch Semantic UI', watch)); |
|||
gulp.task('build ui', 'Watch Semantic UI', build)); |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
After Width: | Height: | Size: 171 KiB |
Loading…
Reference in new issue