From 4c6fe386fd2c1e294585a487da613666365055e2 Mon Sep 17 00:00:00 2001 From: jlukic Date: Tue, 16 Jun 2015 14:26:33 -0400 Subject: [PATCH] Copy edits --- server/documents/behaviors/api.html.eco | 66 +++- .../documents/collections/breadcrumb.html.eco | 2 +- server/documents/collections/form.html.eco | 360 ++---------------- server/documents/collections/grid.html.eco | 142 +++++-- server/documents/collections/menu.html.eco | 2 +- server/files/javascript/api.js | 9 + server/files/stylesheets/docs.css | 7 +- 7 files changed, 217 insertions(+), 371 deletions(-) diff --git a/server/documents/behaviors/api.html.eco b/server/documents/behaviors/api.html.eco index 339438fea..c0c95e19a 100755 --- a/server/documents/behaviors/api.html.eco +++ b/server/documents/behaviors/api.html.eco @@ -14,23 +14,63 @@ type : 'UI Behavior' <%- @partial('header', { tabs: { overview: 'Overview', usage: 'Usage', behaviors: 'Behaviors', settings: 'Settings' } }) %>
-
+
+ +
+

Integrates Seamlessly with UI

+

API is designed to make the process of integrating data sources to UI components seamless, tying API request state to UI states automatically.

+

For example adding an API behavior to an input will occur oninput, while a button, will query the server onclick.

+
+ + +
+ +
Click Me
+
Disabled
+
-
Integrates Seamlessly with UI
-

Attach an API event to a input, by default, it will occur oninput. Attach an API event to a button, it will occur onclick. API also ties API state to UI state: rate throttling, class adjustments for active, loading, disabled, syncing between multiple elements, and more.

+
+

Preserve Templated URLs

+

API helps you decouple URLs from your code. Use named API actions like get followers instead of URLs like http://foo.com/get/1.0/followers.json in your code.

+
+ $('.button') + .api({ + action: 'get followers' + }) + ; +
+

Centrally manage your entire API making sure you aren't caught modifying urls across your codebase. Define your endpoints using an intuitive templating system that automatically passes data found in your UI.

+
+ var api = { + 'get followers' : '/followers/{id}?results={count}', + 'create user' : '/create', + 'add user' : '/add/{id}', + 'search' : '/query/{query}/{/sort}' + }; +
+
-
Templated URLs
-

Use API actions like 'follow user' and not server urls in your code. Centrally manage your entire API making sure you aren't caught modifying urls across your codebase. Define your endpoints using an intuitive templating system that automatically passes data found in your UI.

+
+

HTTP 200 is Not Success

+

Parse your JSON for success conditions before callbacks fire, making sure server errors caught correctly, still trigger error conditions in your front end code.

+
+ // Responses without this status will trigger error conditions + $.fn.api.settings.successTest = function(response) { + return response.status == 'OK'; + } +
+
-
Locally Cached Responses
-

When local caching is enabled repeated requests for the same endpoint will automatically return locally cached responses, avoiding a server roundtrip.

+
+

Translate APIs on the Fly

+

Using a third party API that uses some unruly code? Not a problem! API lets you modify an APIs raw JSON response before it is consumed by your code.

+
-
Text State Management
-

API helps your UI keep track of server events, and is designed to work with Semantic's state naming conventions to track loading, disabled, and active states.

-

This allows you to do things like set maximum and minimum UI load times, toggle between text states, and sync UI states between multiple elements with the same API actions.

+
+

Tools for Mocking

+

New powerful callbacks like mockResponse and mockResponseAsync let you asynchronously mock responses and trigger the same callbacks as your API.

+
-
Server Traces For Humans
-

View your API request as it occurs in your web console, get errors if required url variables are missing, and useful performance metrics.

@@ -805,7 +845,7 @@ type : 'UI Behavior' create cache - Creates new server resposne cache, removing all locally cached URLs + Creates new cache, removing all locally cached URLs destroy diff --git a/server/documents/collections/breadcrumb.html.eco b/server/documents/collections/breadcrumb.html.eco index 38f42b22e..718723b98 100755 --- a/server/documents/collections/breadcrumb.html.eco +++ b/server/documents/collections/breadcrumb.html.eco @@ -46,7 +46,7 @@ themes : ['Default']
-

Elements

+

Contents

Divider

diff --git a/server/documents/collections/form.html.eco b/server/documents/collections/form.html.eco index 554f338f5..d20dc7ef5 100755 --- a/server/documents/collections/form.html.eco +++ b/server/documents/collections/form.html.eco @@ -60,58 +60,7 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub']
@@ -120,250 +69,7 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub']
Select Country
-
-
Andorra
-
United Arab Emirates
-
Afghanistan
-
Antigua
-
Anguilla
-
Albania
-
Armenia
-
Netherlands Antilles
-
Angola
-
Argentina
-
American Samoa
-
Austria
-
Australia
-
Aruba
-
Aland Islands
-
Azerbaijan
-
Bosnia
-
Barbados
-
Bangladesh
-
Belgium
-
Burkina Faso
-
Bulgaria
-
Bahrain
-
Burundi
-
Benin
-
Bermuda
-
Brunei
-
Bolivia
-
Brazil
-
Bahamas
-
Bhutan
-
Bouvet Island
-
Botswana
-
Belarus
-
Belize
-
Canada
-
Cocos Islands
-
Congo
-
Central African Republic
-
Congo Brazzaville
-
Switzerland
-
Cote Divoire
-
Cook Islands
-
Chile
-
Cameroon
-
China
-
Colombia
-
Costa Rica
-
Serbia
-
Cuba
-
Cape Verde
-
Christmas Island
-
Cyprus
-
Czech Republic
-
Germany
-
Djibouti
-
Denmark
-
Dominica
-
Dominican Republic
-
Algeria
-
Ecuador
-
Estonia
-
Egypt
-
Western Sahara
-
Eritrea
-
Spain
-
Ethiopia
-
European Union
-
Finland
-
Fiji
-
Falkland Islands
-
Micronesia
-
Faroe Islands
-
France
-
Gabon
-
England
-
Grenada
-
Georgia
-
French Guiana
-
Ghana
-
Gibraltar
-
Greenland
-
Gambia
-
Guinea
-
Guadeloupe
-
Equatorial Guinea
-
Greece
-
Sandwich Islands
-
Guatemala
-
Guam
-
Guinea-Bissau
-
Guyana
-
Hong Kong
-
Heard Island
-
Honduras
-
Croatia
-
Haiti
-
Hungary
-
Indonesia
-
Ireland
-
Israel
-
India
-
Indian Ocean Territory
-
Iraq
-
Iran
-
Iceland
-
Italy
-
Jamaica
-
Jordan
-
Japan
-
Kenya
-
Kyrgyzstan
-
Cambodia
-
Kiribati
-
Comoros
-
Saint Kitts and Nevis
-
North Korea
-
South Korea
-
Kuwait
-
Cayman Islands
-
Kazakhstan
-
Laos
-
Lebanon
-
Saint Lucia
-
Liechtenstein
-
Sri Lanka
-
Liberia
-
Lesotho
-
Lithuania
-
Luxembourg
-
Latvia
-
Libya
-
Morocco
-
Monaco
-
Moldova
-
Montenegro
-
Madagascar
-
Marshall Islands
-
MacEdonia
-
Mali
-
Burma
-
Mongolia
-
MacAu
-
Northern Mariana Islands
-
Martinique
-
Mauritania
-
Montserrat
-
Malta
-
Mauritius
-
Maldives
-
Malawi
-
Mexico
-
Malaysia
-
Mozambique
-
Namibia
-
New Caledonia
-
Niger
-
Norfolk Island
-
Nigeria
-
Nicaragua
-
Netherlands
-
Norway
-
Nepal
-
Nauru
-
Niue
-
New Zealand
-
Oman
-
Panama
-
Peru
-
French Polynesia
-
New Guinea
-
Philippines
-
Pakistan
-
Poland
-
Saint Pierre
-
Pitcairn Islands
-
Puerto Rico
-
Palestine
-
Portugal
-
Palau
-
Paraguay
-
Qatar
-
Reunion
-
Romania
-
Serbia
-
Russia
-
Rwanda
-
Saudi Arabia
-
Solomon Islands
-
Seychelles
-
Sudan
-
Sweden
-
Singapore
-
Saint Helena
-
Slovenia
-
Svalbard, I Flag Jan Mayen
-
Slovakia
-
Sierra Leone
-
San Marino
-
Senegal
-
Somalia
-
Suriname
-
Sao Tome
-
El Salvador
-
Syria
-
Swaziland
-
Caicos Islands
-
Chad
-
French Territories
-
Togo
-
Thailand
-
Tajikistan
-
Tokelau
-
Timorleste
-
Turkmenistan
-
Tunisia
-
Tonga
-
Turkey
-
Trinidad
-
Tuvalu
-
Taiwan
-
Tanzania
-
Ukraine
-
Uganda
-
Us Minor Islands
-
United States
-
Uruguay
-
Uzbekistan
-
Vatican City
-
Saint Vincent
-
Venezuela
-
British Virgin Islands
-
Us Virgin Islands
-
Vietnam
-
Vanuatu
-
Wallis and Futuna
-
Samoa
-
Yemen
-
Mayotte
-
South Africa
-
Zambia
-
Zimbabwe
-
+ <%- @partial('examples/single/flag-menu') %>
@@ -475,7 +181,7 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub'] -

Elements

+

Contents

Field

@@ -490,7 +196,7 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub']

Field Groups

-

Fields can exist together in a group to share properties

+

Fields can be grouped

Field groups automatically receive responsive styling, swapping to one field per row on mobile devices.
@@ -509,31 +215,38 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub']
-
- +
+ +
+
+
-
- - -
+ +
-
- - -
+ +
-
- - -
+ +
-
-
- - -
+
+
+
+
+
+
+
+ + +
+
+ +
+
+
@@ -541,12 +254,19 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub']

Text Area

-

A textarea uses the default form element

+

A textarea can be used to allow for extended user input.

+
+ To specify an approximate text area size use the rows attribute. +
- +
+
+ + +
@@ -1506,7 +1226,7 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub']
-

Groups

+

Group Variations

Evenly Divided

diff --git a/server/documents/collections/grid.html.eco b/server/documents/collections/grid.html.eco index 76dfa56e4..5cdf7e7b5 100755 --- a/server/documents/collections/grid.html.eco +++ b/server/documents/collections/grid.html.eco @@ -26,7 +26,7 @@ themes : ['Default']

Grids

A grid is a structure with a long history used to align negative space in designs.

-

Using a grid makes content appear to flow naturally on your page, and allows you to quickly adjust layouts without assigning specific pixel sizes to page elements.

+

Using a grid makes content appear to flow more naturally on your page.

@@ -42,39 +42,87 @@ themes : ['Default']

Columns

-

Grids divide horizontal space into indivisible units called columns. All content in a grid must specify their width in terms of the grid's column count. Grid systems use an arbitrary column count per row. Semantic's default theme uses 16 columns.

+

Grids divide horizontal space into indivisible units called "columns". All columns in a grid must specify their width as proportion of the total available row width.

+

All grid systems chooses an arbitrary column count to allow per row. Semantic's default theme uses 16 columns.

-

The following example specifies each column as four wide, meaning four columns of four, 16 / 4 = 4 will fit in each grid row.

+

The example below shows four four wide columns will fit in the first row, 16 / 4 = 4, and three various sized columns in the second row. 2 + 8 + 6 = 16

-

The default column count, and other arbitrary features of grids can be changed by adjusting Semantic UI's underlying theming variables.

+

The default column count, and other arbitrary features of grids can be changed by adjusting Semantic UI's underlying theming variables.

+
+
+

Rows

-

Rows are groups of columns which are aligned horizontally. After each group of columns vertical spacing is added to separate each group of columns, creating vertical rhythm. -

-
-
-
-
-
-
-
-
+

Rows are groups of columns which are aligned horizontally.

+

Rows can either be explicit, marked with an additional row element, or implicit, automatically occuring when no more space is left in a previous row. +

+

After each group of columns vertical spacing is added to separate each group of columns, creating vertical rhythm. +

+
+
+
+
+
+
+
+
+

Gutters

-

Grid columns and rows are separated by negative space called "gutters". Gutters are fixed width spacers which, unlike columns, do not adjust in size as a grid changes.

-

Since all grid columns in css receive the same gutters, grids use negative margins to make sure that the first and last columns sit flush with content outside the grid.

-

To have first and last rows or columns include padding, use a padded grid variation.

+

Grid columns are separated by areas of white space referred to as "gutters". Gutters improve legibility by providing, negative space between page elements.

+

Gutters remain a constant size regardless of the width of the grid, or how many columns are in a row. To increase the size of gutters in a particular grid, you can use a relaxed grid variation.

+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+

Negative Margins

+

Since all grid columns include gutters, grids use negative margins to make sure that the first and last columns sit flush with content outside the grid.

+

In the following example, you can see even though the top row has padding, the attached button still sits flush with the edge of the grid.

+

In some cases, like when a column or row is colored, you may want to avoid using negative margins. You can do this by using a padded grid variation.

Button before grid
@@ -90,9 +138,9 @@ themes : ['Default']

Content Width

-

Grids do not have a maximum width, and will automatically flow to contain the entire width of the element they are placed inside.

-

Containers are elements designed to contain content to a reasonable maximum width for display based on the size of the user's screen.

-

Using grid and container together is the best way to display page contents in a grid.

+

Grids are fluid and will automatically flow in size to take the maximum available width.

+

Containers are elements designed to limit content to a reasonable maximum width for display based on the size of the user's screen.

+

Using a ui grid container is the best way to include top-level page content inside a grid.

In version 1.x of Semantic UI page grid were used to to contain the maximum width of grids holding page content. Page grid have been deprecated in favor for the simpler container element.

@@ -102,7 +150,7 @@ themes : ['Default']

Columns

-

Column Flow

+

Automatic Flow

Most grids do not need to specify rows. Content will automatically flow to the next row when all the grid columns are taken in the current row.

@@ -158,7 +206,7 @@ themes : ['Default']

Grouping

-

Rows are groups of columns. They can be used to describe columns which share variations.

+

Row wrappers allow you to apply variations to a group of columns.

@@ -171,7 +219,7 @@ themes : ['Default']

Clearing Content

-

Rows will automatically clear previous content, making them useful when using floated variations.

+

Row wrappers will automatically clear previous columns, making them useful when using floated variations.

@@ -186,8 +234,8 @@ themes : ['Default']
-

Special Grid Types

-

Some special grid types, like divided or celled require row wrappers to work correctly.

+

Special Grids

+

Additionally, some types of grids, like divided or celled require row wrappers to apply formatting correctly.

@@ -220,7 +268,7 @@ themes : ['Default']

Nesting Grids

-

Grids can be nested inside of other grids sub-dividing columns into grids

+

Grids can be placed inside of other grids, letting you sub-divide columns.

@@ -242,9 +290,9 @@ themes : ['Default']
-

Using Colors

-

Grids can use named color variation to apply background colors, but only with padded grid that do not include negative margins.

-

To include a color that is not available in the default palette its perfectly fine to use css

+

Colors

+

Grids can use named colors variations to add background colors, but only with padded grid that do not include negative margins.

+

To include a color that is not available in the default palette its perfectly fine to use CSS

@@ -271,7 +319,7 @@ themes : ['Default']

Automatic Column Count

-

equal width variations will automatically divide columns evenly. This is useful with dynamic content where you may not know the amount of content in advance.

+

The equal width variation will automatically divide column width evenly. This is useful with dynamic content where you do not know the column count in advance.

@@ -350,7 +398,7 @@ themes : ['Default']

Stackable

-

A stackable grid will automatically stack rows to a single columns on mobile devices

+

A stackable grid will automatically stack rows to a single columns on mobile devices

@@ -391,8 +439,11 @@ themes : ['Default']

Manual Tweaks

-

Although patterns like doubling or stackable are useful at simplifying rsponsive design in most cases, you can also specify column width, or visibility by device as well using (x) wide device or device only variations. +

Although design patterns like doubling or stackable are useful at simplifying responsive styling, you can also manually tweak device presentation by specifying (x) wide device or device only columns or rows.

+
+
+
@@ -555,7 +606,7 @@ themes : ['Default']
-

Elements

+

Contents

Rows

@@ -802,6 +853,29 @@ themes : ['Default']
+
+
+
+ 1 +
+
+ 2 +
+
+
+
+ +
+
+
+
+ 1 +
+
+ 2 +
+
+
@@ -1176,7 +1250,7 @@ themes : ['Default']
-

Stackable Grid

+

Stackable

A grid can have its columns stack on-top of each other after reaching mobile breakpoints

To see a grid stack, try resizing your browser to a small width diff --git a/server/documents/collections/menu.html.eco b/server/documents/collections/menu.html.eco index 320d5e945..4ceadc25a 100755 --- a/server/documents/collections/menu.html.eco +++ b/server/documents/collections/menu.html.eco @@ -401,7 +401,7 @@ themes : ['Default', 'Chubby', 'GitHub', 'Material']
-

Elements

+

Contents

Header

diff --git a/server/files/javascript/api.js b/server/files/javascript/api.js index 5498d1625..4bb5ae57c 100644 --- a/server/files/javascript/api.js +++ b/server/files/javascript/api.js @@ -21,6 +21,15 @@ semantic.api.ready = function() { }, 500); }; + $('.test.example .ui.button') + .api() + ; + $('.test.example .ui.input input') + .api({ + stateContext: '.test.example .ui.input' + }) + ; + $('form .ui.dropdown') .dropdown() ; diff --git a/server/files/stylesheets/docs.css b/server/files/stylesheets/docs.css index 090321d7d..31cf68690 100755 --- a/server/files/stylesheets/docs.css +++ b/server/files/stylesheets/docs.css @@ -70,8 +70,7 @@ code { font-family: "Monaco","Menlo","Ubuntu Mono","Consolas","source-code-pro",monospace; font-size: 0.875em; font-weight: bold; - margin-top: -3px; - padding: 3px 6px; + padding: 1px 6px; vertical-align: baseline; } pre code { @@ -937,6 +936,10 @@ pre code { height: calc(100% - 2rem); box-shadow: 0px 0px 0px 1px #DDDDDD inset; } +#example .highlighted.example .relaxed.grid:before { + width: calc(100% - 3rem); + left: 1.5em; +} /* Consecutive */ #example .highlighted.example > .grid + .grid { margin-top: 1rem;