From 4b42fb3392ef2ed03a1418b9b448fae5fb4325da Mon Sep 17 00:00:00 2001 From: Jack Lukic Date: Tue, 30 Jun 2015 01:57:28 -0400 Subject: [PATCH] All my writing --- server/documents/collections/form.html.eco | 20 +- server/documents/hotfix.html.eco | 76 ++-- .../introduction/advanced-usage.html.eco | 99 ++++- .../introduction/build-tools.html.eco | 18 +- .../introduction/getting-started.html.eco | 6 +- server/documents/introduction/new.html.eco | 53 ++- server/documents/modules/modal.html.eco | 23 +- server/documents/usage/theming.html.eco | 360 +++++++++++++++--- server/files/javascript/docs.js | 14 +- server/files/javascript/new.js | 22 ++ server/files/javascript/theming.js | 4 + server/files/stylesheets/docs.css | 5 +- 12 files changed, 559 insertions(+), 141 deletions(-) diff --git a/server/documents/collections/form.html.eco b/server/documents/collections/form.html.eco index d4e729b17..e8cecba42 100755 --- a/server/documents/collections/form.html.eco +++ b/server/documents/collections/form.html.eco @@ -38,10 +38,10 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub']
- +
- +
@@ -49,10 +49,10 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub']
- +
- +
@@ -77,7 +77,7 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub']
- +
Type
@@ -99,17 +99,17 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub']
- +
- +
- @@ -126,7 +126,7 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub']
- +
@@ -137,7 +137,7 @@ themes : ['Default', 'Flat', 'Chubby', 'GitHub']
- +
Saved Contacts
diff --git a/server/documents/hotfix.html.eco b/server/documents/hotfix.html.eco index 633c9c4a3..6cb550dc5 100644 --- a/server/documents/hotfix.html.eco +++ b/server/documents/hotfix.html.eco @@ -1,16 +1,19 @@ --- -layout : 'blank' -css : 'hotfix' +layout : 'blank' +css : 'hotfix' +standalone : true -title : 'Test Page' -type : 'Library' +title : 'Test Page' +type : 'Library' --- @@ -21,47 +24,30 @@ $(document).ready(function() {
-
- - -
- -
- -
- - -
- -
- -
- - -
- -
- -
- - -
- - - -
- -
- - -
- +
+
+
+
+
+ + + +
+
Reset
+
Clear
+
Show
+
+
+
+
-
-
- - -
\ No newline at end of file diff --git a/server/documents/introduction/advanced-usage.html.eco b/server/documents/introduction/advanced-usage.html.eco index 8610f1d39..038cec803 100644 --- a/server/documents/introduction/advanced-usage.html.eco +++ b/server/documents/introduction/advanced-usage.html.eco @@ -12,7 +12,7 @@ type : 'Introduction'
-

Custom Gulp Pipelines

+

Custom Pipelines

Importing Gulp Tasks

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

@@ -27,9 +27,9 @@ type : 'Introduction'
-

Component Releases

+

Single Components

-

Single Component Repos

+

Tagged Releases

Component repos are released on NPM and as tagged releases on github.

Check the list of repos available under Semantic Org on GitHub

Each component's release notes will automatically update with the relevant notes for that component from the main release.

@@ -37,9 +37,10 @@ type : 'Introduction' npm install semantic-ui-component
+

Server-Side Rendering

-

Individual components repos include an index.js file to simplify require use with NodeJS, for server-side rendering or with Browserify.

+

Individual components repos include an auto-generated index.js file to simplify require use with NodeJS, for server-side rendering or with Browserify.

npm install semantic-ui-dropdown
@@ -52,21 +53,24 @@ type : 'Introduction'

Importing LESS

+

LESS Only Distribution

A special distribution Semantic-UI-LESS is available for projects that use custom integrations and do not require our build tools.

-

All Components

+
LESS source files are not prefixed, and will need to be run through autoprefixer before being used
+
+ +
+

Importing Semantic

semantic.less is available in all releases as an entry point for importing multiple components from other LESS files.

/* Import all components */ @import 'src/semantic';
-

Before LESS files will work correctly you will to manually rename theme.config.example. -

To begin using a site theme you will also need to rename _site/ to site/.

-
LESS source files are not prefixed, and will need to be run through autoprefixer before being used
+
-

Single Components

+

Importing Components

If you need to import individual components, you should scope each import to avoid inheritance issues.

/* Import specific components with scope */ @@ -75,4 +79,81 @@ type : 'Introduction'
+

Running Docs Locally

+ +
+

Download Docs Server

+

The easiest way to get Semantic UI docs is to clone the repo

+
+ git clone git@github.com:Semantic-Org/Semantic-UI-Docs.git +
+
+
+

Install Dependencies

+

Semantic UI's documentation is written in Docpad an amazing static site generator built in NodeJS

+
+ cd docs/ + npm install +
+
+ +
+

A Note About Paths

+

Semantic UI's build tools include two special commands build-docs and serve-docs for use with the documentation. These will pass changes from the ui/ folder directly to a live docs server.

+

These gulp tasks expect two sibling folders

+
+
+ +
+
ui/
+
Files from semantic ui repo
+
+
+
+ +
+
docs/
+
Files from docs repo
+
+
+
+
+
+

Build UI

+

The first time you run docs you will need to build the whole project once

+
+ cd ui/ + gulp build-docs +
+
+
+

Run Docpad Server

+

Docpad

+
+ cd docs/ + # initial build may take several minutes + docpad run +
+
+
+

Serve UI to Docs

+

You can then continue to make modifications to UI and "serve" these files to a live docs instance to see your changes immediately

+
+ cd ui/ + gulp build-docs +
+
+
+

Hosted Docs

+

If you are managing your documentation you can automatically deploy to github pages using a built in docpad gh-pages plugin

+

For more information about GitHub pages, check out the docs on GitHub

+
+ docpad deploy-ghpages --env static +
+
+
+

Custom Docs Paths

+

Doc task paths are specified in a file tasks/config/docs.js and can be adjusted to use any folder set-up necessary for your project.

+
+
\ No newline at end of file diff --git a/server/documents/introduction/build-tools.html.eco b/server/documents/introduction/build-tools.html.eco index 8c8b15a72..71e6dd432 100644 --- a/server/documents/introduction/build-tools.html.eco +++ b/server/documents/introduction/build-tools.html.eco @@ -14,6 +14,20 @@ type : 'Introduction'

Overview

+
+

30 Second Explanation

+

Download Semantic UI navigate to the install folder then run a gulp command.

+ +

To build all files:

+
+ gulp build +
+ +

To watch for changes

+
+ gulp watch +
+

Why Build Tools?

Semantic UI uses Gulp for several reasons:

@@ -102,7 +116,7 @@ type : 'Introduction'
-

Available Commands

+

Gulp Commands

Below is a list of all available gulp commands

@@ -112,7 +126,7 @@ type : 'Introduction' - + diff --git a/server/documents/introduction/getting-started.html.eco b/server/documents/introduction/getting-started.html.eco index 0fc15f208..62471a2ae 100644 --- a/server/documents/introduction/getting-started.html.eco +++ b/server/documents/introduction/getting-started.html.eco @@ -10,7 +10,7 @@ type : 'Introduction' --- -<%- @partial('header', { tabs: { install: 'Install', packages: 'Other Packages' } }) %> +<%- @partial('header') %>
@@ -22,8 +22,8 @@ type : 'Introduction'

Using Build Tools

-

Semantic UI uses css variables to let users manage user themed versions of components. Build tools are included in Semantic UI to help compile themed files for your project.

-

The easiest way to install Semantic UI is our NPM package which contains special install scripts to make setup and updates seamless.

+

Semantic UI packaged Gulp build tools so your project can preserve its own theme changes.

+

The easiest way to install Semantic UI is our NPM package which contains special install scripts to make setup interactive and updates seamless.

For installing with specific integrations like, Ember, React, or Meteor, see our integration guide

For integrating Semantic UI tasks into your own build tools see our advanced usage section.

diff --git a/server/documents/introduction/new.html.eco b/server/documents/introduction/new.html.eco index c773baa1b..7afbb4f84 100644 --- a/server/documents/introduction/new.html.eco +++ b/server/documents/introduction/new.html.eco @@ -45,8 +45,8 @@ type : 'Main'
-

New Colors

-

2.0 includes additional named colors olive, violet, brown and grey which help provide more expressiveness with color variations.

+

Complete Spectrum

+

Semantic now includes twelve named colors, enough for most languages to distinguish between colors. New in 2.0 are: olive, violet, brown and grey.

Grey Red Orange @@ -82,6 +82,15 @@ type : 'Main'
+
+

New Default Theme

+

All components have received a face-lift for 2.0. Styles give slightly more negative space and a few idiosyncratic design touches have been removed.

+
+
+

More Precise EM Values

+

EM sizing has been improved in 2.0, with all values rounding to exact pixel values. This helps common relative sizing pitfalls like rounding errors in vertical alignment.

+
+

Grids

@@ -264,7 +273,7 @@ type : 'Main'
-

Scrolling and Nested Menus

+

Scrolling 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.

@@ -492,6 +501,44 @@ type : 'Main'
+

Form

+ +
+

Autocomplete

+

Form now include custom styling for browser autocompleted form fields. Autocompleted fields can also specify focused autocomplete, and errored autocomplete styles.

+ +
+

Shipping Information

+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+
Submit
+ + +
+

Dimmer

diff --git a/server/documents/modules/modal.html.eco b/server/documents/modules/modal.html.eco index 5ab51be7d..3eb26e7f4 100755 --- a/server/documents/modules/modal.html.eco +++ b/server/documents/modules/modal.html.eco @@ -208,7 +208,7 @@ themes : ['Default', 'Material']

Types

-

Standard

+

Modal

A standard modal

$('.ui.modal') @@ -408,6 +408,27 @@ themes : ['Default', 'Material']

Examples

+
+

Dimmer Variations

+

Modals can specify additional variations like blurring or inverted which adjust how the dimmer displays.

+
+ $('.small.modal') + .modal({ + inverted: true + }) + .modal('show') + ; +
+
+ $('.small.modal') + .modal({ + blurring: true + }) + .modal('show') + ; +
+
+

Scrolling Modal

When your modal content exceeds the height of the browser the scrollable area will automatically expand to include just enough space for scrolling, without scrolling the page below.

diff --git a/server/documents/usage/theming.html.eco b/server/documents/usage/theming.html.eco index 23f5e3eba..e0466279c 100644 --- a/server/documents/usage/theming.html.eco +++ b/server/documents/usage/theming.html.eco @@ -15,6 +15,7 @@ type : 'Usage' +
@@ -35,23 +36,124 @@ type : 'Usage'

Instead of having to create components from a blank canvas, developers using Semantic UI only need to specify how their components should differ from the default theme using CSS variables.

+

- Themes + Examples

-

Parts of a Theme

+

Global Inheritance

-

Themes are made up of two files a .variables file and a .overrides file.

+

Semantic UI includes twelve named colors. Components with color variations inherit these global variables when defining how colors should appear.

-

A .variables file specifies variables which should be adjusted for a theme.

+

Each level of inheritance can includes a global file site.variables which can define theme-wide defaults that each component can extend.

-

An .overrides file adds additional css rules from the baseline definition which should be included with an element. This file also has access to all inherited variables for a component.

+
+ @primaryColor: @pink; + @secondaryColor: @grey; + + @red : #B03060; + @orange : #FE9A76; + @yellow : #FFD700; + @olive : #32CD32; + @green : #016936; + @teal : #008080; + @blue : #0E6EB8; + @violet : #EE82EE; + @purple : #B413EC; + @pink : #FF1493; + @brown : #A52A2A; + @grey : #A0A0A0; + @black : #000000; +
+ + + +
All Colors
+ + + + + + + + + + + + +
+
+

Component Inheritance

+

Components inherit default values from site.variables which they may redefine specifically for their component

+

For example, you could decide that instead of the boring default grey checkboxes, you want yours to include your site's branded colors

+
+ /* Checkbox */ + @checkboxActiveBackground: @primaryColor; + @checkboxActiveBorderColor: @primaryColor; + @checkboxActiveCheckColor: @white; + @checkboxTransition: none; + + /* Slider */ + @sliderOnLineColor: @primaryColor; + + /* Radio */ + @radioActiveBackground: @primaryColor; +
+
+ + +
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+ + +
+
+ +

+ Anatomy of a Component +

-

Inheritance

-

Theming variables contain three separate levels of inheritance.

-

Each step represents a different level of permanence for a variable.

+

Themes

+

Themes contain three separate levels of variable inheritance.

+

Each of these let developers store a different level level of permanence for a variable.

@@ -64,19 +166,204 @@ type : 'Usage'
Packaged Theme
-
Packagable Component
+
Distributable Packages
-
+
Site Theme
-
Per-Site Changes
+
Site Specific Changes
+
+
+
+
+ +
+

Default Theme

+

src/themes/default/{type}/{element}

+
+
+ +
+
src
+
+
+ +
+
themes
+
+
+
+ +
+
default
+
Default theme
+
+
+
+
+
+
+
+
+
+

The default theme provides baseline variables for a component.

+

The best way to understand what variables are available to be used with a component is to examine a components default variables file.

+
+ +
+

Packaged Theme

+

src/themes/theme-name/{type}/{element}.variables

+

src/themes/theme-name/{type}/{element}.overrides

+
+
+ +
+
src
+
+
+ +
+
themes
+
+
+
+ +
+
theme_name
+
Theme called "theme-name"
+
+
+
+
+
+
+

Packaged themes are themes bundled together in a folder for distribution. These can be downloaded from the internet, or passed between projects.

+

Packaged themes are specified by name in your theme.config file.

+
+

Site Theme

+

src/site/{type}/{element}

+
+
+ +
+
src
+
+
+ +
+
themes
+
+
+
+ +
+
github
+
Theme called "github"
+
+
+
+
+
+
+
+
+
+

A site theme, not to be mistaken with site.variables a file located in every theme, is a special user theme that can be loaded on top of all other themes.

+

This is the best location to store changes that will be used on a single site. A site theme can be thought of as similar to a child theme in Wordpress.

+

Theme files are optional includes and can be safely removed if you do not need to add additional changes to a component your project

+
+ + +
+

Definition File

+

Each component includes a source css and javascript file which declares how a components variables should affect its display on screen.

+

Navigating definition files are a great way for developers who are comfortable with css to get an idea of how themes affect a components display

+ +

Here's an abridged version of button with an explanation of each section of the file.

+ +
+ +/******************************* + Theme +*******************************/ + +/* Define type and element to help locate theme files */ +@type : 'element'; +@element : 'button'; + +/* Processes Variable Inheritance */ +@import (multiple) '../../theme.config'; + +/* Create scope */ +& { + +/******************************* + Button +*******************************/ + +/* Define Component */ +.ui.button { + cursor: pointer; + display: inline-block; + + min-height: 1em; + + outline: none; + border: none; + vertical-align: @verticalAlign; + background: @background; + color: @textColor; + + font-family: @fontFamily; + + margin: 0em @horizontalMargin @verticalMargin 0em; + padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset); + + text-transform: @textTransform; + text-shadow: @textShadow; + font-weight: @fontWeight; + line-height: @lineHeight; + font-style: normal; + text-align: center; + text-decoration: none; + + border-radius: @borderRadius; + box-shadow: @boxShadow; + + user-select: none; + transition: @transition; + will-change: @willChange; + + -webkit-tap-highlight-color: @tapColor; +} + +/* Additional css removed for brevity */ + +/* Load CSS Overrides and Inline */ +.loadUIOverrides(); + +} + +
+
+ +
+

Theme Files

+

Themes are made up of two files a .variables file and a .overrides file. A theme can include both variables and overrides, or just either one alone.

+ +

A .variables file specifies variables which should be adjusted for a theme.

+ +

An .overrides file adds additional css rules from the baseline definition which should be included with an element. This file also has access to all inherited variables for a component.

+ +

Theme files correspond to the name of the component, for example button's site theme would be located at src/site/elements/button.variables

+

File Locations

@@ -129,55 +416,4 @@ type : 'Usage'
- -

- Examples -

-
-

A Simple Example

- -

Semantic UI includes thirteen named colors. Components with color variations inherit these global variables when defining how colors should appear.

- -

Most websites will use a different definition of how these colors should appear. Each theme includes a global file site.variables which can be used to define global variables that each component can use or extend.

- -
- @primaryColor: @pink; - @secondaryColor: @grey; - @red : #B03060; - @orange : #FE9A76; - @yellow : #FFD700; - @olive : #32CD32; - @green : #016936; - @teal : #008080; - @blue : #0E6EB8; - @violet : #EE82EE; - @purple : #B413EC; - @pink : #FF1493; - @brown : #A52A2A; - @grey : #A0A0A0; - @black : #000000; -
- - - -
All Colors
- - - - - - - - - - - - - -
-
\ No newline at end of file diff --git a/server/files/javascript/docs.js b/server/files/javascript/docs.js index d7bf226ee..0f0d19514 100644 --- a/server/files/javascript/docs.js +++ b/server/files/javascript/docs.js @@ -762,10 +762,15 @@ semantic.ready = function() { $html = $('
').insertBefore($annotation); $label = $('
').html('Example'); $label.prependTo($html); - $demo - .detach() - .prependTo($html) - ; + if($demo.length === 0) { + $html.addClass('empty'); + } + else { + $demo + .detach() + .prependTo($html) + ; + } } // create code inside annotation wrapper @@ -971,7 +976,6 @@ semantic.ready = function() { formattedCode = $.trim(code).replace(whiteSpace, '\n'); } - // color code formattedCode = window.hljs.highlightAuto(formattedCode); diff --git a/server/files/javascript/new.js b/server/files/javascript/new.js index f771da96a..1d183b39e 100644 --- a/server/files/javascript/new.js +++ b/server/files/javascript/new.js @@ -20,6 +20,28 @@ semantic.new.ready = function() { }; + // form + $('.form.example .ui.dropdown') + .dropdown() + ; + // form + $('.form.example') + .form({ + inline: true, + fields: { + firstName: { + identifier : 'shipping[first-name]', + rules: [ + { + type : 'isExactly[Suzy]', + prompt : 'Your name must be "Suzy"' + } + ] + } + } + }) + ; + // dimmer $('.blurring.example .card .dimmer') .dimmer({ diff --git a/server/files/javascript/theming.js b/server/files/javascript/theming.js index 025dcd4f4..db50bcc7c 100644 --- a/server/files/javascript/theming.js +++ b/server/files/javascript/theming.js @@ -12,6 +12,10 @@ semantic.theming.ready = function() { }; + $('.main .ui.checkbox') + .checkbox() + ; + $('.load.button') .dropdown({ fireOnInit: true, diff --git a/server/files/stylesheets/docs.css b/server/files/stylesheets/docs.css index 58f7100b7..1e6676630 100755 --- a/server/files/stylesheets/docs.css +++ b/server/files/stylesheets/docs.css @@ -685,7 +685,7 @@ blockquote .author { /* Message */ #example .example .anchor + p + .ignored.message:not(.attached), #example .example .anchor + p + .ignored.message + .ignored.message:not(.attached) { - margin: -1.1em 0 2em; + margin: 0em 0 2em; } #example .pushing.example .rail .sticky { @@ -910,6 +910,9 @@ blockquote .author { background-color: #F8F8F8; box-shadow: 0px 0px 0px 1px #DDDDDD; } +#example .example > .empty.html.segment { + padding: 1.15em 1em 1em; +} #example .example > .html.segment > .attached.label { display: block; }
installAsks install questions will automatically run if not setup.Asks install questions to setup semantic.json
watch (default)