diff --git a/server/documents/behaviors/api.html.eco b/server/documents/behaviors/api.html.eco index 4aeb7638b..2f110d328 100755 --- a/server/documents/behaviors/api.html.eco +++ b/server/documents/behaviors/api.html.eco @@ -501,10 +501,11 @@ type : 'UI Behavior' $('.follow.button') .api({ onResponse: function(response) { - // do some adjustments to response + // make some adjustments to response return response; }, successTest: function(response) { + // test whether a json response is valid return response.success || false; } onSuccess: function(response) { diff --git a/server/documents/introduction/getting-started.html.eco b/server/documents/introduction/getting-started.html.eco new file mode 100644 index 000000000..480010b40 --- /dev/null +++ b/server/documents/introduction/getting-started.html.eco @@ -0,0 +1,289 @@ +--- +layout : 'default' +css : 'started' +standalone : true + +title : 'Getting Started' +description : 'Getting started with Semantic UI' +type : 'Introduction' +--- + + +<%- @partial('header') %> + +
+ +

Installing

+ +
+ NPM + Atmosphere + Bower + Git +
+ +
+ +
+
+
+

Install NodeJS

+

To use our build tools you will need Node

+ +
+
+ +
+ Mac + Linux + Windows +
+
+

Option 1: Homebrew

+

After installing homebrew

+
+ brew install node +
+

Option 2: Git

+
+ git clone git://github.com/ry/node.git + cd node + ./configure + make + sudo make install +
+
+
+

This is a popular install method that will avoid requiring 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 +
+
+
+

Download the NodeJS executable.

+
+
+
+
+
+

Add Semantic UI to Your Project

+

Semantic UI is released as a package on NPM.

+
+ # navigate to your project directory + npm install semantic-ui --save +
+
+ +
+

Run Setup

+

Hey this is the fun part

+ +
+ + +
+

Include Semantic UI in Your Project

+
+ + +
+
+
+ +

Build Tools

+ +
+

Using Build Tools

+
+ cd semantic/ # or your install directory + gulp +
+
+ +
+

Available Commands

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandDescription
installAsks install questions will automatically run if not setup.
watch (default)Watches for changes in source files, and builds file on change
buildBuild all files
cleanCleans dist/ folder
versionOutputs current version
build-javascriptBuild js files
build-cssBuild css files
build-assetsBuild assets files
serve-docsServes files to local docs instance
build-docsBuilds files to docs folder
+
+ +
+

Configuring Paths

+

Build tool settings are stored in a special file called semantic.json It can be included in any folder that is in a parent folder of the semantic install folder.

+

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 gulp install or manually rename semantic.json.example.

+
+ { + // 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 + } + +
+
+ +

Recipes

+ +
+

Import Gulp Tasks

+

You don't have to use our gulp pipeline, just import the task into your own

+
+ 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)); +
+
+ +
\ No newline at end of file diff --git a/server/documents/introduction/new.html.eco b/server/documents/introduction/new.html.eco index 19c24cd96..3f537e753 100644 --- a/server/documents/introduction/new.html.eco +++ b/server/documents/introduction/new.html.eco @@ -23,11 +23,17 @@ type : 'Introduction' View Release Notes +

Project

+
+

Built with Flexbox

+

13 components: Form, Grid, Menu, Message, Button, Segment, Step, Dropdown, Modal, Feed, Statistic, Card, Item now use flexbox for positioning. This allows for elements to automatically match heights, and resize content

+ +

Grids

-

Flexbox

+

Equal Height by Default

Grids in 2.0 now use flexbox and are equal height across rows by default.

@@ -205,8 +211,9 @@ type : 'Introduction'
-

Nested Menus

-

Nested scrolling menus are now supported. These menus support all the same keyboard shortcuts and filtering as regular menus.

+

Scrolling and Nested Menus

+

Scrolling menu and nested menus are now supported.

+

Listing choices in a nested menu will still give all the same keyboard shortcuts and filtering as regular menus.

Filter Posts @@ -270,7 +277,6 @@ type : 'Introduction'
  • ctrl+click will add a single additional selected label
  • shift+right will extend selection
  • page down and page up will select first element in next page
    • -
  • a-z will select value matching first letter
  • Custom error messages are now supported with search selects
    • @@ -280,7 +286,7 @@ type : 'Introduction'

    Horizontal Groups

    -

    Horizontal groups are now available.

    +

    Horizontal groups are now available for segment.

    Top

    @@ -362,7 +368,7 @@ type : 'Introduction'

    Flexible Menus

    -

    Menus have been completely rewritten to use flexbox. Items inside a menu will automatically adjust to align with other menu items regardless of size.

    +

    Menus have been completely rewritten to use flexbox. Items inside a menu will automatically adjust to align with other menu items regardless of size.

    @@ -380,7 +386,7 @@ type : 'Introduction'

    Vertical Tabs

    -

    Menus now include a new vertical tabular menu type.

    +

    Menus now include a new vertical tabular menu type.

    @@ -507,7 +513,7 @@ type : 'Introduction'

    Translates Any API

    -

    API now lets you adjust a server's JSON response using a new callback, onResponse. This can let you restructure third party APIs to match your local data requirements.

    +

    API now lets you adjust a server's JSON response using a new callback, onResponse. This can let you restructure third party APIs to match your local data requirements.

    @@ -559,7 +565,7 @@ type : 'Introduction'

    Mocked Responses

    -

    API now supports mocked responses, letting you specify how responses are returned in advance.

    +

    API now supports mocked responses, letting you specify how responses are returned in advance.

    $('.toggle.button') .api({ @@ -582,11 +588,11 @@ type : 'Introduction'

    Custom Backends

    -

    API can now use custom asynchronous callbacks for resolving API requests, this can let you use other custom XHR backends, or local data to resolve requests.

    +

    API can now use custom asynchronous callbacks for resolving API requests, this can let you use other custom XHR backends, or local data to resolve requests.

    $('.toggle.button') .api({ - // lets just pretend this button mostly doesnt work + // lets wait a half second then try your luck mockResponseAsync: function(settings, callback) { var unlikelySuccess = (Math.random() < 0.3), diff --git a/server/files/javascript/docs.js b/server/files/javascript/docs.js index 35e73611a..9504b9196 100644 --- a/server/files/javascript/docs.js +++ b/server/files/javascript/docs.js @@ -74,6 +74,8 @@ semantic.ready = function() { $shownExample = $example.filter('.shown'), $prerenderedExample = $example.has('.ui.dropdown, .ui.search, .ui.rating, .ui.dimmer, .ui.embed'), + $visibilityExample = $example.filter('.visiblity').find('.overlay, .demo.segment, .items img'), + $sidebarButton = $('.fixed.launch.button'), $code = $('div.code').not('.existing'), @@ -792,6 +794,7 @@ semantic.ready = function() { $sectionExample.visibility('refresh'); $sticky.sticky('refresh'); $footer.visibility('refresh'); + $visibilityExample.visibility('refresh'); }, createAnnotation: function() { diff --git a/server/files/stylesheets/docs.css b/server/files/stylesheets/docs.css index 0a8513296..3c7bd57b9 100755 --- a/server/files/stylesheets/docs.css +++ b/server/files/stylesheets/docs.css @@ -924,6 +924,19 @@ blockquote .author { display: none; } +/*---------------- + Getting Started +-----------------*/ + +#example.started .tab.segment > .example:first-child { + margin-top: 0em; + padding-top: 0em; +} +#example.started .tab.segment > .example:last-child { + margin-bottom: 0em; + padding-bottom: 0em; +} + /*---------------- Theming -----------------*/ diff --git a/server/raw/images/setup/install.gif b/server/raw/images/setup/install.gif new file mode 100644 index 000000000..a9d8e6603 Binary files /dev/null and b/server/raw/images/setup/install.gif differ